内容摘录
<!-- LOGO -->
<div align="center">
<img src="media/mcp.svg#gh-light-mode-only" alt="MCP Apps" width="128">
<img src="media/mcp-white.svg#gh-dark-mode-only" alt="MCP Apps" width="128">
<h1>MCP Apps</h1>
<p>
Build interactive UIs for MCP tools — charts, forms, dashboards — that render inline in Claude, ChatGPT and any other compliant chat client.
<br /><br />
<a href="#why-mcp-apps">Why</a>
·
<a href="https://modelcontextprotocol.github.io/ext-apps/api/documents/Quickstart.html">Quickstart</a>
·
<a href="https://modelcontextprotocol.github.io/ext-apps/api/">API Docs</a>
·
<a href="https://github.com/modelcontextprotocol/ext-apps/blob/main/specification/2026-01-26/apps.mdx">Spec</a>
·
<a href="CONTRIBUTING.md">Contributing</a>
</p>
</div>
<p align="center">
<a href="https://github.com/modelcontextprotocol/ext-apps/actions/workflows/ci.yml"><img src="https://github.com/modelcontextprotocol/ext-apps/actions/workflows/ci.yml/badge.svg" alt="CI"></a>
<a href="LICENSE"><img src="https://img.shields.io/badge/license-Apache%202.0-blue" alt="License: Apache 2.0"></a>
<a href="https://www.npmjs.com/package/@modelcontextprotocol/ext-apps"><img src="https://img.shields.io/npm/v/@modelcontextprotocol/ext-apps.svg" alt="npm version"></a>
<a href="https://www.npmjs.com/package/@modelcontextprotocol/ext-apps"><img src="https://img.shields.io/npm/dm/@modelcontextprotocol/ext-apps.svg" alt="npm downloads"></a>
<a href="https://github.com/modelcontextprotocol/ext-apps"><img src="https://img.shields.io/github/stars/modelcontextprotocol/ext-apps" alt="GitHub stars"></a>
<a href="https://modelcontextprotocol.github.io/ext-apps/api/"><img src="https://img.shields.io/badge/docs-API%20Reference-blue" alt="API Documentation"></a>
</p>
<p align="center">
<img src="media/excalidraw.gif" alt="MCP Apps demo" width="600">
<br><em>Excalidraw built with MCP Apps, running in Claude</em>
</p>
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:
| Skill | What it does | Try it |
| --------------------------------------------------------------------------- | ----------------------------------------------------------- | ------------------------------------- |
| create-mcp-app | Scaffolds a new MCP App with an interactive UI from scratch | _"Create an MCP App"_ |
| migrate-oai-app | Converts an existing OpenAI App to use MCP Apps | _"Migrate from OpenAI Apps SDK"_ |
| add-app-to-server | Adds interactive UI to an existing MCP server's tools | _"Add UI to my MCP server"_ |
| convert-web-app | Turns an existing web app into a hybrid web + MCP App | _"Add MCP App support to my web app"_ |
Install the Skills
**Claude Code** — install via the plugin marketplace:
**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
<p align="center">
<a href="https://developers.openai.com/apps-sdk/mcp-apps-in-chatgpt/"><img src="https://img.shields.io/badge/ChatGPT-docs-74aa9c?logo=openai&logoColor=white" alt="ChatGPT"></a>
<a href="https://claude.com/docs/connectors/building/mcp-apps/getting-started"><img src="https://img.shields.io/badge/Claude-docs-d97706?logo=claude&logoColor=white" alt="Claude"></a>
<a href="https://code.visualstudio.com/blogs/2026/01/26/mcp-apps-support"><img src="https://img.shields.io/badge/VS_Code-docs-007ACC?logo=visualstudiocode&logoColor=white" alt="VS Code"></a>
<a href="https://block.github.io/goose/docs/tutorials/building-mcp-apps/"><img src="https://img.shields.io/badge/Goose-docs-000000?logo=goose&logoColor=white" alt="Goose"></a>
<a href="https://learning.postman.com/docs/postman-ai/mcp-requests/interact"><img src="https://img.shields.io/badge/Postman-docs-FF6C37?logo=postman&logoColor=white" alt="Postman"></a>
<a href="https://www.mcpjam.com/blog/mcp-apps-example"><img src="https://img.shields.io/badge/MCPJam-docs-8B5CF6" alt="MCPJam"></a>
</p>
[!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:
**Tool definition** — Your tool declares a ui:// resource containing its
HTML interface
**Tool call** — The LLM calls the tool on your server
**Host renders** — The host fetches the resource and displays it in a
sandboxed iframe
**Bidirectional communication** — The host passes tool data to the UI via
notifications, and the UI can call other tools through the host
Getting Started
**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.
| Package | Purpose | Docs |
| ------------------------------------------- | --------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
| @modelcontextprotocol/ext-apps | Build interactive Vie…