MCP Apps：让MCP工具在AI对话中嵌入交互式界面的官方TypeScript SDK

MCP Apps：让 MCP 工具在 AI 对话里”长出”交互式界面

你是否曾经被这样的场景困扰：让 AI 助手查完数据后，只能吐出一大段 JSON 或纯文本，想看一眼折线图、填一张表单、调一下参数，却不得不在聊天窗口和别的应用之间来回切换？MCP Apps 的出现，正是为了彻底解决这个问题。它是一个由 Model Context Protocol 官方维护的协议扩展与 TypeScript SDK，让 MCP 服务器能够把图表、表单、仪表盘、设计画布甚至视频播放器直接”嵌”进 Claude、ChatGPT 等任何合规的聊天客户端里，在对话上下文内原地渲染。

简单来说：MCP 让工具能被调用，MCP Apps 让工具拥有界面。

截至收录：
MCP Apps stars 数：2844
MCP Apps forks 数：382

MCP Apps 项目目录截图

MCP Apps 核心亮点

• 🖼️ 界面内嵌对话，不再”跳出”上下文：工具只需声明一个 ui:// 资源，宿主就会在对话流中以沙箱 iframe 的形式渲染它。用户看到的不再是干巴巴的返回值，而是一张可直接交互的图表、表单或画布。
• 🔄 双向通信，UI 不只是”只读展示”：宿主通过通知把工具数据传给界面，界面也可以反过来通过宿主调用其他工具。这意味着一个”MCP App”可以从展示层升级为真正的操作入口——比如在图上点选一段区间，再触发下一步查询。
• 🧩 三端 SDK 分工清晰，各取所需：官方提供 ext-apps（构建 View）、ext-apps/react（React Hooks）、ext-apps/app-bridge（在聊天客户端中嵌入与通信）、ext-apps/server（在 MCP 服务器上注册带 UI 元数据的工具）四个包，App 开发、宿主开发、服务端开发三条路径互不干扰。
• 🤖 用 Agent Skills 写 App，AI 帮你干活：仓库自带四个 Agent Skills，装一次之后直接对编码助手说一句话就能开工——create-mcp-app 从零脚手架新应用，migrate-oai-app 把 OpenAI App 迁移过来，add-app-to-server 给已有 MCP 服务器加上 UI，convert-web-app 把现有 Web 应用改造成混合形态。
• 🧱 一次编写，多框架奉陪：官方 Starter Templates 覆盖 React、Vue、Svelte、Preact、Solid 和原生 JavaScript，你偏好的技术栈基本都能对上。
• 🔒 沙箱隔离，宿主安全可控：UI 运行在沙箱化 iframe 中，宿主掌握渲染与通信的主动权，既能保证安全边界，也为不同客户端的实现留出空间。

MCP Apps 快速开始

MCP Apps 基于 Node.js 20+，并依赖 MCP SDK 2.x 系列包。根据你的角色，选择对应的安装方式：

1. 为 View 或宿主安装：
   bash
npm install -S @modelcontextprotocol/ext-apps \
@modelcontextprotocol/client@^2.0.0 \
zod@^4.2.0
2. 为 MCP 服务器安装（含 HTTP 传输所需的 Node 与 Express 适配器）：
   bash
npm install -S @modelcontextprotocol/ext-apps \
@modelcontextprotocol/client@^2.0.0 \
@modelcontextprotocol/server@^2.0.0 \
@modelcontextprotocol/node@^2.0.0 \
@modelcontextprotocol/express@^2.0.0 \
zod@^4.2.0
3. 本地跑通全部示例（使用仓库自带的参考宿主 basic-host）：
   bash
git clone https://github.com/modelcontextprotocol/ext-apps.git
cd ext-apps
npm install
npm start
# 然后打开 http://localhost:8080/
4. 把示例接入你常用的 MCP 客户端（Claude Desktop、VS Code 等支持 stdio 的客户端均可）：
   json
{
"mcpServers": {
"<name>": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-<name>", "--stdio"]
}
}
}
   例如要接入地图服务，用 @modelcontextprotocol/server-map 即可；Python 示例（qr-server、say-server）改用 uv run 启动。

小提示：ext-apps 1.x 与 2.x 的线协议保持一致——2.x 的 View 能在 1.x 宿主里跑，2.x 宿主也能渲染 1.x 的 View，升级时无需同步改造两端。

MCP Apps 工作原理

理解它只需要四步：

• 工具定义：你的工具声明一个 ui:// 资源，内含它的 HTML 界面。
• 工具调用：LLM 在你的服务器上调用这个工具。
• 宿主渲染：宿主拉取该资源，并在沙箱 iframe 中展示。
• 双向通信：宿主通过通知把工具数据送进界面，界面也可以通过宿主调用其他工具。

需要说明的是，MCP Apps 是核心 MCP 规范的扩展，宿主支持程度因客户端而异，具体清单可查阅官方 clients 页面。

MCP Apps 应用场景

• 数据可视化与分析：让 AI 查完数据后直接渲染出 Cohort 热力图、客户分群图、预算分配器等交互式分析面板，用户可以在图上继续下钻，而不是读完一段文字再自己动手。
• 表单与参数收集：需要用户确认订单、填写配置、选择方案时，用原生表单替代”请按 1/2/3 回复”的文本交互，体验和精度都有质变。
• 创意与设计协作：仓库中就有用 MCP Apps 构建的 Excalidraw 案例，运行在 Claude 里，AI 生成的草图可以直接在对话中被拖拽编辑。
• 富媒体与文档处理：乐谱、PDF 预览、视频播放器、Three.js 3D 场景、ShaderToy 着色器演示，这些原本必须跳转外部页面的内容，如今都能在对话内呈现。
• 运维与监控：系统监控面板、日志转录（Transcript）等场景，把实时状态搬进聊天窗口，方便随时追问”刚才那个尖峰是怎么回事”。

用户案例：Claude、ChatGPT 等合规聊天客户端已支持该协议；Excalidraw 等知名项目基于 MCP Apps 构建了内嵌式交互体验。此外，MCP-UI 客户端 SDK 提供了功能完整的 MCP Apps 框架，被多个宿主采用——客户端既可以直接使用它，也可以自行实现。

MCP Apps 项目结构速览

• @modelcontextprotocol/ext-apps：构建交互式 View（App 类、PostMessageTransport）。
• @modelcontextprotocol/ext-apps/react：View 的 React Hooks（useApp、useHostStyles 等）。
• @modelcontextprotocol/ext-apps/app-bridge：在你的聊天客户端中嵌入并和 View 通信。
• @modelcontextprotocol/ext-apps/server：在 MCP 服务器上注册工具与资源。
• examples/：真实场景示例集，含地图、Three.js、ShaderToy、乐谱、维基浏览器、场景建模器、视频资源、PDF 服务器、二维码生成器等，并提供六大框架的 Starter Templates。
• specification/：规范文档，2026-01-26 为稳定版，draft 为开发中版本。

MCP Apps 链接

modelcontextprotocol / ext-apps项目地址：https://github.com/modelcontextprotocol/ext-apps

本文地址：https://www.tgoos.com/46348