[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$fYuQ4ApwnLigG7HCiJ2IM0jCzbu5iXEHmSMyT_h4LWLw":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},"8d847c8b-6f9a-441e-8d1e-a9271a9c249d","article","WebMCP：网页为什么要学会给 AI Agent 提供工具？","webmcp-agent-ready-web-explained","传统浏览器 Agent 需要看截图、猜按钮、逐步点击。WebMCP 试图让网页主动声明可调用的结构化工具，把页面动作变成 Agent 能理解、能校验的接口。本文解释它与服务器端 MCP 的区别、渐进增强方式和副作用安全边界。","很多 AI Agent 现在还在用“看屏幕、猜按钮、再点击”的方式操作网页。它们能完成任务，但每一步都要重新解释页面：这个按钮是什么意思？这个表单字段接受什么格式？点击之后会不会真的提交订单？网页一旦改版，原本能工作的 Agent 就可能失灵。\n\nWebMCP 想解决的，正是网页和 Agent 之间缺少“明确接口”这件事。它提出一种浏览器侧的 Web 标准：网页可以主动声明自己提供哪些结构化工具，Agent 不必只靠视觉和猜测来完成操作。\n\n## 先给结论：WebMCP 是网页的“操作说明书”\n\n传统网页主要服务人类。人类看到“搜索”“加入购物车”“提交表单”，会结合文字、布局和常识理解下一步做什么。Agent 如果只拿到截图或 DOM，就必须自己推断这些含义；这就是所谓的 actuation，近似于模拟人类点击和输入。\n\nWebMCP 的思路是让网页把动作的意图说清楚：\n\n- 工具叫什么；\n- 工具解决什么问题；\n- 需要哪些输入；\n- 输入的类型和约束是什么；\n- 执行后会产生什么结果或副作用。\n\nChrome 的官方说明将 WebMCP 描述为一个仍在提案和试验阶段的 Web 标准。它一方面提供 JavaScript 接口，另一方面允许 HTML 表单元素带上更明确的语义，让 Agent 知道页面功能应该如何被调用。[Chrome WebMCP 文档](https:\u002F\u002Fdeveloper.chrome.com\u002Fdocs\u002Fai\u002Fwebmcp)\n\n这和给网页加一层“可调用 API”很像，但它不要求网站先变成一套独立的后端服务。它更接近渐进增强：没有 Agent 时，网页仍然照常服务人类；有 Agent 时，网页额外提供一组机器可理解的操作入口。\n\n## 它和服务器端 MCP 不是一回事\n\nMCP 解决的是“模型客户端如何连接外部工具和数据源”。例如，一个 MCP Server 可以把数据库查询、文件检索或日历操作暴露给 AI 客户端。\n\nWebMCP 解决的是另一层问题：**网页本身如何向浏览器里的 Agent 暴露动作**。\n\n可以把两者放在同一条链路上理解：\n\n```mermaid\nflowchart LR\n    U[用户提出目标] --> A[浏览器中的 Agent]\n    A --> W[网页声明的 WebMCP 工具]\n    W --> F[网页表单或 JavaScript 业务逻辑]\n    F --> S[网站后端]\n    S --> R[结构化结果]\n    R --> A\n```\n\n服务器端 MCP 更像“把一个系统接进 Agent”；WebMCP 更像“让一个已经存在的网页变得 Agent-ready”。两者可以互补，也不应该混成同一个协议。\n\n## 为什么结构化动作比截图点击可靠\n\n假设用户说：“帮我找一双 42 码、黑色、预算 500 元以内的跑鞋。”\n\n纯视觉 Agent 可能要经历：打开筛选器、找到尺码下拉框、滚动选项、点击颜色、拖动价格条、等待列表刷新。任何一个步骤都可能受到布局、弹窗、网络延迟或文案变化影响。\n\n如果网页提供一个类似下面的工具，Agent 可以直接表达意图：\n\n```js\n\u002F\u002F 仅用于说明设计思路，不代表当前 WebMCP API 的最终写法\n{\n  name: \"searchProducts\",\n  description: \"按关键词、尺码、颜色和最高价格搜索商品\",\n  inputSchema: {\n    type: \"object\",\n    properties: {\n      query: { type: \"string\" },\n      size: { type: \"string\" },\n      color: { type: \"string\" },\n      maxPrice: { type: \"number\" }\n    },\n    required: [\"query\"]\n  }\n}\n```\n\n这份声明不会自动让网站变安全，也不会替 Agent 决定用户真正想买什么；它只是把“能做什么、需要什么输入”从页面视觉中提取出来，变成可以验证的接口。\n\n可靠性主要来自三个地方：\n\n1. **减少猜测**：Agent 看到的是动作语义，而不是只看到一个按钮标签。\n2. **提前校验**：尺码、价格和日期可以在工具边界处检查，而不是等后端返回错误。\n3. **缩短路径**：一次结构化调用可以替代多次点击、等待和重新观察。\n\n## 真正困难的是副作用，而不是调用\n\n搜索、排序、展开详情通常是低风险动作；下单、转账、删除文件则会改变外部世界。网页一旦把这些能力暴露成工具，就必须明确区分“读取”和“执行”。\n\n一个实用的设计是给工具标注副作用等级：\n\n| 类型 | 例子 | 建议 |\n| --- | --- | --- |\n| 只读 | 搜索商品、查询库存 | 可以自动执行 |\n| 可逆写入 | 保存草稿、加入收藏 | 允许自动执行并提供撤销 |\n| 不可逆写入 | 下单、付款、删除 | 必须让用户确认 |\n\n还要考虑工具参数的来源。Agent 生成的“收货地址”不能仅凭自然语言就直接提交；网页应当重新校验权限、金额、库存和用户身份。WebMCP 降低了交互歧义，却没有替代服务器端的认证与授权。\n\n## 现在适合怎样看待 WebMCP\n\n截至目前，WebMCP 仍处在浏览器实验和标准讨论阶段。Chrome 文档建议通过 origin trial 或本地测试方式体验，正式采用前还需要关注规范变化、浏览器兼容性和工具安全指南。\n\n对网站开发者来说，最值得提前做的不是把所有按钮都包装成工具，而是先整理出三类信息：哪些动作是稳定的业务能力、哪些输入可以结构化校验、哪些操作必须获得用户确认。这样的梳理即使最终不使用 WebMCP，也会反过来改善网站自身的 API 和交互设计。\n\n一句话总结：**WebMCP 不是让 Agent 更会“点网页”，而是让网页更愿意告诉 Agent“我能做什么”。**\n\n## 来源\n\n- [Chrome for Developers：WebMCP](https:\u002F\u002Fdeveloper.chrome.com\u002Fdocs\u002Fai\u002Fwebmcp)\n- [WebMCP 提案仓库](https:\u002F\u002Fgithub.com\u002Fwebmachinelearning\u002Fwebmcp)","\u002Fuploads\u002F2026-09-08\u002F4d27db1a-7ba7-4799-a759-c04a34f76a02.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","Chrome WebMCP 官方文档","Chrome for Developers：WebMCP","https:\u002F\u002Fdeveloper.chrome.com\u002Fdocs\u002Fai\u002Fwebmcp","published","WebMCP 是什么：让网页成为 AI Agent 可调用的工具","从浏览器 Agent 的截图点击出发，解释 WebMCP 如何通过结构化工具和表单语义提升网页自动化可靠性，以及它与服务器端 MCP 的区别。",null,false,53,0,"2026-09-08T00:00:00.000Z","2026-09-08T03:18:42.780Z",[52,60,69],{"id":53,"type":6,"title":54,"slug":55,"summary":56,"coverUrl":57,"authorName":14,"sno":58,"publishedAt":49,"createdAt":59},"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-08T03:19:19.069Z",{"id":61,"type":6,"title":62,"slug":63,"summary":64,"coverUrl":65,"authorName":14,"sno":66,"publishedAt":67,"createdAt":68},"0c00fd8d-379a-4c58-a542-460bb3575b72","MCP Apps：让 AI 对话里的工具带上交互界面","mcp-apps-interactive-tool-ui","MCP Apps 通过 ui:\u002F\u002F 资源、工具元数据和沙箱 iframe，让 MCP 服务器可以向宿主提供交互式 HTML 界面。本文解释工具与 UI 的关联、权限边界、文本回退和安全模型。","\u002Fuploads\u002F2026-09-12\u002F9e795ab0-aa98-480f-ad6d-a2013530b302.jpg",48,"2026-09-12T00:00:00.000Z","2026-09-12T03:56:44.551Z",{"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"]