# 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 的步骤，提高性能、可靠性和任务完成准确率”。
-->