Next.js で Model Context Protocol を超簡単に実装してみる

要約
AI クライアントと連携可能な Model Context Protocol(MCP)サーバーの概要と実装方法を、Next.js(App Router)と TypeScript を用いて具体的に解説します。
意見はこのエリアに表示されます

Model Context Protocol(MCP)

AI モデル間でコンテキストやステートをやり取りするためのプロトコル。

MCP サーバーとは?

MCP サーバーをざっくりと簡単に説明するとこのような感じです。

  • JSON を受け取って JSON を返す、非常にシンプルな構造
  • LLM に必要なコンテキスト(履歴、属性、状態など)を提供するためのプロトコル
  • 実装は Next.js で API を作り、Vercel にデプロイするだけで OK
  • 実態は「AI が道具として使える“賢い API”」
  • Cursor などの拡張機能(UI 操作)とは別物。MCP は裏方のロジック
  • オープンなプロトコルで、他の AI やツールとの連携も容易
  • JSON ライブラリさえあれば、どんな言語でも実装可能
  • MCP サーバーは OSS としても展開しやすい
  • 作った MCP サーバーは、Cursor や ChatGPT などのクライアントから簡単に利用できる
  • モデル間で共有される「コンテキスト(会話履歴、ユーザー情報、タスク)」を一元管理・保存できる

MCP の構造とやり取り(シーケンス図)

以下は、MCP クライアント(例: Cursor)から MCP サーバーを通じて処理結果を得るまでの基本的な流れを示すシーケンス図です。

MCP シーケンス図
MCP シーケンス図

この図では、MCP サーバーが「文脈を理解する処理層」として動作し、AI(Cursor/GPT)はそれを使ってユーザーに応答を返す役割を担っています。

MCP ホストとは?

  • 複数の MCP サーバーやモデルを統括して接続管理する中継役
  • 各モデルに必要なコンテキストを振り分けたり、調整したりする役割
  • エージェントフレームワークやパイプライン構築に活用されることが多い

MCP クライアントとは?

  • MCP サーバーに JSON でリクエストを送り、レスポンスを受け取って活用するエージェントやツール
  • Cursor や GPT-4 などが該当する
  • 特に Cursor は GPT が中に組み込まれているので、MCP サーバー側に AI を実装する必要がない

Cursor から呼び出す場合

  • MCP サーバーに AI は不要(Cursor 側に GPT-4 がいるため)
  • MCP サーバーは「ルールベースの処理」「構造化されたデータ返却」など、AI が使いやすい“外部の脳みそ”を提供
  • 例:セキュリティチェック、設計レビュー、文脈ベースのルーティング など

MCP サーバーの実装例(Next.js + TypeScript)

以下は、テキストの文字数をカウントする MCP サーバーの最小構成例です。Next.js の App Router を使用しています。

ディレクトリ構成

app/api/count-chars/route.ts

エンドポイント仕様

  • URL: /api/count-chars
  • メソッド: POST
  • リクエストボディ:
  • レスポンス例:

このように、Next.js を用いた簡単な MCP サーバーを構築することで、Cursor や他のクライアントが外部処理を安全に活用できます。

Explore More
関連記事はありません。