# Demo 1：演示交付物总览

<div class="grid grid-cols-3 gap-5 mt-8">

<div class="card-blue">
<div class="font-semibold mb-3">PPT 讲什么</div>
<div class="space-y-2 text-sm">

- 分别介绍新增能力
- 说明解决的问题
- 标注成熟度和限制
- 给出官方资料来源

</div>
</div>

<div class="card-green">
<div class="font-semibold mb-3">工程演示什么</div>
<div class="space-y-2 text-sm">

- WebMCP 可运行页面
- 声明式表单工具
- 指令式 registerTool
- 工具 schema 和调用日志
- mock runtime 兜底

</div>
</div>

<div class="card-amber">
<div class="font-semibold mb-3">新增正式 demo</div>
<div class="space-y-2 text-sm">

- Modern Web Guidance
- DevTools for agents
- HTML-in-Canvas
- View Transitions
- Prompt API / Baseline 保留快闪

</div>
</div>

</div>

<div class="mt-8 card text-sm">
原则：WebMCP 是主 demo；Modern Web Guidance 和 DevTools for agents 按官方流程演示；HTML-in-Canvas 和 View Transitions 用本地页面辅助展示。
</div>

<!--
官方资料入口：
- WebMCP imperative API: https://developer.chrome.com/docs/ai/webmcp/imperative-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
- Prompt API: https://developer.chrome.com/docs/ai/prompt-api
- HTML-in-Canvas: https://developer.chrome.com/blog/html-in-canvas-origin-trial
- Chrome demos index: https://chrome.dev/

讲法：先告诉观众“这不是现场复刻所有实验 API，而是用官方 demo 建立可信证据链”。这样可以降低现场失败风险。
-->