Run with npm run dev

一个入口，分别展示不同 Chrome API 能力。

总览页负责现场导航；每个能力页都可以独立打开、独立演示，不依赖 PPT 路由。 适合分享时从幻灯片跳出，展示真实浏览器中的 API 边界和 fallback。

能力页面

Agentic Web

WebMCP 工具契约

声明式表单工具、JavaScript 注册工具、工具 schema 和复合任务调用日志。

  • 能力检测：navigator.modelContext
  • 兜底：本地 mock runtime
 Built-in AI

Prompt API

检测 LanguageModel，可用时创建本地模型会话，不可用时展示 mock 摘要流程。

  • 能力检测：window.LanguageModel
  • 重点：本地模型、下载状态、渐进增强
 Workflow

DevTools for Agents

提供一个故意带问题的页面，让 Chrome DevTools MCP 检查 console、network 和 performance。

  • 官方工具：chrome-devtools-mcp
  • 重点：让 Agent 看到真实浏览器运行时
 Guidance

Modern Web Guidance

展示官方 CLI 如何给 AI coding agent 检索现代 Web 用法和 Baseline 边界。

  • 重点：把现代 Web 知识注入 agent
  • 兜底：可复制命令和预期输出
 Origin Trial

HTML-in-Canvas

展示真实 DOM 表单绘制进 canvas 的 API 方向；不支持时显示 fallback 预览。

  • 能力检测：drawElementImage / requestPaint
  • 重点：不是 canvas 手绘控件
 Compatibility

Baseline

把“能不能放心用”从浏览器版本猜测，改成特性状态和 fallback 策略。

  • 重点：跨浏览器采用判断
  • 兜底：本地特性矩阵
 UX API

View Transitions

展示 same-document 页面切换动画，并在不支持时退化为普通 DOM 更新。

  • 能力检测：document.startViewTransition
  • 重点：体验增强而非业务依赖

本地运行

npm run dev

# Slidev dev server 启动后访问：
http://localhost:3030/demo/index.html
http://localhost:3030/demo/webmcp/index.html
http://localhost:3030/demo/prompt-api/index.html
http://localhost:3030/demo/devtools-agents/index.html
http://localhost:3030/demo/modern-web-guidance/index.html
http://localhost:3030/html-in-canvas/index.html
http://localhost:3030/demo/baseline/index.html
http://localhost:3030/demo/view-transitions/index.html

# Modern Web Guidance 官方 CLI
scripts/demo-modern-web-guidance.sh