はじめに
こんにちは！
最近話題の Model Context Protocol（MCP） を採用し、チャットからタスク管理ができる AIアシスタント付き TODO アプリ を作ってみました。
- 「掃除のタスクを追加して」
- 「買い物リストを完了にしておいて」
といった自然言語指示を受け、裏側では MCP が API を呼び出し TODOリスト を更新します。
本記事では MCP の概要 → 技術スタック → 実装 の順でまとめました。
目次
MCP とは？
Model Context Protocol（MCP） は Anthropic が 2024 年 11 月に OSS として公開した “LLM 用 USB‑C” 的な標準プロトコルです。
2025 年 3 月には OpenAI・Google もサポートを表明し、Microsoft も Build 2025 で「AI Agents の共通土台」として紹介しました。
| 用語 | 役割 |
|---|---|
| Client | ユーザーが触れるアプリ側。1 つの Server と 1:1 で接続し、モデルに Tool / Resource / Prompt 情報を渡す |
| Server | 外部システムを MCP 用にラップしたサービス。HTTP+SSE または stdio で Client と通信 |
| Tool | LLM が “副作用あり” で呼び出せる関数（例: POST /todos） |
| Resource | 読み取り専用のデータ取得口（例: GET /todos） |
| Prompt | 再利用可能なプロンプトテンプレート |
詳細仕様: https://modelcontextprotocol.io/specification/2025-03-26
プロダクト概要
チャット入力に「ゴミ出しをするを追加したい」と打つと…
- MCP Client が “ユーザープロンプト＋利用可能ツール一覧” を Gemini に渡す
- Gemini が「
addTodoItemTool を使う」と判断 - Client → Server →
POST /todosでタスクを追加
フロントエンド側は ツール定義を宣言するだけ で OK なので、“LLM が勝手に API を選んでくれる体験” が得られます。
技術スタック
| カテゴリ | 採用技術 |
|---|---|
| フロントエンド | React / Next.js 14 (App Router) / Tailwind CSS |
| MCPサーバー | Hono / TypeScript |
| サーバーAPI | Hono / Prisma ORM / SQLite |
| LLM | Google Gemini 2.0 Flash |
実装ステップ
| ステップ | 概要 | ポイント・Tips |
|---|---|---|
| 1 | 環境構築 Next.js プロジェクト作成 & 必要なパッケージ導入 |
pnpm create next-app 必要なパッケージをpnpm addで追加 |
| 2 | REST API 実装 Hono + Prisma で TODO の CRUD API を作成 |
src/api ディレクトリ推奨 Prismaで型安全なDB操作 例: /todos エンドポイント |
| 3 | MCP Server 構築 @modelcontextprotocol/sdk + hono-mcp-* で /mcp 公開 |
MCPツール（addTodo, deleteTodo, updateTodo）を宣言 Honoで /mcp や /sse エンドポイント |
| 4 | クライアント組み込み Vercel AI SDK で MCP Client を使い LLM 連携 |
experimental_createMCPClient でツール一覧を取得 Gemini等のモデルに渡す |
| 5 | チャットUI実装 進行状況やエラーは react-hot-toast でユーザーにフィードバック |
チャット送信時にトースト表示 TODOリストはチャット完了時に自動リフレッシュ |
参考リンク
- MCP 公式サイト: https://modelcontextprotocol.io/
- MCP 仕様書 (2025-03-26): https://modelcontextprotocol.io/specification/2025-03-26
- Anthropic 公式アナウンス: https://www.anthropic.com/news/model-context-protocol
- Microsoft Build 2025 CTO Keynote: https://www.reuters.com/business/microsoft-wants-ai-agents-work-together-remember-things-2025-05-19/
- Qiita 記事「Model Context Protocol を使った TODO アプリ開発メモ」: https://qiita.com/gon0821/items/e75b327f4da4662e4dcd
- youtube動画【初心者OK】０からMCP✕Next.jsでAIアプリを実装する実践チュートリアル【完全解説】」: https://www.youtube.com/watch?v=mJLSrpp5pAM&t=582s