跳到主要内容

MCP UI：把浏览器带进智能体

· 阅读需 4 分钟
·
Michael Neale
Michael Neale
Principal Engineer

博客封面

goose 最近发布了对 MCP-UI 的支持，它允许 MCP 服务器向智能体建议并贡献用户界面元素。

注意

MCP-UI 仍然是一份开放 RFC，正在考虑纳入 MCP 规范。它目前可以工作，但随着提案推进可能会变化。

MCP-UI 位于协议之上，但结果不再是 text/markdown，服务器可以返回客户端能够丰富渲染的内容（包括交互式 GUI 内容）。

智能体承担的许多日常活动都可以从图形表示中受益。有时这由智能体自己渲染 GUI 来完成（我知道我经常这么做），但这让它更内在于扩展，适用于与人进行图形交互最好的情况。它也自然地（因此有与 Shopify 的联系）很适合商业应用，因为你想看到产品！

值得花一分钟看看这个航空公司选座演示的 MCP 服务器，以感受这种能力：

本质上，MCP 服务器在建议 GUI 元素，供客户端（智能体）按它认为合适的方式渲染。

我如何使用它​

从 goose v1.3.0 开始，你可以把 MCP-UI 添加为扩展。

把 MCP-UI 添加到 goose

启动安装器

看看 Andrew Harvard 提供的 MCP-UI 演示。你也可以查看他的 GitHub 仓库，里面有你可以起步的示例。

MCP-UI 背后的技术​

MCP-UI 的核心是一个 UIResource 接口：

interface UIResource {
  type: 'resource';
  resource: {
    uri: string;       // e.g., ui://component/id
    mimeType: 'text/html' | 'text/uri-list' | 'application/vnd.mcp-ui.remote-dom'; // text/html for HTML content, text/uri-list for URL content, application/vnd.mcp-ui.remote-dom for remote-dom content (JavaScript)
    text?: string;      // Inline HTML, external URL, or remote-dom script
    blob?: string;      // Base64-encoded HTML, URL, or remote-dom script
  };
}

mimeType 是动作发生的地方。它可以是 HTML 内容，例如（在最简单的情况下）。

这里发挥作用的另一项关键技术是 Remote DOM，这是 Shopify 的一个开源项目。它让你从沙箱环境取出 DOM 元素，并在另一个环境中渲染它们，这对智能体相当有用。这也打开了一种可能性：智能体一侧可以按需要渲染小组件（也就是使用本地匹配的样式或设计语言）。

可能的未来​

MCP-UI 仍处于早期，所以细节可能会变，但这正是现在试验它令人兴奋的一部分。

MCP-UI 将继续演进，并可能获得更多声明式方式，让 MCP-UI 服务器指定它们需要某种类型的表单或小组件，但不必指定确切的渲染。如果能指定这些组件，并让智能体漂亮地渲染它——无论是在桌面或移动客户端，甚至是命令行里的文本 UI——那该多好！