full-stack-todo-mcp

hashaam-011/full-stack-todo-mcp

3.1

If you are the rightful owner of full-stack-todo-mcp and would like to certify it and/or have it hosted online, please leave a comment on the right or send an email to dayong@mcphub.com.

The Model Context Protocol (MCP) server is a specialized server designed to enhance applications with AI capabilities by providing a structured protocol for model interactions.

Tools
5
Resources
0
Prompts
0

Full-Stack Todo App with AI-Powered MCP Integration

A modern full-stack application combining a React frontend, Node.js backend, and MCP (Model Context Protocol) server to provide AI-enhanced task management capabilities.

🏗️ Architecture Overview

┌─────────────────┐    HTTP     ┌─────────────────┐    HTTP     ┌─────────────────┐
│   React App     │ ──────────→ │   Node.js API   │ ──────────→ │   MCP Server    │
│   (Frontend)    │             │   (Backend)     │             │   (AI Tasks)    │
│   Port: 3001    │             │   Port: 5001    │             │   Port: 3002    │
└─────────────────┘             └─────────────────┘             └─────────────────┘
                                          │                               │
                                          ▼                               ▼
                                ┌─────────────────┐             ┌─────────────────┐
                                │    MongoDB      │             │ Claude Desktop  │
                                │   (Optional)    │             │   Integration   │
                                └─────────────────┘             └─────────────────┘

🚀 Features

Core Todo App

  • ✅ User Authentication (JWT-based)
  • ✅ Todo CRUD Operations (Create, Read, Update, Delete)
  • ✅ Real-time Chat (Socket.IO)
  • ✅ Responsive Design (Mobile-friendly)

AI-Enhanced Features (via MCP)

  • 🧠 Smart Task Breakdown - AI breaks complex todos into smaller, manageable tasks
  • 💡 Intelligent Suggestions - AI analyzes your todos and suggests improvements
  • 📋 Project Planning - AI creates comprehensive project plans from your todo list
  • 🤖 Task Management - AI-powered task creation and monitoring
  • 🔄 Claude Desktop Integration - Direct integration with Claude for advanced AI assistance

📦 Project Structure

modelcontextprotocol/
├── frontend/                 # React TypeScript frontend
│   ├── src/
│   │   ├── components/       # React components
│   │   ├── services/         # API and AI services
│   │   ├── context/          # React context
│   │   └── types/            # TypeScript types
│   └── package.json
├── backend/                  # Node.js Express backend
│   ├── routes/               # API routes
│   │   ├── auth.js          # Authentication routes
│   │   ├── todos.js         # Todo CRUD routes
│   │   └── ai.js            # AI-enhanced routes
│   ├── middleware/           # Express middleware
│   ├── mcp-client.js        # MCP server client
│   ├── server.js            # Main server (with MongoDB)
│   ├── server-standalone.js # Standalone server (in-memory)
│   └── package.json
└── mcp-task-server/         # MCP server for AI features
    ├── src/
    │   ├── index.ts         # MCP server (for Claude Desktop)
    │   ├── http-server.ts   # HTTP server (for web app)
    │   ├── server.ts        # Core MCP logic
    │   └── tools/           # AI tools and capabilities
    └── package.json

🛠️ Setup Instructions

Prerequisites

  • Node.js (v18+)
  • npm or yarn
  • MongoDB (optional, can use standalone mode)
  • Git

1. Clone the Repository

git clone <repository-url>
cd modelcontextprotocol

2. Install Dependencies

Backend
cd backend
npm install
Frontend
cd ../frontend
npm install
MCP Server
cd ../mcp-task-server
npm install

3. Environment Configuration

Backend (.env)
cd ../backend
cp .env.example .env
# Edit .env with your configurations

Default .env settings:

MONGODB_URI=mongodb://localhost:27017/todo-chat-app
JWT_SECRET=your_jwt_secret_key_here_change_this_in_production
PORT=5001
MCP_SERVER_URL=http://localhost:3002
MCP_TIMEOUT=10000

4. Start the Services

Option A: With MongoDB
# Terminal 1: Start MongoDB (if not running as service)
mongod

# Terminal 2: Start Backend
cd backend
npm run dev

# Terminal 3: Start Frontend
cd frontend
npm start

# Terminal 4: Start MCP HTTP Server
cd mcp-task-server
npm run http
Option B: Standalone (No MongoDB Required)
# Terminal 1: Start Backend (Standalone)
cd backend
npm run dev-standalone

# Terminal 2: Start Frontend
cd frontend
npm start

# Terminal 3: Start MCP HTTP Server
cd mcp-task-server
npm run http

5. Access the Application

🤖 Claude Desktop Integration

To integrate with Claude Desktop, add this to your Claude Desktop configuration:

{
  "mcpServers": {
    "task-management": {
      "command": "node",
      "args": ["C:/path/to/your/project/mcp-task-server/build/index.js"],
      "env": {}
    }
  }
}

📡 API Endpoints

Authentication

  • POST /api/auth/register - Register new user
  • POST /api/auth/login - Login user

Todos

  • GET /api/todos - Get all todos
  • POST /api/todos - Create new todo
  • PUT /api/todos/:id - Update todo
  • DELETE /api/todos/:id - Delete todo

AI Features

  • POST /api/ai/breakdown-todo - AI breakdown of a todo
  • POST /api/ai/create-ai-task - Create AI-enhanced task
  • POST /api/ai/suggest-improvements - Get AI suggestions
  • POST /api/ai/create-project-plan - Create project plan
  • GET /api/ai/health - Check AI service health

🧩 MCP Tools Available

The MCP server provides these tools to AI assistants:

  • create_task - Create and manage tasks
  • create_project_plan - Generate comprehensive project plans
  • analyze_project - Analyze project structure and suggest improvements
  • execute_task - Execute and monitor task progress
  • get_task_status - Check task completion status

🔄 Development Workflow

Making Changes

  1. Frontend changes: Edit files in frontend/src/, the dev server will auto-reload
  2. Backend changes: Edit files in backend/, nodemon will auto-restart
  3. MCP server changes: Edit files in mcp-task-server/src/, restart with npm run http

Testing AI Features

  1. Ensure all three servers are running
  2. Register/login to the web app
  3. Create some todos
  4. Click on AI enhancement buttons to test MCP integration

🚨 Troubleshooting

Common Issues

MCP Server Not Available
  • Check if MCP HTTP server is running on port 3002
  • Verify MCP_SERVER_URL in backend .env file
  • Check console for connection errors
Frontend Can't Connect to Backend
  • Verify backend is running on port 5001
  • Check CORS configuration in backend
  • Verify API_URL in frontend environment
Database Connection Issues
  • Use standalone mode: npm run dev-standalone
  • Check MongoDB connection string
  • Ensure MongoDB service is running

Logs and Debugging

# Backend logs
cd backend && npm run dev

# Frontend logs  
cd frontend && npm start

# MCP server logs
cd mcp-task-server && npm run http

🤝 Contributing

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the file for details.

🔗 Technologies Used

Frontend

  • React 18
  • TypeScript
  • Axios (HTTP client)
  • Socket.IO Client
  • CSS3

Backend

  • Node.js
  • Express.js
  • MongoDB + Mongoose
  • JWT Authentication
  • Socket.IO
  • bcryptjs

MCP Server

  • TypeScript
  • Model Context Protocol SDK
  • Express.js (for HTTP endpoints)
  • UUID (for task IDs)
  • Date-fns (for date handling)

🎯 Future Enhancements

  • Task priorities and deadlines
  • File attachments for todos
  • Team collaboration features
  • Advanced AI analytics
  • Mobile app development
  • Docker containerization
  • CI/CD pipeline

📞 Support

If you encounter any issues or have questions:

  1. Check the troubleshooting section above
  2. Review the console logs for errors
  3. Open an issue on GitHub
  4. Contact the development team

Happy coding! 🚀