跳到正文

让你的网站​
智能体就绪

在我们的基准测试中,使用 WebMCP 的智能体最多少用 62× 的 token(最佳案例:Notion,GPT-6 Luna)。看看智能体能从你的网站拿到什么,然后一行代码搞定。

没有网站,只用智能体? 配置你的智能体

8,500+ 个网站已经用上 WebMCP

点击任意一个,实时扫描。

数量:webmcp.com 目录中的在线网站(2026-11-05)。更严格的 Known Good 索引 实际运行了这些页面,确认有 541 个网站注册了工具(2026-11-04)。Logo 于 2026-11-07 经扫描器核验;Logo 归各自所有者所有,与本项目无关联。

WebMCP 是什么?

WebMCP 正在成为​面向 AI 智能体的 Web 标准。我们全力投入

Google 和 Microsoft 的工程师正在 W3C(制定 Web 标准的组织)起草它,Chrome 和 Edge 已经在测试。如今,Claude Code、Codex 以及其他所有智能体使用你的网站,就像在看一张截图:看一看,猜该点哪个按钮,不行再试。又慢又贵,还容易出错。有了 WebMCP,你的网站会直接告诉智能体它们能做什么,比如搜索、读取或加入购物车,智能体只需开口请求。我们相信每个网站都会支持 WebMCP,所以做了 webmcpx,让你的网站今天就能做到。

来源 Online-Mind2Web:智能体在约 4 成真实任务中失败 一次页面快照要花 12k 到 77k token WindTunnel:工具调用与点击操作的耗时对比 WebMCP 草案,W3C Web Machine Learning CG(编辑来自 Google 和 Microsoft) 实现状态(Chrome 与 Edge 源试用) Chrome:WebMCP 源试用 Chrome Platform Status Microsoft Edge:WebMCP 源试用 Microsoft Edge 说明文档 我们的基准测试方法

  1. 页面注册工具

    名称、描述、输入 schema 和一个函数:就是你的按钮已经在执行的那些操作。

  2. 浏览器列出工具

    智能体询问浏览器这个页面能做什么,输入带类型,还附有“只读”等提示。

  3. 智能体调用工具

    就在用户自己的标签页里,沿用用户的会话:无需新服务器,也无需 OAuth。

page.js
document.modelContext.registerTool({
  name: "search_products",
  description: "Search the catalog by keyword.",
  inputSchema: { type: "object", properties: { query: { type: "string" } } },
  annotations: { readOnlyHint: true },
  async execute({ query }) {
    // Expected failures are answers, never rejections: hosts drop rejection reasons.
    try { return JSON.stringify(await searchCatalog(query)); }
    catch { return JSON.stringify({ error: "Catalog unavailable, try again shortly." }); }
  }
});
webmcpx

一个独立的开源社区项目,与 W3C 和任何浏览器厂商都没有关联。我们做 webmcpx,是为了让 WebMCP 今天就有用:网站无需自己编写就能拥有好工具,智能体用更少的 token 得到同样的答案,我们发布的每个数字都可以复现。

今天就用 webmcpx,​用在网站上,​也用在智能体里

今天让 WebMCP 难以进入大多数网站的问题,都已解决:网站上加一行代码,智能体里运行一条命令,其余都不用操心。

手写 WebMCP 与 webmcpx 对比
浏览器支持手写 WebMCP:只有 Chrome 和 Edge,而且要开 flag 或加入 origin trial。Firefox 和 Safari:暂无。 用 webmcpx:缺少 WebMCP 时加载 W3C 官方 polyfill:你的工具今天就能在 Chrome、Firefox 和 Safari 中使用。
每个页面都有工具手写 WebMCP:你要逐页设计、逐个编写。 用 webmcpx:一个 script 标签,每个页面都有搜索、读取和页面上下文工具。无需写代码。
你自己的操作手写 WebMCP:schema、注解和错误处理,每个都要手写。 用 webmcpx:一次 tool() 调用、一个 React、Vue 或 Svelte 的 hook,或者直接用你现有的表单。
接入 Claude Code、Codex、Cursor手写 WebMCP:自己搭桥接,或者等每个智能体分别支持。 用 webmcpx:npx webmcpx mcp:每个页面的工具,外加任何网站上的标准工具,即使网站没装 webmcpx。
规范变更手写 WebMCP:跟进草案的每次变更,再重写你的工具。 用 webmcpx:我们跟踪 W3C 草案并随之更新:你只需升级一个包。
做对细节手写 WebMCP:结果结构、错误码、输出预算、分页、注解:全靠你自己做对。 用 webmcpx:默认就正确:统一的结果结构、智能体能据此处理的错误码、输出预算、分页和正确的注解。
对智能体安全手写 WebMCP:工具描述或页面文本中的隐藏指令和不可见字符:容易漏看,也容易被利用。 用 webmcpx:标准工具只读,隐藏文本不纳入,不可见字符会被去除,linter 还会标出你工具中的隐藏指令。
测试手写 WebMCP:打开 Chrome flag,打开 DevTools,然后祈祷。 用 webmcpx:npx webmcpx tools localhost:3000 在任何浏览器中列出你的工具,无需 flag;扫描器可检查任何线上 URL。
值不值得的证据手写 WebMCP:全凭猜测。 用 webmcpx:WebMCP 与读取页面对比的公开基准测试:同样的答案,token 最多少用 62×(最佳案例:Notion,GPT-6 Luna)。一条命令即可复现。
成本手写 WebMCP:你的时间,每个页面、每次变更都要花。 用 webmcpx:免费开源(MIT),加载时约 2.7 KB,无需账号,无需服务器。

排行榜

WebMCP 能省多少,逐个模型对比

一个智能体靠页面快照来读、点、填;另一个调用网站的 WebMCP 工具。选一个模型看看,节省最多的排在最前。

按使用 WebMCP 的成功率排序,相同时按每次运行成本排序。

精选案例:30 个问题中的 19 个,即 WebMCP 的 token 用量不超过一半的问题。全部结果均已公开,你也可以用 just bench 自己跑一遍。

GPT-6 Luna(OpenAI)

Notion

“我在通过 API 往 Notion 页面写长段落。一次请求中,单个 rich text 对象的文本内容最多能有多少个字符?”

developers.notion.com (打开 Notion)

62×

token 更少

65k → 1.0k token

Token(按问题统计,每次运行的 token 数):越低越好。另附各组成功率。
问题不用 WebMCP:token用 WebMCP:token不用 WebMCP:解决情况用 WebMCP:解决情况
Notion:我在通过 API 往 Notion 页面写长段落。一次请求中,单个 rich text 对象的文本内容最多能有多少个字符?65k1.0k100%100%
Notion:我在分页读取 Notion API 的结果。列表类接口每次调用最多能请求多大的 page_size?54k1.1k100%100%
Notion:在 Business 和 Enterprise 以外的套餐中,Notion API 每个连接每分钟允许多少个请求?39k1.1k100%100%
Notion:我的 Notion 集成发送请求过多时,API 会在响应体里返回哪个错误码字符串?21k1.0k100%100%

给你的智能体

你的智能体在用最费钱的方式读每个页面。不如把页面的工具交给它:在我们测量的网站上,答案相同,token 只需一小部分。适用于任何网站,是每个 Claude Code 和 Codex 环境都该装的 MCP。

最多 62× 更少 token

最佳案例:Notion,GPT-6 Luna

答案相同。 排行榜全部 6 个模型,token 减少 2.7× 到 6.0×。

按完整运行统计:每个模型的 30 个问题中,有 1–6 个 WebMCP 用的 token 更多。

适用于任何智能体和浏览器

  • Claude Code
  • Codex
  • Cursor
  • GitHub Copilot
  • Windsurf
  • Gemini CLI
  • Zed
  • JetBrains
  • Cline
  • Chrome
  • Firefox
  • Safari
  • Brave
  • Arc
  • Opera
  • Vivaldi
  • Playwright
  • Selenium
  • Puppeteer
  • Cypress
  • WebdriverIO
提示词
在你处理的每个网页上,先用 WebMCP,再去读取或点击任何内容:无论是在你自己的浏览器里,还是在你编写或运行的任何脚本里(Playwright、Selenium、Puppeteer、browser-use、CDP),即使你原生支持 WebMCP 也一样。用 webmcpx 完成配置(阅读 https://webmcpx.dev/llms.txt),并把这条规则加入你的智能体指令(AGENTS.md、CLAUDE.md 或同类文件),让它对以后的每个任务都生效。然后证明它可用:打开 https://webmcpx.dev,列出它的 WebMCP 工具,并调用其中一个。

一个提示词:智能体自行配置,处处先用 WebMCP,并在 webmcpx.dev 上验证。

给你的网站

AI 智能体已经在读你的页面了。分两步给它们真正的工具:让你的编程智能体(Claude Code、Codex、Cursor)来做,或手动完成。

标准工具:一行

每个页面都有搜索、读取和页面上下文。无需代码。

加载约 2.7 KB · Rust + WebAssembly · MIT 许可证

提示词
用 webmcpx 给这个网站加上 WebMCP:运行 `npx skills add webmcpx/webmcpx -y`,按照该 skill 操作,然后用 `npx webmcpx tools <local URL>` 检查工具。
index.html
<script type="module" src="https://cdn.jsdelivr.net/npm/webmcpx@0.2/dist/auto.js"></script>

粘贴到 </body> 之前。浏览器没有 WebMCP 时,它会补上 W3C polyfill。

app.js
// npm i webmcpx
import "webmcpx/polyfill"; // WebMCP where the browser lacks it
import { register } from "webmcpx";

register(); // the standard tools; tool() adds your own

你网站自己的操作

加入购物车、预订、搜索目录:把按钮已经调用的函数,变成智能体可以直接调用的工具。

提示词
阅读 https://webmcpx.dev/llms.txt,然后查看这个项目,建议在这里对 AI 智能体有用的 WebMCP 工具。先问我要加哪些,再用 webmcpx 加上。

你的智能体会读懂 webmcpx 做什么,在项目里找出值得开放的操作,问你要加哪些,然后添加并检查。

Cart.jsx
import { useTool } from "webmcpx/react";

function Cart({ cart }) {
  useTool({
    name: "add_to_cart",
    description: "Add a product to the cart by SKU.",
    input: { sku: "string", "qty?": "integer" },
    acts: true,
    run: ({ sku, qty = 1 }) => cart.add(sku, qty),
  });
  return <CartView cart={cart} />;
}

组件挂载期间注册,卸载时自动移除。

Cart.vue
<script setup>
import { useTool } from "webmcpx/vue";

useTool({
  name: "add_to_cart",
  description: "Add a product to the cart by SKU.",
  input: { sku: "string", "qty?": "integer" },
  acts: true,
  run: ({ sku, qty = 1 }) => cart.add(sku, qty),
});
</script>

组件挂载期间注册,卸载时自动移除。

Cart.svelte
<script>
  import { useTool } from "webmcpx/svelte";

  useTool({
    name: "add_to_cart",
    description: "Add a product to the cart by SKU.",
    input: { sku: "string", "qty?": "integer" },
    acts: true,
    run: ({ sku, qty = 1 }) => cart.add(sku, qty),
  });
</script>

组件挂载期间注册,卸载时自动移除。

app.js
import { tool } from "webmcpx";

tool({
  name: "add_to_cart",
  description: "Add a product to the cart by SKU.",
  input: { sku: "string", "qty?": "integer" },
  acts: true,
  run: ({ sku, qty = 1 }) => cart.add(sku, qty),
});

通过 npm,或从与脚本标签相同的 CDN 导入。

index.html
<form toolname="add_to_cart" tooldescription="Add a product to the cart by SKU." action="/cart" method="post" toolautosubmit>
  <input name="sku" required toolparamdescription="Product SKU, e.g. MUG-01">
  <input name="qty" type="number" min="1" toolparamdescription="How many (default 1)">
  <button>Add to cart</button>
</form>

无需 JavaScript:WebMCP 的声明式 API。浏览器还不支持时,脚本标签会补上。

WebMCP 与 MCP

WebMCP 与 MCP 有何不同,为什么两者都需要

WebMCP 借鉴了 MCP 的工具模型,但它是浏览器 API,不是 MCP 协议。两者互为补充。

WebMCP 与 MCP 对比
维度WebMCPMCP
工具在哪运行 在页面的 JavaScript 里,在用户的标签页中。 在服务器进程里,本地(stdio)或远程。
智能体如何调用 浏览器 API document.modelContext,每次调用都经由浏览器居中处理。不用 JSON-RPC。 基于 stdio 或 Streamable HTTP 的 JSON-RPC 2.0。
你要运行什么 你现有的前端,无需新服务器。 一个由你托管和运维的 MCP 服务器。
鉴权 沿用用户已登录的会话,无需签发 token。 远程服务器使用基于 OAuth 的授权。
发现 打开页面即可发现;访问之前无从查找。 已知端点上的 tools/list,以及公开的注册表。
生命周期 页面开着多久,就存在多久。 常驻运行,不需要浏览器。
用户 在场,与智能体在同一个页面上。 可有可无:能以无头方式运行。
覆盖范围 只有工具,带输入和输出 schema。 工具、资源和提示词,外加征询(elicitation)和扩展。
工具提示 readOnlyHint、consequentialHint、untrustedContentHint。默认同源。 readOnlyHint、destructiveHint、idempotentHint、openWorldHint。
状态 W3C 社区组草案。ChatGPT 桌面版和 Codex 可调用;Chrome:源试用。 Linux 基金会旗下项目,公开服务器超过 10,000 个。

两者并用

MCP 服务于从不打开你网站的智能体;WebMCP 服务于在你的标签页里、和用户并肩工作的智能体。两者可以跑在同一个后端上:Shopify 已经这么做了。

来源 WebMCP 草案 WebMCP 说明文档 MCP 规范 Shopify 两者并用

FAQ

关于 WebMCP 的常见问题

  • 什么是 WebMCP?

    一种浏览器 API,由 W3C Web Machine Learning 社区组起草:页面用 document.modelContext.registerTool() 注册工具,AI 智能体直接调用这些工具,不必再读截图或页面 HTML。工具在用户自己的标签页中运行。

  • 怎样在 Claude Code 或 Codex 中使用 WebMCP?

    运行 claude mcp add webmcpx -- npx -y webmcpx mcp(Codex 用 codex mcp add webmcpx -- npx -y webmcpx mcp)。之后智能体会在自己的 Chromium 中打开页面,在任何网站上都能拿到每个页面的 WebMCP 工具和标准工具。

  • 怎样让我的网站智能体就绪?

    加上 webmcpx 的 script 标签:每个页面都会获得标准工具(搜索、读取、页面上下文),无需再写其他代码。然后用 tool() 注册你自己的操作,比如搜索或加入购物车。在这里扫描你的网站,就能检查效果。

  • 能在 Firefox 和 Safari 中用吗?

    能。浏览器本身没有 WebMCP 时,webmcpx 会在 HTTPS 页面上加载 W3C 的 WebMCP polyfill。Chrome、Firefox 和 Safari 看到的都是同一套工具。

  • WebMCP 是 W3C 标准吗?

    还不是。它是 W3C Web Machine Learning 社区组的草案(2026 年 11 月 2 日)。Chrome 和 Edge 以 origin trial 形式提供,Mozilla 持中立态度,WebKit 提出了异议。webmcpx 跟踪草案并加载 W3C 的 polyfill,所以你的工具现在就能用,并随规范一起演进。

  • 让智能体调用我网站的工具安全吗?

    工具在用户自己的标签页中运行,使用用户自己的权限,做不了页面本来就做不了的事。webmcpx 的标准工具只读取页面显示的内容,并去除不可见字符。给会改动内容的自有工具标注 consequentialHint,智能体就能先征询用户;再让 linter 标出工具描述中的隐藏指令。

  • WebMCP 和 MCP 是一回事吗?

    不是。WebMCP 借用了 MCP 的工具模型,但它是浏览器 API,不是 MCP 协议:工具存在于页面中,在用户的标签页里运行。两者互为补充,webmcpx 的 MCP 服务器把它们连接起来。