MCP Apps 正式发布 - 为 MCP 客户端带来 UI 交互能力

MCP Protocol 博客

January 26, 2026·

MCP 核心维护者

·产品发布, MCP·MCP, MCP Apps, UI 组件, 扩展, 交互式界面, Claude, ChatGPT, VS Code

今天，我们正式宣布 MCP Apps 已作为官方 MCP 扩展正式上线。

工具现在可以返回交互式 UI 组件，直接在对话中渲染：仪表板、表单、数据可视化、多步骤工作流等。这是第一个官方 MCP 扩展，已准备好投入生产使用。

什么是 MCP Apps？

MCP Apps 让工具能够返回富交互式界面，而不仅仅是纯文本。当工具声明一个 UI 资源时，宿主（Host）会在沙盒化的 iframe 中渲染它，用户可以直接在对话中与之交互。

以下是一些 MCP Apps 大显身手的场景：

数据探索：销售分析工具返回一个交互式仪表板。用户可以按地区筛选，深入查看特定账户，导出报表，无需离开对话。
配置向导：部署工具呈现一个具有依赖字段的表单。选择"生产环境"会显示额外的安全选项；选择"预发布环境"则显示不同的默认值。
文档审查：合同分析工具内联显示 PDF，高亮显示条款。用户点击批准或标记章节，模型实时看到他们的决策。
实时监控：服务器健康工具显示实时指标，随系统变化而更新。无需重新运行工具即可查看当前状态。

这些交互如果是文本交流会很笨拙，而 MCP Apps 让它们变得自然——就像使用任何其他基于 Web 的 UI 应用一样。

工作原理

MCP Apps 的架构依赖于两个关键的 MCP 原语：

带有 UI 元数据的工具：工具包含 _meta.ui.resourceUri 字段，指向 UI 资源
UI 资源：通过 ui:// scheme 提供的服务器端资源，包含打包的 HTML/JavaScript

// 带有 UI 元数据的工具
{
  name: "visualize_data",
  description: "将数据可视化为交互式图表",
  inputSchema: { /* ... */ },
  _meta: {
    ui: {
      resourceUri: "ui://charts/interactive"
    }
  }
}

宿主获取资源，在沙盒化的 iframe 中渲染，并通过 postMessage 上的 JSON-RPC 启用双向通信。

为什么需要 MCP Apps？

MCP 非常适合将模型连接到数据并赋予它们采取行动的能力。但工具能做的事情和用户能看到的事情之间仍然存在上下文差距。

考虑一个查询数据库的工具。它返回数据行，可能有数百行。模型可以总结这些数据，但用户通常想要探索：按列排序、筛选到日期范围、点击查看特定记录。

使用文本响应，每次交互都需要另一个提示词。“只显示上周的。““按收入排序。““第 47 行的详情是什么？“这可以工作，但很慢。

MCP Apps 弥补了这一差距。模型保持在循环中，看到用户的操作并相应响应，但 UI 处理文本无法做到的事情：实时更新、原生媒体查看器、持久状态和直接操作。结合起来，它们在一个熟悉的界面中为模型和用户提供所需的所有上下文。

App API

要构建新的 MCP Apps，开发者可以使用 @modelcontextprotocol/ext-apps 包，它提供了用于 UI 与宿主通信的 App 类：

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

const app = new App();
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: "用户选择了选项 B" }],
});

因为应用运行在客户端内部，它们可以做普通 iframe 做不到的事情。它们可以记录事件用于调试、在用户的浏览器中打开链接、发送后续消息来推动对话前进，或者悄悄地更新模型的上下文以供后续使用。所有这些都通过标准的 postMessage 进行，所以您不会被锁定在任何框架中。

安全模型

从 MCP 服务器运行 UI 意味着在 MCP 宿主中运行您没有编写的代码。MCP Apps 通过多层机制来处理这个问题：

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

如果某些内容看起来可疑，宿主可以在它渲染之前阻止它。当然，用户在连接之前应该继续主动和彻底地审查 MCP 服务器。

Agentic UI 框架的未来

MCP-UI 和 OpenAI Apps SDK 开创了 MCP Apps 现在标准化的模式。这些项目证明 UI 资源可以且确实自然地适合 MCP 生态系统，各种规模的企业都在生产环境中采用 OpenAI 和 MCP-UI SDK。

MCP-UI 不会消失。SDK 支持 MCP Apps 模式，客户端 SDK 是寻求采用 MCP Apps 的宿主的推荐框架。社区继续为规范做出广泛贡献。如果您已经在使用 MCP-UI，请继续使用。当您准备好时，迁移到官方扩展很简单。

客户端支持

MCP Apps 目前已在以下客户端支持：

Claude - Web 和桌面版现已可用
Goose - 现已可用
Visual Studio Code - Visual Studio Code Insiders 中可用
ChatGPT - 本周开始支持

这是第一次，MCP 工具开发者可以发布一个交互式体验，在广泛采用的各种客户端上工作，而无需编写一行客户端特定代码。

行业声音

“我对 MCP Apps 开启的可能性感到兴奋。看到一瞥什么是可能的，我迫不及待想看到社区将构建什么。”
—— David Soria Parra，MCP 联合创造者，Anthropic 技术团队成员

“MCP Apps 在 MCP-UI 和 ChatGPT Apps SDK 的基础上构建，为人们提供丰富的视觉交互体验。我们很自豪能支持这个新的开放标准，期待看到开发者用它构建什么，因为我们增长 ChatGPT 中可用的应用选择。”
—— Nick Cooper，OpenAI 技术团队成员

“MCP Apps 以将人类置于中心的方式扩展了 Model Context Protocol。行业已将助手嵌入到单个应用中，创建了分散的、孤立的体验。MCP 通过使应用成为代理中的可插拔组件来颠覆这一点。MCP Apps 通过将用户界面带入代理体验本身进一步扩展了这一点。”
—— Andrew Harvard，Block 设计工程师，Agentic UX

快速开始

ext-apps 仓库包含 SDK 和可工作的示例：

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

选择一个接近您正在构建的示例，从那里开始！

资源

文档: MCP Apps 指南
快速开始: MCP Apps 入门
SDK: @modelcontextprotocol/ext-apps
示例: ext-apps 仓库

反馈

如果您正在为 Claude.ai 构建 MCP Apps 并遇到实现问题，请在 github.com/anthropics/claude-ai-mcp 报告。

如果您正在使用 ChatGPT Apps SDK 构建应用并遇到问题或有疑问，请在 OpenAI 社区论坛的 ChatGPT Apps 类别中发布。

致谢

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 社区工作组 通过无数次讨论提供反馈、审查草案、测试早期实现，并推动灵活性和安全性之间的正确权衡。

感谢每个人的贡献。现在去构建一些很酷的东西吧！

一月 MCP 核心维护者更新 MCP协议下一版本发布计划更新