看截图
Agent 通过视觉模型识别菜单、按钮、输入框，再一步步点击。
- 优点：不需要改造页面
- 风险：慢、贵、UI 变化敏感
- 适合：临时探索和低风险页面
Core Message
从“AI 猜 UI”到“网页暴露工具”。
视觉识别和 DOM 识别让 Agent 尝试理解页面表象；WebMCP 的方向是让页面主动提供结构化能力， 让 Agent 调用工具、传入参数、拿到结果。
同一个后台任务，三种 Agent 操作路径
读结构
Agent 读取 DOM 或可访问性树，通过结构化信息定位交互元素。
- 优点：比截图更结构化
- 风险：复杂组件和隐藏状态仍会误导
- 适合：语义清晰的表单页面
调工具
页面暴露工具名、描述、参数 schema 和执行逻辑，Agent 直接调用业务能力。
- 优点：语义明确、速度快、过程可控
- 风险：仍需权限、确认和审计边界
- 适合：复杂后台和重复流程
对比讲述表
| 维度 | 视觉识别 | DOM / A11y | WebMCP |
|---|---|---|---|
| 交互方式 | 观察截图后猜测点击位置 | 读取结构后定位元素 | 调用页面声明的语义工具 |
| 稳定性 | 受视觉布局影响明显 | 受 DOM 结构和组件状态影响 | 受工具设计、权限和业务逻辑影响 |
| 现场讲法 | “像让 AI 蒙着眼睛找按钮” | “给了地图，但地图可能不完整” | “给了工具入口和参数说明” |
WebMCP 原始工程 demo
运行入口
打开 /demo/webmcp/index.html，展示声明式表单工具、 指令式 JS 工具、工具 schema 面板和复合任务调用日志。
讲述重点
先让人提交表单，再让工具面板执行同一类任务。观众会看到 Agent 不需要猜 UI， 它看到的是工具名、描述、参数 schema 和执行结果。
官方 demo 与资料入口
WebMCP
Imperative API
使用 document.modelContext.registerTool 暴露工具，官方示例包含 pizza layer 和 order status。
developer.chrome.com/docs/ai/webmcp/imperative-api
MWG
Modern Web Guidance
给 AI 编程工具补充现代 Web 知识、兼容性和最佳实践。
developer.chrome.com/docs/modern-web-guidance
DevTools
Chrome DevTools for agents
让 coding agent 访问真实浏览器、console、network、performance trace 和 Lighthouse。
developer.chrome.com/docs/devtools/agents/get-started
Prompt API
Built-in AI
浏览器内置语言模型能力，适合作为渐进增强展示。
developer.chrome.com/docs/ai/prompt-api
Canvas
HTML-in-Canvas
把真实 DOM 放入 Canvas / WebGL / WebGPU 场景，同时保留浏览器能力。
developer.chrome.com/blog/html-in-canvas-origin-trial
UX
View Transitions
官方交互 demo，用于快闪展示 Web 体验能力升级。
view-transitions.chrome.dev
现场兜底讲法
如果官方 demo 打不开
继续使用本页的卡片和对比表讲主线：AI 不擅长猜复杂 UI，WebMCP 的价值是结构化暴露工具。 官方链接可作为会后资料。
如果有人追问落地
只回答原则：渐进增强、权限继承、高危确认、审计日志、工具按需暴露。 不在本场扩展到厂商 SDK 选型和企业架构。