What Are MCP Apps
MCP Apps extend the Model Context Protocol so that tool responses can include interactive HTML interfaces, not just text. When a tool declares a UI resource, the host fetches it, renders it in a sandboxed iframe, and the user interacts with it directly in the conversation.
Before MCP Apps, a sales analytics MCP server could return raw numbers. Now it returns an interactive dashboard where users filter by region, drill into accounts, and export reports without leaving the chat. A deployment tool can present a configuration form where selecting "production" reveals additional security fields while selecting "staging" shows different defaults.
Key Distinction
MCP Apps is an extension, not a replacement. The extension identifier is io.modelcontextprotocol/ui. Existing MCP servers continue working unchanged. Hosts adopt UI support at their own pace. The spec adds a UI layer on top of the existing tool/resource/prompt primitives.
The SEP-1865 Spec
SEP-1865 was co-authored by MCP core maintainers at Anthropic and OpenAI, together with the MCP-UI creators and the lead maintainers of the MCP UI Community Working Group. It builds on two existing implementations: MCP-UI (community project with TypeScript, Ruby, and Python SDKs) and the OpenAI Apps SDK (OpenAI's internal UI protocol).
The spec introduces three primitives:
UI Resources
Server-side resources served via the ui:// URI scheme. Each resource contains bundled HTML/JavaScript that the host renders in a sandboxed iframe.
Tool-UI Linkage
Tools reference UI resources through a _meta.ui.resourceUri field. When a tool declares this field, the host knows to fetch and render the linked UI after execution.
Bidirectional Communication
The UI and host communicate via JSON-RPC over postMessage. The UI can read tool results and trigger new tool calls, all through auditable message channels.
MCP App Server Configuration
{
"mcpServers": {
"analytics-dashboard": {
"command": "npx",
"args": ["-y", "@example/analytics-mcp-server"],
"env": {
"API_KEY": "your-api-key"
}
}
}
}The specification version 2026-01-26 is marked as Stable. The official repository at modelcontextprotocol/ext-apps includes the spec, SDK, quickstart guides, and working example servers.
How MCP Apps Work
The flow has four steps. The server registers a tool with UI metadata. The host calls the tool. The server returns a result with a _meta.ui.resourceUri pointing to a ui:// resource. The host fetches that resource and renders the HTML content in a sandboxed iframe.
Tool With UI Metadata
// Server-side: register a tool with UI resource
server.tool(
"show-dashboard",
"Display an interactive analytics dashboard",
{ timeRange: z.enum(["7d", "30d", "90d"]) },
async ({ timeRange }) => {
const data = await fetchAnalytics(timeRange);
return {
content: [{ type: "text", text: JSON.stringify(data) }],
_meta: {
ui: {
resourceUri: "ui://analytics/dashboard"
}
}
};
}
);
// Register the UI resource
server.resource(
"analytics-dashboard",
"ui://analytics/dashboard",
async () => ({
contents: [{
uri: "ui://analytics/dashboard",
mimeType: "text/html",
text: dashboardHtml // bundled HTML/JS
}]
})
);Once rendered, the iframe communicates with the host through a structured postMessage API. The UI can request tool results, invoke new tools (with user consent), and update its own state. All messages are JSON-RPC, which makes them loggable and auditable.
Framework Support
The ext-apps repository includes starter templates for React, Vue, Svelte, Preact, Solid, and vanilla JavaScript. The SDK serves three roles: app developers building interactive views, host developers embedding those views, and MCP server authors registering tools with UI metadata.
Security Model
MCP Apps run inside sandboxed iframes controlled by the host. The sandbox prevents the app from accessing the parent window's DOM, reading the host's cookies or local storage, navigating the parent page, or executing scripts in the parent context.
Iframe Sandboxing
All UI content runs in sandboxed iframes with restricted permissions. The app cannot escape its container or interact with the parent page.
Pre-declared Templates
Hosts can review HTML content before rendering. The UI resource is fetched and inspected before the iframe is created.
Auditable Messages
All UI-to-host communication goes through loggable JSON-RPC over postMessage. Every interaction leaves a trace.
User Consent
Hosts can require explicit approval before executing UI-initiated tool calls. The user stays in control of side effects.
This layered approach means MCP Apps cannot steal credentials, exfiltrate data, or modify the host application. The worst an MCP App can do is render misleading content within its own iframe, which the user can dismiss.
Building an MCP App
Start with the @modelcontextprotocol/apps-sdk package. The quickstart creates a working MCP server with a UI resource in under 50 lines.
Minimal MCP App (TypeScript)
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { z } from "zod";
const server = new McpServer({
name: "weather-app",
version: "1.0.0",
});
// Register a UI resource
server.resource(
"weather-view",
"ui://weather/current",
async () => ({
contents: [{
uri: "ui://weather/current",
mimeType: "text/html",
text: `
<html>
<body>
<div id="weather">Loading...</div>
<script>
// Receive tool result data from host
window.addEventListener("message", (e) => {
const data = JSON.parse(e.data);
document.getElementById("weather")
.innerHTML = formatWeather(data);
});
</script>
</body>
</html>
`
}]
})
);
// Register a tool that links to the UI
server.tool(
"get-weather",
"Show current weather with interactive map",
{ city: z.string() },
async ({ city }) => {
const weather = await fetchWeather(city);
return {
content: [{ type: "text", text: JSON.stringify(weather) }],
_meta: { ui: { resourceUri: "ui://weather/current" } }
};
}
);The ext-apps repository includes production-ready example servers: threejs-server for 3D visualization, map-server for interactive maps, pdf-server for document viewing, system-monitor-server for real-time dashboards, and sheet-music-server for music notation rendering.
Development Workflow
Use npx @anthropic-ai/create-mcp to scaffold a new MCP server, then add UI resources. Test locally with Claude Desktop or the MCPJam Inspector. The Apps SDK includes a development playground at digitarald/mcp-apps-playground for iterating on UI components.
Client Support
Six clients shipped MCP Apps support within the first month of the stable spec:
Claude / Claude Desktop
First-party support from Anthropic. MCP Apps render inline in conversations. Full bidirectional communication.
ChatGPT
OpenAI shipped MCP Apps support, building on their prior Apps SDK work. Tools with UI metadata render interactive views.
VS Code (Insiders)
Microsoft added MCP Apps to VS Code Copilot Chat. UI renders in the chat panel alongside code suggestions.
Goose (Block)
Block's open-source agent was an early adopter. MCP Apps render in the Goose desktop client.
Postman
API development platform added MCP Apps support for interactive API testing and documentation views.
MCPJam Inspector
Community-built inspector and development tool. Useful for testing MCP Apps during development.
CopilotKit and AG-UI also added bridge support, letting developers embed MCP Apps in custom applications through their frameworks.
Use Cases
The common thread: situations where raw text output from a tool is insufficient and the user needs to interact with the result.
Data Exploration
Sales analytics dashboards with region filters, account drill-downs, and CSV export. The user explores data inside the conversation instead of switching to a BI tool.
Configuration Wizards
Deployment tools with dependent form fields. Selecting 'production' reveals security options. Selecting 'staging' shows different defaults. Multi-step flows with validation.
Real-time Monitoring
System health dashboards that update live. CPU, memory, request latency, and error rates rendered as charts that refresh without re-running the tool.
Document and Media Viewers
PDF rendering, sheet music notation, 3D model visualization. Content that fundamentally cannot be represented as text.
Interactive Maps
Location-based data on draggable, zoomable maps. Store locations, delivery routes, geographic analytics rendered spatially.
Approval Workflows
Review and approve actions with rich context. PR diffs, expense reports, access requests presented as interactive forms rather than walls of text.
MCP Ecosystem Connection
MCP Apps is the UI layer of a broader ecosystem. The core MCP protocol handles tool execution, resource access, and prompt management. MCP Apps adds visual interaction on top. Existing MCP servers gain UI capabilities by adding ui:// resources and tool metadata, nothing else changes.
For developers already building MCP servers for tools like Playwright MCP for browser automation, the path to adding interactive UI is incremental. A Playwright test runner MCP server could add a UI resource that shows test results as a visual report instead of console output.
Backwards Compatibility
MCP Apps does not require any changes to existing servers or clients. It is an optional extension. Servers that do not declare UI resources continue working exactly as before. Clients that do not support the extension ignore the _meta.ui field and fall back to rendering the text content. Adoption is incremental on both sides.
Frequently Asked Questions
What are MCP Apps?
An extension to the Model Context Protocol (SEP-1865) that lets MCP servers return interactive HTML user interfaces. These UIs render in sandboxed iframes inside AI chat clients. Instead of plain text tool responses, servers can deliver dashboards, forms, charts, and multi-step workflows.
Who created the MCP Apps specification?
Core MCP maintainers at Anthropic and OpenAI co-authored it with the MCP-UI community working group. It builds on prior work from MCP-UI (community) and the OpenAI Apps SDK. It shipped as the first official MCP extension on January 26, 2026.
Which clients support MCP Apps?
Claude, Claude Desktop, ChatGPT, VS Code (Insiders), Goose, Postman, and MCPJam. CopilotKit and AG-UI provide bridge support for custom apps. Launch partners include Figma, Canva, Slack, Salesforce, Amplitude, Asana, Box, Clay, Hex, and monday.com.
How do MCP Apps handle security?
Four layers: mandatory iframe sandboxing (no DOM/cookie/storage access to parent), pre-declared templates (hosts review HTML before rendering), auditable JSON-RPC messages (every interaction is logged), and user consent gates (explicit approval for UI-initiated tool calls).
Do MCP Apps break existing MCP servers?
No. MCP Apps is an optional extension identified as io.modelcontextprotocol/ui. Existing servers work unchanged. Clients that do not support the extension ignore the UI metadata and render the text content as usual.
What frameworks can I use to build MCP App UIs?
The ext-apps repository includes starter templates for React, Vue, Svelte, Preact, Solid, and vanilla JavaScript. The MCP-UI project provides SDKs for TypeScript, Ruby, and Python.
Build MCP-Connected AI Workflows
Morph provides the fast apply infrastructure that powers AI coding agents. Connect your MCP servers, test MCP Apps, and ship agent-driven workflows.