MCP Apps

MCP Apps are interactive HTML UIs that render directly inside the MCP host — Claude Desktop, VS Code Copilot, or any other supporting client. Instead of returning plain text, a tool can return a ui:// resource containing an HTML page that the host sandboxes and displays in the conversation.

How it works with mcp-anything

mcp-anything implements the MCP Apps extension so that OpenAPI-generated tools can declare a UI resource. When the host calls the tool, it receives both the structured data and a pointer to an interactive interface:

  1. The tool description includes _meta.ui.resourceUri pointing to a ui:// resource registered on the proxy.
  2. The host fetches the ui:// resource — an HTML page bundled with its CSS and JavaScript.
  3. The host renders the HTML in a sandboxed iframe inside the conversation.
  4. The app communicates back to the MCP server (and through it to upstream APIs) via postMessage JSON-RPC.

Configuration

Attach a UI resource to any OpenAPI operation via an overlay:

# overlay.yaml
- target: "$.paths[\"/analytics/revenue\"].get"
  update:
    x-mcp-app:
      resource: ui://revenue-dashboard    # ui:// resource name
      source: apps/revenue/index.html     # bundled HTML file to serve

The proxy registers the HTML file as a ui://revenue-dashboard resource. The tool description is updated automatically to include the _meta.ui.resourceUri field the host expects.

Passing tool results to the app

The upstream API response is injected into the app as the initial tool result. Your HTML receives it via the standard MCP Apps ui/initialize message:

// Inside your bundled app JavaScript
import { App } from "@modelcontextprotocol/ext-apps";

const app = new App();
app.onToolResult((result) => {
  renderChart(result.content[0].text); // JSON from the upstream API
});

Calling tools from the app

The app can call any MCP tool on the proxy through the host's postMessage channel — including other OpenAPI tools, shell commands, or scripts:

const fresh = await app.callTool("api__get_revenue", {
  start_date: "2026-01-01",
  end_date: "2026-03-31",
  granularity: "monthly",
});
renderChart(JSON.parse(fresh.content[0].text));

Content Security Policy

Declare external origins the app needs in the overlay:

x-mcp-app:
  resource: ui://revenue-dashboard
  source: apps/revenue/index.html
  csp:
    script-src:
      - https://cdn.jsdelivr.net
    connect-src:
      - https://fonts.googleapis.com

Supported clients

MCP Apps is an official MCP extension. Hosts that support it include Claude Desktop, Claude (web), VS Code GitHub Copilot, Goose, Postman, and MCPJam. Hosts that do not support the extension ignore the _meta.ui field and display the tool result as plain text — the tool remains fully functional.

Use cases

  • Data dashboards — charts and tables that update when the user drills down
  • Configuration forms — multi-field forms with validation sent back to the upstream API
  • Rich media viewers — PDF, 3D model, image, or video viewers embedded in the conversation
  • Real-time monitors — live metric dashboards that poll tools for fresh data
  • Multi-step workflows — approval queues, code review interfaces, issue triagers

See also