# 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">官方快闪</div>
<div class="space-y-2 text-sm">

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

</div>
</div>

</div>

<div class="mt-8 card text-sm">
原则：WebMCP 至少要有可运行工程；其他 Chrome 新能力用官方 demo 快闪，避免把现场变成环境配置课。
</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 建立可信证据链”。这样可以降低现场失败风险。
-->