MCP Apps — Interactive UIs in Conversations

When MCP Apps make sense

How it works

1. Server declares a UI resource using the ui:// URI scheme (MIME type text/html;profile=mcp-app).
2. A regular tool returns metadata pointing at that UI resource.
3. Host preloads the UI before/while the tool runs — streaming inputs into the app.
4. Host fetches the HTML and renders it in a sandboxed iframe.
5. App talks to host via postMessage using standard MCP JSON-RPC.

Tool metadata example

{
  "name": "show_color_picker",
  "description": "Open an interactive color picker.",
  "inputSchema": { "type": "object" },
  "_meta": {
    "io.modelcontextprotocol/ui": {
      "resourceUri": "ui://color-picker/index.html"
    }
  }
}

Sandbox & security model

Every MCP App runs inside a sandboxed <iframe>. It cannot:

• Access the parent document or DOM
• Read host cookies or localStorage
• Navigate the parent page
• Execute scripts in the parent context

Communication goes through postMessage. The host filters which MCP capabilities the app can use (e.g., it can disable sendOpenLink).

Building one

Anthropic ships a create-mcp-app skill for Claude Code:

cp -r ext-apps/plugins/mcp-apps/skills/create-mcp-app \
   ~/.claude/skills/create-mcp-app

# Ask Claude Code:
#   "Create an MCP App that displays a color picker"

cd app/
npm install && npm run build && npm run serve

Reference examples in ext-apps include map-server (CesiumJS), threejs-server, scenario-modeler, pdf-server, qr-server, and starter templates for React, Vue, Svelte, Preact, Solid, and vanilla JS.

Client support

MCP Apps is an optional extension — clients must negotiate it explicitly. Today it is supported in Claude, Claude Desktop, VS Code GitHub Copilot, and Goose.