MCP サーバーの活用

注意: このページは、2025/04/21 時点の情報に基づいて、GitHub Copilot の AI エージェント機能に関する情報を記載しています。
VS Code のエージェントモードにおける MCP サポートは現在プレビュー段階です。

VS Code で MCP サーバーを利用する（プレビュー）

Model Context Protocol（MCP）は、AI モデルが外部ツールやサービスと統一されたインターフェースで連携できるようにするオープンスタンダードです。VS Code では、MCP 対応サーバーをエージェントモードの GitHub Copilot に接続することで、エージェント型コーディングワークフローを拡張できます。ここでは、MCP サーバーのセットアップ方法と、エージェントモードでのツール利用方法を説明します。

MCP とは？

Model Context Protocol（MCP）は、AI モデルが外部ツールやアプリケーション、データソースを発見し、連携できる標準的な方法を提供します。VS Code のエージェントモードでチャットプロンプトを入力すると、モデルはファイル操作やデータベースアクセス、API 呼び出しなど、さまざまなタスクを実行するためにツールを呼び出せます。

MCP はクライアント・サーバー型のアーキテクチャです。

  • MCP クライアント（例: VS Code）は、AI モデルの代理として MCP サーバーに接続し、アクションをリクエストします。
  • MCP サーバーは、明確に定義されたインターフェースを通じて特定の機能を提供するツールを1つ以上公開します。
  • Model Context Protocol（MCP）は、クライアントとサーバー間の通信メッセージ形式（ツールの発見・呼び出し・応答処理など）を定義します。

たとえば、ファイルシステム MCP サーバーはファイルやディレクトリの読み書き・検索ツールを提供できます。GitHub の MCP サーバーはリポジトリ一覧やプルリクエスト作成、課題管理などのツールを提供します。MCP サーバーはローカルでもリモートでも動作し、VS Code はどちらにも対応しています。

この標準化により、AI モデルごとに個別のツール連携を開発する必要がなくなります。MCP サーバーをワークスペースに追加するだけで、AI アシスタントの機能を簡単に拡張できます。詳しくは Model Context Protocol 仕様 をご覧ください。

一般的なアーキテクチャ

MCP の中核となるのは、ホスト アプリケーションが複数のサーバーに接続できるクライアント/サーバー アーキテクチャです。

%% MCP クライアントとサーバーの構成図
flowchart LR
    subgraph PC["Your Computer"]
        Host["Host with MCP Client<br/>(Claude, IDEs, Tools)"]
        ServerA["MCP Server A"]
        ServerB["MCP Server B"]
        ServerC["MCP Server C"]
        DataA[/"Local<br/>Data Source A"/]
        DataB[/"Local<br/>Data Source B"/]
    end

    subgraph Internet["Internet"]
        RemoteC[/"Remote<br/>Service C"/]
    end

    %% 通信経路
    Host -- "MCP Protocol" <--> ServerA
    Host -- "MCP Protocol" <--> ServerB
    Host -- "MCP Protocol" <--> ServerC


    ServerA -- " " <--> DataA
    ServerB -- " " <--> DataB
    ServerC -- "Web APIs" <--> RemoteC
  • MCP ホスト: Claude Desktop、IDE、AI ツールなど、MCP を介してデータにアクセスするプログラム
  • MCP クライアント: サーバーとの 1対1 の接続を維持するプロトコルクライアント
  • MCP サーバー: 標準化されたモデルコンテキストプロトコルを通じてそれぞれが特定の機能を公開する軽量プログラム
  • ローカル データ ソース: MCP サーバーが安全にアクセスできるコンピューターのファイル、データベース、およびサービス
  • リモートサービス: MCP サーバーが接続できるインターネット経由(APIなど)で利用可能な外部システム

対応している MCP 機能

VS Code は MCP サーバーとの通信にローカル標準入出力（stdio）とサーバー送信イベント（sse）をサポートしています。現在、3つのプリミティブ（tools、prompts、resources）のうち、Copilot のエージェントモードで利用できるのは tools のみです。ツールの一覧や説明は list changed イベントで動的に更新できます。VS Code は roots（仕様）を使ってサーバーに現在のワークスペースフォルダーを提供します。

MCP サーバーの探し方

MCP の公式サーバーリポジトリは、MCP の多様性を示す公式・コミュニティ提供サーバーの参考例が揃っています。ファイルシステム操作、データベース連携、Web サービスなど、さまざまな機能のサーバーを探せます。

MCP はまだ新しい標準であり、エコシステムは急速に進化しています。今後、より多くの開発者が MCP を採用することで、統合可能なサーバーやツールが増えていくでしょう。

MCP サーバーを追加する

MCP サーバーをワークスペースに追加するには、以下の手順に従ってください（ユーザー設定にサーバーを追加する方法は後述します）。

  1. ワークスペース内の .vscode/mcp.json ファイルで MCP サーバーを設定します。これにより、プロジェクトの共同作業者と設定を共有できます。API キーなどの機密情報をハードコーディングせず、入力変数や環境ファイルを利用してください。

    ワークスペースに .vscode/mcp.json ファイルを作成し、Add Server ボタンを選択して新しいサーバーのテンプレートを追加します。VS Code では MCP サーバー設定ファイルに対して IntelliSense が利用できます。

    または、コマンドパレットから MCP: Add Server コマンドを実行し、サーバー情報を入力して新しい MCP サーバー設定を追加します。Workspace Settings を選択すると、まだ存在しない場合は .vscode/mcp.json ファイルが作成されます。

    以下は Perplexity MCP サーバー を設定する例です。サーバー起動時に VS Code から API キーの入力を求められます。設定フォーマット も参照してください。

     {
     // 💡 入力値はサーバー初回起動時に求められ、その後 VS Code に安全に保存されます。
     "inputs": [
         {
             "type": "promptString",
             "id": "perplexity-key",
             "description": "Perplexity API Key",
             "password": true
         }
     ],
     "servers": {
         // https://github.com/ppl-ai/modelcontextprotocol/
         "Perplexity": {
             "type": "stdio",
             "command": "npx",
             "args": [
                 "-y",
                 "@modelcontextprotocol/server-perplexity-ask"
             ],
             "env": {
                 "PERPLEXITY_API_KEY": "${input:perplexity-key}"
             }
         }
     }
 }

  2. 必要に応じて、VS Code ユーザー設定 で mcp サーバーを指定し、すべてのワークスペースで MCP サーバーを有効にできます。

    コマンドパレットから MCP: Add Server コマンドを実行し、User Settings を選択すると、ユーザー設定に MCP サーバー設定が追加されます。

  3. VS Code は Claude Desktop など他のツールで定義された MCP サーバーも自動検出して再利用できます。 chat.mcp.discovery.enabled 設定で自動検出を有効にします。

  4. コマンドパレットから MCP: List Servers コマンドを実行し、設定済みの MCP サーバーを表示・管理できます。

設定フォーマット

MCP サーバーを定義するには、以下の JSON 設定フォーマットを使用します。

  • "servers": {} フィールドには MCP サーバーの一覧を記述します。Claude Desktop の設定フォーマットに準拠しています。

    サーバー名をキーとして指定し、値にサーバー設定を記述します。VS Code では MCP サーバー一覧にサーバー名が表示されます。

    サーバー設定には以下のフィールドを指定します。サーバー設定内では 事前定義変数 を利用できます。たとえばワークスペースフォルダーを参照する場合は ${workspaceFolder} を使います。

    stdio で接続する場合：

    フィールド 説明 例
    type サーバー接続タイプ "stdio"
    command サーバー実行コマンド "npx","node", "python", "docker"
    args コマンドに渡す引数配列 ["server.py", "--port", "3000"]
    env サーバー用環境変数 { "API_KEY": "${input:api-key}" }
    envFile 追加の環境変数を読み込む .env ファイルのパス "${workspaceFolder}/.env"

    sse で接続する場合：

    フィールド 説明 例
    type サーバー接続タイプ "sse"
    url サーバーの URL（"type": "sse" の場合） "http://localhost:3000"
    headers サーバー用 HTTP ヘッダー（"type": "sse" の場合） { "API_KEY": "${input:api-key}" }

  • "inputs": [] フィールドでは、設定値のプレースホルダーを定義できます。これにより機密情報のハードコーディングを避けられます。

    サーバー初回起動時に VS Code から値の入力を求められ、以降は安全に保存されます。入力値を非表示にしたい場合は password フィールドを true に設定します。

    VS Code での 入力変数の設定方法 も参照してください。

設定例

以下は 3 つのサーバーを指定し、API キー用の入力プレースホルダーを定義した MCP サーバー設定例です。

// 例 .vscode/mcp.json
{
    // 💡 入力値はサーバー初回起動時に求められ、
    //    その後 VS Code に安全に保存されます。
    "inputs": [
        {
            "type": "promptString",
            "id": "perplexity-key",
            "description": "Perplexity API Key",
            "password": true
        },
    ],
    "servers": {
        // https://github.com/ppl-ai/modelcontextprotocol/
        "Perplexity": {
            "type": "stdio",
            "command": "docker",
            "args": [
                "run",
                "-i",
                "--rm",
                "-e",
                "PERPLEXITY_API_KEY",
                "mcp/perplexity-ask"
            ],
            "env": {
                "PERPLEXITY_API_KEY": "${input:perplexity-key}"
            }
        },
        // https://github.com/modelcontextprotocol/servers/tree/main/src/fetch
        "fetch": {
            "type": "stdio",
            "command": "uvx",
            "args": ["mcp-server-fetch"]
        },
        "my-remote-server": {
            "type": "sse",
            "url": "http://api.contoso.com/sse",
            "headers": { "VERSION": "1.2" }
        }
    }
}

エージェントモードで MCP ツールを使う

MCP サーバーを追加したら、エージェントモードでそのサーバーが提供するツールを利用できます。エージェントモードで MCP ツールを使うには：

  1. Chat ビュー（workbench.action.chat.open）を開き、ドロップダウンから Agent モードを選択します。

    Agent mode dropdown option

  2. Tools ボタンを選択し、利用可能なツール一覧を表示します。

    必要に応じて、利用したいツールを選択または選択解除できます。検索ボックスに入力してツールを検索できます。

    MCP tools list

    [!TIP] プロンプト内で # の後にツール名を入力することで、ツールを直接参照できます。これはすべてのチャットモード（ask、edit、agent）で利用可能です。

  3. チャット入力欄にプロンプトを入力すると、必要に応じてツールが自動的に呼び出されます。

    デフォルトでは、ツールが呼び出されると実行前に確認が求められます。これは、ツールがローカルで動作し、ファイルやデータを変更する可能性があるためです。

    Continue ボタンのドロップダウンから、特定のツールを現在のセッション、ワークスペース、または今後すべての呼び出しで自動的に許可できます。

    MCP Tool Confirmation

  4. 必要に応じて、ツール実行前に入力パラメーターを確認・編集できます。

    ツール名の横のシェブロンを選択すると、詳細や入力パラメーターを確認できます。実行前にパラメーターを編集できます。

    MCP Tool Input Parameters

ツールの管理

コマンドパレットから MCP: List Servers コマンドを実行し、設定済みの MCP サーバー一覧を表示できます。

MCP server list

サーバーを選択すると、サーバーの開始・停止・再起動ができます。また、サーバー設定やサーバーログを表示して問題の診断も可能です。

[!TIP] .vscode/mcp.json ファイルを開くと、エディター上部にサーバーの開始・停止・再起動コマンドが表示されます。

MCP server configuration with lenses to manage server.

コマンドラインでの設定

VS Code のコマンドラインインターフェイスでも、MCP サーバーをユーザープロファイルやワークスペースに追加できます。

ユーザープロファイルに MCP サーバーを追加するには、--add-mcp コマンドラインオプションを使い、{"name":"server-name","command":...} 形式で JSON サーバー設定を指定します。

code --add-mcp "{\"name\":\"my-server\",\"command\": \"uvx\",\"args\": [\"mcp-server-fetch\"]}"

URL ハンドラー

VS Code には MCP サーバーをインストールするための URL ハンドラーも用意されています。URL を作成するには、--add-mcp で指定するのと同じ形式の obj オブジェクトを作成し、次のロジックでリンクを生成します：

// Insiders 版の場合は `vscode-insiders` を使用
const link = `vscode:mcp/install?${encodeURIComponent(JSON.stringify(obj))}`;

このリンクはブラウザーや、Linux なら xdg-open $LINK などでコマンドラインから開けます。

トラブルシューティング

VS Code で MCP サーバーに問題が発生すると、Chat ビューにエラーインジケーターが表示されます。

MCP Server Error

Chat ビューのエラー通知を選択し、Show Output オプションを選ぶとサーバーログを確認できます。あるいはコマンドパレットから MCP: List Servers を実行し、サーバーを選択して Show Output を選択します。

MCP Server Error Output

MCP サーバーを開発する

VS Code には MCP サーバー開発に必要なツールが揃っています。MCP サーバーは stdout を扱える任意の言語で作成できますが、公式 SDK の利用が推奨されます：

よくある質問

MCP ツールの利用を制御できますか？

はい、利用するツールは複数の方法で制御できます：

  • エージェントモードの Chat ビューで Tools ボタンを選択し、特定のツールをオン・オフできます。
  • Add Context ボタンや # を使ってプロンプトに特定ツールを追加できます。
  • より高度な制御には .github/copilot-instructions.md でツール利用を細かく調整できます。


演習: MCP 環境の構築を試す

  1. VS Code のインストールと環境セットアップ

    1. VS Code をダウンロードしてインストールします。
    2. VS Code を開き、Remote Development 拡張機能パック をインストールします。
    3. 詳細な開発環境セットアップ手順は環境準備 - 作業手順を参照してください。

  2. MCP サーバーのインストールと起動

    1. GitHub - リポジトリ管理、ファイル操作、GitHub API の統合

      ユースケース:

      • GitHub のワークフローやプロセスの自動化
      • GitHub リポジトリからのデータ抽出や分析
      • GitHub エコシステムと連携する AI ツールやアプリケーションの構築

    2. 前提条件

      1. サーバーをコンテナで実行するには Docker のインストールが必要です。
      2. Docker をインストールしたら、Docker が起動していることを確認してください。
      3. 最後に GitHub パーソナルアクセストークン を作成してください。 MCP サーバーは多くの GitHub API を利用できるため、AI ツールに許可したい権限を有効にしてください（アクセストークンの詳細は公式ドキュメントを参照してください）。

    3. インストール方法

      ワークスペース内の .vscode/mcp.json ファイルに以下設定内容を追加します。これにより、設定を他のユーザーと共有できます。

       {
     // 💡 入力値はサーバー初回起動時に求められる
     "inputs": [
         {
             "type": "promptString",
             "id": "github_token",
             "description": "GitHub Personal Access Token",
             "password": true
         }
     ],
     "servers": {
         "github": {
             "command": "docker",
             "args": [
                 "run",
                 "-i",
                 "--rm",
                 "-e",
                 "GITHUB_PERSONAL_ACCESS_TOKEN",
                 "ghcr.io/github/github-mcp-server"
                 ],
             "env": {
                 "GITHUB_PERSONAL_ACCESS_TOKEN": "${input:github_token}"
             }
         }
     }            
 }

      MCP Server Start

    4. ツール構成

      GitHub MCP サーバーは、--toolsets フラグを使用して特定の機能グループを有効または無効にすることをサポートしています。これにより、AI ツールで利用可能な GitHub API 機能を制御できます。必要なツールセットのみを有効にすることで、ツールの選択を支援し、コンテキストサイズを削減できます。

    5. 利用可能なツールセット

      以下のツールセットが利用可能です（すべてデフォルトでオン）：

      ツールセット 説明
      repos リポジトリ関連のツール（ファイル操作、ブランチ、コミット）
      issues 課題関連のツール（作成、読み取り、更新、コメント）
      users GitHub ユーザーに関連するすべてのツール
      pull_requests プルリクエスト操作（作成、マージ、レビュー）
      code_security コードスキャンアラートとセキュリティ機能
      experiments 実験的な機能（安定しているとは限らない）

    6. エージェントモードで MCP ツールを試す

      1. VS Code のエージェントモードを開きます。
      2. Tools ボタンを選択し、利用可能なツール一覧を表示します。
      3. ツールを選択して、プロンプトに追加します。
      4. プロンプトを入力して、ツールを実行します。 
         Markdown の表形式で、私の GitHub のリポジトリ一覧を表示してください
      5. ツールの実行確認が表示されたら、Continue ボタンを選択して、ツールを実行します。
      6. ツールの実行結果を確認します。

まとめ

この演習では、VS Code のエージェントモードで MCP サーバーを利用する方法を学びました。MCP サーバーを追加し、ツールを選択してプロンプトに追加することで、AI モデルが外部ツールやサービスと連携できるようになります。これにより、AI モデルの機能を拡張し、さまざまなタスクを効率的に実行できるようになります。