
ext-apps
让 MCP 服务器给 AI 聊天机器人塞进可交互界面
ext-apps 是 MCP Apps 协议的官方规范与 SDK 仓库,定义了一套让 AI 聊天机器人内嵌交互式 UI 的标准。传统 MCP 服务器只能返回文本或结构化数据,用户无法在对话中直接操作界面;MCP Apps 协议让服务器以标准方式声明并托管 UI 资源,客户端(如聊天应用)按规范渲染这些界面,实现按钮、表单、图表等富交互。项目提供 TypeScript SDK,包含协议 schema、类型定义、服务端与客户端实现示例,帮助开发者在 MCP 生态中快速构建可嵌入的 AI 应用界面。它解决的是 AI 对话与外部工具之间缺乏统一 UI 层的问题,让 MCP 服务器不仅能提供数据和能力,还能提供配套的可视化交互入口,推动 AI 助手从纯文本问答走向可操作的应用平台。
项目数据
使用教程
环境要求
- Node.js 20 及以上版本
- 使用 npm 安装依赖(README 仅给出 npm 命令)
- MCP 基础 SDK 包为 ext-apps 的 ^2.0.0 peer 依赖
- 如需使用 Claude Code 技能,需已安装 Claude Code 插件市场环境
安装与启动步骤
-
1确认 Node 版本
README 明确要求 Node.js 20+,先检查本机版本,低于 20 需先升级 Node。
node -v -
2安装 View/宿主依赖
构建可内嵌 UI(View)或聊天宿主时安装 ext-apps、client 与 zod 三项依赖。
npm install -S @modelcontextprotocol/ext-apps @modelcontextprotocol/client@^2.0.0 zod@^4.2.0 -
3安装 MCP 服务端依赖
服务端需额外安装 server;使用 HTTP 传输时再加 node 与 express 适配器。
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 -
4安装 Claude Code 技能
在 Claude Code 中通过插件市场命令安装 mcp-apps 技能包,获得建应用与迁移能力。
/plugin marketplace add modelcontextprotocol/ext-apps /plugin install mcp-apps@modelcontextprotocol-ext-apps -
5验证技能已安装
向 AI 代理询问它有哪些技能,列表中应出现 README 给出的四个技能名。
-
6按 Quickstart 建首个应用
README 建议新手从官方 Quickstart 指南开始,逐步构建第一个 MCP App。
如何确认成功
在代理中提问“What skills do you have?”,列表出现 create-mcp-app、migrate-oai-app、add-app-to-server、convert-web-app 即安装成功。
常见问题
Q:ext-apps 1.x 升级到 2.x 后协议不兼容吗?
A:不需要担心,线协议在 1.x 与 2.x 之间未变:2.x 的 View 可在 1.x 宿主运行,2.x 宿主也能渲染 1.x View。升级时参考官方 migrate-to-v2 迁移指南。
Q:运行时报缺少 @modelcontextprotocol/core 怎么办?
A:它是必需的 peer 依赖,但 @modelcontextprotocol/client 已经依赖它,npm 会自动为你装上,通常无需单独安装。
Q:不用 Claude Code,其他 AI 代理能用这些技能吗?
A:可以。任何支持 Agent Skills 的编码代理都能使用,具体手工安装方式见仓库 docs/agent-skills.md 的代理技能指南。
Q:只开发服务端需要装哪些包?
A:在 ext-apps 与 client 基础上加装 @modelcontextprotocol/server;若走 HTTP 传输还要装 @modelcontextprotocol/node 和 @modelcontextprotocol/express 适配器。
注意事项
- README 只提供 npm 安装方式,未给出 yarn/pnpm 命令,请勿自行替换包管理器。
- 示例运行部分(Running the Examples)的具体命令未在节选中给出,需查阅仓库原文与 Quickstart 指南。
- 本项目是规范与 SDK 仓库,不提供独立可执行服务,安装后需自行在代码中集成。
- 中文文档与 API 详情以官网 apps.extensions.modelcontextprotocol.io 为准。
核心亮点
- 由 MCP 官方维护,协议规范与 SDK 同仓,权威性和一致性有保障
- 提供完整 TypeScript 类型定义与 schema,客户端和服务端接入成本低
- 聚焦 AI 聊天内嵌 UI 这一明确空白,填补 MCP 生态缺少界面层的短板
不足之处
- 项目处于早期成长阶段,协议可能随生态演进发生调整
- 实际可用的客户端渲染实现和第三方案例还较少,生态待观察
适用场景
- 在 AI 聊天助手中嵌入表单,让用户直接填写并提交数据给 MCP 服务器
- 为数据分析类 MCP 工具提供内嵌图表和筛选控件,对话中即可交互
- 构建带按钮和状态面板的 AI 工作流应用,替代纯文本指令操作
替代项目
modelcontextprotocol/servers、openai/openai-apps-sdk-examples
项目介绍
下一篇:Ivy-Framework
同类项目推荐
ComfyUI_Custom_Nodes_AlekPet
开源
给 ComfyUI 装上语音翻译和姿态检测,工作流更全能
Custom nodes that extend the capabilities of Comfyui
langchain
开源
组装 AI 应用的乐高积木,从想法到上线不换工具
The agent engineering platform.
transformers
开源
全球最大的模型仓库全家桶,想用的模型一把抓
Transformers: the model-definition framework for state-of-the-art machine learning m···
bruno
开源
把 API 测试当代码管理,用 Git 搞定协作与版本追踪
Opensource IDE For Exploring and Testing API's (lightweight alternative to Postman/I···