VSCodeで始めるModel Context Protocol（MCP）入門

MCPとは？

AIがより実用的になるためには、外部のデータやツールと柔軟につながる仕組みが欠かせません。しかし、近年のLLM（大規模言語モデル）は高度な推論や自然な会話が可能になった一方で、そうした外部リソースとやり取りする共通規格がありませんでした。そのため、開発者はサービスごとに異なるAPIや接続方法を個別に実装する必要があり、再利用性や互換性が低いという課題がありました。

この問題を解決するために登場したのが Model Context Protocol（MCP）です。イメージとしては「AIのためのUSB Type-C」です。Type-CがPCやスマートフォン、周辺機器を同じ形状の端子でつなげられるように、MCPは異なるツールやデータソースを同じ方法で接続できます。一度MCPサーバーを作れば、対応するあらゆるMCPクライアント（例：Claude、ChatGPTなど）と差し替え可能に連携できるのが特徴です。

公式ドキュメントでは、MCPはクライアントとサーバー間の通信を標準化するオープンプロトコルとされています。基盤には JSON-RPC 2.0 が採用され、通信方式として stdio や HTTP/SSE を利用します。これにより、AIは統一された方法でファイルシステムへのアクセス、データベース検索、外部API呼び出しなどを実行できます。

要するにMCPは、異なる世界に住むAIとツールが同じ言葉で会話できるようにする通訳兼接続端子です。

MCPの構成と仕組み

MCPは「クライアント」「ホスト」「サーバー」という3つの役割で構成されます。

• クライアント
  ユーザーからの指示を受け取り、MCPプロトコルに沿ってサーバーにリクエストを送る役割です。
  主にユーザーインターフェースや指示の構造化を担当します。
  例：Claude Desktop、MCP対応のChatGPT、VS CodeのMCP拡張。

• ホスト
  クライアントが利用するMCPサーバーを起動し、接続を維持・管理する役割です。
  サーバーとの通信経路（stdio / HTTP / SSE）の確立や、プロセスのライフサイクル管理を行います。
  例：VS CodeやClaude Desktopは、クライアントでありながらホスト機能も持ちます。

• サーバー
  実際に外部リソースにアクセスし、指示された処理を実行する役割です。
  ファイル操作、データベース検索、API呼び出しなど、具体的な作業を担当します。
  例：@modelcontextprotocol/server-filesystem（ローカルファイル操作）、@modelcontextprotocol/server-github（GitHub操作）。

MCPが動く流れ

1. ユーザー → クライアント
   （例：「このフォルダのファイル一覧を見せて」）
2. クライアント → ホスト
   指示をMCPサーバーが理解できる形式（リクエスト）に変換して送信
3. ホスト → サーバー
   サーバーを起動し、リクエストを中継
4. サーバー内部処理
   外部リソースへアクセスして処理
5. サーバー → ホスト → クライアント
   結果を受け取り、ユーザーに提示

通信方式

クライアントとサーバーは、目的や環境に応じて以下の方式で通信します。

• stdio（標準入出力）
  同じマシン内でダイレクト接続。高速でセットアップが簡単。ローカル実行向け。
• HTTP
  ネットワーク越しに接続する標準的な方式。Webやクラウド環境に適している。
• SSE（Server-Sent Events）
  HTTPの拡張で、サーバーからクライアントへリアルタイムにデータを送り続ける。
  チャットのストリーミング出力や進捗通知に便利。

メッセージ形式

通信の中身（会話の形式）は JSON-RPC 2.0 で統一されています。
関数呼び出しのように「メソッド名」「パラメータ」「ID」をJSONでやり取りします。

例：フォルダ内のファイル一覧を取得するリクエスト

1
2
3
4
5
6

{
  "jsonrpc": "2.0",
  "method": "listFiles",
  "params": { "path": "/documents" },
  "id": 1
}

MCPサーバーの導入

ここでは、VS Code（GitHub Copilot Chat）にMCPサーバーを導入する手順を、@modelcontextprotocol/server-filesystem を例に説明します。他のMCPサーバーも基本的な流れは同じです。

server-filesystem はローカルファイルの読み取りや操作を行うMCPサーバーです。通常は「開いていないファイル」は直接読めませんが、このサーバーを使えばパスを指定して取得できます。

インストール

MCPサーバーの配布形態はサーバーごとに異なります。代表的な入手方法は次のとおりです。

• npm（パッケージ配布）
  ここで取り上げるserver-filesystemなどは、npmで配信されています。

  1	npm install -g @modelcontextprotocol/server-filesystem

• VS Code拡張（Marketplace）
  以下URLなどで、VS Codeの拡張として配信されています。

  https://code.visualstudio.com/mcp

• GitHubリポジトリ
  git clone 後、READMEの「Usage」「Run」などの手順に従ってビルド・起動します。

設定

MCPサーバーは、ワークスペース単位またはユーザー全体で設定できます。

• ワークスペース単位
  ワークスペースのルートに .vscode/mcp.json を作成します。
  この設定はそのプロジェクト内だけで有効です。

• ユーザー全体
  コマンドパレット（Ctrl(Cmd)+Shift+P）で 「MCP: Open User Configuration」 を実行し、開いた mcp.json に設定します。全てのプロジェクトで共通して有効になります。

どちらの場合も、設定内容は同じです。以下は server-filesystemの設定例です。command はサーバー起動に使う実行コマンド、args はその引数です。npx -y <パッケージ名> <ルートパス> の形で起動し、<ルートパス> に指定した場所以下が操作対象（権限範囲）になります。最小限の範囲にとどめるのがおすすめです。

1
2
3
4
5
6
7
8
9

{
  "servers": {
    "filesystem": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "."]
    }
  }
}

起動

設定ができたら、次のいずれかで起動します。

• MCP Serversビューから

  1. サイドバーの「MCP サーバー」ビューを開く
  2. 対象サーバー（filesystemなど）の 設定アイコンから「サーバーの起動」をクリック

• コマンドパレットから

  1. 「MCP: List Servers」 を実行 → サーバーを選択
  2. 対象サーバーを選択
  3. サーバーの起動を選択

実行方法

MCPサーバーはクライアント（GiHub Copilotなど）から指示することで実行されます。

1. 自然文で実行（最も手軽）

   Copilot Chatが自動で適切なMCPサーバーを選びます。

   1	./content/post/sample.md を読み込んで3行で要約して

   • メリット：入力が自然で簡単。
   • 注意点：条件によっては別のサーバーが選ばれることがあります。

2. @<サーバー名>で指定（確実性アップ）

   特定のサーバーを必ず使いたい場合は、サーバー名を明示します。

   1	@filesystem ./content/post/sample.md を読み込んで3行で要約して

   • メリット：サーバーの選択ミスを防げる。
   • 注意点：サーバー名を正確に把握している必要があります。

3. /mcpコマンドで実行（最も確実）

   MCPプロトコルのコマンド形式で直接呼び出します。

   1	/mcp filesystem read ./content/post/sample.md

   • メリット：裏でどのように呼び出されるかが明確で、再現性が高い。
   • 注意点：コマンドの書式を覚える必要があります。

代表的なMCPサーバー

MCPサーバーには、コード開発やデザイン連携、情報取得、ファイル変換など、多種多様な機能を持つものがあります。ここでは主要な例とその活用イメージをまとめます。