Skip to main content

MCP Apps: Bringing UI Capabilities To MCP Clients

· 5 min read
Tony Lewis
MCPBundles
Ask AI:
PerplexityClaudeChatGPTGoogleGrok

Today, MCP Apps are live as the first official MCP extension. Tools can now return interactive UI components that render directly in the conversation: dashboards, forms, visualizations, multi-step workflows, and more. It is ready for production.

Cartoon illustration of MCP Apps running inside a chat UI

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: interactive dashboards with filters, drilldowns, and exports.
  • Configuration wizards: forms with dependent fields and environment-specific defaults.
  • Document review: PDFs inline with highlights and approval actions.
  • Real-time monitoring: live metrics without re-running tools.

These interactions are possible with text, but MCP Apps make them natural and fast.

How It Works​

MCP Apps uses two MCP primitives:

  1. Tools with UI metadata that point to a UI resource
  2. UI resources served via the ui:// scheme containing bundled HTML/JavaScript
{
  "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 at connecting models to data and actions, but there is a context gap between what tools can do and what users can see. Text responses are slow when users want to explore data, filter, sort, or dive into details. MCP Apps closes that gap by letting the UI handle the interaction while the model stays in the loop.

The App API​

The @modelcontextprotocol/ext-apps package provides an App class for UI-to-host communication:

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" }]
});

Because apps run inside the client, they can log events, open links in the browser, and update model context without extra prompts.

Security Model​

Running UI from MCP servers means running code you did not write inside the host. MCP Apps addresses this with multiple layers:

  • Iframe sandboxing with restricted permissions
  • Pre-declared templates so hosts can review content before rendering
  • Auditable JSON-RPC messages for every UI-to-host action
  • User consent options for UI-initiated tool calls

If something looks suspicious, hosts can block it before it renders.

Client Support​

MCP Apps are supported in:

  • Claude: available today on web and desktop
  • Goose: available today
  • Visual Studio Code: available in Insiders
  • ChatGPT: rolling out this week

This is the first time an MCP tool developer can ship an interactive experience across multiple clients without client-specific code.

What People Are Saying​

"I am excited about the possibilities that MCP Apps opens up. Having seen a glimpse of what is possible, I cannot wait to see what the community will build."

David Soria Parra, Co-Creator of MCP and Member of Technical Staff, Anthropic

"MCP Apps builds upon the foundations of MCP-UI and the ChatGPT Apps SDK to give people a rich visually interactive experience. We are proud to support this new open standard and look forward to seeing what developers build with it as we grow the selection of apps available in ChatGPT."

Nick Cooper, Member of Technical Staff, OpenAI

"As MCP evolves from tools into a real platform for agentic work, the contract now includes the missing human step: when the workflow needs a decision, selection, or exploration, the client can give you the right interaction without turning the conversation into a choose-your-own-adventure prompt."

Harald Kirschner, Principal Product Manager, Visual Studio Code, Microsoft

The Future of Agentic UI Frameworks​

MCP Apps builds on the work of MCP-UI and the OpenAI Apps SDK. If you are already using MCP-UI, keep using it. Migration to the official extension is straightforward when you are ready.

Get Started​

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

  • 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

Pick one close to what you are building and start from there.

Resources​

Acknowledgements​

MCP Apps is the result of collaboration across multiple teams and communities. Thanks to the MCP-UI working group, the OpenAI Apps SDK team, and the MCP community for shaping the standard and pushing it to production.