update

pages/demo/webmcp-contract.md

@@ -0,0 +1,43 @@
+# Demo 2：WebMCP 到底演示什么？
+
+<div class="grid grid-cols-2 gap-8 mt-8">
+
+<div class="card-blue">
+<div class="font-semibold mb-3">一句话</div>
+<div class="space-y-3 text-sm">
+
+WebMCP 让网页把业务能力暴露成结构化工具，Agent 看到的是工具名、描述、参数 schema 和执行结果，而不是只靠截图或 DOM 猜按钮。
+
+<div class="font-mono text-xs opacity-80">
+navigator.modelContext.registerTool(...)
+</div>
+
+</div>
+</div>
+
+<div class="card-green">
+<div class="font-semibold mb-3">两种 API</div>
+<div class="space-y-2 text-sm">
+
+- 声明式：给标准 HTML 表单添加工具属性
+- 指令式：用 JavaScript 注册复杂工具
+- 共同目标：把页面能力变成 Agent 可理解的契约
+- 演示口径：提高可靠性，不承诺零错误率
+
+</div>
+</div>
+
+</div>
+
+<div class="mt-8 card-amber text-sm">
+实验边界：Chrome 官方文档标注 WebMCP 仍处于 proposed / origin trial / flag 阶段；现场 demo 必须有 mock 兜底。
+</div>
+
+<!--
+官方依据：
+- https://developer.chrome.com/docs/ai/webmcp
+- https://developer.chrome.com/docs/ai/webmcp/imperative-api
+- https://developer.chrome.com/docs/lighthouse/agentic-browsing/registered-webmcp-tools
+
+讲法：不要说“零错误率”。更稳妥的表达是“减少 Agent 猜 UI 的步骤，提高性能、可靠性和任务完成准确率”。
+-->