MCP Apps Now Official - Bringing UI Capabilities to MCP Clients

Today, we’re announcing that MCP Apps are now live as an official MCP extension.

Tools can now return interactive UI components that render directly in the conversation: dashboards, forms, data visualizations, multi-step workflows, and more. This is the first official MCP extension, and it’s ready for production use.

What Are MCP Apps?

MCP Apps let tools return rich, interactive interfaces instead of plain text. When a tool declares a UI resource, the host renders it in a sandboxed iframe, and users interact with it directly in the conversation.

Here are a few scenarios where MCP Apps shine:

• Data exploration: A sales analytics tool returns an interactive dashboard. Users filter by region, drill down into specific accounts, and export reports without leaving the conversation.
• Configuration wizards: A deployment tool presents a form with dependent fields. Selecting “production” reveals additional security options; selecting “staging” shows different defaults.
• Document review: A contract analysis tool displays the PDF inline with highlighted clauses. Users click to approve or flag sections, and the model sees their decisions in real time.
• Real-time monitoring: A server health tool shows live metrics that update as systems change. No need to re-run the tool to see current status.

These interactions would be less smooth as text exchanges, whereas MCP Apps make them natural—it’s like using any other UI-based web app.

How It Works

The architecture of MCP Apps relies on two key MCP primitives:

1. Tools with UI metadata: Tools include a _meta.ui.resourceUri field pointing to a UI resource
2. UI Resources: Server-side resources served via the ui:// scheme containing bundled HTML/JavaScript

// Tool with UI metadata
{
  name: "visualize_data",
  description: "Visualize data as an interactive chart",
  inputSchema: { /* ... */ },
  _meta: {
    ui: {
      resourceUri: "ui://charts/interactive"
    }
  }
}

The host fetches the resource, renders it in a sandboxed iframe, and enables bidirectional communication via JSON-RPC over postMessage.

Why MCP Apps?

MCP is great for connecting models to data and giving them the ability to take actions. But there’s still a context gap between what tools can do and what users can see.

Consider a tool that queries your database. It returns rows of data, maybe hundreds of them. The model can summarize this data, but users often want to explore: sort by a column, filter to a date range, or click into a specific record.

With text responses, every interaction requires another prompt. “Show me just the ones from last week.” “Sort by revenue.” “What’s the detail on row 47?” It works, but it’s slow.

MCP Apps closes this gap. The model stays in the loop, seeing what users do and responding accordingly, but the UI handles what text can’t: live updates, native media viewers, persistent states, and direct manipulation.

The App API

To build new MCP Apps, developers can use the @modelcontextprotocol/ext-apps package:

import { App } from "@modelcontextprotocol/ext-apps";

const app = new App();
await app.connect();

// Receive tool results from the host
app.ontoolresult = (result) => {
  renderChart(result.data);
};

// Call server tools from the UI
const response = await app.callServerTool({
  name: "fetch_details",
  arguments: { id: "123" },
});

// Update model context
await app.updateModelContext({
  content: [{ type: "text", text: "User selected option B" }],
});

Security Model

Running UI from MCP servers means running code you didn’t write within your MCP host. MCP Apps handles this through multiple layers:

• Iframe sandboxing: All UI content runs in sandboxed iframes with restricted permissions
• Pre-declared templates: Hosts can review HTML content before rendering
• Auditable messages: All UI-to-host communication goes through loggable JSON-RPC
• User consent: Hosts can require explicit approval for UI-initiated tool calls

Client Support

MCP Apps are supported in:

• Claude - available today both on web and desktop
• Goose - available today
• Visual Studio Code - available in Visual Studio Code Insiders
• ChatGPT - starting this week

Getting Started

The ext-apps repository includes the SDK and working examples:

• threejs-server for 3D visualization
• map-server for interactive maps
• pdf-server for document viewing
• system-monitor-server for real-time dashboards
• sheet-music-server for music notation
• many more

Resources

• Documentation: MCP Apps Guide
• Quickstart: Getting Started with MCP Apps
• SDK: @modelcontextprotocol/ext-apps
• Examples: ext-apps repository

Acknowledgements

MCP Apps is the result of collaboration across multiple teams and communities.

Ido Salomon and Liad Yosef created MCP-UI and moderated the #ui-wg channel, incubating many of the patterns that MCP Apps now standardizes.

Nick Cooper at OpenAI helped deliver the OpenAI Apps SDK, enabling everyone to go beyond text in their interactions with Large Language Models.

Sean Strong, Olivier Chafik, Anton Pidkuiko, and Jerome Swannack from Anthropic helped steer the initiative from proposal to production.

The UI Community Working Group provided feedback through countless discussions, reviewed drafts, tested early implementations, and pushed for the right trade-offs between flexibility and security.

Thank you to everyone who contributed. Now go build something amazing.