mcp-apps

MCP Apps

Overview

MCP Apps is an extension to the Model Context Protocol that lets MCP servers return rich, interactive user interfaces instead of plain text. When a tool declares a UI resource, the host renders it in a sandboxed iframe, and users interact with it directly in the conversation. Supported by Claude, VS Code, Goose, and Postman.

How It Works

MCP Server                    Host (Claude, VS Code)
  │                               │
  │◄── tool call ─────────────────│
  │── tool result + ui resource ─►│
  │                               │── render iframe ──► User
  │◄── JSON-RPC messages ────────│◄── user interaction

1. A tool declares a ui field referencing a ui:// resource
2. The host calls the tool and receives the result with a UI reference
3. The host fetches the UI content and renders it in a sandboxed iframe
4. The UI communicates with the host via JSON-RPC over postMessage

Declaring UI in a Tool

{
  "name": "render_dashboard",
  "description": "Display an interactive dashboard",
  "inputSchema": {
    "type": "object",
    "properties": {
      "data": { "type": "object" }
    }
  },
  "ui": {
    "uri": "ui://dashboard",
    "title": "Dashboard"
  }
}

UI Resource

The server registers a UI resource that returns HTML:

@mcp.resource("ui://dashboard")
def dashboard() -> str:
    return """
    <!DOCTYPE html>
    <html>
    <body>
      <h1>Dashboard</h1>
      <div id="chart"></div>
      <script>
        // Communicate with the host via JSON-RPC
        window.addEventListener('message', (event) => {
          const { method, params } = event.data;
          if (method === 'initialize') {
            renderChart(params.data);
          }
        });
      </script>
    </body>
    </html>
    """

URI Scheme

MCP Apps use the ui:// URI scheme:

• ui://dashboard — predeclared UI template
• Only text/html content is supported in the initial specification
• External URLs, remote DOM, and native widgets are deferred to future versions