Claude MCP Apps — Full Guide: Interactive UIs Inside AI Conversations (2026)

What Are Claude MCP Apps?

MCP Apps are the first official extension to the Model Context Protocol, launched on January 26, 2026. They allow MCP servers to return interactive HTML user interfaces — charts, forms, dashboards, and multi-step workflows — that render directly inside your Claude conversation window.

Before MCP Apps, MCP servers could only return text. Now, when you ask Claude to analyze your Amplitude data, it can show you a live interactive chart you can filter in real time — without leaving the chat.

How MCP Apps Work

MCP Apps extend the standard MCP tool call flow with a new UI rendering step. Here's the full lifecycle:

1. You send a message to Claude that triggers a tool call (e.g., "Show me our monthly signups")
2. Claude calls the MCP tool on the remote server using the standard JSON-RPC protocol
3. The server returns two things:
   • A text response for the model (Claude reads this to understand the data)
   • A pointer to an HTML interface — a URI to a UI resource declared by the server
4. Claude's client fetches the HTML from the server and renders it in a sandboxed iframe inside the conversation
5. You interact with the UI — filter charts, fill forms, click buttons — and all interactions go back to the MCP server via JSON-RPC over postMessage

// Standard MCP tool response (before MCP Apps)
{
  content: [{ type: "text", text: "Signups: 1,204 in January" }]
}

// MCP App tool response (with UI)
{
  content: [{ type: "text", text: "Here are your January signups" }],
  ui: {
    type: "resource",
    uri: "https://mcp.amplitude.com/ui/signup-chart?month=jan"
  }
}

All 10 MCP Apps Launch Partners

These 10 companies shipped on day one — January 26, 2026:

App	What It Does in Claude	Category
Amplitude	Renders interactive product analytics charts — funnels, retention curves, A/B test results	Analytics
Asana	Converts conversation into structured Asana projects with tasks and timelines	Project Mgmt
Box	Browse, preview, and annotate enterprise files directly in Claude	File Storage
Canva	Generate and edit designs without leaving the chat window	Design
Clay	Build enriched lead lists and CRM data pipelines interactively	Sales / Data
Figma	Preview designs, inspect tokens, and export code from Figma files	Design
Hex	Run data queries, adjust parameters, and view live notebook results	Data / Analytics
Monday.com	Manage boards, items, and timelines from inside Claude	Project Mgmt
Slack	Compose and send messages with a native Slack UI in Claude	Communication
Salesforce	Search CRM, update opportunities, and run reports from Claude	CRM

Security Model — Double Sandboxed Iframes

MCP Apps use a double iframe architecture to isolate third-party UI from both Claude and your browser:

1. Outer iframe (host-controlled): Claude's client initializes a sandboxed iframe with restricted permissions — no access to localStorage, no cookies, no parent window access
2. Inner iframe (server-controlled): The outer iframe launches a second iframe containing the MCP server's actual HTML UI — fully isolated from both the host and the outer layer
3. Communication only via JSON-RPC: All UI-to-host communication passes through auditable JSON-RPC messages over postMessage — no direct DOM access

Additional safeguards built into the spec:

• Pre-declared templates: Hosts can review HTML content before rendering it — no surprise injections
• User consent gates: Hosts can require explicit approval for any UI-initiated tool call
• Auditable message log: Every interaction between the UI and the model is logged as a JSON-RPC message

MCP Apps vs Regular MCP Servers

	Regular MCP Server	MCP App
Output	Text only	Text + interactive HTML UI
User interaction	Through Claude prompts	Directly in the rendered UI (buttons, forms, charts)
Real-time updates	No	Yes — UI updates without a new message
Setup	Add URL or command to config	Same — MCP Apps use the same transport
Client support	Claude, Cursor, VS Code, any MCP client	Claude (web/desktop) — other clients adding support
Security	Server-level auth (OAuth, API key)	Server auth + double sandboxed iframe

Build Your Own MCP App

Building an MCP App starts exactly like building a regular MCP server, with one addition: your tools return a ui field pointing to an HTML resource.

// Step 1 — Declare a UI resource on your MCP server
server.resource("chart-ui", "https://yourapp.com/ui/chart", async (uri) => ({
  contents: [{
    uri: uri.href,
    mimeType: "text/html",
    text: await fetch("https://yourapp.com/ui/chart").then(r => r.text())
  }]
}));

// Step 2 — Return the UI pointer from your tool
server.tool("show_signups_chart", async ({ month }) => ({
  content: [{
    type: "text",
    text: `Signups for ${month}: 1,204`
  }],
  ui: {
    type: "resource",
    uri: `https://yourapp.com/ui/chart?month=${month}`
  }
}));

Your HTML UI communicates back to the MCP server using the MCP Apps messaging API over postMessage. See the official MCP Apps spec for the full API reference.

How to Test MCP Apps

The easiest way to inspect MCP Apps is with MCP Playground — connect to any of the launch partner endpoints and explore their tools and UI resources live in the browser:

1. Go to MCP Playground
2. Paste the remote endpoint URL (e.g., https://mcp.amplitude.com/mcp)
3. Click Connect — you'll see all available tools and resources
4. Call a tool to see both the text response and the UI pointer

Frequently Asked Questions

Related Guides

• Awesome MCP Servers — Complete List (60+ servers)
• How to Set Up MCP in Claude Desktop
• MCP vs REST API — What's Different?
• What Is the Model Context Protocol (MCP)?