MCP Apps: interactive UI for tool-driven workflows

Where MCP Apps shine

MCP Apps are built for moments where a visual interface is faster than back-and-forth prompts. They keep the model in the loop while giving people direct control over complex workflows.

• Data exploration: a sales analytics tool renders an interactive dashboard where users filter by region, drill into accounts, and export reports without leaving the conversation.
• Configuration wizards: deployment tools can reveal dependent fields so production environments surface security options while staging environments keep defaults simple.
• Document review: contract analysis tools can show PDFs inline with highlighted clauses and allow approvals or flags that the model can react to immediately.
• Real-time monitoring: server health tools can stream live metrics and update as systems change without constant re-invocation of the tool.

How it works

The MCP Apps architecture relies on two key MCP primitives:

• Tools with UI metadata: tools include a _meta.ui.resourceUri field that points to a UI resource.
• UI resources: server-side resources served via the ui:// scheme that deliver bundled HTML and JavaScript.

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

Why MCP Apps?

MCP makes it easy for models to query data and take actions, but users still need visibility and control. A database query might return hundreds of rows; the model can summarize them, but people want to sort, filter, and click into details without re-prompting the tool every time.

MCP Apps close the context gap. The UI handles live updates, media viewers, persistent state, and direct manipulation, while the model sees the user’s choices and stays responsive in real time.

The App API

Developers can use the @modelcontextprotocol/ext-apps package to create UI-to-host communication that feels native inside MCP clients.

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 server-hosted UI code requires layered defenses. MCP Apps combine sandboxing and auditability to keep hosts and users in control.

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

The future of agentic UI frameworks

MCP-UI and the OpenAI Apps SDK pioneered these interaction patterns. MCP Apps now standardize the approach across clients while keeping existing SDKs viable.

If you already use MCP-UI, you can keep using it. Migration to the official extension is straightforward once you are ready.

Client support

MCP Apps are already supported across a growing set of clients:

• Claude (web and desktop).
• Goose.
• Visual Studio Code Insiders.
• ChatGPT (starting this week).