bonesso.io

MCP Apps: Building Interactive UIs Inside AI Conversations

Two weeks ago, MCP Apps went live as the first official extension to the Model Context Protocol. This is a game-changer for anyone building AI-powered tools: your MCP servers can now return interactive UI components that render directly in the conversation.

No more text-only responses. No more "show me row 47" back-and-forth. Users get actual interfaces - dashboards, forms, charts, workflows - right where they're chatting with the AI.

The Problem MCP Apps Solves

Imagine a database query tool. It returns hundreds of rows. The AI can summarize, but users often want to explore: sort by a column, filter to a date range, click into a specific record.

With text responses, every interaction requires another prompt:

User: Show me sales data
AI: Here are the results... [wall of text]
User: Sort by revenue
AI: Here's the same data, sorted... [more text]
User: Just last week's data
AI: Here's the filtered... [even more text]

MCP Apps closes this gap. The tool returns an interactive table. Users sort, filter, and drill down directly. The model stays in the loop, seeing what users do - but the UI handles what text can't.

How It Works

MCP tools can now include a UI metadata field pointing to a resource:

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

The host (Claude, ChatGPT, VS Code) fetches the resource, renders it in a sandboxed iframe, and enables bidirectional communication via JSON-RPC over postMessage.

Building Your First MCP App

The @modelcontextprotocol/ext-apps package provides the 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 (AI sees this)
await app.updateModelContext({
  content: [{ type: "text", text: "User selected option B" }],
});

Your app runs inside the host's iframe but can do things a plain iframe can't: log events, open links in the browser, send follow-up messages, and update the model's context for later turns.

Real-World Use Cases

Data Exploration: A sales analytics tool returns an interactive dashboard. Users filter by region, drill down into accounts, export reports - without leaving the conversation.

Configuration Wizards: A deployment tool presents a form with dependent fields. Selecting "production" reveals security options; "staging" shows different defaults.

Document Review: A contract analysis tool displays the PDF inline with highlighted clauses. Users click to approve or flag sections. The model sees their decisions in real time.

Live Monitoring: A server health tool shows live metrics that update as systems change. No need to re-run the tool.

Client Support

MCP Apps work today in:

  • Claude - web and desktop
  • ChatGPT - rolling out this week
  • VS Code - available in Insiders
  • Goose - Block's agentic coding tool

For the first time, you can ship an interactive MCP experience that works across major AI clients without writing client-specific code.

Security Model

Running UI from MCP servers means running code you didn't write. The security model addresses this through:

  • Iframe sandboxing: Restricted permissions by default
  • Pre-declared templates: Hosts can review HTML before rendering
  • Auditable messages: All UI-to-host communication is logged
  • User consent: Hosts can require approval for UI-initiated tool calls

For Mobile Developers

If you're building mobile apps and using AI coding tools, MCP Apps opens interesting possibilities:

  • Preview screens directly in your coding conversation
  • Interactive component galleries rendered in-chat
  • Live simulator views without switching windows
  • Form builders for app configuration

Combined with Xcode's MCP support (see my previous article), the tooling story for mobile devs is getting seriously good.

Getting Started

  1. Check out the MCP Apps documentation
  2. Explore the ext-apps package
  3. Look at example implementations in the MCP community repos

The protocol is stable and production-ready. If you're already building MCP servers, adding UI resources is the natural next step.

Text-based AI tools were the beginning. Interactive AI experiences are where this is heading.