MCP演示
8个可运行的演示，展示了模型上下文协议功能——从纯文本工具到具有双向通信的交互式MCP应用程序。
快速开始
node --version # Requires Node 20+
npm install
npm run dev # Start MCP server (stdio transport)生产：
npm run build
npm startVS代码配置
增添 .vscode/settings.json 要自动发现服务器，请执行以下操作：
{
"mcp": {
"servers": {
"mcpdemos": {
"command": "node",
"args": ["dist/index.js"],
"cwd": "${workspaceFolder}"
}
}
}
}用于开发 tsx:
{
"mcp": {
"servers": {
"mcpdemos": {
"command": "npx",
"args": ["tsx", "src/index.ts"],
"cwd": "${workspaceFolder}"
}
}
}
}演示
| # | 演示 | 类别 | 工具 | 资源 |
|---|---|---|---|---|
| 1 | 礼貌CLI vs队友 | 挂钩 | demo1_polite_cli | - |
| 2 | 启发式中流 | 谈判 | demo2_scaffold_start, demo2_scaffold_confirm | - |
| 3 | 安全OAuth切换 | 安全 | demo3_request_consent, demo3_approve_consent, demo3_protected_action | - |
| 4 | 异步进度 | 协调 | demo4_start_pipeline, demo4_check_progress | - |
| 5 | 取消/重试/继续 | 协调 | demo5_cancel_task, demo5_retry_task, demo5_list_tasks | - |
| 6 | 取色笔 | 共享工件 | demo6_save_color, demo6_get_palette | ui://color-picker |
| 7 | 组件库 | 共享工件 | demo7_gallery_state | ui://component-gallery |
| 8 | 出口文物 | 平台 | demo8_export_report, demo8_list_exports | - |
Runbook
- ShowRun所有演示 -所有演示演练脚本
- 5分钟跑步记录 -快速亮点（演示1、2、3、4、6、8）
- 15分钟跑步记录 -所有8个演示的完整演练，包括舞台计时
建筑
src/
index.ts ← Server entry point (stdio transport)
demos/
demo1-polite-cli.ts ← Tool: verbose CLI responses
demo2-elicitation.ts ← Tools: scaffold start + confirm
demo3-oauth.ts ← Tools: consent → approve → action
demo4-async-progress.ts ← Tools: pipeline + progress polling
demo5-cancel-retry.ts ← Tools: cancel, retry, list tasks
demo6-color-picker.ts ← Tool + Resource: colour picker UI
demo7-component-gallery.ts ← Tool + Resource: gallery UI
demo8-export-artifacts.ts ← Tool: report generation
examples/
demo{1-8}/README.md ← Per-demo docs with stage scripts
docs/
5-minute-runbook.md
15-minute-runbook.md
outputs/ ← Generated reports (Demo 8)故障弱化
如果主机不支持MCP应用程序(ui:// 资源），所有演示都退回到纯文本工具交互。UI资源是可选的增强功能。
依赖项
@modelcontextprotocol/sdk-MCP服务器框架zod-架构验证tsx（dev）-TypeScript执行- 无需外部API、数据库或云服务
许可证
麻省理工学院