ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

mcp-ui:让 AI 工具结果变成可交互页面的 MCP 界面 SDK

mcp-ui:让 AI 工具结果变成可交互页面的 MCP 界面 SDK mcp-ui让 AI 工具结果变成可交互页面的 MCP 界面 SDK【免费下载链接】mcp-uiUI over MCP. Create next-gen UI experiences with the protocol and SDK!项目地址: https://gitcode.com/gh_mirrors/mcp/mcp-uimcp-ui 是一套让MCP 工具长出真实 Web 页面的开源 SDK服务端把 HTML 界面作为资源随协议发出客户端负责渲染让用户能在 AI 对话里直接操作表单、图表和组件。如果你想把 AI 助手的输出从纯文本升级为可点击的交互界面它就是目前最直接的实现路径。AI 只会说不会展示真正的痛点现在大多数 MCP 工具调用完返回的是一串文本或 JSON。AI 助手只能嘴替式地描述结果想看一张可缩放的销售图表只能拿文本拼给前端再单独建页面、再做联调成本不低而且界面和对话上下文是断开的。mcp-ui 的思路是把 UI 变成协议的一等公民服务端把界面打包成 UI 资源随工具结果一起返回宿主应用聊天窗、IDE、调试工具在工具结果旁边直接渲染它用户在界面里点击按钮事件能回流并再次触发工具调用不需要为每次交互开发独立页面界面和对话始终在同一个上下文里闭环。三个概念把 UI 的流转一眼看懂UIResource——UI 的运输单位。它包含唯一标识ui://协议、MIME 类型和 HTML 内容服务端把界面按这个格式装进协议里传输。_meta.ui.resourceUri——把工具关联到界面的挂钩。宿主调用工具时看到这一字段就知道该去哪个资源地址取界面、跟结果一起渲染。AppRenderer——客户端的渲染组件。它负责拉取资源、把界面放进沙箱 iframe并处理界面与 AI 之间的双向消息。整个链路一句话宿主调用工具 → 发现关联的 UI 资源 → 沙箱中渲染 → 用户操作事件回流到工具。从聊天框到小应用三个真实场景数据分析师让 AI 分析销售数据工具直接返回一张可交互图表。用户缩放、筛选后事件自动回传给 AI 继续追问不用来回复制数字。内部平台管理员把权限申请做成一个带表单的工具。同事在聊天里触发它表单就出现在对话旁填完提交直接进审批流不再跳去管理后台。聊天应用开发者给自己的产品加上一个 AppRenderer就能承接所有支持 mcp-ui 的工具界面。项目已适配 Claude、VS Code、Postman、Goose、LibreChat、Smithery 等主流宿主覆盖面在持续扩大。为什么值得你花时间踩在标准上mcp-ui 是UI over MCP概念的先驱它的模式后来被直接吸纳进 MCP Apps 官方规范。现在用它等于提前站在标准化红利上。多语言全支持服务端 SDK 覆盖 TypeScript、Python、Ruby客户端 SDK 即刻可用团队按现有技术栈选型即可不用迁就语言。默认沙箱化所有远程内容都在沙箱 iframe 中执行第三方工具返回的恶意代码碰不到宿主应用安全性是设计前提而非补丁。集成成本低已有 MCP 服务只需补上注册资源和工具的两小段代码架构零改造对比自建AI 出文本、前端再渲染的链路省掉一整套联调。十分钟上手以及去哪找资料最短路径克隆仓库git clone https://gitcode.com/gh_mirrors/mcp/mcp-ui打开 examples/server/ 的完整示例服务跑起来用任意 MCP 兼容客户端指向它就能看到工具带界面返回的效果。集成路径在现有项目里执行一行npm install mcp-ui/server mcp-ui/client服务端用 createUIResource 生成界面资源客户端用 AppRenderer 渲染即可。资料入口项目介绍、上手指南、TypeScript 服务端 SDK、Python 服务端 SDK各语言的逐步教程都在 docs/src/guide/server/ 下。如果你正在做 AI 应用不妨把示例服务跑一遍——十分钟之后你会更清楚自己的产品离会说话的界面有多近。【免费下载链接】mcp-uiUI over MCP. Create next-gen UI experiences with the protocol and SDK!项目地址: https://gitcode.com/gh_mirrors/mcp/mcp-ui创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表