1. 什么是WebMCP？

Google WebMCP 正在技术 SEO 领域开启新篇章。到现在为止，我们都做了什么？

添加了结构化数据，使用了模式标记，优化了元标签。这些都是为了告诉谷歌“我的页面内容”。

WebMCP 说的是另一句：“在我的页面上能做些什么。”

W3C Web Platform Incubator Community Group (WICG)：是 WebMCP 的诞生地。WebMCP是一个非常新的标准（由 Google Chrome 团队在 2026 年 2 月才正式推出 Early Preview 早期预览版）。

• Google (Chrome 浏览器)：Google 是 WebMCP 的主要推动者。从 Chrome 146 版本开始，浏览器底层已经原生支持 navigator.modelContext。Google 自身的各种管理后台和开发者工具正在逐步 WebMCP 化。

• Microsoft (Edge 浏览器)：微软深度参与了 W3C 的 incubation（孵化）过程。你可以期待 Microsoft Copilot 在访问支持 WebMCP 的网站时，会比访问普通网页拥有更高的“执行权限”。

2. 如何实现 WebMCP？

实现 WebMCP 有两种 API：声明式和命令式。

Declarative API 声明式 API

声明式 API 这一点我们很喜欢，因为它让在现有网站中添加 WebMCP 变得简单，只需给表单添加几个 HTML 属性：

toolname:必备。通过将这个属性添加到你的 <form> 中，你告诉它它将是一个 WebMCP 工具。这里你需要指定工具名称。例如，如果这是一个发布评论的表格，可以称为发布-评论 。

tooldescription: 必备。它是对你工具功能功能的描述。如果你没有将此属性和工具名一起添加，你的表单不会被声明为 WebMCP 工具。

toolautosubmit:可选。当客服填写表格时，它会自动提交表格。如果该属性不存在，代理只填写表单，其他内容不填写。

<form
    id="login-form"
    toolname="login"
    tooldescription="Log in to the application with email and password"
    toolautosubmit="true"
>
    <label for="email">Email</label>
    <input
        type="email"
        id="email"
        name="email"
        required
        toolparamtitle="Email"
        toolparamdescription="User email address"
    >
</form>

Imperative API 命令式 API

浏览器通过传递名称、描述和属性的模式，给我们提供了添加工具的 navigator.modelContext.registerTool API。然后我们有一个执行方法，当代理调用该 WebMCP 时会发生什么。

3. 为什么 WebMCP 对电子商务网站很重要？

电子商务网站属于最能受益于 WebMCP 的行业。客户行为正在改变。现在人们想用自然语言指令购物，比如“找到 50 美元以下的跑鞋并加入购物车”。WebMCP 是使这种体验成为可能的基础设施。

我在这篇文章写过，在AEO时代，用户的购物流程被压缩。从页面的问题 → 方法 → 供应商 → 决策，直接在一个对话框完成所有购物环节。

ChatGPT、Gemini 或其他 AI 助手会向用户推荐产品。他们会推荐哪个网站？就是支持 WebMCP 的那个。因为他们可以在该网站上完成交易，而在其他网站上只能提供链接。这意味着直接销售。

4. Use Cases 使用场景

我是一名软件开发的妈妈，有个幼儿园大班的儿子。不懂硬件知识。想通过开源硬件网站，通过自然语言描述，借助WebMCP 帮我匹配适合幼儿园大班的硬件教育板子。实现加购，结算一系列的业务。

WebMCP 命令式 API 工具/功能

filterProduct //通过自然语言描述，借助WebMCP 帮我匹配适合幼儿园大班的硬件教育板子

addCart //实现加购

checkOut //结算

// 模拟 开源硬件 的基础业务逻辑（实际开发中这里会对接你的后端 API）
const App = {
    async search(params) {
        console.log("正在检索适合 " + params.grade + " 的硬件...", params);
        // 模拟搜索结果
        return [
            { id: "microbit-v2", name: "micro:bit V2 启蒙套装", price: 198, description: "适合大班及以上，图形化编程" },
            { id: "boson-kit", name: "Boson 科学套件", price: 599, description: "无需编程，磁吸连接，适合幼儿园" }
        ];
    },
    async addToCart(productId) {
        console.log(`已将商品 ${productId} 加入购物车`);
        return { success: true, cartCount: 1 };
    },
    async performCheckout() {
        console.log("正在跳转结算页面...");
        return { orderId: "DF" + Date.now(), status: "awaiting_payment" };
    }
};

// --- WebMCP 工具注册 ---
window.navigator.modelContext.provideContext({
    tools: [
        {
            // 1. 筛选工具：通过自然语言逻辑转换
            name: "filterProduct",
            description: "根据孩子的年级、预算和兴趣描述，推荐最合适的硬件套件。",
            inputSchema: {
                type: "object",
                properties: {
                    grade: { 
                        type: "string", 
                        enum: ["kindergarten", "primary", "junior"],
                        description: "孩子的年级，例如：幼儿园大班" 
                    },
                    interests: { 
                        type: "string", 
                        description: "孩子的兴趣点，如：机器人、灯光艺术、传感器等" 
                    },
                    budget: { 
                        type: "number", 
                        description: "用户的预算上限（人民币）" 
                    }
                },
                required: ["grade"]
            },
            execute: async (args) => {
                const results = await App.search(args);
                return {
                    content: "为您找到了以下适合幼儿园大班的板子：",
                    data: results
                };
            }
        },

        {
            // 2. 加购工具
            name: "addCart",
            description: "将用户选中的特定产品 ID 添加到购物车。",
            inputSchema: {
                type: "object",
                properties: {
                    productId: { type: "string", description: "产品的唯一识别 ID" },
                    quantity: { type: "number", default: 1 }
                },
                required: ["productId"]
            },
            execute: async ({ productId, quantity }) => {
                const res = await App.addToCart(productId);
                return {
                    content: `成功添加 ${quantity} 件商品到购物车。`,
                    status: "success"
                };
            }
        },

        {
            // 3. 结算工具
            name: "checkOut",
            description: "启动结算流程，生成订单摘要并准备支付。",
            inputSchema: {
                type: "object",
                properties: {
                    confirm: { type: "boolean", description: "用户是否已经确认要结算" }
                },
                required: ["confirm"]
            },
            execute: async ({ confirm }) => {
                if (!confirm) return { content: "用户取消了结算。" };
                
                const order = await App.performCheckout();
                return {
                    content: "订单已创建，请确认支付。",
                    orderId: order.orderId,
                    redirectUrl: "/checkout/payment"
                };
            }
        }
    ]
});

 WebMCP 界定/翻译 问题

这个过程通常由 AI 代理（Agent）和 开源硬件的 WebMCP 代码共同协作完成。具体的“翻译”工作落在哪一方，取决于你如何定义你的 inputSchema 和执行逻辑。

模式 A：由 AI 代理（OpenAI/Gemini）完成“翻译”

在这种模式下，AI 扮演“专家”，它已经知道 Boson 适合大班孩子。

1. 用户意图：“我想给幼儿园大班儿子买个礼物。”

2. AI 的思考：“我是个懂教育硬件的 AI。我知道对于这个年龄段，开源硬件的 Boson 系列是最好的选择。”

3. 调用接口：AI 自动将 keyword 设为 "boson"，然后调用你部署的 filterProduct 方法。

4. 开源硬件 接口：直接收到关键词 "boson" 并返回结果。

这种模式下，开源硬件 的 WebMCP 只是一个纯粹的执行者。

模式 B：由 开源硬件 的 WebMCP 代码完成“翻译”

在这种模式下，你作为开发人员，把“业务经验”写进了代码里。

1. 用户意图：“我想给幼儿园大班儿子买个礼物。”

2. AI 的思考：“我发现 开源硬件 网页提供了一个 filterProduct 工具，它接受 grade 参数。我会把‘大班’填进去。”

3. 执行逻辑（在你的 JS 里）：

4. 结果：用户得到了最精准的推荐。

这种模式下，你是在为 AI 提供“业务指南”，确保它不会因为不够懂硬件而乱搜。

小结

“意图到产品”的转化，本质上是业务逻辑。 虽然现在的 AI 已经很聪明，但作为网站主，把最核心的转化逻辑写在自己的 WebMCP 代码里，能确保用户（那位妈妈）得到最专业、最不出错的建议。

5. WebMCP部署

你把代码部署在自己的 开源硬件 网页上。当 OpenAI 或 Gemini 的 AI 代理（Agent） 像普通用户一样“访问”你的网页时，它们会通过浏览器底层协议自动扫描到 navigator.modelContext。

AI 是如何“发现”你的 WebMCP 接口的？

当 OpenAI (如 Operator) 或 Google Gemini 的 AI 代理进入你的页面时，它们会执行以下流程：

第一步：探测（Discovery）

AI 代理会通过浏览器 API 询问：“这个页面有可用的工具吗？” 由于你已经写了 window.navigator.modelContext.provideContext(...)，浏览器会立即向 AI 返回一份 JSON 格式的工具清单（包括你定义的 filterProduct, addCart 等）。

第二步：阅读（Schema Parsing）

AI 会阅读你写的 description 和 inputSchema。

• 它看到 filterProduct 的描述是“根据年龄推荐板子”，它就知道：“哦，当用户想选板子时，我该调这个函数。”

第三步：原地执行（Execution）

AI 不会把数据传回自己的服务器处理，而是直接在你的网页环境里调用那个函数。这意味着它直接复用了用户的登录状态（Cookies）和本地逻辑。

如何让当前的 AI 真正“动起来”？

虽然 WebMCP 是标准，但目前 AI 平台的支持程度略有不同。要让 OpenAI 或 Gemini 使用它，通常有以下几种途径：

A. 使用支持 WebMCP 的浏览器扩展/代理

目前最直接的方式是使用 “Agentic Browser（智能体浏览器）”。

• Chrome 实验性支持： Google 正在 Chrome Canary 版本中测试 WebMCP 标志位。

• BrowserMCP 插件： 这是一个流行的开发者工具。你安装插件后，Gemini 或 Claude 的浏览器助手就能立刻识别出你开源硬件 页面上的 addCart 工具。

B. Gemini 的原生集成

Google 是 WebMCP 的主导者。在 2026 年的路线图中，Gemini (尤其是在 Android/Chrome 端的 Gemini Live) 会原生具备“理解 Web 页面工具”的能力。只要你在页面部署了 WebMCP，Gemini 访问该域名时就会自动激活这些 Action。

C. OpenAI 的“Operator”模式

OpenAI 的自主代理（Agent）在浏览网页时，会优先寻找结构化接口。相比于去“抠”网页 HTML（容易出错），AI 代理会检测是否存在 navigator.modelContext。如果存在，它会放弃视觉识别，直接走 WebMCP 协议。

小结：你现在该做什么？

1. 部署到生产环境： 只要你的 JS 代码在线，任何具备 WebMCP 探测能力的 AI 都能看到它。

2. 编写完美的 Description： 现在的 SEO 是写给搜索引擎看关键词，WebMCP 的 SEO 是写给 AI 看功能描述。 把 description 写得尽可能清晰。

   1. 错误示例： description: "search"

   2. 正确示例： description: "根据用户的自然语言（如：5岁男孩，喜欢机器人）匹配 开源硬件的教育硬件，并返回带链接的产品列表。"

3. 使用测试工具： * 你可以使用 Model Context Tool Inspector（Chrome 扩展）来检查你的页面工具是否暴露成功。

   1. 在 Chrome 地址栏输入 chrome://flags 搜索 WebMCP 并开启，自行测试效果。

实战文章：从零搭建WebMCP本地Demo：Chrome配置+站点搜索，实现自然语言转关键词

关于作者

我是一名自我探索的技术型S/A/GEO，近9年外贸独立站开发&运维经验。

全平台账号小红书、bilibili 和csdn 同号，微信公众号:Adair 代呆呆,知乎：Adair。  

欢迎有同样兴趣的朋友关注我。后续会陆续更新我的AEO探索之旅。

希望我的记录能够给你带来启发。欢迎大家多多和我留言交流~

欢迎  ❤️ 点赞   |  🔔 关注   |  ⭐️ 收藏   | 💬 评论
你的每一个反馈，对我都很重要，是我持续输出的动力～