Todo App with MCP Server

What is Todo App with MCP Server?

A demonstration project that builds a Model Context Protocol (MCP) server for a simple Todo application. It integrates a React/TypeScript frontend, a FastAPI backend, and an MCP server to enable AI systems (such as Claude) to interact with Todo items through standardized tools.

How to use Todo App with MCP Server?

Start all services with docker-compose up, which launches the frontend on port 5173 and the backend on port 8000. To use the MCP server with Claude Desktop, add a todo-mcp entry to the mcpServers section of the Claude Desktop configuration file, pointing to the todo-mcp directory and running main.py with uv.

Key features of Todo App with MCP Server

• Implements the Model Context Protocol (MCP) open standard
• Provides tool-based interaction with the Todo application
• Three‑component architecture: React frontend, FastAPI backend, MCP server
• Ready‑to‑run with Docker Compose
• Integrated with Claude Desktop for AI‑driven Todo management

Use cases of Todo App with MCP Server

• Demonstrating how to build an MCP server for a typical CRUD application
• Enabling Claude Desktop to create, read, update, and delete Todo items
• Learning the MCP client‑server architecture with a concrete example

FAQ from Todo App with MCP Server

What exactly is the Model Context Protocol (MCP)?

MCP is an open standard developed by Anthropic that allows AI systems to dynamically connect with external tools, files, and APIs using a client‑server architecture. It provides a standardized way for AI models to access real‑time data and execute operations through defined tools.

What are the prerequisites for running this project?

You need Docker and Docker Compose, Node.js, Python, UV (Python package manager), and Claude Desktop (for using with Anthropic’s Claude AI).

How do I start the application?

Run docker-compose up in the project root. This will start the frontend (port 5173) and backend (port 8000) services.

How do I configure Claude Desktop to use the MCP server?

Edit the Claude Desktop configuration file (claude_desktop_config.json). Add a todo-mcp server entry under mcpServers with the command uv, args pointing to the todo-mcp directory and main.py, then restart Claude Desktop.

What transports or authentication does the MCP server use?

The README does not specify transport or authentication details; it only describes configuration via the Claude Desktop configuration file.