Cloudflare Blog
精选
79AI 编辑部评分,满分 100

Cloudflare 推出 WebMCP 开发者预览版,一键为任意网站添加智能体接口

2026-08-06 21:00· 1小时前· Will Rowe
AI 导读

Cloudflare 推出 WebMCP 开发者预览版,用户只需在 Dashboard 开启开关,无需改动代码即可为网站添加浏览器智能体工具接口。该实现基于 Chrome 146 实验性标准,通过边缘注入和桥接脚本将工具注册到 document.modelContext,所有工具均在访客浏览器内运行。

推荐理由

将 WebMCP 实现从需要手写代码简化为一个开关,任何 Cloudflare 站点都能零改造为浏览器代理暴露结构化工具,影响网站如何被 AI 代理交互。

正文 · AI 翻译

今天,我们在 Cloudflare 上推出了 WebMCP 的开发者预览版。开启它,浏览器智能体就能开始与你的网站协作,无需编写任何代码,也无需改动你的源站。Cloudflare 会向你的页面添加一个轻量桥接层,为访问者的智能体注册一组可供其使用的工具。

互联网的构建基于这样一个假设:另一端有一个人——有人来阅读页面、点击按钮、填写表单。但如今,越来越多的访问来自 AI 智能体,而互联网却是为人类打造的。以往的做法通常是爬虫,将内容复制回服务器,而且往往不会给原始网站带来任何流量,也很少给予其应有的认可。有一种更好的方式,而且它不涉及抓取。

WebMCP 是一项新的浏览器标准,已在 Chrome 146 中作为实验性功能推出,在页面中以 document.modelContext 的形式呈现。网站可以选择向浏览器中运行的智能体暴露一组工具,这意味着智能体不再需要在一张为人类构建的页面中摸索前行。这使智能体能够拥有与用户不同的浏览体验,并将 token 花在任务上,而不是花在导航上。问题在于:网站必须自己去实现它。

Cloudflare 一直在同时构建这一标准的两端。我们的远程浏览器 BrowserRun 已经添加了 WebMCP 支持,因此智能体可以发现并调用网站暴露的工具。Cloudflare Radar 很快也将提供自己的 WebMCP 工具。本次预览涉及的是另一端:一种让 Cloudflare 上的任何网站都能通过一个开关、无需任何代码即可获得这些工具的方式。

Cloudflare 上的 WebMCP 开发者预览版

手动实现 WebMCP 是一个不小的工程:设计要暴露的工具,将它们接入你的界面,并在标准演进的过程中持续维护它们。我们希望它比这更简单:只需切换一个设置即可启用工具。

BLOG-3460 2.png

这些工具以工具包的形式提供——即可以一起开启的相关工具组。它们的设计具有可扩展性:随着我们不断添加新的工具包,网站只需开启它们即可选择接入更多功能,无需重新部署。本次开发者预览版中包含两个工具包,它们都完全在浏览器中运行。

它的作用及其工作原理

我们的实现包含两个部分,两者都位于您的源站之前。它们都不会触及您网站的代码,并且无论您的网站是静态站点还是单页应用,两者的工作方式都完全相同。

首先,在边缘节点进行注入。当您的网站在 Cloudflare 控制台中启用了 WebMCP 后,我们会使用 HTMLRewriter 向每个 HTML 响应中添加一行:一个对我们同时提供的小型桥接脚本的简短引用。该标签及其加载的脚本都来自边缘节点,且同源,因此页面的其他任何内容都不会改变:

<!-- Cloudflare injects this at the edge. Same origin, and your HTML is otherwise untouched. -->
<script type="module"
        src="/.webmcp/bridge.js"
        data-packs="c2pa,mcp-server-client"
        data-mcp-url="/mcp"></script>

data-packs 属性是要激活的包列表。如果您已有 Model Context Protocol(MCP)服务器,data-mcp-url 则指向您自己的 MCP 服务器(默认指向同源的 /mcp)。

其次,是桥接脚本。它在页面中运行并查找 WebMCP 界面。如果浏览器没有该界面,它会直接返回且不执行任何操作,因此页面的行为与之前完全一致。

在此基础上,桥接脚本将 data-packs 中指定的包组合成一个工具列表,并通过 .registerTool 逐一注册。一个包就是一组 MCP 工具描述符及其处理程序。静态包(如 Content Credentials)会预先声明其工具。而动态包(如 Site MCP Server 包)则会在启动时发现其工具,然后再进行注册。

在此预览版中,每个工具都完全在访客的浏览器中运行。不会往返于我们的服务器。Content Credentials 包会获取图像并在本地解析其前几 KB 的内容来源元数据。Site MCP Server 包则直接从页面与您的 MCP 服务器端点通信,基于访客的来源域并使用其现有会话。

桥接代码由运行在边缘节点的 Worker 提供。这为我们扩展该产品留下了空间——未来的包将能够调用此 Worker 来执行页面无法独立完成的任务,例如使用 Workers AI 汇总站点地图或查询 AI Search 索引。

对智能体而言,这些都是普通的 MCP 工具。我们使用模型上下文协议自身的 Tool 和 CallToolResult 类型,因此一个已经能对接 MCP 服务器的智能体,无需任何额外添加就能驱动页面。浏览器只是 MCP 运行的又一个场所。下面的示例展示了桥接如何把你自己的一个 MCP 工具,变成访问者智能体可以调用的工具。

// For each tool the site's own MCP server advertises (via tools/list),
// registering a proxy whose execute() calls the site back on the
// visitor's origin, with their session.
document.modelContext.registerTool({
  name: tool.name,                 // e.g. "search_products"
  description: tool.description,
  inputSchema: tool.inputSchema,   // taken straight from tools/list
  execute: async (args) => {
    const res = await fetch(mcpUrl, {   // same-origin /mcp
      method: "POST",
      credentials: "same-origin",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({
        jsonrpc: "2.0", id: 1, method: "tools/call",
        params: { name: tool.name, arguments: args },
      }),
    });
    const { result } = await res.json();
    return result;   // an MCP CallToolResult, passed straight through
  },
});

查看内容元数据

我们还在开发用于读取不同类型元数据的工具包。例如,C2PA 计划参与者的凭据可以通过 Content Credentials 工具包获取。scan_images_c2pa 会扫描每一张图片,并返回每张图片的简短摘要:

{
  "imageCount": 12,
  "scanned": 12,
  "withC2pa": 8,
  "results": [
    {
      "src": "https://example.com/hero.jpg",
      "hasC2pa": true,
      "format": "image/jpeg",
      "manifestCount": 1,
      "claimGenerator": "Adobe Firefly",
      "title": "sunrise over the bay",
      "signedBy": "Adobe Inc."
    },
    { "src": "https://example.com/logo.png", "hasC2pa": false, "format": "image/png" }
  ]
}

如需更仔细地查看,inspect_image_c2pa 会解码单张图片的完整清单:其编辑历史、声明的作者以及签名证书。它是一个纯 TypeScript 读取器,只触及图片前端几 KB 的元数据,而不触及图片本身。目前,它读取并报告凭据,而不是以密码学方式验证它:每个结果都带有 signatureVerified: false,这样智能体就不会把已解码的声明误认为是已核验的声明。

试用一下

开始使用 WebMCP,请前往 Cloudflare 控制台中的 Agent Readiness > Labs。在这里,你可以为某个域名开启 WebMCP,并选择要添加的工具包:Content Credentials 和 Site MCP Server 默认都是开启的,随着我们陆续发布更多工具包,它们也会出现在这里。这就是全部设置了。无需部署任何东西,也无需在你的源站做任何更改,你的站点发送的下一个 HTML 就会包含这个桥接。

要确认它已生效,请向你的站点请求任意 HTML 页面,并查找 Cloudflare 注入的那一行:

curl -s https://your-site.example | grep webmcp

你不需要自己的智能体就能看到这些工具在运行。将 Cloudflare 的远程浏览器 BrowserRun 指向你的 URL,它就会像访问者的智能体那样,发现并调用你的工具包注册的工具。这就是完整的闭环:BrowserRun 为智能体提供一个可操作的浏览器,这个预览为你的站点提供可被操作的工具,而它们通过开放标准相遇。无论浏览器是在某人的笔记本电脑上,还是在云端无头运行,这些工具的行为方式都是一样的。

我们为什么构建这个

我们的职责是助力互联网变得更好,而随着互联网的不断演变,我们需要为域名所有者提供工具,让新访客——AI 智能体——无需全面重构即可与之交互。这是迈向一个即使访客不总是人类也依然能蓬勃发展的网络的一步。

这是一个开发者预览版,我们期待你的反馈。请开启它,在你的网站上试用,并在 Cloudflare Developers Discord 或社区论坛上告诉我们你的体验。

来源:Cloudflare Blog · blog.cloudflare.com

Cloudflare 推出 WebMCP 开发者预览版,一键为任意网站添加智能体接口

Cloudflare Blog·2026-08-06 21:00·1小时前·Will Rowe
AI 导读

Cloudflare 推出 WebMCP 开发者预览版,用户只需在 Dashboard 开启开关,无需改动代码即可为网站添加浏览器智能体工具接口。该实现基于 Chrome 146 实验性标准,通过边缘注入和桥接脚本将工具注册到 document.modelContext,所有工具均在访客浏览器内运行。

正文 · AI 翻译

今天,我们在 Cloudflare 上推出了 WebMCP 的开发者预览版。开启它,浏览器智能体就能开始与你的网站协作,无需编写任何代码,也无需改动你的源站。Cloudflare 会向你的页面添加一个轻量桥接层,为访问者的智能体注册一组可供其使用的工具。

互联网的构建基于这样一个假设:另一端有一个人——有人来阅读页面、点击按钮、填写表单。但如今,越来越多的访问来自 AI 智能体,而互联网却是为人类打造的。以往的做法通常是爬虫,将内容复制回服务器,而且往往不会给原始网站带来任何流量,也很少给予其应有的认可。有一种更好的方式,而且它不涉及抓取。

WebMCP 是一项新的浏览器标准,已在 Chrome 146 中作为实验性功能推出,在页面中以 document.modelContext 的形式呈现。网站可以选择向浏览器中运行的智能体暴露一组工具,这意味着智能体不再需要在一张为人类构建的页面中摸索前行。这使智能体能够拥有与用户不同的浏览体验,并将 token 花在任务上,而不是花在导航上。问题在于:网站必须自己去实现它。

Cloudflare 一直在同时构建这一标准的两端。我们的远程浏览器 BrowserRun 已经添加了 WebMCP 支持,因此智能体可以发现并调用网站暴露的工具。Cloudflare Radar 很快也将提供自己的 WebMCP 工具。本次预览涉及的是另一端:一种让 Cloudflare 上的任何网站都能通过一个开关、无需任何代码即可获得这些工具的方式。

Cloudflare 上的 WebMCP 开发者预览版

手动实现 WebMCP 是一个不小的工程:设计要暴露的工具,将它们接入你的界面,并在标准演进的过程中持续维护它们。我们希望它比这更简单:只需切换一个设置即可启用工具。

BLOG-3460 2.png

这些工具以工具包的形式提供——即可以一起开启的相关工具组。它们的设计具有可扩展性:随着我们不断添加新的工具包,网站只需开启它们即可选择接入更多功能,无需重新部署。本次开发者预览版中包含两个工具包,它们都完全在浏览器中运行。

它的作用及其工作原理

我们的实现包含两个部分,两者都位于您的源站之前。它们都不会触及您网站的代码,并且无论您的网站是静态站点还是单页应用,两者的工作方式都完全相同。

首先,在边缘节点进行注入。当您的网站在 Cloudflare 控制台中启用了 WebMCP 后,我们会使用 HTMLRewriter 向每个 HTML 响应中添加一行:一个对我们同时提供的小型桥接脚本的简短引用。该标签及其加载的脚本都来自边缘节点,且同源,因此页面的其他任何内容都不会改变:

<!-- Cloudflare injects this at the edge. Same origin, and your HTML is otherwise untouched. -->
<script type="module"
        src="/.webmcp/bridge.js"
        data-packs="c2pa,mcp-server-client"
        data-mcp-url="/mcp"></script>

data-packs 属性是要激活的包列表。如果您已有 Model Context Protocol(MCP)服务器,data-mcp-url 则指向您自己的 MCP 服务器(默认指向同源的 /mcp)。

其次,是桥接脚本。它在页面中运行并查找 WebMCP 界面。如果浏览器没有该界面,它会直接返回且不执行任何操作,因此页面的行为与之前完全一致。

在此基础上,桥接脚本将 data-packs 中指定的包组合成一个工具列表,并通过 .registerTool 逐一注册。一个包就是一组 MCP 工具描述符及其处理程序。静态包(如 Content Credentials)会预先声明其工具。而动态包(如 Site MCP Server 包)则会在启动时发现其工具,然后再进行注册。

在此预览版中,每个工具都完全在访客的浏览器中运行。不会往返于我们的服务器。Content Credentials 包会获取图像并在本地解析其前几 KB 的内容来源元数据。Site MCP Server 包则直接从页面与您的 MCP 服务器端点通信,基于访客的来源域并使用其现有会话。

桥接代码由运行在边缘节点的 Worker 提供。这为我们扩展该产品留下了空间——未来的包将能够调用此 Worker 来执行页面无法独立完成的任务,例如使用 Workers AI 汇总站点地图或查询 AI Search 索引。

对智能体而言,这些都是普通的 MCP 工具。我们使用模型上下文协议自身的 Tool 和 CallToolResult 类型,因此一个已经能对接 MCP 服务器的智能体,无需任何额外添加就能驱动页面。浏览器只是 MCP 运行的又一个场所。下面的示例展示了桥接如何把你自己的一个 MCP 工具,变成访问者智能体可以调用的工具。

// For each tool the site's own MCP server advertises (via tools/list),
// registering a proxy whose execute() calls the site back on the
// visitor's origin, with their session.
document.modelContext.registerTool({
  name: tool.name,                 // e.g. "search_products"
  description: tool.description,
  inputSchema: tool.inputSchema,   // taken straight from tools/list
  execute: async (args) => {
    const res = await fetch(mcpUrl, {   // same-origin /mcp
      method: "POST",
      credentials: "same-origin",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({
        jsonrpc: "2.0", id: 1, method: "tools/call",
        params: { name: tool.name, arguments: args },
      }),
    });
    const { result } = await res.json();
    return result;   // an MCP CallToolResult, passed straight through
  },
});

查看内容元数据

我们还在开发用于读取不同类型元数据的工具包。例如,C2PA 计划参与者的凭据可以通过 Content Credentials 工具包获取。scan_images_c2pa 会扫描每一张图片,并返回每张图片的简短摘要:

{
  "imageCount": 12,
  "scanned": 12,
  "withC2pa": 8,
  "results": [
    {
      "src": "https://example.com/hero.jpg",
      "hasC2pa": true,
      "format": "image/jpeg",
      "manifestCount": 1,
      "claimGenerator": "Adobe Firefly",
      "title": "sunrise over the bay",
      "signedBy": "Adobe Inc."
    },
    { "src": "https://example.com/logo.png", "hasC2pa": false, "format": "image/png" }
  ]
}

如需更仔细地查看,inspect_image_c2pa 会解码单张图片的完整清单:其编辑历史、声明的作者以及签名证书。它是一个纯 TypeScript 读取器,只触及图片前端几 KB 的元数据,而不触及图片本身。目前,它读取并报告凭据,而不是以密码学方式验证它:每个结果都带有 signatureVerified: false,这样智能体就不会把已解码的声明误认为是已核验的声明。

试用一下

开始使用 WebMCP,请前往 Cloudflare 控制台中的 Agent Readiness > Labs。在这里,你可以为某个域名开启 WebMCP,并选择要添加的工具包:Content Credentials 和 Site MCP Server 默认都是开启的,随着我们陆续发布更多工具包,它们也会出现在这里。这就是全部设置了。无需部署任何东西,也无需在你的源站做任何更改,你的站点发送的下一个 HTML 就会包含这个桥接。

要确认它已生效,请向你的站点请求任意 HTML 页面,并查找 Cloudflare 注入的那一行:

curl -s https://your-site.example | grep webmcp

你不需要自己的智能体就能看到这些工具在运行。将 Cloudflare 的远程浏览器 BrowserRun 指向你的 URL,它就会像访问者的智能体那样,发现并调用你的工具包注册的工具。这就是完整的闭环:BrowserRun 为智能体提供一个可操作的浏览器,这个预览为你的站点提供可被操作的工具,而它们通过开放标准相遇。无论浏览器是在某人的笔记本电脑上,还是在云端无头运行,这些工具的行为方式都是一样的。

我们为什么构建这个

我们的职责是助力互联网变得更好,而随着互联网的不断演变,我们需要为域名所有者提供工具,让新访客——AI 智能体——无需全面重构即可与之交互。这是迈向一个即使访客不总是人类也依然能蓬勃发展的网络的一步。

这是一个开发者预览版,我们期待你的反馈。请开启它,在你的网站上试用,并在 Cloudflare Developers Discord 或社区论坛上告诉我们你的体验。

来源:Cloudflare Blog· blog.cloudflare.com