MCP Apps explained for frontend engineers

A database tool that returns 400 rows of JSON forces users into a slow conversation: “filter to last week,” “sort by revenue,” “drill into row 47.” The model can answer each prompt, but exploration through text is not an interface.

MCP Apps — the official UI extension to the Model Context Protocol — lets MCP tools return interactive UI that renders inside the host client: charts, forms, PDF reviewers, live dashboards.

Key idea

MCP Apps treat UI as a tool-attached resource (ui://) rendered in a sandboxed iframe, with bidirectional JSON-RPC over postMessage. The host (Claude, ChatGPT, VS Code, Goose) owns security; the server ships the experience.

From MCP tools to MCP Apps

Base MCP standardizes how agents connect to tools, resources, and prompts (Anthropic announcement, November 2024). That solved agent↔data wiring. It did not standardize what users see when a tool returns complex results.

MCP Apps went live as an official extension in January 2026, consolidating patterns from MCP-UI and the OpenAI Apps SDK. The goal: write an interactive tool UI once, run it across MCP hosts without per-client forks.

How it works

From the MCP Apps announcement and extension docs:

1. Tool declares UI metadata

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

2. Server exposes a UI resource

Resources use the ui:// scheme — bundled HTML/JavaScript served by the MCP server.

3. Host renders in a sandboxed iframe

The client fetches the resource, mounts it with restricted permissions, and opens a JSON-RPC channel over postMessage for tool results, follow-up tool calls, and model context updates.

sequenceDiagram
  participant User
  participant Host as MCP host
  participant Tool as MCP server
  participant UI as ui:// resource
  User->>Host: invoke tool
  Host->>Tool: tool call
  Tool-->>Host: result + ui metadata
  Host->>UI: load sandboxed iframe
  UI-->>Host: postMessage JSON-RPC
  Host->>User: interactive surface

The App API

The @modelcontextprotocol/ext-apps package provides an App class for UI code running inside the iframe:

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

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

app.ontoolresult = (result) => {
  renderChart(result.data);
};

const response = await app.callServerTool({
  name: "fetch_details",
  arguments: { id: "123" },
});

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

Capabilities include logging, opening external links, sending follow-up messages, and updating model context — all over auditable postMessage, not arbitrary DOM access to the host.

Security model

Running third-party UI inside a product requires layered defenses (MCP Apps security section):

This differs from A2UI, where agents never ship executable code — only declarative component IDs from a catalog. MCP Apps trade some sandbox complexity for faster iteration with standard web UI inside hosts you do not control.

Client support (2026)

MCP Apps ship in production across:

• Claude (web and desktop)
• ChatGPT (rolling out from January 2026)
• Goose (Block’s tutorial)
• Visual Studio Code Insiders
• More clients via the implementation guide

For tool authors, this is the first time interactive MCP UI can target multiple major hosts with one ui:// bundle. For frontend engineers inside enterprises, it defines what “MCP-native UX” looks like when your product is not the host — your server is.

MCP Apps vs A2UI vs AG-UI

Google’s A2UI ecosystem analysis states the tradeoff plainly: MCP Apps fetch opaque UI into sandboxes; A2UI sends blueprints for native widgets. AG-UI can transport either pattern in apps you build yourself.

flowchart TB
  subgraph host["MCP host product"]
    H["Claude / ChatGPT / VS Code"]
    H --> I["iframe MCP App"]
  end
  subgraph own["Your own product"]
    FE["Your frontend"] <-->|"AG-UI"| AG["Agent"]
    AG -->|"A2UI JSON"| FE
  end

Example scenarios

From the announcement post:

• Data exploration — filterable sales dashboard instead of row summaries in chat.
• Configuration wizards — dependent fields (production vs staging) without multi-turn clarification.
• Document review — inline PDF with approve/flag actions reflected in model context.
• Live monitoring — metrics that update without re-invoking the tool.

Each case shares a pattern: direct manipulation beats prompt iteration for dense data and spatial tasks.

When frontend teams should care

Even if you build a custom React host today, MCP Apps matter because:

1. Distribution — customers may consume your capability inside their assistant, not your SaaS UI.
2. Contract design — tool inputs/outputs plus ui:// metadata become your public UX API.
3. Security review — iframe sandbox expectations will show up in enterprise MCP assessments.
4. Migration path — MCP-UI adopters can move toward the official extension without rewriting business logic.

If you only build first-party UI with a component catalog and Zod contracts, MCP Apps are adjacent — until your go-to-market includes “install our MCP server in Claude.”

Product implication

MCP Apps close the context gap between what tools return and what users need to decide. The model stays in the loop via updateModelContext, but the UI owns sorting, clicking, and scanning — operations LLM chat handles poorly at scale.

Choosing MCP Apps is choosing host ecosystem reach over full native design control. Many products will use both: A2UI/AG-UI in owned surfaces, MCP Apps for the same capability packaged as a portable tool.

Series close: assembling your stack

This series started with the protocol landscape. In practice:

1. Define output contracts (schemas, tools).
2. Pick stream transport (AI SDK data stream, AG-UI).
3. Choose UI payload (your components, A2UI, MCP Apps).
4. Wire agent tooling (MCP) and remote agents (A2A) as needed.

No layer is mandatory. All layers are interfaces — and interfaces are what turn a working model into a working product.

References:

• MCP Apps Announcement (Jan 2026)
• MCP Apps Documentation
• MCP Apps Quickstart
• @modelcontextprotocol/ext-apps SDK
• ext-apps examples
• MCP-UI
• OpenAI Apps SDK
• Model Context Protocol intro