MCP Apps:为 AI 对话添加交互式 UI

MCP 工具一直擅长获取数据和执行操作。但它们做不到的是向你展示任何有用的内容。你会让 AI 助手拉取你的销售数据,然后得到一大堆文本。想按地区筛选?那需要另一个提示词。按收入排序?又是另一个提示词。虽然能用,但既慢又令人沮丧。

MCP Apps 解决了这个问题。它们让 MCP 服务器能够返回交互式 UI 组件——仪表板、表单、可视化图表、配置面板——直接在对话中渲染。无需单独的应用,无需切换上下文。

什么是 MCP Apps?

MCP Apps 是 Model Context Protocol 的首个官方扩展。它们在 2026 年初成为正式标准,将 MCP-UI 和 OpenAI Apps SDK 已经在探索的模式进行了标准化。

在 MCP Apps 出现之前,每个客户端都必须独立解决 UI 问题。这种碎片化意味着为 Claude 构建的服务器在 VS Code 或 ChatGPT 中无法以相同方式工作。MCP Apps 建立了一个共享标准,使单个实现可以在所有支持的客户端上运行。

值得注意的是,MCP Apps 仍然是新兴且不断发展的。但它们已经在包括 Claude 和开发工具在内的多个 MCP 客户端中得到支持——这是一个有意义的起点。

MCP 交互式应用如何工作

架构很简单。一个工具引用指向交互式界面的 UI 资源:

{
  "name": "visualize_sales",
  "description": "Returns an interactive sales dashboard",
  "_meta": {
    "ui": {
      "resourceUri": "ui://dashboards/sales"
    }
  }
}

宿主获取该资源——一个在 ui:// 协议下提供的 HTML 包——并在沙箱 iframe 中渲染它。UI 使用基于 postMessage 的 JSON-RPC 与宿主进行通信。这意味着所有消息都是结构化的、可审计的,并且与 MCP 其他部分的工作方式保持一致。

ext-apps SDK 处理这个通信层:

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

const app = new App()
await app.connect()

app.ontoolresult = (result) => renderDashboard(result.data)

await app.updateModelContext({
  content: [{ type: "text", text: "User filtered by Q3" }],
})

模型保持在循环中。当用户与 UI 交互时——点击过滤器、选择配置选项、批准文档部分——模型会看到它并可以做出响应。

MCP UI 组件就是普通的 Web 应用

这是前端开发者最欣赏的部分。你的 UI 包是一个标准的 Web 应用程序。你可以用 React、Vue、Svelte 或纯 JavaScript 构建它。无需学习专有的渲染引擎。

ui:// 资源是一个包含打包资源的自包含 HTML 文件。宿主在沙箱 iframe 中加载它,因此它在熟悉的浏览器环境中运行。你以一贯的方式编写组件——唯一的新部分是使用 App SDK 与宿主通信。

UI 支持也是一种渐进式增强。 如果客户端不支持 MCP Apps,工具仍然可以工作——只是返回文本响应。服务器应该始终提供文本回退,这意味着你不会被锁定在不支持 UI 的客户端之外。

MCP 交互式应用在哪些场景最有价值

某些工作流确实需要 UI。文本响应无法替代:

• 数据仪表板,用户需要筛选、排序和深入分析
• 配置向导,具有根据选择而变化的依赖字段
• 文档审阅面板,用户批准或标记内联内容
• 实时监控器,无需新的工具调用即可更新

Shopify 通过他们的商业用例清楚地展示了这一点——产品变体、套装构建器和库存约束过于复杂,无法通过来回提示词来管理。UI 可以干净利落地处理它。

入门指南

ext-apps 仓库包含可运行的示例服务器:threejs-server、map-server、pdf-server 和 system-monitor-server。选择最接近你要构建的内容的示例,从那里开始。

结论

MCP Apps 处于早期阶段,但已经可用。它们提供了一种标准方式,将交互式 UI 直接嵌入到 AI 对话中,弥合了 MCP 工具可以获取的内容与用户实际可以对这些数据做什么之间的差距。如果你已经在构建 MCP 服务器,添加 UI 层是自然的下一步——而且工具已经准备好了。

常见问题

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.