🚀 VS Code で で入手しましょう!

VS Code で MCP サーバーを使用する (プレビュー)

Model Context Protocol (MCP) は、AI モデルが統合されたインターフェースを通じて外部ツールやサービスと対話できるようにするオープンスタンダードです。VS Code では、MCP のサポートにより、GitHub Copilot のエージェントモードが強化され、MCP 互換のサーバーをエージェントコーディングワークフローに接続できます。この記事では、MCP サーバーのセットアップと、Visual Studio Code のエージェントモードでツールを使用する方法について説明します。

注

VS Code のエージェントモードでの MCP サポートは、現在プレビュー段階です。

MCP とは?

Model Context Protocol (MCP) は、AI モデルが外部ツール、アプリケーション、およびデータソースを検出して対話するための標準化された方法を提供します。VS Code のエージェントモードで言語モデルにチャットプロンプトを入力すると、モデルはさまざまなツールを呼び出して、リクエストに応じてファイル操作、データベースへのアクセス、または API の呼び出しなどのタスクを実行できます。

MCP はクライアント/サーバーアーキテクチャに従います

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

たとえば、ファイルシステム MCP サーバーは、ファイルとディレクトリの読み取り、書き込み、または検索を行うためのツールを提供する場合があります。GitHub の MCP サーバーは、リポジトリのリスト表示、プルリクエストの作成、または Issue の管理を行うためのツールを提供します。MCP サーバーは、ローカルマシンまたはリモートでホストされた状態で実行でき、VS Code は両方の構成をサポートしています。

このインタラクションを標準化することにより、MCP は、各 AI モデルと各ツールの間のカスタム統合の必要性を排除します。これにより、ワークスペースに新しい MCP サーバーを追加するだけで、AI アシスタントの機能を拡張できます。詳細については、Model Context Protocol の仕様 を参照してください。

サポートされている 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 ファイルを作成し、[サーバーの追加] ボタンを選択して、新しいサーバーのテンプレートを追加します。VS Code は、MCP サーバー構成ファイルの IntelliSense を提供します。

    または、コマンドパレットから [MCP: サーバーの追加] コマンドを実行し、サーバー情報を提供して新しい MCP サーバー構成を追加します。ワークスペースに .vscode/mcp.json ファイルがまだ存在しない場合は、[ワークスペース設定] を選択して作成します。

    次の例は、Perplexity MCP サーバー を構成する方法を示しています。VS Code は、サーバーの起動時に API キーの入力を求めます。構成形式の詳細をご覧ください。

    {
  // 💡 Inputs are prompted on first server start, then stored securely by 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. 必要に応じて、すべてのワークスペースで MCP サーバーを有効にするには、mcp VS Code ユーザー設定 でサーバーを指定します。

    コマンドパレットから [MCP: サーバーの追加] コマンドを使用する場合は、[ユーザー設定] を選択して、ユーザー設定に新しい MCP サーバー構成を追加します。

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

  4. コマンドパレットから [MCP: サーバーの一覧表示] コマンドを実行して、構成済みの MCP サーバーを表示および管理します。

構成形式

次の JSON 構成形式を使用して、MCP サーバーを定義します。

  • "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 サーバー構成の例を示しています。

// Example .vscode/mcp.json
{
  // 💡 Inputs will be prompted on first server start,
  //    then stored securely by 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. [チャット] ビューを開き (⌃⌘I (Windows、Linux Ctrl+Alt+I))、ドロップダウンから [エージェント] モードを選択します。

    Agent mode dropdown option

  2. [ツール] ボタンを選択して、使用可能なツールの一覧を表示します。

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

    MCP tools list

    ヒント

    プロンプトでツール名を # に続けて入力することで、ツールを直接参照することもできます。これは、すべてのチャットモード (質問、編集、およびエージェントモード) で実行できます。

  3. これで、チャット入力ボックスにプロンプトを入力すると、必要に応じてツールが自動的に呼び出されることに気付くでしょう。

    デフォルトでは、ツールが呼び出されると、実行する前にアクションを確認する必要があります。これは、ツールがローカルマシンで実行され、ファイルまたはデータを変更するアクションを実行する可能性があるためです。

    [続行] ボタンのドロップダウンオプションを使用して、現在のセッション、ワークスペース、または今後のすべての呼び出しで特定のツールを自動的に確認します。

    MCP Tool Confirmation

  4. 必要に応じて、ツール入力パラメーターを実行する前に検証および編集します。

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

    MCP Tool Input Parameters

ツールの管理

コマンドパレットから [MCP: サーバーの一覧表示] コマンドを実行して、構成済みの MCP サーバーの一覧を表示します。

MCP server list

サーバーを選択すると、サーバーを起動、停止、または再起動できます。サーバー構成とサーバーログを表示して、問題を診断することもできます。

ヒント

.vscode/mcp.json ファイルを開くと、VS Code はエディターから直接サーバーを起動、停止、または再起動するコマンドを表示します。

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 オブジェクトを構築し、次のロジックを使用してリンクを作成します

// For Insiders, use `code-insiders` instead of `code`
const link = `code:mcp/install?${encodeURIComponent(JSON.stringify(obj))`;

このリンクは、ブラウザーで使用したり、コマンドラインで開いたりできます (たとえば、Linux で xdg-open $LINK を使用するなど)。

トラブルシューティング

VS Code が MCP サーバーで問題が発生した場合、チャットビューにエラーインジケーターが表示されます。

MCP Server Error

チャットビューのエラー通知を選択し、[出力の表示] オプションを選択してサーバーログを表示します。または、コマンドパレットから [MCP: サーバーの一覧表示] を実行し、サーバーを選択してから [出力の表示] を選択します。

MCP Server Error Output

MCP サーバーを作成する

VS Code には、独自の MCP サーバーを開発するために必要なすべてのツールが揃っています。MCP サーバーは stdout を処理できる任意の言語で記述できますが、MCP の公式 SDK から始めることをお勧めします。

よくある質問

使用する MCP ツールを制御できますか?

はい、アクティブにするツールを制御するには、いくつかのオプションがあります。

  • エージェントモードでチャットビューの [ツール] ボタンを選択し、必要に応じて特定のツールのオン/オフを切り替えます。
  • [コンテキストを追加] ボタンを使用するか、# を入力して、特定のツールをプロンプトに追加します。
  • より高度な制御を行うには、.github/copilot-instructions.md を使用して、ツールの使用を微調整できます。

関連リソース

04/03/2025