用 WebMCP 给网站开一个 Agent 可调用接口：声明式 + 命令式两种落地

WebMCP 目前是 Chrome 149+ / Edge 147+ 的开放试用特性，只在受支持的浏览器里存在。代码里先检测，不在就走降级。

// 入口对象可能在 navigator 或 document 上，按当前规范探测
const mc = navigator.modelContext || document.modelContext;
if (!mc) {
  console.warn("当前浏览器不支持 WebMCP，降级为普通页面交互");
} else {
  console.log("WebMCP 可用，开始注册工具");
}

对已有的 HTML 表单，无需写 JS：加 toolname 与 tooldescription 两个属性，浏览器自动把表单合成一个工具。人照样能填，Agent 也能调。

<form toolname="searchProducts" tooldescription="按关键词搜索商品，返回匹配结果列表">
  <input name="query" placeholder="输入商品名" />
  <button type="submit">搜索</button>
</form>

表单表达不了的逻辑（React 弹窗、AJAX 动作）用 registerTool。核心是 name + description + inputSchema（JSON Schema）+ execute（调用你已有的业务函数）。

const mc = navigator.modelContext || document.modelContext;
if (mc) {
  mc.registerTool({
    name: "addToCart",
    description: "把指定 SKU 的商品加入购物车",
    inputSchema: {
      type: "object",
      properties: {
        sku: { type: "string", description: "商品 SKU，例如 SHOE-42" },
        quantity: { type: "integer", description: "加入数量", default: 1 }
      },
      required: ["sku"]
    },
    execute: async (params) => {
      const result = await addToCart(params.sku, params.quantity || 1);
      return { content: [{ type: "text", text: JSON.stringify(result) }] };
    }
  });
}

execute 返回 MCP 内容块结构，Agent 才能拿到可用结果。工具要随页面状态出现/消失：登录前只暴露登录，登录后注册订单类工具，卸载时 unregisterTool 回收。

// 组件挂载时注册
mc.registerTool({ name: "viewOrders", description: "查看当前用户订单", inputSchema: { type: "object", properties: {} }, execute: async () => ({ content: [{ type: "text", text: JSON.stringify(await getOrders()) }] }) });

// 组件卸载时回收，避免暴露用户看不到的工具
function onUnmount() {
  if (mc) mc.unregisterTool("viewOrders");
}

不支持的浏览器要降级，危险动作要人工确认。给写操作（下单、支付、删除）加显式确认；即便 Agent 调用，也走和用户点击一样的确认流程。

// 降级：不支持 WebMCP 时，用 JSON-LD / 语义 HTML 让传统爬虫与脚本仍能拿到结构化信息
if (!mc) {
  injectJsonLd({ "@type": "WebSite", name: "我的商城", potentialAction: "searchProducts" });
}

// 危险动作：复用页面既有的确认流程，不绕过人工闸
execute: async (params) => {
  const ok = await confirmWithUser("确认把该商品加入购物车？");
  if (!ok) return { content: [{ type: "text", text: "用户取消了操作" }] };
  return { content: [{ type: "text", text: JSON.stringify(await addToCart(params.sku, params.quantity)) }] };
}