WebMCP：让每个网站变成 AI Agent 的工具箱

2026-02-25 | 官网 | GitHub | Chrome 博客 | PH #16, 92 票

30秒快速判断

这玩意儿干嘛的：WebMCP 是一个 W3C 标准草案，让网站可以用 JavaScript 把自己的功能注册成"工具"，AI Agent 直接调用这些工具，不用再截图猜按钮在哪。说白了，网站从"给人看"变成了"给 AI 用"。

值不值得关注：非常值得。这不是一个普通的开源项目，而是 Google Chrome + Microsoft Edge 联合推动的 W3C 标准。Chrome 146 已经有实验性支持。如果你是 Web 开发者或做 AI Agent 产品，这是未来 2-3 年最重要的浏览器 API 之一。

与我有关三问

与我有关吗？

目标用户是谁：

• Web 开发者（想让自己的网站被 AI 用起来）
• AI Agent 开发者（想让 Agent 可靠地操作网页）
• 企业 IT 团队（想自动化内部 Web 系统）

我是吗：如果你正在做以下任何一件事，你就是目标用户：

• 开发面向用户的 Web 应用
• 做 AI 浏览器自动化（Playwright/Puppeteer/Selenium）
• 建设 AI Agent 产品
• 做 SEO/GEO（生成式引擎优化）

什么场景会用到：

• 电商网站想让 AI 代客户搜商品、加购物车 -> 注册 WebMCP 工具
• 客服系统想让 AI 自动查单、提交工单 -> 用 WebMCP 暴露结构化接口
• 你的 SaaS 想被 Claude/ChatGPT 的 Agent 直接调用 -> WebMCP 就是你的入口
• 做内容站想被 AI Agent 发现和引用 -> WebMCP 比 llms.txt 更进一步

对我有用吗？

ROI 判断：如果你的 Web 应用未来需要被 AI Agent 调用（大概率是的），现在花 2 小时学会 WebMCP 是非常值的投资。标准还在早期，先学先受益。

喜闻乐见吗？

爽点在哪：

• 极简 API：一个 navigator.modelContext.registerTool() 搞定，不需要部署服务器、不需要 API key
• 声明式更简单：给 HTML form 加个 toolname 属性就行，连 JS 都不用写
• 安全模型合理：浏览器当代理，敏感操作需要用户确认，不是"把钥匙交给 AI"

"哇"的瞬间：

"我在 WebMCP 发布 19 天后就把它加到了我的博客里。这是代码：90 分钟，3 个文件，1 个 npm 包。" — @chudi_nnorukam, DEV Community

用户真实评价：

正面："WebMCP 之于 AI Agent，就像 RSS 之于订阅器。" — 开发者社区, DEV Community 正面："可能是自 JavaScript 引入以来最重要的浏览器功能" — Medium 吐槽："WebMCP 在三方面都失败了——不简单、无显性回报、维护负担重" — DEV Community 反对派 理性："当前 AI 和 Web 的关系是掠夺式的、浪费的、充满错误的" — Christian Heilmann, 个人博客

给独立开发者

技术栈

• 前端 API：navigator.modelContext 浏览器原生接口
• 声明式：HTML form 加 toolname、tooldescription 属性
• 命令式：navigator.modelContext.registerTool() JavaScript API
• Polyfill：@mcp-b/global（不支持原生时用）
• React：@mcp-b/react-webmcp hooks
• TypeScript SDK：@mcp-b/webmcp-ts-sdk
• 浏览器要求：Chrome 146 Canary + flag 开启

核心功能实现

WebMCP 的核心思路很直白：网站通过 JavaScript 注册一组"工具"，每个工具有名字、描述、输入 Schema 和处理函数。AI Agent 到达这个页面后，通过 navigator.modelContext 发现可用工具，根据用户意图选择工具，传入结构化参数，拿到结构化结果。全程不碰 DOM、不截图、不猜。

navigator.modelContext.registerTool({
  name: "searchProducts",
  description: "搜索商品目录",
  inputSchema: {
    type: "object",
    properties: {
      query: { type: "string", description: "搜索关键词" },
      category: { type: "string", description: "商品分类" }
    }
  },
  execute: async (params) => {
    const results = await productAPI.search(params.query, params.category);
    return { content: [{ type: "text", text: JSON.stringify(results) }] };
  }
});

关键设计决策：工具绑定页面生命周期。用户打开页面，工具注册；离开页面，工具注销。没有全局持久注册表。

开源情况

• 完全开源：W3C 标准草案，1.1k stars，57 forks
• MCP-B 扩展：Chrome 扩展不再开源（旧版代码仍可参考）
• 类似开源项目：jasonjmcghee/WebMCP（早期独立实现）、awesome-webmcp 资源列表
• 自己做难度：低。如果只是给自己的网站加 WebMCP 支持，1-2 小时。如果要从零实现整个协议栈，那是 Google/Microsoft 级别的工程

商业模式

这不是一个商业产品，而是一个开放标准。没有定价、没有 API key、没有订阅。开发者零成本接入，用户自带 AI 模型。

但围绕这个标准的商业机会是存在的：

• MCP-B Chrome 扩展 -> 可能走 freemium 模式
• WebMCP 咨询/集成服务
• 基于 WebMCP 的 AI Agent 产品

巨头风险

有意思的是，这个项目本身就是巨头（Google + Microsoft）推的。所以不存在"被巨头做掉"的风险，反而是巨头在推动标准化。真正的风险在于：

1. 标准之争：如果 Apple/Safari 长期不支持，可能导致碎片化
2. 后端 MCP 更成熟：Anthropic 的 MCP 已经广泛采用，WebMCP 的客户端方案能否获得同等关注度？
3. 需求验证：网站是否真的愿意花精力维护工具契约？鸡生蛋问题

给产品经理

痛点分析

• 解决什么问题：AI Agent 和网页交互的方式太原始了 —— 截图、OCR、猜按钮位置。慢、脆弱、一改版就挂
• 痛点有多痛：高频刚需。每次网站改版，所有基于视觉的 Agent 都要重新适配。Token 消耗是结构化方式的 20-100 倍
• 量化数据：计算开销减少 67%，准确率 98%，Token 消耗减少 95%+

用户画像

• 画像 1：Web 开发者，想让自己的 SaaS/网站能被 AI Agent 调用
• 画像 2：AI Agent 开发者/公司，苦于 Playwright 等方案的脆弱性
• 画像 3：企业 IT，想自动化内部 Web 应用的操作流程

功能拆解

竞品差异

可借鉴的点

1. 声明式 + 命令式双模式：简单场景用 HTML 属性，复杂场景用 JS，降低门槛同时保持灵活性
2. 安全模型设计：浏览器做代理，用户始终在 loop 中，值得所有 Agent 产品学习
3. 标准化先行：先推 W3C 标准，再做实现，保证生态一致性
4. "AI Agent 交互的 USB-C"：用一个接口统一所有 Agent 与网页的交互

给科技博主

创始人故事

WebMCP 的故事有三条线汇成一条河：

Alex Nahas —— 前 Amazon 后端工程师。2025 年 MCP 火了之后，他发现 Amazon 内部每个服务都需要单独的 MCP server，认证管理是噩梦。于是他做了 MCP-B，一个把浏览器变成 MCP server 的 Chrome 扩展。

与此同时，Google Chrome 团队在做一个叫 "Script Tools" 的原型，Microsoft Edge 团队也在研究同一个问题：怎么让 Agent 结构化地和 Web 应用交互？

三方在 W3C 碰面后一拍即合，合并成了 WebMCP 标准。正式的规范作者包括 Google 的 David Bokan、Khushal Sagar、Hannah Van Opstal 和 Microsoft 的 Brandon Walderman、Leo Lee、Andrew Nolan。

Khushal Sagar（Google Chrome 团队 Staff 工程师）把 WebMCP 比作 "AI Agent 交互的 USB-C"。

争议点/讨论角度

1. "假经济"之辩：反对派认为 WebMCP 要求每个网站维护工具契约，成本高于收益。不如让 AI 更聪明地读现有 HTML/ARIA/Schema.org。这个角度可以写一篇很好的辩论文
2. Google 的野心：有人认为这是 Google 在 AI Agent 时代抢占"浏览器即平台"话语权的策略。控制了标准就控制了 Agent 生态
3. 开发者的 SEO 焦虑：就像移动端改变了 UX，WebMCP 可能催生 "AEO"（Agent Engine Optimization），让网站争相讨好 AI Agent
4. 隐私争议：Agent 代你操作 = 把你的行为数据交给 AI 模型提供商

热度数据

• PH 排名：#16，92 票（中等热度，说明还在早期）
• GitHub：1.1k stars（两周内，对标准草案来说很快）
• 媒体覆盖：VentureBeat、InfoWorld、MarkTechPost、SearchEngineLand 等主流科技媒体均报道
• 开发者社区：DEV.to 上多篇深度分析，正反观点都有

内容建议

• 适合写的角度："WebMCP 是 Web 3.0 的真正入口？" / "你的网站准备好被 AI 用了吗？"
• 蹭热点机会：标准还在草案阶段，Chrome stable 正式支持时（预计 2026 年中）会有第二波热度
• 差异化角度：从中国开发者/中文互联网视角分析 WebMCP 的落地可能性 —— 国内浏览器基本都是 Chromium 内核，技术上可以跟进

给早期采用者

定价分析

这是一个开放标准，不存在付费层级。

上手指南

• 上手时间：90 分钟（有 Web 开发经验的话）
• 学习曲线：低（如果你会写 JS，几乎零学习成本）
• 步骤：
  1. 下载 Chrome Canary 146+
  2. 打开 chrome://flags，启用 "WebMCP for testing"
  3. 在你的网页中用 navigator.modelContext.registerTool() 注册工具
  4. 或者更简单：给 <form> 加上 toolname 和 tooldescription 属性
  5. 用 MCP-B 扩展或任何支持 WebMCP 的 Agent 测试

坑和吐槽

1. 浏览器支持极其有限：目前只有 Chrome Canary 146+ 支持，stable 版预计 2026 年中。Safari 和 Firefox 说 2026 年底到 2027 年初，但没有承诺
2. 没有 DevTools：调试只能靠 console.log 和 Application 标签页，没有专用面板
3. 规范可能变：这还是草案，API 表面在正式标准化前可能改动
4. SPA 要重构：如果你的 React/Vue 应用逻辑紧耦合在组件 state 里，需要先抽出业务逻辑层才能暴露给 WebMCP
5. 工具发现问题：Agent 必须先访问页面才能知道有什么工具。没有全局目录（.well-known/webmcp 还在讨论）

安全和隐私

• 数据存储：完全客户端，零外部 API 调用（经网络监控确认）
• 安全模型：同源策略（Same-Origin Policy），CSP 合规，仅 HTTPS
• 隐私保护：权限优先设计，敏感操作需用户确认
• 已知风险：提示词注入（Prompt injection）、工具投毒、数据泄露等 安全问题文档

替代方案

给投资人

市场分析

• AI Agent 赛道：$7.6B (2025) -> $50-183B (2030-2033)，CAGR 38-50%
• AI 浏览器市场：$4.5B (2024) -> $76.8B (2034)，CAGR 32.8%
• 自动化测试：$24B (2026) -> $84B (2034)
• 驱动因素：AI Agent 从"Demo"走向"生产"，需要可靠的 Web 交互方式

竞争格局

Timing 分析

• 为什么是现在：2025 年 MCP 协议证明了"标准化 Agent-Tool 交互"的价值 -> 2026 年自然延伸到浏览器端
• 技术成熟度：Chrome 有实验性实现，polyfill 可用，但离生产还有半年
• 市场准备度：88% 企业已使用 AI，62% 在实验 AI Agent。需求端成熟，供给端（标准）刚起步

团队背景

这不是创业公司，而是互联网两大巨头的联合项目：

• Google Chrome 团队：Khushal Sagar (Staff SWE)、David Bokan、Hannah Van Opstal
• Microsoft Edge 团队：Brandon Walderman、Leo Lee、Andrew Nolan
• 独立贡献者：Alex Nahas（MCP-B 创始人，前 Amazon）
• 组织：W3C Web Machine Learning Community Group

融资情况

不适用。WebMCP 是开放标准，不是商业实体。但围绕标准的生态（工具、服务、Agent 产品）存在大量创业和投资机会。

结论

WebMCP 是 AI Agent 与 Web 交互的"正确答案"的第一次正式尝试。

它不是一个产品，而是一个标准 —— 这既是它的优势（Google+Microsoft 背书，生态潜力巨大），也是它的弱点（落地慢、鸡生蛋问题、规范可能变）。对于 Web 开发者来说，现在了解和实验 WebMCP 就像 2007 年学 iPhone 开发 —— 不确定性高，但方向大概率是对的。

资源链接

2026-02-25 | Trend-Tracker v7.3