what-new-in-chrome/plan/part2.md

Part 2 Demo Plan: 官方优先的 Agentic Web 演示

目标和产物

第二部分用于支撑 40 分钟分享中的 demo 段，目标不是泛泛介绍概念，而是生成两类明确产物：

1. PPT 主线：分别介绍 Chrome 最近新增或正在推进的关键能力，说明每个功能解决什么问题、处在什么成熟度、适合用什么官方材料展示。
2. 项目代码演示：创建并维护一个配套前端项目。WebMCP 必须有可运行原始工程；Modern Web Guidance、DevTools for agents、HTML-in-Canvas、View Transitions 都要有明确演示入口。

它不是落地教程，也不是厂商 SDK 接入课；目标是让对 Chrome 新特性不熟悉的 Web 开发者看懂：

• AI 操作 Web 为什么容易慢、贵、不稳定。
• WebMCP 为什么从“猜 UI”转向“调用页面暴露的工具”。
• Chrome 相关新能力如何作为这个方向的证据链，而不是每个都现场复刻。
• 哪些是官方能力或标准探索，哪些只是厂商实现概念。

总原则

1. 官方优先：优先使用 Chrome 官方文档、官方 demo、官方 demo collection、官方命令示例和官方截图/录屏作为展示材料。
2. WebMCP 必须可运行：WebMCP 是第二部分的主 demo，当前仓库必须提供可打开、可点击、可看源码的本地工程。
3. 官方优先但不空讲：官方材料用于确认标准口径和 API 边界；本地工程用于承接现场演示。
4. 不复刻重实验能力：不在本地项目里复刻 Prompt API 等环境依赖重、版本敏感的能力；HTML-in-Canvas 只做官方 API 方向和 fallback 展示。
5. 保持科普口径：所有 token、耗时、成功率数据都作为具体案例，不当作普适结论；WebMCP 讲“提高可靠性”，不讲“零错误率”。
6. 实验能力明确标注：WebMCP、Prompt API、HTML-in-Canvas 等能力需要标注实验性、origin trial、渐进增强或浏览器支持边界。
7. 剔除厂商私货：OpenTiny、VAgent、WebAgent、Remote、WebSkills、遥控器组件、SDK 版本等只可作为原始材料背景，不作为 PPT 主概念。若需要表达类似思想，使用中立说法：“Agent 操作说明”“流程说明”“工具调用编排”。

Demo 结构

1. Demo 导航页

先给观众一张总览：第二部分会按“新增功能介绍”和“项目代码演示”展开。

• 新增功能介绍：WebMCP、Modern Web Guidance、DevTools for agents、Prompt API、HTML-in-Canvas、Baseline / View Transitions。
• 项目代码演示：WebMCP、DevTools for agents、HTML-in-Canvas、View Transitions 提供本地页面；Modern Web Guidance 提供官方 CLI 脚本和辅助页。
• 兜底原则：正式 demo 都要有入口；高风险实验能力不承诺原生 API 一定可用。

2. 主线演示：AI 操作 Web 的三种方式

任务设定：在后台系统中完成“创建订单管理模块”，包括创建词条、创建菜单、绑定角色权限。

对比三种路径：

• 视觉识别：靠截图理解界面。优点是通用；问题是慢、token 高、UI 变化敏感。
• DOM / 可访问性树识别：靠页面结构找元素。比纯视觉结构化，但仍可能被复杂组件、隐藏状态和错误点击影响。
• WebMCP / 工具调用：页面主动暴露工具和参数，Agent 调用业务能力，不再猜 UI。

展示方式：

1. PPT 用表格和流程图描述三种路径。
2. WebMCP 打开 /demo/webmcp/index.html 现场跑工程。
3. 其他正式 demo 从 /demo/index.html 进入，或运行 scripts/demo-modern-web-guidance.sh。

3. 新增功能介绍：官方 demo 快闪

每个能力只讲“它是什么、解决什么问题、现场怎么展示”，不展开完整 API 课。

• WebMCP：使用官方文档确认 API 口径，同时打开 /demo/webmcp/index.html 演示声明式表单工具、指令式 registerTool、工具 schema 和调用日志。
• Modern Web Guidance：运行官方 search/retrieve CLI，并打开 /demo/modern-web-guidance/index.html 辅助讲解。
• Chrome DevTools for agents：使用官方 DevTools MCP 配置，让 Agent 检查 /demo/devtools-agents/index.html 的 console、network 和性能问题。
• Prompt API：使用官方 Prompt API demos / playground 说明“浏览器内置 AI 能力，适合渐进增强”。
• HTML-in-Canvas：打开 /html-in-canvas/index.html，支持时跑原生 API，不支持时展示 fallback 和官方运行条件。
• Baseline / View Transitions：Baseline 做方法快闪；View Transitions 打开 /demo/view-transitions/index.html。

项目代码演示职责

当前仓库的本地 demo 承担六件事：

1. 提供一个稳定的“官方 demo 导航页”，列出每个新增功能对应的官方资料、推荐讲法和现场备用链接。
2. 提供一个可运行的 WebMCP 原始工程：public/demo/webmcp/index.html、styles.css、app.js。
3. 提供 Modern Web Guidance 官方 CLI 脚本和辅助页面。
4. 提供 DevTools for agents 可检查目标页，故意包含 console、network、performance 问题。
5. 提供 HTML-in-Canvas 和 View Transitions 演示页面。
6. 提供一个“本地兜底说明”：如果官方 demo 现场不可用，如何用项目页面和 PPT 中的截图/流程继续讲，不中断分享。

不做以下事情：

• 不把本地项目做成厂商 WebMCP SDK 接入教程。
• 不实现所有 Chrome 新特性。
• 不把实验 API 当作生产可用能力演示。
• 不要求现场浏览器开启 flags 才能完成主流程。
• 不把 WebSkills / WebAgent / VAgent / Remote 等厂商概念写成标准能力。

时间分配

第二部分建议 15 分钟左右：

• 2 分钟：demo 交付物总览。
• 6 分钟：WebMCP 可运行工程演示。
• 4 分钟：Modern Web Guidance 官方 CLI。
• 4 分钟：DevTools for agents 检查本地问题页。
• 4 分钟：HTML-in-Canvas / View Transitions。
• 2 分钟：Prompt API / Baseline 快闪和关键风险提示。

参考资料

• WebMCP imperative API: https://developer.chrome.com/docs/ai/webmcp/imperative-api
• Prompt API: https://developer.chrome.com/docs/ai/prompt-api
• Modern Web Guidance: https://developer.chrome.com/docs/modern-web-guidance
• Chrome DevTools for agents: https://developer.chrome.com/docs/devtools/agents/get-started
• HTML-in-Canvas origin trial: https://developer.chrome.com/blog/html-in-canvas-origin-trial
• Baseline: https://web.dev/baseline
• View Transitions demos: https://view-transitions.chrome.dev/
• Chrome demos index: https://chrome.dev/