一键为现有网站接入WebMCP

Cloudflare Blog#WebMCP#Agent#Cloudflare

Editor brief · 编辑速览

Cloudflare 发布 WebMCP 开发者预览，可在不新增 API、也不修改源站的情况下，让现有网站供浏览器智能体调用。方案强调保留用户控制权和站点流量。

文章思维导图

Knowledge map

拖拽缩放

Full translation

完整中文译文

今天，我们在 Cloudflare 上推出 WebMCP 开发者预览版。只需开启它，浏览器 Agent 就能开始操作你的网站，无须编写代码，也无须改动源站。Cloudflare 会向页面添加一个轻量级桥接层，为访问者的 Agent 注册一组可用工具。

Web 最初建立在这样一个假设之上：另一端是一个真实的人——有人阅读页面、点击按钮、填写表单。但如今，越来越多的访问来自 AI Agent，而它们面对的却是一个为人类设计的互联网。以往的常见做法是使用爬虫，将内容复制回服务器；但这种方式往往既没有给原网站带来流量，也很少给予应有的归属认可。其实还有一种更好的方式，而且不需要抓取页面。

WebMCP 是一项新的浏览器标准，已在 Chrome 146 中以实验性功能发布，并通过页面中的 document.modelContext 提供能力。网站可以选择向浏览器中运行的 Agent 暴露一组工具，这意味着 Agent 不再需要面对为人类设计的页面，一边猜测一边完成操作。这样一来，Agent 可以拥有不同于用户的浏览体验，把 token 用在任务本身，而不是页面导航上。问题在于：网站必须自行实现这套能力。

Cloudflare 一直在构建这套体系的两端。我们的远程浏览器 BrowserRun 已经加入 WebMCP 支持，因此 Agent 可以发现并调用网站暴露的工具。Cloudflare Radar 很快也会提供自己的 WebMCP 工具。本次预览聚焦于另一端：只需打开一个开关，无须编写代码，就能为 Cloudflare 上的任何网站提供这些工具。

Cloudflare 上的 WebMCP 开发者预览版

手动实现 WebMCP 本身就是一个小型项目：你需要设计要暴露的工具，将它们接入网站界面，并随着标准演进持续维护。我们希望让这件事变得更简单：只需切换一个设置，就能启用工具。

这些工具以工具包的形式提供——每个工具包都是一组相关工具，可以统一启用。这样的设计具有良好的扩展性：随着我们不断增加工具包，网站只需打开相应开关即可接入更多能力，无须重新部署。本次开发者预览版包含两个工具包，它们都完全在浏览器中运行。

它能做什么，以及如何工作

我们的实现由两部分组成，二者都位于源站之前。它们既不会改动网站代码，也不会受到网站类型的影响——无论你的网站是静态网站还是单页应用，工作方式都完全相同。

第一部分是在边缘注入代码。当你在 Cloudflare Dashboard 中为网站开启 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 总结 sitemap，或者查询 AI Search 索引。

在 Agent 看来，这些全都是普通的 MCP 工具。我们直接使用 Model Context Protocol 自身的 Tool 和 CallToolResult 类型，因此，已经能够与 MCP 服务器通信的 Agent 无须添加任何特殊能力，就能操作页面。浏览器只是 MCP 的另一个运行场所。下面的示例展示了桥接层如何把你自己的一个 MCP 工具转换成访问者 Agent 可以调用的工具。

// 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
  },
});

查看内容元数据

我们还在开发用于读取不同类型元数据的工具包。例如，可以使用 Content Credentials 工具包获取 C2PA 计划参与者的凭证。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 可以解码单张图片的完整 manifest，包括编辑历史、声明的作者以及签名证书。它是一个纯 TypeScript 读取器，只会读取图片开头几 KB 的元数据，而不会处理图片本身。目前，它只负责读取和报告凭证，尚不会对凭证进行加密验证：每个结果都会带有 signatureVerified: false，因此 Agent 不会把已经解码的声明误认为经过验证的声明。

要开始使用 WebMCP，请前往 Cloudflare Dashboard 中的 Agent Readiness > Labs。在这里，你可以为某个域名开启 WebMCP，并选择要添加的工具包：Content Credentials 和 Site MCP Server 默认都会启用；随着更多工具包发布，它们也会出现在这里。全部设置到此就完成了。你无须部署任何内容，也无须改动源站；网站接下来发送的 HTML 就会包含桥接层。

要确认它是否已经生效，可以请求网站上的任意 HTML 页面，并查找 Cloudflare 注入的那一行代码：

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

即使没有自己的 Agent，你也能看到这些工具如何工作。只需让 Cloudflare 的远程浏览器 BrowserRun 访问你的 URL，它就会像真实访问者的 Agent 一样，发现并调用工具包注册的工具。这就形成了完整闭环：BrowserRun 为 Agent 提供可供操作的浏览器，本次预览版为网站提供可供调用的工具，二者通过开放标准连接起来。无论浏览器运行在某个人的笔记本电脑上，还是以 headless 模式运行在云端，这些工具的行为都完全相同。

我们的职责是帮助互联网变得更好。随着互联网不断变化，我们需要为域名所有者提供相应工具，使 AI Agent 这样的新型访问者无须网站进行全面重构，就能与其交互。这是迈向下一代 Web 的一步：即使访问者不再总是人类，Web 依然能够蓬勃发展。

这是一个开发者预览版，我们希望听到你的反馈。请开启它，在你自己的网站上试用，并在 Cloudflare Developers Discord 或 Community forum 告诉我们使用体验。