MCPを使ってAIアシスタント付きTODOアプリを作成してみました！


# はじめに

こんにちは！
最近話題の **Model Context Protocol（MCP）** を採用し、チャットからタスク管理ができる **AIアシスタント付き TODO アプリ** を作ってみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3836145/d791a130-8ba3-4c39-9fd7-22d7fb5b719e.png)

* 「掃除のタスクを追加して」
* 「買い物リストを完了にしておいて」

といった自然言語指示を受け、裏側では MCP が API を呼び出し TODOリスト を更新します。
本記事では **MCP の概要 → 技術スタック → 実装**　の順でまとめました。



https://github.com/yaya16888/assistantTODO

---

# 目次

1. [MCP とは？](#mcp-とは)
2. [プロダクト概要](#プロダクト概要)
3. [技術スタック](#技術スタック)
4. [実装ステップ](#実装ステップ)
5. [参考リンク](#参考リンク)

---

## 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](https://modelcontextprotocol.io/specification/2025-03-26)


---

## プロダクト概要
チャット入力に「ゴミ出しをするを追加したい」と打つと…

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3836145/ec75b704-7f2a-4fba-9d06-ab6145f63793.png)




1. **MCP Client** が “ユーザープロンプト＋利用可能ツール一覧” を Gemini に渡す
2. Gemini が「`addTodoItem` Tool を使う」と判断
3. 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 | 環境構築<br>Next.js プロジェクト作成 & 必要なパッケージ導入 | pnpm create next-app<br>必要なパッケージをpnpm addで追加 |
| 2 | REST API 実装<br>Hono + Prisma で TODO の CRUD API を作成 | src/api ディレクトリ推奨<br>Prismaで型安全なDB操作<br>例: /todos エンドポイント |
| 3 | MCP Server 構築<br>@modelcontextprotocol/sdk + hono-mcp-* で /mcp 公開 | MCPツール（addTodo, deleteTodo, updateTodo）を宣言<br>Honoで /mcp や /sse エンドポイント |
| 4 | クライアント組み込み<br>Vercel AI SDK で MCP Client を使い LLM 連携 | experimental_createMCPClient でツール一覧を取得<br>Gemini等のモデルに渡す |
| 5 | チャットUI実装<br>進行状況やエラーは react-hot-toast でユーザーにフィードバック | チャット送信時にトースト表示<br>TODOリストはチャット完了時に自動リフレッシュ |

---

## 参考リンク

* MCP 公式サイト: [https://modelcontextprotocol.io/](https://modelcontextprotocol.io/)
* MCP 仕様書 (2025-03-26): [https://modelcontextprotocol.io/specification/2025-03-26](https://modelcontextprotocol.io/specification/2025-03-26)
* Anthropic 公式アナウンス: [https://www.anthropic.com/news/model-context-protocol](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/](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](https://qiita.com/gon0821/items/e75b327f4da4662e4dcd)
* youtube動画【初心者OK】０からMCP✕Next.jsでAIアプリを実装する実践チュートリアル【完全解説】」: [https://www.youtube.com/watch?v=mJLSrpp5pAM&t=582s](https://www.youtube.com/watch?v=mJLSrpp5pAM&t=582s)
---