AI导哈

交互式待办事项管理工具

一个基于MCP协议的交互式待办事项管理工具，集成了AI聊天界面和实时UI更新功能。

  • by Raikion201
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 Raikion201/mcp-demo

使用说明

MCP Todo-使用MCP-UI进行交互式Todo管理

一个最小的MCP（模型上下文协议）实现，其特点是使用DeepSeek AI的交互式Todo应用程序和AI驱动的聊天界面。

🌟 特性

  • MCP服务器：显示5个工具(todo_ui, todo_create, todo_list, todo_update, todo_delete)
  • AI聊天界面：使用Google Gemini进行函数调用的自然语言交互
  • MCP-UI集成：直接在聊天中呈现的交互式UI资源
  • 实时更新：更改会立即反映在嵌入式UI中

📁 项目结构

mcp/
├── mcp-server/          # MCP Server with todo tools
│   ├── src/
│   │   ├── http-server.ts   # Main HTTP/MCP server
│   │   └── core/storage.ts  # In-memory todo storage
│   └── package.json
│
├── mcp-ui/              # Next.js Chat Interface
│   ├── app/page.tsx     # Main chat page with Gemini AI
│   ├── lib/mcp-client.ts # MCP client for tool calls
│   └── package.json
│
└── README.md

🚀 快速开始

先决条件

  • Node.js 18+
  • npm或pnpm

1.安装依赖项

# Install server dependencies
cd mcp-server
npm install

# Install client dependencies
cd ../mcp-ui
npm install

2.启动MCP服务器

cd mcp-server
npm install
npm run dev

服务器将在以下时间启动 http://localhost:3001/mcp

3.启动聊天界面

cd mcp-ui
npm run dev

用户界面将在 http://localhost:3000

🔧 MCP工具

工具 说明
todo_ui 显示交互式Todo应用程序UI
todo_create 创建一个带有标题和可选描述的新待办事项
todo_list 列出所有待办事项，可选择按完成状态进行筛选
todo_update 更新待办事项的标题、描述或完成状态
todo_delete 按ID删除待办事项

💬 聊天示例

在聊天中尝试以下命令：

  • “显示我的待办事项”
  • “创建待办事项：购买杂货”
  • “添加任务以在周五之前完成报告”
  • “显示todo UI”
  • “将我的所有待办事项标记为已完成”

🔑 配置

环境变量

创建 .env.local 在 mcp-ui 文件夹：

# DeepSeek API Key
NEXT_PUBLIC_DEEPSEEK_API_KEY=your_deepseek_api_key_here

# MCP Server URL  
NEXT_PUBLIC_MCP_SERVER_URL=http://localhost:3001/mcp

从以下位置获取DeepSeek API密钥：https://platform.deepseek.com/

🏗️ 建筑

┌─────────────────┐     ┌─────────────────┐     ┌─────────────────┐
│                 │     │                 │     │                 │
│   Chat UI       │────▶│  Gemini AI      │────▶│  MCP Server     │
│   (Next.js)     │     │  (Function      │     │  (Express +     │
│                 │◀────│   Calling)      │◀────│   MCP SDK)      │
│                 │     │                 │     │                 │
└─────────────────┘     └─────────────────┘     └─────────────────┘
        │                                               │
        │           ┌─────────────────┐                 │
        └──────────▶│   MCP-UI        │◀────────────────┘
                    │   Resource      │
                    │   Renderer      │
                    └─────────────────┘

流动

  1. 用户在聊天中发送消息
  2. Gemini AI决定调用哪个MCP工具
  3. 聊天UI使用工具参数调用MCP服务器
  4. MCP服务器执行工具并返回UI资源
  5. UI资源在聊天中使用 UIResourceRenderer
  6. 用户可以与嵌入式UI交互（创建、更新、删除）
  7. 操作被发送回MCP服务器

📦 依赖项

服务器

  • @modelcontextprotocol/sdk -MCP-SDK
  • @mcp-ui/server -UI资源创建
  • express -HTTP服务器
  • zod -架构验证

客户端

  • @mcp-ui/client -UI资源渲染
  • openai -OpenAI兼容SDK（适用于DeepSeek）
  • next -React框架
  • react -UI库

🔒 安全说明

  • Google API密钥在客户端公开（NEXT_PUBLIC_*）。对于生产，使用后端代理
  • MCP服务器已启用CORS进行开发。限制生产
  • 服务器重启时内存存储重置

📝 许可证

麻省理工学院

🙏 致谢

相关 MCP