41 lines
1.1 KiB
Markdown
41 lines
1.1 KiB
Markdown
# 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。
|
||
-->
|