# 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>