freemcplab / 目录 / 演练场 / MCP Apps Protocol

← 全部服务器 ↗ GitHub

● 官方 modelcontextprotocol ⚡ 即开即用

MCP Apps Protocol

Name: MCP Apps Protocol MCP Server
Author: modelcontextprotocol

作者 modelcontextprotocol · modelcontextprotocol/ext-apps

让 MCP server 发布交互式 UI 片段的官方扩展——Claude 可以直接在对话中嵌入你的表单、图表或选择器。

MCP Apps 是 MCP 的官方扩展，允许 server 声明可交互 UI（表单、图表、选择器），由聊天宿主渲染。该仓库包含规范、参考 SDK 和示例。

▶ 观看演示 📦 安装 💡 使用场景

为什么要用

核心特性

MCP 内嵌 UI 规范
参考 SDK（TypeScript）
示例应用
宿主实现指南
由 MCP 团队维护

实时演示

实际使用效果

就绪

安装

选择你的客户端

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "mcp-apps-protocol": {
      "_doc": "Reference SDK; integrate as a library inside your MCP server or chatbot host."
    }
  }
}

打开 Claude Desktop → Settings → Developer → Edit Config。保存后重启应用。

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "mcp-apps-protocol": {
      "_doc": "Reference SDK; integrate as a library inside your MCP server or chatbot host."
    }
  }
}

Cursor 使用与 Claude Desktop 相同的 mcpServers 格式。项目级配置优先于全局。

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "mcp-apps-protocol": {
      "_doc": "Reference SDK; integrate as a library inside your MCP server or chatbot host."
    }
  }
}

点击 Cline 侧栏中的 MCP Servers 图标，然后选 "Edit Configuration"。

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "mcp-apps-protocol": {
      "_doc": "Reference SDK; integrate as a library inside your MCP server or chatbot host."
    }
  }
}

格式与 Claude Desktop 相同。重启 Windsurf 生效。

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "mcp-apps-protocol",
      "args": []
    }
  ]
}

Continue 使用服务器对象数组，而非映射。

~/.config/zed/settings.json

{
  "context_servers": {
    "mcp-apps-protocol": {
      "command": {
        "args": []
      }
    }
  }
}

加入 context_servers。Zed 保存后热重载。

claude mcp add mcp-apps-protocol -- undefined

一行命令搞定。用 claude mcp list 验证，claude mcp remove 卸载。

使用场景

实战用法： MCP Apps Protocol

为 MCP tool 添加表单确认交互

👤 开发者 ⏱ ~15 min intermediate

何时使用： 某个 tool 有破坏性副作用，希望在执行前获得用户的结构化确认。

步骤

阅读规范

Skim the Apps spec section.✓ 已复制

→ 建立心智模型
添加 UI 片段

Return an App component from your tool handler.✓ 已复制

→ 宿主渲染表单
连接提交

On submit, tool re-invokes with confirmed args.✓ 已复制

→ 破坏性 tool 更安全

结果： MCP tool 可以请求结构化确认交互。

组合

与其他 MCP 搭配，撬动十倍杠杆

mcp-apps-protocol + fastmcp

用 fastmcp 作为 MCP server，用 Apps 处理交互式部分

Combine mcp-apps-protocol with fastmcp: Use fastmcp as your MCP server; Apps for interactive bits✓ 已复制

工具

此 MCP 暴露的能力

工具	输入参数	何时调用	成本
protocol-spec	(见文档)	无可调用 tool——这是一个协议扩展	1 次调用

成本与限制

运行它的成本

API 配额: 不适用
每次调用 Token 数: 0
费用: 免费
提示: 保持 App 片段小巧——它们是内联渲染的

安全

权限、密钥、影响范围

凭据存储： 无

数据出站： 无

故障排查

常见错误与修复

宿主不渲染 App

确认宿主支持 Apps 扩展；该功能需显式启用

替代方案