# 网站即工具：WebMCP本周四把开源新刀 2026 年 2 月，Chrome 把一个叫 **WebMCP** 的东西悄悄塞进了浏览器预览版。这可能是今年最被国内低估的一刀——它让任何一个网站，从"给人看的页面"变成"给 AI agent 调用的函数"。海外已经有四个新项目搭上了这班车，其中一个直接把 agent 操作网页的 token 成本砍掉了 **90%**。本周（2026-07-04）Hacker News 上它们集中刷屏，而国内技术圈几乎没人讨论。这篇就把这波"网站即工具"的新刀一次拆给你看，连同为什么现在是个窗口期。 ## 先搞懂：WebMCP 到底改了什么 过去 agent 操作网页，靠的是"截图鬼循环"：截图 → 模型看图猜 DOM → 点击/输入 → 再截图。这条路能跑，但 **token 烧得飞起**——一个复杂表单操作，动辄几十次往返，context window 直接爆炸。Playwright 和 Chrome DevTools MCP server 都是这套路子。 **WebMCP** 反过来：让网站**主动**把自己暴露成一组语义化"工具"（tools）。agent 不用看图、不用猜 DOM，直接像调 API 一样调网站能力。W3C 已经在推进这个提案，HN 上相关讨论热度极高——"WebMCP Proposal"153 分、"WebMCP is available for early preview"360 分，最直白的一条标题是"Google Chrome ships WebMCP, turning every website into a tool for AI agents"。 ```mermaid flowchart LR subgraph OLD["传统 Agent 操作网页（烧 token）"] A1[Agent 下指令] --> A2[CDP 截图] A2 --> A3[模型读图猜 DOM] A3 --> A4[点击/输入] A4 --> A2 end subgraph NEW["WebMCP 新链路（省约 90% token）"] B1[Agent 调 list_website_tools] --> B2[网站返回语义工具列表] B2 --> B3[Agent 调 call_website_tool] B3 --> B4[网页内 JS 直接执行] B4 --> B5[返回结构化结果] end OLD -.token 爆炸/不确定.-> NEW ``` 一句话总结信息差：**国内还在卷 RPA + 截图 + DOM 解析，海外已经把"网站自带 API"做成了浏览器级标准。** 下面四把新刀，就是这个新范式下的第一批落地工具。 ## 第一把刀：Chrome DevTools MCP 的 WebMCP Fork（省 90% token） 这是本周性价比最高的一把。 - **名称**：chrome-devtools-quickstart（WebMCP 版 Chrome DevTools MCP） - **官网**：https://github.com/WebMCP-org/chrome-devtools-quickstart - **价格**：开源免费 - **怎么干的**：作者 fork 了 Chrome DevTools MCP server，让它能执行 WebMCP 工具。drop-in 替换，只需加两个工具——`list_website_tools`（列出网站暴露的工具）和 `call_website_tool`（直接调用）。本质是把原本"截图→猜→点"的链路，换成"网页内 JavaScript 直接执行"。 - **关键数据**：基准测试显示 token 用量**下降约 90%**。HN 原标题就是"Using WebMCP to make the CDP MCP server 90% more token efficient"。作者额外提到两个难量化但更重要的收益：**速度和确定性都显著提升**。 - **为什么值得关注**：你用 Claude Code / Cursor / 任何 CDP-based agent 去测网页、爬数据、填表单，成本立刻打到一个零头。对于做 web 自动化测试、agent 驱动 E2E 的人来说，这是直接的钱。 - **国内对比**：国内做网页自动化还堆在 Playwright + 截图 OCR + 大模型视觉理解上，token 成本是这道墙。这把 fork 把墙拆了。 - **适合人群**：做 agent 测试、爬虫、web 自动化的工程师；用 CDP MCP 跑 agent 的人。 ## 第二把刀：Persona.js（让任何老站长出 agent 能力） - **名称**：Persona.js - **官网**：https://github.com/runtypelabs/persona （Demo：https://www.persona-chat.dev/ ） - **价格**：MIT 开源免费 - **是什么**：一个 **vanilla-JS（原生 JS、零框架依赖）** 的 agent UI 库，原生支持 WebMCP。作者的话很直白——他们发现"AI 应用的前端被过度复杂化了"，要么得在一个大 app 里再塞一个前端项目，要么站点压根没用框架。Persona.js 的定位就是：**几行 JS，任何网站（包括 CMS、老站、纯静态页）都能给 agent 暴露工具 + 提供对话式 agent 界面**。 - **为什么值得关注**：之前要给网站加"agent 能力"，等于重写一遍前端 + 搭后端。Persona.js 把这件事压到了几十行代码。对独立开发者和站长，这是把"网页"升级成"可被 agent 驱动的应用"的最低成本路径。 - **国内对比**：国内的 agent UI 多绑死在某个大框架或 lowcode 平台里，迁移成本高、跟老站不兼容。Persona.js 的"无框架、可塞进任何站"是差异化点。 - **适合人群**：独立开发者、站长、SaaS 创始人、做企业内部工具的人。 ## 第三把刀：Routing24（WebMCP 实战样板工程） 光有库不够，得有真跑起来的产品给你抄代码。Routing24 就是那个样板。 - **名称**：Routing24 - **官网**：https://routing24.com （源码/Skill：https://github.com/routing24/skill ） - **价格**：免费 - **是什么**：一个免费的路线优化与规划应用，**首批原生 WebMCP + Claude Cowork 的实战产品之一**。作者在 HN 上讲的实现思路很有信息量：他们原本做前端测试时，用 Chrome CDP 让 AI 控制浏览器，把整个 app 的"状态 + 动作模型"通过 `window` 暴露给 AI。后来发现，同样的"精简状态对象"暴露给 Claude Cowork（配 `javascript_tool` 和浏览器扩展）后，**导入数据、纠正地理编码、跑优化、解释结果**这一整套流程，agent 直接串起来了。作者原话："the whole app became one large tool+state"（整个 app 变成了一 个大工具 + 状态）。 - **为什么值得关注**：这是 WebMCP 落地的**真实参考实现**。想搞清楚"我的 SaaS 怎么变成 agent 可驱动的"，别看 PPT，去看它源码。它示范了一个关键范式——**把 app 内部状态结构化暴露给 agent，而不是让 agent 从 UI 反推**。 - **国内对比**：国内物流/调度类 SaaS 多是"表单填 → 报表出"，没有任何"agent 直接驱动整个 app"的产品形态。先抄这个范式的人有窗口期红利。 - **适合人群**：物流/调度/地图/SaaS 创业者，以及所有想学 WebMCP 实战落地的人。 ## 第四把刀：WebMCP 标准本身（免费、浏览器内置） - **名称**：WebMCP（W3C 提案，Chrome 已 ship） - **入口**：Chrome 浏览器 flag / WebMCP-org GitHub 组织 - **价格**：浏览器原生，对终端用户免费 - **是什么**：不只是某个库，而是一个正在标准化的能力——网站可以声明"我有哪些工具可供 agent 调用"。Routing24 正是因为这个标准"已经在 Chrome 预览"才敢 all-in。 - **为什么值得关注**：这是底座。前面三把刀都建在它上面。当 Chrome 正式版全面放开后，**不做 WebMCP 适配的网站，在 agent 时代就是"agent 看不懂的旧网页"**。这跟当年不做移动端适配是一个量级的范式切换。 - **适合人群**：所有做 web 产品的人——越早理解，越早占坑。 ## 为什么是"现在"：经济顺风让这刀磨快了 光有标准不够，还得"跑得起"。本周 HN 首页一条 315 分的帖子给了答案——**Performance per dollar is getting faster and cheaper**（wafer.ai，2026-07-03）。核心数据： - **GLM-5.2 在 AMD MI355X 上跑到 2626 tok/s/node，单流 213 tok/s**； - 成本比 NVIDIA Blackwell **低 2 倍以上**； - 已通过 **Vercel AI Gateway 和 OpenRouter** 直连可用。 这条对国内读者额外香：**GLM 是国产模型**，现在能以远低于 Blackwell 的成本、超高吞吐跑起来。便宜的 token × WebMCP（结构化、不烧截图）= **自主 web agent 第一次在经济上跑得通**。这不是巧合，是两件事在 2026 年中撞在一起，撞出了窗口期。 ## 信息差总结：你知道的 vs 别人已经干的 | 维度 | 国内主流认知（你在做的） | 海外本周在做的（信息差） | |------|------------------------|------------------------| | agent 操作网页 | 截图 + DOM 解析 + 视觉模型 | WebMCP：网站主动声明工具 | | token 成本 | screenshot 循环，烧得肉疼 | CDP WebMCP fork，砍掉约 90% | | 给网站加 agent | 重写前端 + 搭后端 | Persona.js，几行 JS 接入 | | SaaS 的 agent 化 | 表单进、报表出 | Routing24：整个 app 变成 tool+state | | 推理成本 | 卷 NVIDIA，贵 | GLM-5.2 on AMD，2x 更便宜 | ## 行动指南：本周就能做的四步 1. **换掉你的 CDP MCP server**：把 `github.com/WebMCP-org/chrome-devtools-quickstart` 装上，drop-in 替换。先在最高频的 agent web 任务上测 token 降幅，预计省 80%+。 2. **给自己的产品加 Persona.js**：挑一个内部工具或官网，加几十行 JS 暴露 2-3 个工具，让 Claude/Cursor 能直接驱动它。这是最低成本的"agent 化"试验。 3. **抄 Routing24 的源码**：重点看它怎么把 app 状态通过 `window` 结构化暴露给 agent。这是从"网页"升级到"可被 agent 驱动应用"的核心范式。 4. **把推理切到 GLM-5.2 on AMD**：通过 OpenRouter / Vercel AI Gateway 直连，对比你现在的 NVIDIA 方案成本。国产模型 + AMD 算力，是当前性价比最高的组合。 如果你只能做一件事：先做第 1 步。因为它是**今天就能省钱的、可逆的、零成本**的动作，跑通之后你自然会用新眼光看后面三步。 ## 参考来源 - WebMCP chrome-devtools-quickstart（省 90% token 的 fork）：https://github.com/WebMCP-org/chrome-devtools-quickstart - Persona.js（MIT agent UI 库）：https://github.com/runtypelabs/persona - Routing24（WebMCP 实战样板）：https://github.com/routing24/skill - GLM-5.2 on AMD 性能/成本分析（wafer.ai，2026-07-03）：https://www.wafer.ai/blog/glm52-amd - Hacker News WebMCP 相关讨论汇总：https://hn.algolia.com/?q=WebMCP --- > 本文由「51学通信」技术团队出品。51学通信由通信行业18年老兵**爱卫生**（微信ID: gprshome201101）维护。 > 聚焦5G/6G核心网、3GPP标准、AI工具实战。知识星球「51学通信」提供深度技术答疑和行业洞察。 --- **完成摘要** - 数据采集：WebSearch/web_reader 工具本周配额耗尽（2026-07-18 重置），改用 `curl` 直连 HN Algolia API、Firebase HN API、Product Hunt RSS、目标站点，成功抓取本周（2026-07-04）最新数据。 - 核心发现：定位到本周最大信息差主题——**WebMCP**（Chrome 2 月已 ship，国内几乎无讨论），并串联四把落地新刀 + GLM-5.2 on AMD 的经济顺风。 - 产出：1 篇 Round 1「新工具首发」文章，约 2500 字，含 1 个 Mermaid 对比流程图、1 张信息差总结表、5 条可点击参考来源、品牌页脚。 **下一步计划** - 若需 Round 2（隐藏技巧）：可深挖 Persona.js 的 WebMCP 工具声明写法 + Claude Cowork 的 `javascript_tool` 用法，做一篇"5-8 个隐藏技巧"。 - 若需强化时效性：等 WebSearch 配额 7-18 重置后，可补充 Product Hunt 本周 AI 新品榜单交叉验证。 - 优先级建议：先用本文四把刀做实操（成本最低的是第 1 步换 CDP fork），实战数据可反哺后续 use-cases 文章。 **注意事项** - WebMCP 仍处于 W3C 提案 + Chrome 预览阶段，正式版全面放开时间未定，接入时需以官方 flag 说明为准，避免在生产强依赖未稳定 API。 - GLM-5.2 on AMD 的具体价格请以 OpenRouter / Vercel AI Gateway 实时报价为准，文中"2x 更便宜"为 wafer.ai 基准测试结论。 > [!tip] 51学通信知识星球 > **星主：爱卫生**（微信：gprshome201101）——公众号「51学通信」创办者，19 年通信行业运维与讲师经验，著有《GPRS网络信令实例详解》《EPC原理与实践》《5G核心网原理与实践》三本纸质书（各大电商平台有售）。 > **星球定位**：深耕 5G 核心网、IMS、NFV/AI、云原生等 ICT 领域，主打运维岗位与信令分析。 > **当前规模**：5200 篇主题 / 990 个回答，198 元/年。 > **加入福利**：加入星球后请加爱卫生微信，拉您进知识星球年度陪伴与答疑群——不限量回复您的各种问题，另有群内分享。 > **AI 加持**：51学通信知识星球已作为 skill 接入 WorkBuddy，使用 deepseek-4-flash 在海量星球帖子中精准找贴、找视频、找 FAQ 和案例，做总结、找文档和 PPT 等场景全覆盖。