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

## 目标和产物

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

1. **PPT 主线**：分别介绍 Chrome 最近新增或正在推进的关键能力，说明每个功能解决什么问题、处在什么成熟度、适合用什么官方材料展示。
2. **项目代码演示**：创建并维护一个配套前端项目，用稳定页面串起官方 demo、功能对比和现场备用流程，让每个重点功能都有可打开、可讲述、可兜底的演示入口。

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

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

## 总原则

1. **官方优先**：优先使用 Chrome 官方文档、官方 demo、官方 demo collection、官方命令示例和官方截图/录屏作为展示材料。
2. **本地兜底**：只有官方材料不能稳定现场展示，或无法串起叙事时，才用当前仓库补一个本地演示。
3. **不复刻重实验能力**：不在本地项目里复刻 Prompt API、HTML-in-Canvas、Chrome DevTools for agents 等环境依赖重、版本敏感或 origin trial 依赖强的能力。
4. **保持科普口径**：所有 token、耗时、成功率数据都作为具体案例，不当作普适结论。
5. **实验能力明确标注**：WebMCP、Prompt API、HTML-in-Canvas 等能力需要标注实验性、origin trial、渐进增强或浏览器支持边界。
6. **剔除厂商私货**：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。
- 项目代码演示：用本地前端页面承接官方链接、功能卡片、三路径对比和现场备用讲述。
- 兜底原则：本地项目不承担全部 Chrome API 复刻，只承担稳定讲述和演示组织。

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

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

对比三种路径：

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

展示方式优先级：

1. 使用原始材料中的录屏或截图结论做 PPT 叙事。
2. 如无可用视频，则用表格和流程图描述三种路径。
3. 如现场需要互动，再打开本地 demo 页面作为“对比仪表盘”。

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

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

- **WebMCP**：使用官方 imperative API 文档中的 `document.modelContext.registerTool`、pizza layer、order status 示例说明“页面暴露工具”。
- **Modern Web Guidance**：使用官方 `npx modern-web-guidance@latest install` 和 `search/retrieve` 命令说明“给 AI 编程工具补现代 Web 知识”。
- **Chrome DevTools for agents**：使用官方 DevTools MCP 资料说明“让 AI 看到浏览器运行时、性能 trace、network、console”。
- **Prompt API**：使用官方 Prompt API demos / playground 说明“浏览器内置 AI 能力，适合渐进增强”。
- **HTML-in-Canvas**：使用官方 origin trial 文章和 demo collection 说明“DOM 进入 Canvas / 3D 场景，同时保留可访问性、搜索、翻译等能力”。
- **Baseline / View Transitions**：使用 webstatus.dev、Baseline、view-transitions.chrome.dev 说明“哪些能力可以评估，哪些能力提升交互体验”。

## 项目代码演示职责

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

1. 提供一个稳定的“官方 demo 导航页”，列出每个新增功能对应的官方资料、推荐讲法和现场备用链接。
2. 提供一个“AI 操作 Web 三路径对比”页面，用表格、流程和状态卡讲清楚视觉识别、DOM/可访问性识别、WebMCP/工具调用的差异。
3. 提供一个“本地兜底说明”：如果官方 demo 现场不可用，如何用项目页面和 PPT 中的截图/流程继续讲，不中断分享。

不做以下事情：

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

## 时间分配

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

- 2 分钟：demo 导航与官方优先说明。
- 6 分钟：三种 AI 操作 Web 路径对比。
- 5 分钟：Chrome 官方 demo 快闪。
- 2 分钟：本地兜底和关键风险提示。

## 参考资料

- 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/