@googledevs: Modern Web Guidance + Chrome DevTools for agents = A powerful new workflow. Matthias Rohmer takes you inside the #Googl…

Modern Web Guidance + Chrome DevTools for agents = A powerful new workflow.

Matthias Rohmer takes you inside the #GoogleIO Chrome Dev Prompt Lab to demo the next generation of web development. See coding agents in action and learn how to leverage AI evaluators for your projects.

Watch the full session: https://goo.gle/4dxkzQv

TL;DR: Chrome 正在推动 Web 代理时代，通过 WebMCP 和 HTML-in-Canvas 等新 API，让开发者轻松将网页功能暴露给 AI 代理，同时保持语义、无障碍和安全边界。

从个人演示开始：HTML-in-Canvas 与 WebMCP

保罗·金兰（Chrome 开发者关系）以一段怀旧演示开场：他用 HTML-in-Canvas 重建了自己 30 年前的童年卧室——一个 3D 场景，其中嵌入了真正的浏览器。用户可以浏览网页、选中文字、甚至搜索 WebGPU。关键突破是：在 Canvas 3D 内部，DOM 完全可访问。这打破了以往基于 Canvas 的体验无法使用浏览器功能的限制。

接着他展示了 WebMCP（Web Model Context Protocol）。在同一个 3D 场景中，一个代理（Agent）可以访问一组工具：关灯、重启电脑等。用户只需说“关灯”，代理就能调用灯开关工具；说“关机再开机”，代理就能执行多步骤操作。保罗强调这只是实验性演示，但展示了未来的可能性。

我们的开发环境：从 QBasic 到 AI 代理

保罗对比了自己 30 年前的编程环境——QBasic，没有语法高亮，没有语言服务器，连美式英语的拼写都差点让他放弃——到如今看似相似的文本开发环境，但开发流程已发生巨变。他提出 Chrome 的三大目标：

1. 确保网站参与代理未来，让网页成为一等体验。
2. 确保工具理解现代 Web 能力，并为现代 Web 基线构建。
3. 让开发者提前看到平台方向，为未来几年做好准备。

代理时代：从浏览到委派

保罗认为，代理（Agent）是自互联网发明以来计算领域的重大转变。用户不再只是浏览后手动操作，而是委派代理去完成跨网站、多步骤的任务（如找酒店、整合餐厅、找康普茶吧）。这种转变的速度将远超移动优先时代（从 iPhone 发明到普及用了近十年），过去六个月开发者的角色已经剧烈改变。

好消息是，现有的语义 HTML、无障碍访问等现代 Web 开发原则，正是让代理理解网页的基础。我们需要重新承诺这些最佳实践。

Chrome 中的代理能力：Gemini 与 Skills

今年早些时候，Chrome 引入了 Gemini，让用户在同一标签页中聊天、导航、总结内容、创建测验等。它之所以能做到，是因为网页主动描述了自身功能和结构。进一步，Chrome 还推出了 Skills（技能）功能——用户可以从现成技能库中提取产品规格、总结长文档，并将聊天转化为可重复、可混用的技能，跨网站运行。这让非开发者也能像程序员一样委派任务。

WebMCP：将网页转化为代理工具

尽管 LLM 可以通过截图、DOM、点击推断意图，但开发者需要更可控的方式。WebMCP 正是为此设计——它是一个提议规范，目标是将 HTML 表单和 JavaScript 函数暴露为代理可调用的工具，让网站更容易参与代理生态系统。

核心思想：无需额外搭建 MCP 服务器或 CLI，只需暴露当前浏览器标签页，代理就能读取工具列表并与之交互。例如，一个在线鞋店可以暴露搜索、加入购物车、结账等工具。代理根据用户意图（“找一双 10 码棕色鞋”）选择并执行合适的工具。

两种实现方式：

• HTML 表单方式：在现有表单上添加额外属性（如 tool-description、tool-parameter），告诉代理表单的功能和填写方式。这利用了开发者已熟悉的 HTML 语义。
• 命令式 API：使用 navigator.modelContext.registerTool，传入名称、描述、输入模式（schema），当代理匹配到工具时，执行函数并传入数据。

优势在于：工具运行在浏览器中，共享用户登录状态、Cookie 和本地存储，这是其他非浏览器 MCP 实现无法做到的。所有操作仍在浏览器安全边界内。

实际应用：Expedia 实验演示

保罗展示了一个假设的 Expedia 集成（实验性，未上线）。用户说“在 7 月 4 日找一个靠近奶奶的酒店”。Gemini 创建任务计划，系统上多个工具（搜索住宿、更新过滤器、导航到物业）自动调用。代理判断哪个工具合适，执行操作，最终引导用户确认或直接结账。演示反映了未来代理如何为用户完成跨页面、跨工具的任务。

开放规范与实验状态

WebMCP 被设计为开放规范，Google 正与跨行业标准机构合作。目前仍非常实验性，Chrome 和 Gemini 也在持续迭代。保罗呼吁开发者提前尝试并提供反馈，因为平台方向会快速演进。

“如果你能告诉工具‘这是一个设计良好的网站，这是它的结构’，我们就能帮助代理和工具实现用户目标。”

总结：为代理时代做好准备

保罗认为，Web 正在从人类浏览+操作的媒介，转变为代理帮人类委派任务的媒介。今天许多网站已经能在代理下工作，但未优化。开发者需要：

• 坚持语义 HTML 和无障碍设计。
• 理解并尝试 WebMCP 等新 API。
• 关注 Chrome 的 Skills 和 Gemini 能力。

这是一个巨大的机遇——让网页在 AI 代理生态中保持核心地位。

Source: @googledevs: Modern Web Guidance + Chrome DevTools for agents = A powerful new workflow