MCP Apps

Interactive UI applications that render inside MCP hosts (charts, forms, viewers) — not just text tool results.

Adapted from MCP Apps. Full API: apps.extensions.modelcontextprotocol.io. Build guide: Build an MCP App.

Hosts can render rich, interactive results inline. Source: modelcontextprotocol/docs.

Executive summary

MCP Apps let tools declare a ui:// resource that hosts preload and render in a sandboxed iframe, with bidirectional JSON-RPC over postMessage. Prefer Apps when context preservation, host-routed actions and sandboxing beat a standalone web app.

Why not a normal web app?

Advantage	Meaning
Context preservation	UI lives in the conversation
Bidirectional data	App ↔ host ↔ MCP tools without a separate API stack
Host capabilities	Delegate actions through the user’s existing connectors (with consent)
Security	Sandboxed iframe; host-enforced CSP and permissions

How it works

1. Tool description includes _meta.ui.resourceUri pointing at a ui:// resource.
2. Host may preload the UI (including streaming inputs).
3. Host fetches HTML/JS/CSS (and allowed external origins via CSP metadata).
4. UI renders in a sandboxed iframe.
5. App and host talk MCP-like JSON-RPC (ui/initialize, tools/call, …) over postMessage.

Good fit

• Exploring complex data (maps, heatmaps)
• Multi-option configuration forms
• Rich media viewers (PDF, 3D, video)
• Real-time dashboards
• Multi-step approval workflows

Security model

Sandbox blocks parent DOM, cookies, navigation and parent script execution. Hosts decide which tools and capabilities the app may use.

Client support

Support varies — Claude, Claude Desktop, VS Code Copilot, Microsoft 365 Copilot, Goose, Postman, MCPJam, Archestra.AI and others. Check the client matrix.

Examples and starters (React, Vue, Svelte, …): ext-apps examples.

Negative cases

• Building Apps when a link to an existing portal is enough → unnecessary complexity.
• Requesting camera/mic without need → reduce permissions.
• Assuming all hosts render Apps → always provide meaningful text fallbacks.

Key takeaways

• Apps = tool + ui:// resource + sandboxed iframe.
• Always provide text/structured fallbacks for non-Apps hosts.
• Follow host CSP and permission metadata carefully.

What to do next

Follow the official build guide and review Extensions overview.