ReaderMX.
赛博禅心

MCP 首个扩展：自此，AI 对话，不再困于文字

赛金色传说大聪明约 4 分钟

MCP 官方刚发布了首个官方扩展：MCP Apps
https://blog.modelcontextprotocol.io/posts/2026-01-26-mcp-apps/

简单说就是，AI 工具调用现在可以返回交互式界面了。仪表盘、表单、可视化图表、多步骤流程，都能直接在对话里渲染

Claude 里的颜色选择器演示
Claude 里的颜色选择器演示

已经支持的客户端：Claude（网页和桌面端）、ChatGPT（本周上线）、VS Code Insiders、Goose

写一次代码，全客户端通用

Image

这是 Anthropic、OpenAI、微软联手推的开放标准，背后还有 JetBrains、AWS、Google DeepMind 的背书

能干什么

举几个场景：

数据探索
销售分析工具返回一个交互式仪表盘，用户可以直接按地区筛选、下钻到具体账户、导出报告。不用再一轮轮对话「给我看上周的」「按收入排序」「第 47 行是什么」

Image

配置向导
部署工具弹出一个表单，选「生产环境」自动展示安全选项，选「测试环境」换一套默认值。字段之间有联动

Image

文档审阅
合同分析工具把 PDF 直接嵌在对话里，高亮关键条款。用户点击批准或标记，模型实时看到操作结果

Image

实时监控
服务器健康检查工具显示实时指标，数据自动更新。不用重复跑工具看最新状态

Image

这些交互用纯文字对话也能做，但会很慢

技术原理

两个核心组件：

  1. 1. 带 UI 元数据的工具：工具声明一个 _meta.ui.resourceUri 字段，指向 UI 资源
  2. 2. UI 资源：通过 ui:// 协议提供的 HTML/JavaScript 包
// 工具声明示例
{
name: "visualize_data",
description: "Visualize data as an interactive chart",
inputSchema: { /* ... */ },
_meta: {
ui: {
resourceUri: "ui://charts/interactive"
    }
  }
}

客户端拿到资源后，在沙盒 iframe 里渲染，通过 postMessage 做双向 JSON-RPC 通信

开发者用 @modelcontextprotocol/ext-apps 这个 SDK 来构建 UI：

import { App } from"@modelcontextprotocol/ext-apps";

const app = newApp();
await app.connect();

// 接收工具结果
app.ontoolresult = (result) => {
renderChart(result.data);
};

// 从 UI 调用服务端工具
const response = await app.callServerTool({
name: "fetch_details",
arguments: { id: "123" },
});

// 更新模型上下文
await app.updateModelContext({
content: [{ type: "text", text: "User selected option B" }],
});

UI 可以记录调试日志、在用户浏览器里打开链接、发送后续消息推动对话、静默更新模型上下文。全走标准 postMessage，不绑定任何框架

安全模型

MCP Apps 运行的是 MCP 服务器提供的代码，所以安全很重要

四层防护：

  • • iframe 沙盒：所有 UI 内容在受限权限的沙盒 iframe 里运行
  • • 预声明模板：客户端可以在渲染前审查 HTML 内容
  • • 可审计消息：所有 UI 到客户端的通信都走可记录的 JSON-RPC
  • • 用户同意：客户端可以要求用户明确批准 UI 发起的工具调用

可疑内容在渲染前就能被拦截。当然，用户还是要自己审查要连接的 MCP 服务器

生态支持

各家怎么说：

David Soria Parra，MCP 联合创始人，Anthropic：
「看到 MCP Apps 开启的可能性很兴奋。迫不及待想看社区会构建什么」

Nick Cooper，OpenAI：
「MCP Apps 建立在 MCP-UI 和 ChatGPT Apps SDK 的基础上，给用户带来丰富的视觉交互体验。我们很自豪支持这个新的开放标准，期待开发者用它构建更多应用」

Harald Kirschner，微软 VS Code 首席产品经理：
「VS Code 一直把 MCP 当作一个契约来对待：完整实现规范，跟进最新传输和能力，确保服务器作者构建的东西在真实开发者手里表现一致。MCP Apps 终于补上了缺失的人类环节：当工作流需要决策、选择或探索时，客户端可以给你正确的交互方式，而不是把对话变成选择题」

Denis Shiryaev，JetBrains AI 开发工具生态负责人：
「MCP Apps 扩展解决了我们亲身经历的问题：当开发者需要丰富的交互式工具时，文本和结构化数据只能走这么远。从 MCP 服务器直接渲染动态 UI，并且安全性从第一天就内置，这正是我们构建更好的 agentic 体验所需要的。JetBrains 很兴奋探索把这个扩展带到我们的 IDE」

Clare Liguori，AWS 高级首席工程师：
「MCP Apps 解决了 agentic 工具能提供什么和用户想怎么交互之间的真实差距。直接在对话里渲染动态界面，让利用 MCP 服务器能力变得更容易。我们很期待看看如何把这些能力带到 Kiro，以及它能为用户解锁什么用例」

Anshul Ramachandran，Google DeepMind Antigravity 产品负责人：
「Antigravity 团队很高兴看到 MCP 生态持续扩展，会探索 MCP Apps 如何在 Antigravity 里实现新的体验」

VS Code 里的颜色选择器演示
VS Code 里的颜色选择器演示

上手资源

官方仓库 ext-apps 里有 SDK 和现成的示例：

  • • threejs-server：3D 可视化
  • • map-server：交互式地图
  • • pdf-server：文档查看
  • • system-monitor-server：实时仪表盘
  • • sheet-music-server：乐谱展示
  • • 更多示例

找一个接近你要做的东西，直接改

资源链接

文档：MCP Apps Guide
https://modelcontextprotocol.io/docs/extensions/apps

快速开始：Getting Started with MCP Apps
https://modelcontextprotocol.github.io/ext-apps/api/documents/Quickstart.html

SDK：@modelcontextprotocol/ext-apps
https://www.npmjs.com/package/@modelcontextprotocol/ext-apps

示例：ext-apps repository
https://github.com/modelcontextprotocol/ext-apps

反馈渠道

Claude 用户：
github.com/anthropics/claude-ai-mcp

ChatGPT Apps SDK 用户
https://community.openai.com/c/chatgpt-apps-sdk/42

致谢

MCP Apps 的背后有不少人的贡献

Ido Salomon 和 Liad Yosef 创建了 MCP-UI，主持了 #ui-wg 频道，孵化了很多 MCP Apps 现在标准化的模式

Nick Cooper（OpenAI）推动了 OpenAI Apps SDK 的落地

Sean Strong、Olivier Chafik、Anton Pidkuiko、Jerome Swannack（Anthropic）把这个提案从想法推到了生产

UI 社区工作组在无数讨论中提供反馈、审查草案、测试早期实现、在灵活性和安全性之间找平衡

KEEP THE THREAD GOING

更多来源文章