WebMCP Demo - Tool Contracts

这个页面模拟一个售后后台：左侧是人能操作的业务 UI，右侧是页面暴露给 Agent 的工具契约。如果当前 Chrome 没有开启 WebMCP，本页面会使用本地 mock，让现场仍然能看清楚“工具注册”和“工具调用”的流程。

Declarative API

声明式：把 HTML 表单变成工具

form attributes

<form
  toolname="create_support_ticket"
  tooldescription="Create a support ticket from user supplied issue details.">
  <input name="email" type="email" required />
  <select name="category" required>...</select>
  <textarea name="description" required></textarea>
</form>

Imperative API

指令式：用 JavaScript 注册业务工具

registerTool()

订单号 CHR-2026-0614 已签收，缺件风险

客户等级 Enterprise 允许优先退款审核

当前状态 等待处理 由工具调用更新

navigator.modelContext.registerTool({
  name: "lookup_order_status",
  description: "Look up order status by order id.",
  inputSchema: {
    type: "object",
    properties: { orderId: { type: "string" } },
    required: ["orderId"]
  },
  execute: async ({ orderId }) => lookupOrder(orderId)
});