# Demo 3：WebMCP 原始工程能跑起来

<div class="grid grid-cols-[1.05fr_0.95fr] gap-8 mt-8">

<div class="card">
<div class="font-semibold mb-3">工程文件</div>

```txt
public/demo/webmcp/
├── index.html   # 业务 UI + 声明式表单工具
├── styles.css   # 演示界面样式
└── app.js       # registerTool + mock runtime + 执行日志
```

</div>

<div class="card-blue">
<div class="font-semibold mb-3">运行入口</div>
<div class="space-y-3 text-sm">

- 启动：`pnpm dev`
- 打开：`/demo/webmcp/index.html`
- 无 WebMCP 环境：走本地 mock runtime
- 有 WebMCP 环境：优先调用 `navigator.modelContext`

</div>
</div>

</div>

<div class="mt-8 card-green text-sm">
这页要现场打开工程，不只讲链接。观众能看到“页面 UI”和“Agent 工具视角”同时存在。
</div>

<!--
现场建议：
1. 先打开 http://localhost:3030/demo/webmcp/index.html 或实际 dev server URL。
2. 展示左侧 HTML 表单和右侧工具列表。
3. 再切到 app.js，解释 registerTool 的 name / description / inputSchema / execute。
-->