MCP Basic Implementation Sample

このプロジェクトは MCP (Model Context Protocol) の基礎的な実装サンプルです。 チャットで使っているLLMにMCP情報を渡すことで、LLMが自動でツールを呼び出して答えを取得し、チャットに返す、という一連の流れを実装しています。

簡単な例として計算と猫に関する情報を返すツールを用意しています。

MCP とは

Model Context Protocol (MCP) は、AI モデルと外部ツール・データソースをつなぐためのオープンプロトコルです。JSON-RPC 2.0 をベースとし、以下のライフサイクルで動作します：

クライアント → initialize → tools/list → tools/call → ...

このサンプルで実装していること

MCP サーバー (/api/mcp)

• JSON-RPC 2.0 に準拠したリクエスト処理
• ライフサイクル管理（Initializing → Running）
• ツール定義と実行ハンドラー

実装済みツール

ツール名	説明
calculator	四則演算（add / subtract / multiply / divide）
cosmo	コズモ（猫）の情報を返す（basic / personality / favorite / all）

チャット UI (/api/chat)

• OpenAI 互換の API インターフェース
• LLM（OpenAI API）との連携（API キー設定時）
• パターンマッチングによるフォールバック（API キー未設定時）
• ツール呼び出しログの表示

ファイル構成

app/
├── api/
│   ├── mcp/
│   │   ├── route.ts     # MCP エンドポイント (POST /api/mcp)
│   │   ├── server.ts    # MCP サーバー実装・ツール定義
│   │   └── types.ts     # JSON-RPC / MCP 型定義
│   └── chat/
│       └── route.ts     # チャット API (POST /api/chat)
├── page.tsx             # チャット UI
└── lib/
    └── config.ts        # サーバー設定

セットアップ

npm install
npm run dev

http://localhost:3000 をブラウザで開いてください。

OpenAI API キーの設定（オプション）

.env.local を作成して API キーを設定すると、実際の LLM を使ったチャットが可能になります：

OPENAI_API_KEY=your-api-key-here
OPENAI_BASE_URL=https://api.openai.com/v1
OPENAI_MODEL=gpt-4o-mini
ENABLE_REAL_LLM=true

API キーなしでも、パターンマッチングによるデモとして動作します。

MCP エンドポイントの使い方

# initialize
curl -X POST http://localhost:3000/api/mcp \
  -H "Content-Type: application/json" \
  -d '{"jsonrpc":"2.0","id":1,"method":"initialize","params":{"protocolVersion":"2024-11-05","clientInfo":{"name":"test","version":"1.0"},"capabilities":{}}}'

# ツール一覧
curl -X POST http://localhost:3000/api/mcp \
  -H "Content-Type: application/json" \
  -d '{"jsonrpc":"2.0","id":2,"method":"tools/list","params":{}}'

# ツール実行（計算機）
curl -X POST http://localhost:3000/api/mcp \
  -H "Content-Type: application/json" \
  -d '{"jsonrpc":"2.0","id":3,"method":"tools/call","params":{"name":"calculator","arguments":{"operation":"add","a":10,"b":5}}}'

技術スタック

• Next.js 16 — App Router
• TypeScript
• Tailwind CSS
• shadcn/ui — UI コンポーネント