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

> Everything you need to know about Claude MCP Apps — the January 2026 update that lets AI render dashboards, forms, and charts directly in Claude. Covers how it works, all 10 launch partners, security model, and how to build your own MCP App.

**Source:** https://mcpplaygroundonline.com/blog/claude-mcp-apps-full-guide  
**Author:** Nikhil Tiwari  
**Published:** 2026-02-22  
**Updated:** 2026-02-22  
**Category:** Guide  
**Reading time:** 12 min read

---

📖 TL;DR

-   MCP Apps launched **January 26, 2026** — the biggest expansion of the MCP ecosystem since launch
-   MCP servers can now return **interactive HTML UIs** (charts, forms, dashboards) that render inside Claude
-   10 launch partners: **Amplitude, Asana, Box, Canva, Clay, Figma, Hex, Monday.com, Slack, Salesforce**
-   Uses a **double sandboxed iframe** architecture for security

Table of Contents

1.  [What Are MCP Apps?](#what-are-mcp-apps)
2.  [How It Works](#how-it-works)
3.  [All 10 Launch Partners](#launch-partners)
4.  [Security Model](#security)
5.  [MCP Apps vs Regular MCP](#vs-regular-mcp)
6.  [Build Your Own MCP App](#build-your-own)
7.  [How to Test MCP Apps](#test-it)
8.  [FAQ](#faq)

## 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.

Real examples of what MCP Apps enable:

-   **Amplitude** — Ask Claude about your retention rates; an interactive funnel chart appears in the conversation
-   **Asana** — "Turn this meeting summary into a project" → tasks and timeline appear, ready to sync
-   **Figma** — Request a design; Figma renders a live preview directly in Claude
-   **Hex** — Ask a data question; Claude returns an interactive data notebook with live query results
-   **Slack** — Draft a message to your team; a Slack-native compose UI appears in 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

**✅ Test them:** Paste the remote endpoint URL for any of these apps into [MCP Playground](/mcp-test-server) to inspect their tools and resources before connecting to Claude.

## 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](https://modelcontextprotocol.io/docs/extensions/apps) 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](/mcp-test-server)
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

**Do MCP Apps work in Claude Desktop and Claude.ai?+**

MCP Apps currently render in **Claude.ai (web)** and **Claude Desktop**. Other MCP clients (Cursor, VS Code, Windsurf) are adding support — check each tool's release notes for updates.

**Can I build an MCP App without being a launch partner?+**

Yes. Any MCP server can return a `ui` field in its tool responses. You don't need to be an official launch partner — the MCP Apps spec is open. Anthropic review is only required if you want to be listed in Claude's official app directory.

**Is the UI data sent to Claude/Anthropic?+**

The **text content** of tool responses is sent to Claude's model. The **HTML UI** renders in a sandboxed iframe and is _not_ processed by the model — only the user sees it. Interactions with the UI that trigger tool calls send only the tool call parameters to the model.

**What's the difference between MCP Apps and Claude Artifacts?+**

Claude Artifacts are HTML/code snippets generated by the model itself. MCP Apps are served by external servers and can display **live, real-time data** from external APIs — not just static generated content. MCP Apps update dynamically; Artifacts are static.

Try MCP Apps live — test any launch partner endpoint

[Open MCP Playground →](/mcp-test-server) [All 60+ MCP Servers](/blog/awesome-mcp-servers)

## Related Guides

-   [Awesome MCP Servers — Complete List (60+ servers)](/blog/awesome-mcp-servers)
-   [How to Set Up MCP in Claude Desktop](/blog/how-to-setup-mcp-claude-desktop)
-   [MCP vs REST API — What's Different?](/blog/mcp-vs-rest-api-whats-different)
-   [What Is the Model Context Protocol (MCP)?](/blog/what-is-model-context-protocol)
-   [Claude Fable 5 + MCP Servers — Building Smarter Agents](/blog/claude-fable-5-mcp-servers)

---

_Canonical page: https://mcpplaygroundonline.com/blog/claude-mcp-apps-full-guide — MCP Playground (mcpplaygroundonline.com), the free browser-based tool for testing MCP servers and building AI agents._