[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$fnSJagE5bG4wMuCcYstvfUeICJHVRo9zjCoK13RNJ8SE":3},{"item":4,"related":51},{"id":5,"type":6,"title":7,"slug":8,"summary":9,"body":10,"coverUrl":11,"productScreenshots":12,"productLinks":13,"authorName":14,"authorUrl":15,"authorSubject":16,"category":17,"tags":22,"sourceLabel":39,"sourceName":40,"sourceUrl":41,"status":42,"seoTitle":43,"seoDescription":44,"canonicalUrl":45,"isFeatured":46,"sno":47,"sortOrder":48,"publishedAt":49,"updatedAt":50,"createdAt":50},"0c00fd8d-379a-4c58-a542-460bb3575b72","article","MCP Apps：让 AI 对话里的工具带上交互界面","mcp-apps-interactive-tool-ui","MCP Apps 通过 ui:\u002F\u002F 资源、工具元数据和沙箱 iframe，让 MCP 服务器可以向宿主提供交互式 HTML 界面。本文解释工具与 UI 的关联、权限边界、文本回退和安全模型。","传统 MCP 工具的结果通常是一段文字或一组结构化数据。对于查询天气、读取订单状态这类任务已经够用，但有些工具天然需要界面：地图要能缩放，表格要能筛选，审批单要能勾选，图表要能展示多个维度。如果每个 MCP 客户端都自己设计一套渲染方式，同一个工具就会被迫维护多套前端实现。\n\nMCP Apps 试图给这件事建立一个可协商的标准。服务器可以声明一个可交互的 HTML UI 资源，宿主在工具执行后把它呈现在对话界面里；如果宿主不支持 MCP Apps，工具仍然可以退化成普通的文本或结构化结果。\n\n## 工具和界面如何关联\n\nMCP Apps 引入了 `ui:\u002F\u002F` URI，用来标识由服务器提供的 UI 资源。工具通过 `_meta.ui.resourceUri` 指向这份资源，宿主在发现工具时就能知道：这个工具除了返回结果，还可能有一个适合人类操作的视图。\n\n这和“让模型生成一段 HTML”不同。UI 资源是服务器预先声明、可以被宿主检查和缓存的内容；动态数据仍然通过工具调用结果传入。模板和数据分离后，宿主可以提前加载模板，也能在工具执行前明确它会使用哪些界面资源。\n\n```mermaid\nflowchart LR\n    S[MCP Server] --> R[ui:\u002F\u002F UI Resource]\n    S --> T[Tool metadata]\n    T -->|resourceUri| H[Host]\n    H -->|tools\u002Fcall| S\n    S -->|tool result| H\n    H --> V[Sandboxed UI iframe]\n    V -->|user interaction| H\n    H -->|validated tools\u002Fcall| S\n```\n\n## 它不是把网页直接塞进聊天窗口\n\n安全边界是 MCP Apps 的核心。对于 Web 宿主，规范要求通过不同源的 Sandbox Proxy 包裹 UI，并使用限制性的 CSP。默认情况下，资源不能随意加载对象、脚本来源或嵌套 iframe；如果应用确实需要访问某些域名、摄像头、麦克风或剪贴板，也要通过元数据明确声明。\n\nUI 与宿主之间不应该依赖某个客户端私有的全局对象，而是通过 `postMessage` 上的 MCP 风格 JSON-RPC 消息通信。UI 可以接收工具输入和工具结果，也可以请求宿主调用工具；宿主则负责决定哪些调用被允许，不能因为 UI 中出现一个按钮，就自动把高风险操作直接放行。\n\n这也是为什么工具可见性被拆成 `model` 和 `app` 两种范围。一个用于查询数据的工具可以同时对模型和 UI 可见；一个只用于刷新局部组件的工具则可以只对 UI 可见，避免它被模型当成普通工具误用。宿主还必须拒绝不符合可见性规则的调用。\n\n## 交互式 UI 仍然需要文本回退\n\n协议扩展不会让所有客户端突然具备渲染 HTML 的能力。MCP Apps 明确要求保持渐进增强：支持扩展的宿主可以展示交互式视图，不支持的宿主继续使用普通工具结果。服务器应该确保文本结果本身仍然有意义，而不是把关键结论全部藏在 UI 里。\n\n这条回退路径也有助于可访问性、日志审计和自动化测试。人类可以在界面里筛选数据，模型可以读取结构化结果，审计系统则可以记录工具输入、工具输出和 UI 触发的后续调用。三者不必共享同一种展示方式，但必须共享同一条可验证的调用链。\n\n## 适合用在什么地方\n\nMCP Apps 适合把“工具结果”和“下一步操作”放在一起的场景：数据分析面板、旅行规划、订单审批、代码变更预览、文件选择和多步骤表单。它不适合把任意网页当作 iframe 嵌入，也不应该成为绕过宿主权限模型的后门。\n\n真正成熟的实现需要同时考虑资源版本、CSP、权限策略、工具幂等、取消操作和文本回退。MCP Apps 的意义，是让 Agent 工具不再只有“调用后吐一段文字”这一种形态，但交互界面越丰富，宿主越需要把渲染权限与业务权限分开管理。\n\n来源：[MCP Apps 官方规范](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps\u002Fblob\u002Fmain\u002Fspecification\u002F2026-01-26\u002Fapps.mdx)","\u002Fuploads\u002F2026-09-12\u002F9e795ab0-aa98-480f-ad6d-a2013530b302.jpg",[],[],"Foundit","https:\u002F\u002Ffoundit.cn","foundit-ai-editorial",{"id":18,"name":19,"slug":20,"description":21},"6179d3b6-dc34-4483-9ded-3cd9f1b37a47","科普","abbreviation","介绍各领域新兴概念",[23,27,31,35],{"id":24,"name":25,"slug":26},"88d2bc27-0e0f-468a-b907-2991cb97b87b","人工智能","ai",{"id":28,"name":29,"slug":30},"a202d639-99a6-488a-a712-4d4c6ffd7e15","开发","dev",{"id":32,"name":33,"slug":34},"82f427f8-6275-4cbb-bcac-cf1948488006","网页应用","web-app",{"id":36,"name":37,"slug":38},"7c76bfc2-f80f-4ee0-a95d-27bd8708b434","技术","slug","MCP Apps 官方规范","Model Context Protocol MCP Apps","https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps\u002Fblob\u002Fmain\u002Fspecification\u002F2026-01-26\u002Fapps.mdx","published","MCP Apps 详解：AI 工具如何提供交互式 UI","介绍 MCP Apps 的 ui:\u002F\u002F 资源、工具与 UI 绑定、沙箱 iframe、权限可见性和不支持客户端的文本回退策略。",null,false,48,0,"2026-09-12T00:00:00.000Z","2026-09-12T03:56:44.551Z",[52,61,69],{"id":53,"type":6,"title":54,"slug":55,"summary":56,"coverUrl":57,"authorName":14,"sno":58,"publishedAt":59,"createdAt":60},"7f7b281e-b9d6-406f-8d79-9dfb33145f5e","WebTransport：为什么实时 AI 应用不一定应该使用 WebSocket？","webtransport-realtime-ai-apps","WebSocket 适合通用双向消息，但复杂实时 AI 应用还可能需要可靠流、双向流和可以丢弃的临时数据。本文解释 WebTransport 的 session、stream 和 datagram，比较它与 SSE、WebSocket、WebRTC 的边界，并讨论鉴权与部署。","\u002Fuploads\u002F2026-09-08\u002F2247cab5-87b7-4b92-8871-e6adac14dc47.jpg",44,"2026-09-08T00:00:00.000Z","2026-09-08T03:19:19.069Z",{"id":62,"type":6,"title":63,"slug":64,"summary":65,"coverUrl":66,"authorName":14,"sno":67,"publishedAt":59,"createdAt":68},"8d847c8b-6f9a-441e-8d1e-a9271a9c249d","WebMCP：网页为什么要学会给 AI Agent 提供工具？","webmcp-agent-ready-web-explained","传统浏览器 Agent 需要看截图、猜按钮、逐步点击。WebMCP 试图让网页主动声明可调用的结构化工具，把页面动作变成 Agent 能理解、能校验的接口。本文解释它与服务器端 MCP 的区别、渐进增强方式和副作用安全边界。","\u002Fuploads\u002F2026-09-08\u002F4d27db1a-7ba7-4799-a759-c04a34f76a02.jpg",53,"2026-09-08T03:18:42.780Z",{"id":70,"type":6,"title":71,"slug":72,"summary":73,"coverUrl":74,"authorName":75,"sno":76,"publishedAt":77,"createdAt":78},"0e2211d6-a9cc-4151-aec3-ea60ef2575f2","本地大模型部署：用 Ollama 与 llama.cpp 把模型搬进你自己的机器","local-llm-deployment-ollama-llama-cpp","数据敏感、要离线、想省 API 账单？本地部署值得了解。","https:\u002F\u002Foxqtewbrpuiouqqjrvdv.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fpublic-media\u002F2026-07-20\u002Fbf471546-ff4c-4fee-a01c-8a41157e5a8c.jpg","Foundit AI",76,"2026-07-19T00:00:00.000Z","2026-07-20T01:11:41.120Z"]