MCP-UI-Org/mcp-ui

解决的问题

mcp-ui 提供了一种标准化方式，利用 Model Context Protocol (MCP) 为 AI 工具交付交互式网页界面。它解决了 AI 代理仅限于文本响应的问题，允许服务器将工具链接至丰富的沙盒化 UI 组件，并由兼容的主机进行渲染。

运作原理

本项目实现了 MCP Apps 标准，通过 _meta.ui.resourceUri 将工具与其 UI 链接起来。

• 服务器端：开发者使用 SDK（提供 TypeScript、Python 和 Ruby 版本）创建 UI 资源（如原始 HTML 或外部 URL）并进行注册。当调用工具时，服务器会提供一个 URI，供主机用来获取 UI 内容。
• 客户端：主机使用 @mcp-ui/client SDK，通过 AppRenderer 或 UIResourceRenderer 等组件渲染这些资源，并为了安全起见，在沙盒化的 <iframe> 中执行远程代码。
• 交互性：UI 组件可通过 postMessage 协议与代理进行通信，允许 UI 中的按钮或输入框触发工具调用或主机上的其他动作。
• 适配器 (Adapters)：平台专用的适配器将开放的 MCP-UI 协议转换为平台专用的 API（例如针对 ChatGPT 的 Apps SDK）。

适用对象

• MCP 服务器开发者：为 AI 代理构建工具，且希望提供可视化、交互式体验而非仅限文本的开发者。
• MCP 主机开发者：构建 AI 聊天界面或 IDE，且需要标准化方式来渲染第三方工具 UI 的开发者。

特色亮点

• 多语言支持：提供 TypeScript、Python 和 Ruby 的服务器端 SDK。
• 安全性优先：所有远程 UI 内容皆在沙盒化的 iframes 中执行。
• 标准化：完全符合 MCP Apps 规范。
• 跨平台：包含适配器以确保小工具能在不同的 AI 主机（如 Claude、ChatGPT、Goose）上运作。
• 灵活渲染：支持原始 HTML、外部 URL 以及 Remote-DOM。