MCP-UI-Org/mcp-ui

这是什么？

核心功能

• 01使用 ui:// 地址和 text/html 类型创建 MCP 宿主可渲染的 UI 资源
• 02通过 _meta.ui.resourceUri 将工具与 UI 关联，遵循 MCP Apps 模式
• 03提供 AppRenderer、UIResourceRenderer 组件及 Web Component
• 04UI 内容在沙箱 iframe 中渲染
• 05提供 TypeScript、Ruby、Python 三种服务端 SDK
• 06包含连接 ChatGPT Apps SDK 的适配器

适用场景

• 为 MCP 服务添加表单或仪表盘组件，供 AI 助手展示
• 开发能渲染第三方 MCP 服务工具界面的宿主应用
• 返回用户点击后可调用工具的交互控件
• 在 Ruby 或 Python 后端中集成 MCP 驱动的界面组件

快速上手

1. 1

   使用 npm 安装 TypeScript 服务端和客户端包

   npm install @mcp-ui/server @mcp-ui/client
2. 2

   或使用 pip 安装 Python 服务端 SDK

   pip install mcp-ui-server
3. 3

   按照快速入门示例创建 UI 资源，并通过 _meta.ui.resourceUri 将工具与其关联

使用前须知

• !渲染需要支持 MCP Apps 或旧版 MCP-UI 渲染器的宿主。
• !AppRenderer 需要先配置沙箱代理 URL 才能显示界面。
• !部分针对特定宿主的适配器只是过渡桥梁，随着宿主采用开放规范，可能不再需要。

标签

常见问题

mcp-ui 是什么？

用于为 MCP 工具构建可交互 UI 资源的 TypeScript、Ruby 与 Python SDK。 mcp-ui 是一个 SDK，用于为通过 Model Context Protocol（MCP）暴露的工具附加可交互的用户界面。服务端生成 UI 资源（通常是 ui:// 地址下的 HTML），MCP 宿主获取后与工具结果一同渲染，让 AI 助手可以展示组件，而不只是输出文本。

mcp-ui 可以免费使用吗？用的什么许可证？

mcp-ui 以 Apache-2.0 许可证开源。用于商业产品前，请先确认许可证条款。

mcp-ui 还在维护吗？

半年内有更新。mcp-ui 最近一次提交是在 2026年9月16日。

mcp-ui 适合用来做什么？

为 MCP 服务添加表单或仪表盘组件，供 AI 助手展示 开发能渲染第三方 MCP 服务工具界面的宿主应用 返回用户点击后可调用工具的交互控件 在 Ruby 或 Python 后端中集成 MCP 驱动的界面组件

mcp-ui 怎么安装和运行？

使用 npm 安装 TypeScript 服务端和客户端包: npm install @mcp-ui/server @mcp-ui/client 或使用 pip 安装 Python 服务端 SDK: pip install mcp-ui-server 按照快速入门示例创建 UI 资源，并通过 _meta.ui.resourceUri 将工具与其关联

在哪里获取 mcp-ui？

源代码和安装说明在 GitHub 上：https://github.com/MCP-UI-Org/mcp-ui