从「纯文本对话」到「交互式操作系统」

传统 MCP 的困境

如果你经常使用 AI 对话，一定遇到过这样的体验：

AI 帮你生成了一份数据报表，结果是一大串 Markdown 表格，看起来费劲，想筛选特定数据？自己处理。 AI 帮你分析销售趋势，只能描述「销售额上升了 30%」，但没有图表。 AI 帮你创建 GitHub Issue，返回一段 JSON，你还得复制去 GitHub 网站填写。

这就是传统 MCP 的困境：

工具调用只能返回：

• 纯文本内容
• JSON 数据
• Markdown 格式

用户体验问题：

• 数据可视化困难
• 缺少交互能力
• 需要手动复制粘贴

MCP Apps 的革命性意义

2026 年 1 月，Anthropic 发布了 MCP 协议的官方扩展——MCP Apps，彻底改变了这个局面。

工具调用可以返回交互式 UI，直接在对话界面中渲染：

• 📊 数据可视化仪表盘
• 📝 交互式表单
• 📈 动态图表
• ⚡ 多步骤工作流

用户体验的质的飞跃：

从「纯文本对话」到「交互式操作系统」

MCP Apps 工作原理

核心概念

工具调用返回 uri:// 资源时，Client 检测到是 UI 资源，自动在对话中嵌入 iframe 渲染。

用户请求 → AI 分析 → 调用工具 → Server 返回 UI 资源 → Client 渲染 UI

完整交互流程

1. 用户：帮我生成销售数据报表

AI 分析：需要调用 generate_report 工具

2. AI → Server：tools/call
   {
     "name": "generate_report",
     "arguments": {
       "type": "sales_dashboard",
       "timeRange": "last_30_days"
     }
   }

3. Server 返回 UI 资源
   {
     "content": [
       {
         "type": "resource",
         "uri": "ui://dashboard"
       }
     ]
   }

4. Client 发现 UI 资源
   在对话中嵌入 iframe 渲染

5. 用户看到交互式仪表盘
   可以直接操作：
   - 缩放查看特定时间段
   - 切换不同产品线
   - 导出数据为 CSV

6. 用户操作触发事件
   postMessage 通知 Client

7. Client 调用对应工具
   实现真正的交互

UI 资源声明

MIME 类型

MCP Apps 使用专门的 MIME 类型标识 UI 资源：

application/vnd.mcp.ui+html

资源声明示例

Server 需要在初始化时声明 UI 资源：

{
  "resources": [
    {
      "uri": "ui://dashboard",
      "name": "数据仪表盘",
      "mimeType": "application/vnd.mcp.ui+html",
      "description": "实时数据可视化仪表盘"
    },
    {
      "uri": "ui://form",
      "name": "表单填写",
      "mimeType": "application/vnd.mcp.ui+html",
      "description": "交互式表单"
    }
  ]
}

资源返回格式

当 Client 请求 resources/read 时，Server 返回完整的 HTML Bundle：