为任何网站提供 WebMCP 接口
今天，我们在 Cloudflare 上发布了 WebMCP 的开发者预览版。开启它，浏览器代理就能开始与您的网站协作，无需编写代码，也无需更改您的源站。Cloudflare 会向您的页面添加一个小型桥接器，为访问者的代理注册一组工具。
互联网的构建基于这样一个假设：另一端有一个人——一个阅读页面、点击按钮、填写表单的人。但现在，越来越多的访问来自 AI 代理，它们访问的是为人类构建的互联网。通常的做法是使用爬虫，将内容复制回服务器，但往往不会给原始网站带来任何流量，也很少给予其应有的认可。有一种更好的方式，且不涉及抓取。
WebMCP 是一种新的浏览器标准，在 Chrome 146 中实验性推出，在页面中以 document.modelContext 的形式呈现。网站可以选择为浏览器中运行的代理暴露一组工具，这意味着代理不再需要猜测如何浏览为人类构建的页面。这使代理能够拥有与用户不同的浏览体验，并将令牌用于任务而非导航。但问题是：网站必须实现它。
Cloudflare 一直在构建这一标准的两端。我们的远程浏览器 BrowserRun 已经添加了 WebMCP 支持，因此代理可以发现并调用网站暴露的工具。
Cloudflare Radar 很快将提供自己的 WebMCP 工具。本次预览涉及另一端：一种通过单个开关为 Cloudflare 上的任何网站提供这些工具的方式，且无需编写代码。
Cloudflare 上 WebMCP 的开发者预览
手动实现 WebMCP 是一个不小的项目：设计要暴露的工具，将它们接入您的界面，并随着标准的发展保持其正常工作。我们希望它更简单：只需切换一个设置即可启用工具。
这些工具以包的形式提供——一组相关的工具可以一起开启。它们的设计具有可扩展性：随着我们添加新的包，网站只需开启它们即可选择更多工具，无需重新部署。本次开发者预览版包含两个工具包，它们完全在浏览器中运行。
它的作用及工作原理
我们的实现包含两个部分，均位于您的源站之前。两者都不会触及您网站的代码，并且无论您的网站是静态网站还是单页应用，它们的工作方式都相同。
首先，在边缘进行注入。当您的网站在 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
属性是要激活的包列表。如果你有现有的模型上下文协议（MCP）服务器，data-mcp-url
指向你自己的 MCP 服务器（默认指向同源的 /mcp
）。
其次，是桥接器。它在页面中运行并查找 WebMCP 表面。如果浏览器没有该表面，它就会返回并且不执行任何操作，因此页面的行为与之前完全相同。
从那里，桥接器将 data-packs
中命名的包组合成一个工具列表，并使用 .registerTool
注册每个工具。一个包只是一组 MCP 工具描述符及其处理程序。静态包（如内容凭据）会预先声明其工具。动态包（如站点 MCP 服务器包）在启动时发现其工具，然后才注册任何内容。
在此预览中，每个工具完全在访问者的浏览器中运行。没有到我们服务器的往返。内容凭据包获取图像并在本地解析其前几 KB 的内容来源元数据。站点 MCP 服务器包从页面直接与你的 MCP 服务器端点通信，在访问者的源上并使用他们现有的会话。
桥接器代码由运行在边缘的 worker 提供。这为我们留出了扩展产品的空间——未来的包将能够调用此 worker 来执行页面无法单独完成的任务，例如使用 Workers AI 汇总站点地图或查询 AI 搜索索引。
对于代理来说，所有这些都是普通的 MCP 工具。我们使用模型上下文协议自己的 Tool
和 CallToolResult
类型，因此已经与 MCP 服务器通信的代理无需添加任何特殊内容即可驱动页面。浏览器只是 MCP 运行的另一个地方。下面的示例展示了桥接器如何将你自己的一个 MCP 工具转换为访问者的代理可以调用的工具。
// 对于站点自身的 MCP 服务器通过 tools/list 公布的每个工具，
// 注册一个代理，其 execute() 会在访问者的源（origin）上，
// 携带他们的会话（session）回调站点。
document.modelContext.registerTool({
name: tool.name, // 例如 "search_products"
description: tool.description,
inputSchema: tool.inputSchema, // 直接取自 tools/list
execute: async (args) => {
const res = await fetch(mcpUrl, { // 同源 /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; // 一个 MCP CallToolResult，直接透传
},
});
查看内容元数据
我们还在开发用于读取不同类型元数据的包。例如，可以通过 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`
会解码一张图片的完整清单：其编辑历史、声明的作者以及签名证书。它是一个纯 TypeScript 读取器，只接触图片开头几 KB 的元数据，而不触及图片本身。目前，它读取并报告凭证，而不是以密码学方式验证它：每个结果都带有 `signatureVerified: false`
，因此代理不会将解码的声明误认为是已检查的声明。
## 试用
要开始使用 WebMCP，请前往 [Cloudflare 仪表板中的 Agent Readiness > Labs](https://dash.cloudflare.com/?to=/:account/:zone/agent-readiness/labs)。在这里，您可以为某个域启用 WebMCP，并选择要添加的包：Content Credentials 和 Site MCP Server 默认都处于开启状态，随着我们发布更多包，它们会显示在这里。这就是全部设置。无需部署任何内容，也无需在您的源站进行任何更改，您的站点发送的下一个 HTML 将包含桥接器。
要确认它已生效，请向您的站点请求任意 HTML 页面，并查找 Cloudflare 注入的行：
`curl -s https://your-site.example | grep webmcp`
您不需要自己的代理就能看到这些工具的工作情况。将 Cloudflare 的远程浏览器 [BrowserRun](https://developers.cloudflare.com/browser-run/features/webmcp/) 指向您的 URL，它将发现并调用您的包注册的工具，就像访问者的代理所做的那样。这就是整个循环：BrowserRun 为代理提供了一个可供操作的浏览器，此预览为您的站点提供了可供操作的工具，它们通过开放标准相遇。无论浏览器是在某人的笔记本电脑上还是在云端无头运行，这些工具的行为方式都是相同的。
## 我们为什么构建这个
我们的工作是帮助让互联网变得更好，随着互联网的变化，我们需要为域名所有者提供工具，让新访客（AI 代理）无需全面重建即可进行交互。这是朝着一个即使访客不总是人类也能蓬勃发展的网络迈出的一步。
这是一个开发者预览版，我们希望得到您的反馈。请启用它，针对您自己的站点进行测试，并在 [Cloudflare 开发者 Discord](https://discord.cloudflare.com/) 或 [社区论坛](https://community.cloudflare.com) 上告诉我们您的体验。
__社区论坛__