From 500217f2fde090b3790b28eda4e98c7fc4aa3290 Mon Sep 17 00:00:00 2001 From: xinbao Date: Sun, 14 Jun 2026 15:04:28 +0800 Subject: [PATCH] strengthen runnable WebMCP demo flow --- README.md | 2 +- pages/demo/adoption-plan.md | 7 +++--- pages/demo/devtools-workflow.md | 2 +- pages/demo/platform-api.md | 2 +- plan/part2.md | 43 ++++++++++++++++++--------------- public/demo/index.html | 2 +- 6 files changed, 31 insertions(+), 27 deletions(-) diff --git a/README.md b/README.md index d303024..5505a7e 100644 --- a/README.md +++ b/README.md @@ -54,7 +54,7 @@ WebMCP 可以理解为“网页给 AI Agent 暴露的一组工具清单和接口 - 执行逻辑：调用后网页做什么 - 返回结果：告诉 Agent 成功还是失败 -可以用 `document.modelContext.registerTool` 作为概念示例。需要强调：WebMCP 仍是实验性方向，适合作为渐进增强，不应该假设所有浏览器都已经稳定支持。 +可以用 `navigator.modelContext.registerTool` 作为概念示例。需要强调：WebMCP 仍是实验性方向，适合作为渐进增强，不应该假设所有浏览器都已经稳定支持。 ### 5. Chrome 新特性快闪 diff --git a/pages/demo/adoption-plan.md b/pages/demo/adoption-plan.md index ca074fa..c369d29 100644 --- a/pages/demo/adoption-plan.md +++ b/pages/demo/adoption-plan.md @@ -1,4 +1,4 @@ -# Demo 4：本地兜底，不抢官方主线 +# Demo 7：本地兜底，不抢 WebMCP 主线
@@ -8,6 +8,7 @@ - 官方资料导航 - 三路径对比仪表盘 +- WebMCP 可运行工程入口 - 现场讲述卡片 - 网络不可用时继续演示 @@ -29,9 +30,9 @@
-打开本地兜底页：/demo/index.html。它是演示资料台，不是生产方案样板。 +打开总入口：/demo/index.html；WebMCP 工程入口：/demo/webmcp/index.html。
diff --git a/pages/demo/devtools-workflow.md b/pages/demo/devtools-workflow.md index 25971ef..77ece2c 100644 --- a/pages/demo/devtools-workflow.md +++ b/pages/demo/devtools-workflow.md @@ -1,4 +1,4 @@ -# Demo 2：AI 操作 Web 的三种路径 +# Demo 5：AI 操作 Web 的三种路径
diff --git a/pages/demo/platform-api.md b/pages/demo/platform-api.md index 465f6b1..540f2ff 100644 --- a/pages/demo/platform-api.md +++ b/pages/demo/platform-api.md @@ -1,4 +1,4 @@ -# Demo 3：Chrome 官方新特性快闪 +# Demo 6：Chrome 官方新特性快闪
diff --git a/plan/part2.md b/plan/part2.md index a5f9457..45b566e 100644 --- a/plan/part2.md +++ b/plan/part2.md @@ -5,7 +5,7 @@ 第二部分用于支撑 40 分钟分享中的 demo 段，目标不是泛泛介绍概念，而是生成两类明确产物： 1. **PPT 主线**：分别介绍 Chrome 最近新增或正在推进的关键能力，说明每个功能解决什么问题、处在什么成熟度、适合用什么官方材料展示。 -2. **项目代码演示**：创建并维护一个配套前端项目，用稳定页面串起官方 demo、功能对比和现场备用流程，让每个重点功能都有可打开、可讲述、可兜底的演示入口。 +2. **项目代码演示**：创建并维护一个配套前端项目。WebMCP 必须有可运行原始工程，其他实验能力可以用稳定页面串起官方 demo、功能对比和现场备用流程。 它不是落地教程，也不是厂商 SDK 接入课；目标是让对 Chrome 新特性不熟悉的 Web 开发者看懂： @@ -17,11 +17,12 @@ ## 总原则 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 操作说明”“流程说明”“工具调用编排”。 +2. **WebMCP 必须可运行**：WebMCP 是第二部分的主 demo，当前仓库必须提供可打开、可点击、可看源码的本地工程。 +3. **官方优先但不空讲**：官方材料用于确认标准口径和 API 边界；本地工程用于承接现场演示。 +4. **不复刻重实验能力**：不在本地项目里复刻 Prompt API、HTML-in-Canvas、Chrome DevTools for agents 等环境依赖重、版本敏感或 origin trial 依赖强的能力。 +5. **保持科普口径**：所有 token、耗时、成功率数据都作为具体案例，不当作普适结论；WebMCP 讲“提高可靠性”，不讲“零错误率”。 +6. **实验能力明确标注**：WebMCP、Prompt API、HTML-in-Canvas 等能力需要标注实验性、origin trial、渐进增强或浏览器支持边界。 +7. **剔除厂商私货**：OpenTiny、VAgent、WebAgent、Remote、WebSkills、遥控器组件、SDK 版本等只可作为原始材料背景，不作为 PPT 主概念。若需要表达类似思想，使用中立说法：“Agent 操作说明”“流程说明”“工具调用编排”。 ## Demo 结构 @@ -30,8 +31,8 @@ 先给观众一张总览：第二部分会按“新增功能介绍”和“项目代码演示”展开。 - 新增功能介绍：WebMCP、Modern Web Guidance、DevTools for agents、Prompt API、HTML-in-Canvas、Baseline / View Transitions。 -- 项目代码演示：用本地前端页面承接官方链接、功能卡片、三路径对比和现场备用讲述。 -- 兜底原则：本地项目不承担全部 Chrome API 复刻，只承担稳定讲述和演示组织。 +- 项目代码演示：WebMCP 提供可运行工程，其他能力用本地前端页面承接官方链接、功能卡片、三路径对比和现场备用讲述。 +- 兜底原则：WebMCP 要能跑；其他 Chrome API 不做完整复刻，只承担稳定讲述和演示组织。 ### 2. 主线演示：AI 操作 Web 的三种方式 @@ -43,17 +44,17 @@ - DOM / 可访问性树识别：靠页面结构找元素。比纯视觉结构化，但仍可能被复杂组件、隐藏状态和错误点击影响。 - WebMCP / 工具调用：页面主动暴露工具和参数，Agent 调用业务能力，不再猜 UI。 -展示方式优先级： +展示方式： -1. 使用原始材料中的录屏或截图结论做 PPT 叙事。 -2. 如无可用视频，则用表格和流程图描述三种路径。 -3. 如现场需要互动，再打开本地 demo 页面作为“对比仪表盘”。 +1. PPT 用表格和流程图描述三种路径。 +2. WebMCP 打开 `/demo/webmcp/index.html` 现场跑工程。 +3. 其他能力用官方 demo 和 `/demo/index.html` 做导航、对比和兜底。 ### 3. 新增功能介绍：官方 demo 快闪 每个能力只讲“它是什么、解决什么问题、现场怎么展示”，不展开完整 API 课。 -- **WebMCP**：使用官方 imperative API 文档中的 `document.modelContext.registerTool`、pizza layer、order status 示例说明“页面暴露工具”。 +- **WebMCP**：使用官方文档确认 API 口径，同时打开 `/demo/webmcp/index.html` 演示声明式表单工具、指令式 `registerTool`、工具 schema 和调用日志。 - **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 能力，适合渐进增强”。 @@ -62,15 +63,16 @@ ## 项目代码演示职责 -当前仓库的本地 demo 只承担三件事： +当前仓库的本地 demo 承担四件事： 1. 提供一个稳定的“官方 demo 导航页”，列出每个新增功能对应的官方资料、推荐讲法和现场备用链接。 -2. 提供一个“AI 操作 Web 三路径对比”页面，用表格、流程和状态卡讲清楚视觉识别、DOM/可访问性识别、WebMCP/工具调用的差异。 -3. 提供一个“本地兜底说明”：如果官方 demo 现场不可用，如何用项目页面和 PPT 中的截图/流程继续讲，不中断分享。 +2. 提供一个可运行的 WebMCP 原始工程：`public/demo/webmcp/index.html`、`styles.css`、`app.js`。 +3. 提供一个“AI 操作 Web 三路径对比”页面，用表格、流程和状态卡讲清楚视觉识别、DOM/可访问性识别、WebMCP/工具调用的差异。 +4. 提供一个“本地兜底说明”：如果官方 demo 现场不可用，如何用项目页面和 PPT 中的截图/流程继续讲，不中断分享。 不做以下事情： -- 不把本地项目做成真实 WebMCP SDK 接入教程。 +- 不把本地项目做成厂商 WebMCP SDK 接入教程。 - 不实现所有 Chrome 新特性。 - 不把实验 API 当作生产可用能力演示。 - 不要求现场浏览器开启 flags 才能完成主流程。 @@ -80,9 +82,10 @@ 第二部分建议 15 分钟左右： -- 2 分钟：demo 导航与官方优先说明。 -- 6 分钟：三种 AI 操作 Web 路径对比。 -- 5 分钟：Chrome 官方 demo 快闪。 +- 2 分钟：demo 交付物总览。 +- 7 分钟：WebMCP 可运行工程演示。 +- 4 分钟：三种 AI 操作 Web 路径对比。 +- 4 分钟：Chrome 官方 demo 快闪。 - 2 分钟：本地兜底和关键风险提示。 ## 参考资料 diff --git a/public/demo/index.html b/public/demo/index.html index e99ae76..6446d63 100644 --- a/public/demo/index.html +++ b/public/demo/index.html @@ -508,7 +508,7 @@ WebMCP

Imperative API

-

使用 document.modelContext.registerTool 暴露工具，官方示例包含 pizza layer 和 order status。

+

使用 navigator.modelContext.registerTool 暴露工具，官方示例包含 pizza layer 和 order status。

developer.chrome.com/docs/ai/webmcp/imperative-api