MCP Apps

Build interactive UIs for MCP tools — charts, forms, dashboards — that render inline in Claude, ChatGPT and any other compliant chat client. Why · Quickstart · API Docs · Spec · Contributing

Excalidraw built with MCP Apps, running in Claude

Table of Contents

• Build with Agent Skills
• Supported Clients
• Why MCP Apps?
• How It Works
• Getting Started
• Using the SDK
• Examples
• Specification
• Resources
• Contributing

Build with Agent Skills

The fastest way to build an MCP App is to let your AI coding agent do it. This
repo ships four Agent Skills — install them once,
then just ask:

Install the Skills

Claude Code — install via the plugin marketplace:

/plugin marketplace add modelcontextprotocol/ext-apps
/plugin install mcp-apps@modelcontextprotocol-ext-apps

Other agents — any AI coding agent that supports
Agent Skills can use these skills. See the
agent skills guide for manual installation
instructions.

Once installed, verify by asking your agent "What skills do you have?" — you
should see create-mcp-app, migrate-oai-app, add-app-to-server, and
convert-web-app in the list. Then just ask it to create or migrate an app and
it will guide you through the rest.

Supported Clients

[!NOTE]
MCP Apps is an extension to the
core MCP specification. Host
support varies — see the
clients page for the full list.

Why MCP Apps?

MCP tools return text and structured data. That works for many cases, but not
when you need an interactive UI, like a chart, form, design canvas or video player.

MCP Apps provide a standardized way to deliver interactive UIs from MCP servers.
Your UI renders inline in the conversation, in context, in any compliant host.

How It Works

MCP Apps extend the Model Context Protocol by letting tools declare UI
resources:

1. Tool definition — Your tool declares a ui:// resource containing its
   HTML interface
2. Tool call — The LLM calls the tool on your server
3. Host renders — The host fetches the resource and displays it in a
   sandboxed iframe
4. Bidirectional communication — The host passes tool data to the UI via
   notifications, and the UI can call other tools through the host

Getting Started

npm install -S @modelcontextprotocol/ext-apps

New here? Start with the
Quickstart Guide
to build your first MCP App.

Using the SDK

The SDK serves three roles: app developers building interactive Views, host
developers embedding those Views, and MCP server authors registering tools with
UI metadata.

There's no supported host implementation in this repo (beyond the
examples/basic-host
example).

The MCP-UI client SDK offers a
fully-featured MCP Apps framework used by a few hosts. Clients may choose to use
it or roll their own implementation.

Examples

The
examples/
directory contains demo apps showcasing real-world use cases.

Map	Three.js	ShaderToy
Sheet Music	Wiki Explorer	Cohort Heatmap
Scenario Modeler	Budget Allocator	Customer Segmentation
System Monitor	Transcript	Video Resource
PDF Server	QR Code (Python)	Say Demo

Starter Templates

	The same app built with different frameworks — pick your favorite!<br><br>React · Vue · Svelte · Preact · Solid · Vanilla JS

Running the Examples

With basic-host

To run all examples locally using
basic-host
(the reference host implementation included in this repo):

git clone https://github.com/modelcontextprotocol/ext-apps.git
cd ext-apps
npm install
npm start

Then open http://localhost:8080/.

With MCP Clients

Every Node.js example is published as @modelcontextprotocol/server-<name>. To
add one to an MCP client that supports stdio (Claude Desktop, VS Code, etc.),
use this pattern:

{
  "mcpServers": {
    "<name>": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-<name>", "--stdio"]
    }
  }
}

For example, to add the map server: @modelcontextprotocol/server-map. The
Python examples (qr-server, say-server) use uv run instead — see their
READMEs for details.

Local Development

To test local modifications with an MCP client, clone the repo, install, then
point your client at a local build:

{
  "mcpServers": {
    "<name>": {
      "command": "bash",
      "args": [
        "-c",
        "cd ~/code/ext-apps/examples/<name>-server && npm run build >&2 && node dist/index.js --stdio"
      ]
    }
  }
}

Specification

Resources

• Quickstart Guide
• API Documentation
• Specification (2026-01-26)
  (Draft)
• SEP-1865 Discussion

Contributing

Contributions are welcome! Please read CONTRIBUTING.md for
guidelines on how to get started, submit pull requests, and report issues.