使用说明
MCP演示-Todo助手
一个代理AI演示，Ollama解释自然语言并自动调用工具来管理待办事项。
建筑
Frontend (React :5173)
├── Chat Panel (left)
│ └── SSE → MCP /chat/stream
└── Log Panels (right, tabbed)
├── Backend Tab → SSE → Backend /logs/stream
├── MCP Tab → SSE → MCP /logs/stream
└── AI Tab → (from chat SSE events)
MCP Server (:3001) → Backend API (:3000)
数据流示例
当用户键入“创建一个名为buy milk的todo”时：
1. Frontend sends SSE request to MCP
GET /chat/stream?message=create%20a%20todo%20called%20buy%20milk
2. MCP sends to Ollama with tool definitions
→ Ollama returns: tool_call: create_todo({title: "buy milk"})
→ MCP broadcasts: SSE event "tool_call"
3. MCP executes tool against Backend
POST /todos {title: "buy milk"}
→ Backend returns: {id: 1, title: "buy milk", done: false}
→ Backend broadcasts: SSE log event
→ MCP broadcasts: SSE event "tool_result"
4. MCP sends result back to Ollama
→ Ollama returns: "I've created a todo called 'buy milk'"
→ MCP broadcasts: SSE event "done"
5. Frontend displays response with collapsible trace
快速开始
# Install dependencies
pnpm install
# Start all services
pnpm dev
# Open http://localhost:5173
服务
| 服务 | 端口 | 描述 |
|---|---|---|
| 前端 | 5173 | React+Vite+顺风（暗模式） |
| MCP | 3001 | Ollama代理工具执行 |
| 后端 | 3000 | 用于todo的Express REST API |
脚本
pnpm dev # Start all services in parallel
pnpm ollama:ps # Show running Ollama models
需求
- Node.js 18+
- pnpm
- 奥拉玛与
qwen2.5:3b模型已安装(ollama pull qwen2.5:3b)
