Skip to content

Explore MCP Apps UI implementations for VSCode and Claude #741

@dcramer

Description

@dcramer

Summary

Anthropic announced MCP Apps (January 26, 2026), extending MCP to support interactive UI elements within chat windows. We should explore implementing MCP Apps for Sentry MCP to provide richer tool interactions.

Background

MCP Apps allows MCP servers to deliver interactive UI elements (charts, forms, dashboards) that hosts render in-conversation rather than returning data alone. This is now supported in:

  • Claude (web and desktop)
  • VS Code Insiders (built-in MCP Apps support)
  • Goose
  • ChatGPT (rolling out)

Technical Overview

How MCP Apps Works

  1. Tools declare UI metadata: Tools include a _meta.ui.resourceUri field pointing to a UI resource
  2. UI Resources: Server-side resources served via ui:// scheme containing bundled HTML/JavaScript
  3. Sandboxed rendering: Host fetches the UI resource and renders it in a sandboxed iframe
  4. Bidirectional communication: JSON-RPC over postMessage for UI-host communication

Tool Declaration Example

{
  name: "visualize_data",
  description: "Visualize data as an interactive chart",
  inputSchema: { /* ... */ },
  _meta: {
    ui: {
      resourceUri: "ui://charts/interactive"
    }
  }
}

App API

The @modelcontextprotocol/ext-apps package provides an App class supporting:

  • Receiving tool results from the host
  • Calling server tools from the UI
  • Updating model context with user interactions

Security Model

  • Iframe sandboxing with restricted permissions
  • Pre-declared templates (hosts can review HTML before rendering)
  • Auditable JSON-RPC messages
  • User consent requirements for UI-initiated tool calls

Potential Use Cases for Sentry MCP

  • Issue visualization: Interactive charts showing error trends, frequency, affected users
  • Stack trace explorer: Collapsible/expandable stack frames with syntax highlighting
  • Event timeline: Visual timeline of events leading to an error
  • Performance spans: Waterfall visualization for trace spans
  • Triage forms: Interactive forms for assigning issues, updating status
  • Dashboard widgets: Mini-dashboards showing project health at a glance

VS Code Specific Notes

VS Code Insiders (v1.109) added:

  • Built-in MCP Apps support with custom UI for tool invocation
  • Dynamic context updates via model context update methods
  • registryBaseUrl setting for custom MCP package registries
  • workbench.mcp.startserver command for server discovery

Resources

Tasks

  • Review MCP Apps specification in detail
  • Evaluate @modelcontextprotocol/ext-apps package
  • Identify highest-value Sentry tools for UI enhancement
  • Prototype a simple MCP App (e.g., issue details viewer)
  • Test across Claude, VS Code, and other supported clients

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions