用 WebMCP 把商城和下单做成当前页工具

WebMCP 是网页在当前浏览器标签里，把功能注册成给 AI agent 调用的工具（document.modelContext），并继承用户已登录会话。它不是 MCP 的替代品：MCP 描述的是 Harness（如 Cursor、Claude Code）如何连接外部服务；WebMCP 只服务已经打开这个页面的浏览器 Agent。

本文记录的是本站建议，不是 Chrome 官方教程。产品行为以 Chrome WebMCP 与 Imperative API 为准，核验日期 2026-09-11。到该日，Chrome Origin Trial 覆盖约 149–156，API 仍可能变更。

为什么值得做页内工具

浏览器 Agent 默认靠点击和选择器驱动页面，延迟高、也容易点错。WebMCP 把「读当前商品」「创建待付款订单」「检索文章」「复制规则示例」收成带 JSON Schema 的工具，用户看着页面变化，敏感步骤由浏览器按 consequentialHint 弹出确认。

本站第一期只注册四件事：

1. 商品页 get_product：只读当前规格、库存、数量、券码和支付方式。
2. 商品页 create_order：锁定库存并进入现有收银台或付款码，不代为支付。
3. /agents search_agent_posts：按关键词、分类或标签检索文章路径。
4. 文章页 copy_rule_block：把 RuleBlock 写入剪贴板，工具返回值不含规则正文。

未登录时 create_order 只打开邮箱验证码登录，不代填游客表单。卡密、查询密码和收款确认仍留在人眼可见的页面上。

注册工具的最小骨架

下面是本站建议的适配器，不是官方示例。用 document.modelContext ?? navigator.modelContext 做特性检测；没有 API 时页面保持可点。卸载时 AbortController.abort()，避免路由切换后工具残留。

function getModelContext() {
  return document.modelContext ?? navigator.modelContext ?? null;
}

export function registerTools(tools = []) {
  const context = getModelContext();
  if (!context?.registerTool) return () => {};
  const controller = new AbortController();
  for (const tool of tools) {
    context.registerTool({
      ...tool,
      execute: async (input, extras) => {
        const result = await tool.execute(input, extras);
        return typeof result === 'string' ? result : JSON.stringify(result);
      },
    }, { signal: controller.signal });
  }
  return () => controller.abort();
}

await document.modelContext?.registerTool({
  name: 'create_order',
  description: '锁定当前商品库存并进入收银台。不会代为支付。',
  inputSchema: {
    type: 'object',
    properties: {
      quantity: { type: 'number' },
      couponCode: { type: 'string' },
    },
  },
  annotations: {
    readOnlyHint: false,
    consequentialHint: true,
  },
  execute: async ({ quantity, couponCode }) => {
    await createOrderWithOverrides({ quantity, couponCode });
    return '库存已锁定，请在收银台完成付款。工具不会代为支付。';
  },
});

consequentialHint: true 告诉浏览器：这是有真实后果的操作（锁库存、生成待付款订单）。Agent 调用前应弹出确认，而不是静默执行。只读工具如 get_product 使用 readOnlyHint: true。

数量、券码和支付方式必须作为下单函数的覆盖项传入。不要先改 React state 再立刻下单：闭包里的仍是旧值。

和 MCP、Coding Agent 怎么分工

• 浏览器里打开本站：WebMCP。调用方是 Chrome / Edge 中的页面 Agent，或能驱动当前标签的 Computer Use。
• IDE 里写代码：继续用 MCP Server、项目规则和本站 /agents 文章。它们读不到你在 aimaiai.cc 里的登录 Cookie。
• 无头定时任务、补货、对账：走后端 MCP 或普通 API。WebMCP 需要人盯着的当前页。

Origin Trial token 可选。本地开发打开 chrome://flags/#enable-webmcp-testing，用 Model Context Tool Inspector 查看已注册工具并手工调用。生产环境把 token 放进 NEXT_PUBLIC_WEBMCP_ORIGIN_TRIAL_TOKEN；没有 token 时，未开 flag 的浏览器看不到工具，购买路径不变。

不要交给工具的事

• 代为链上转账、扫码确认或声称「已支付」。
• 把卡密、账号或规则正文放进工具返回值（对话记录会留下副本）。
• 把 WebMCP 当成唯一下单 API。Origin Trial 到期后应静默降级。

把页内工具做得少而可确认，比把整站自动化更接近 WebMCP 的设计：用户盯着页，Agent 调工具，钱和密钥仍由人点。

参考资料

• WebMCP，Chrome for Developers，核验日期 2026-09-11。
• Imperative API，含 registerTool、annotations 与 AbortSignal，核验日期 2026-09-11。
• WebMCP Explainer，W3C WebML Community Group。