待办事项管理应用

使用React的MCP Todo应用程序

使用模型上下文协议（MCP）和React接口的TODO管理应用程序。

🚀 配置快速

先决条件

• Node.js 22+（使用NVM自动管理）
• NVM安装

安装和启动

1. 自动配置Node.js环境：

   复制

   source ~/.nvm/nvm.sh  # Charger nvm si nécessaire
   ./setup-env.sh        # Configure Node 22 et installe les dépendances
   

2. 或手动：

   复制

   nvm use              # Utilise Node 22 (défini dans .nvmrc)
   npm install          # Installe les dépendances
   npm run build        # Build l'application React
   npm start            # Démarre le serveur
   

📋 可用脚本

• npm run setup-node -配置la版本节点正确
• npm start -启动Express服务器（端口3210）
• npm run dev -Nodemon的开发模式
• npm run build -为生产构建React应用程序
• npm run build:watch -内置en模式手表
• npm run inspect -启动MCP检查员

🏗️ 建筑

/var/www/html/mcp/
├── client/src/          # Code source React
│   ├── App.jsx         # Composant principal
│   ├── main.jsx        # Point d'entrée React
│   ├── App.css         # Styles de l'application
│   └── index.css       # Styles globaux
├── src/                # Code source serveur
│   ├── index.js        # Serveur Express principal
│   ├── mcp-server.js   # Configuration MCP
│   └── services/       # Services métier
├── dist/               # Fichiers React buildés
├── .nvmrc              # Version Node requise (22.19.0)
└── vite.config.js      # Configuration Vite

🌐 使用

1. 界面Web： http://localhost:3210
2. API MCP： http://localhost:3210/mcp
3. API REST（回退）： http://localhost:3210/api/todos

🔧 自动NVM配置

项目配置为自动使用Node.js 22：

• 文件 .nvmrc ：指定节点版本（22.19.0）
• 脚本 setup-env.sh ：环境的自动配置
• 脚本npm ：包括 nvm use 为了保证正确的版本

对于新终端

在每个新终端中，运行：

cd /var/www/html/mcp
nvm use    # Active Node 22 pour ce projet

或者使用自动脚本：

./setup-env.sh

🎯 功能

• ✅ 界面反应现代和响应
• ✅ 用于TODO管理的MCP API
• ✅ 集成Express服务器
• ✅ 快速自动构建
• ✅ 自动NVM配置
• ✅ 带有渐变和CSS动画的样式

🐛 故障排除

错误“找不到randomUUID”

确保使用Node.js 22+：

nvm use
node -v  # Doit afficher v22.19.0

端口错误

确保没有其他服务使用端口3210：

lsof -i :3210