Todo App with MCP Server

MCP サーバーを備えた Todo アプリ

プロジェクト概要

このプロジェクトでは、シンプルな Todo アプリケーションと連携する Model Context Protocol（MCP）サーバーの構築方法を紹介します。主に次の3つのコンポーネントで構成されています。

1. クライアント：React/TypeScript のフロントエンドアプリケーション
2. サーバー：Todo 項目を管理する FastAPI バックエンド
3. MCP サーバー：Todo アプリケーションとのツールベースのやり取りを提供する専用サーバー

MCP（Model Context Protocol）とは？

Model Context Protocol（MCP）は、AI システムが外部のツール、ファイル、API に動的に接続できるようにするために Anthropic が開発したオープン標準です。定義済みのツールを通じて、AI モデルがリアルタイムデータにアクセスし、操作を実行するための標準化された方法を提供します。

MCP はクライアント・サーバーアーキテクチャを使用します。

• MCP サーバー：データや機能（Todo API など）への構造化されたアクセスを提供します
• MCP クライアント：MCP サーバーにコンテキストやアクションを要求する AI アプリケーションです

MCP は「AI 接続のための USB-C」のようなものです。新しいシステムごとに個別の統合を行わなくても、AI システムが外部のデータソースやツールとシームレスに連携できる、汎用的なインターフェースです。

はじめに

前提条件

• Docker と Docker Compose
• NodeJS
• Python
• UV（Python パッケージマネージャー）
• Claude Desktop（Anthropic の Claude AI で使用する場合）

アプリケーションの起動

1. このリポジトリをクローンします
2. Docker Compose を実行して、すべてのサービスを起動します。

docker-compose up

次のサービスが起動します。

• http://localhost:5173 のフロントエンドクライアント
• http://localhost:8000 のバックエンドサーバー

Claude Desktop での使用

Claude Desktop で MCP サーバーを使用するには、次の手順に従います。

1. Claude Desktop の設定ファイルを探します。
   • macOS：~/Library/Application Support/Claude Desktop/claude_desktop_config.json
   • Windows：%APPDATA%\Claude Desktop\claude_desktop_config.json
   • Linux：~/.config/Claude Desktop/claude_desktop_config.json
2. mcpServers セクションを追加または更新して、todo-mcp サーバーを設定に追加します。

{
  "mcpServers": {
    "todo-mcp": {
      "command": "uv",
      "args": [
        "--directory",
        "/path/to/repo/todo-mcp",
        "run",
        "main.py"
      ]
    }
  }
}

3. /path/to/repo/todo-mcp を、todo-mcp ディレクトリの実際のパスに置き換えます
4. ファイルを保存して、Claude Desktop を再起動します
5. Claude を使用する際、Claude のインターフェースから todo-mcp サーバーとそのツールにアクセスできるようになります