VSCodeでMCPサーバーを使用する方法

Posted at 2025-04-10

はじめに

Visual Studio Code（VSCode）は、現代の開発者にとって最も人気のあるコードエディタの一つです。その拡張性と柔軟性により、さまざまな開発環境やプログラミング言語に対応しています。一方、Model Context Protocol（MCP）は、AIモデルが外部ツールやリソースと安全に対話するための新しいオープンプロトコルです。VSCodeにMCPサーバーを統合することで、AIアシスタントを活用した開発体験を大幅に向上させることができます。この記事では、VSCodeでMCPサーバーをセットアップし、活用する方法について詳しく解説します。

MCPサーバーの実装については、公式のGitHubリポジトリ（https://github.com/modelcontextprotocol/server-everything）を参照すると、より詳細な情報を得ることができます。このリポジトリには、MCPプロトコルのすべての機能を試すためのサーバー実装が含まれています。

MCPとは

Model Context Protocol（MCP）は、AIモデルが外部ツール、アプリケーション、データソースと標準化された方法で対話するためのオープンプロトコルです。VSCodeにおけるMCPサポートは、GitHub Copilotのエージェントモードを強化し、あらゆるMCP互換サーバーをAI支援コーディングワークフローに接続できるようにします。

MCPはクライアント・サーバーアーキテクチャを採用しています：

MCPクライアント（VSCodeなど）はAIモデルの代わりにMCPサーバーに接続しアクションを要求します
MCPサーバーは特定の機能を明確に定義されたインターフェースを通して提供します
MCPプロトコルはクライアントとサーバー間の通信メッセージ形式を定義します

例えば、ファイルシステムMCPサーバーはファイルの読み取り、書き込み、検索などのツールを提供し、GitHubのMCPサーバーはリポジトリの一覧表示、プルリクエストの作成、課題の管理などのツールを提供します。MCPサーバーはローカルマシンで実行することも、リモートでホストすることもでき、VSCodeは両方の構成をサポートしています。

VSCodeでのMCPサーバーの追加方法

VSCodeでMCPサーバーを追加するには、以下の手順に従います：

ワークスペースの .vscode/mcp.json ファイルでMCPサーバーを設定します。プロジェクトの共同作業者と設定を共有するためです。APIキーなどの機密情報はハードコーディングせず、入力変数や環境ファイルを使用してください。
ワークスペースに .vscode/mcp.json ファイルを作成し、「サーバーを追加」ボタンを選択して新しいサーバーのテンプレートを追加します。VSCodeはMCPサーバー設定ファイルのIntelliSenseを提供します。
コマンドパレットから MCP: サーバーを追加 コマンドを実行し、サーバー情報を提供して新しいMCPサーバー設定を追加することもできます。.vscode/mcp.json ファイルがワークスペースに存在しない場合は、「ワークスペース設定」を選択してファイルを作成します。

以下は、サーバーの起動時にAPIキーの入力を求めるPerplexity MCPサーバーを設定する例です：

{
  // 💡 入力は最初のサーバー起動時に要求され、その後VSCodeによって安全に保存されます
  "inputs": [
    {
      "type": "promptString",
      "id": "perplexity-key",
      "description": "Perplexity APIキー",
      "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}"
      }
    }
  }
}

オプションで、すべてのワークスペースでMCPサーバーを有効にするには、VSCodeのユーザー設定の mcp で指定することもできます。コマンドパレットから MCP: サーバーを追加 コマンドを実行し、「ユーザー設定」を選択して、ユーザー設定に新しいMCPサーバー設定を追加することができます。

VSCodeは、Claude Desktopなど他のツールで定義したMCPサーバーを自動的に検出して再利用することもできます。chat.mcp.discovery.enabled 設定を有効にすることで自動検出が可能になります。

コマンドパレットから MCP: サーバーの一覧表示 コマンドを実行すると、設定されたMCPサーバーを表示および管理できます。

設定フォーマット

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

"servers" フィールドにMCPサーバーのリストを保持します（Claude Desktopの設定形式に従います）
サーバー名をキーとして指定し、サーバー設定を値として提供します。VSCodeはサーバー名を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" フィールドでは、設定値のカスタムプレースホルダーを定義でき、機密情報のハードコーディングを避けることができます。VSCodeは、サーバーの最初の起動時にこれらの値を要求し、その後の使用のために安全に保存します。入力した値を表示しないようにするには、password フィールドを true に設定します。

エージェントモードでMCPツールを使用する方法

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

チャットビューを開き（Windows, Linux では Ctrl+Alt+I、macOS では ⌃⌘I）、ドロップダウンから「エージェント」モードを選択します。
「ツール」ボタンを選択して、利用可能なツールのリストを表示します。オプションで、使用したいツールを選択または選択解除できます。検索ボックスに入力してツールを検索することもできます。
チャット入力ボックスにプロンプトを入力すると、必要に応じてツールが自動的に呼び出されるのがわかります。デフォルトでは、ツールが呼び出されると、実行前にアクションを確認する必要があります。これは、ツールがローカルマシンで実行され、ファイルやデータを変更する可能性があるためです。「続行」ボタンのドロップダウンオプションを使用して、現在のセッション、ワークスペース、または将来のすべての呼び出しで特定のツールを自動的に確認するように設定できます。
オプションで、ツールの実行前に入力パラメータを確認および編集できます。ツール名の横にあるシェブロンを選択すると、詳細と入力パラメータが表示されます。ツールの実行前に入力パラメータを編集できます。

MCPサーバーを管理する

コマンドパレットから MCP: サーバーの一覧表示 コマンドを実行して、設定されたMCPサーバーのリストを表示できます。サーバーを選択すると、サーバーの起動、停止、再起動ができます。また、サーバー設定とサーバーログを表示して問題を診断することもできます。

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

コマンドライン設定

VSCodeのコマンドラインインターフェースを使用して、MCPサーバーをユーザープロファイルまたはワークスペースに追加することもできます。ユーザープロファイルにMCPサーバーを追加するには、--add-mcp コマンドラインオプションを使用し、{\"name\":\"server-name\",\"command\":...} の形式でJSONサーバー設定を提供します。

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

URLハンドラ

VSCodeには、MCPサーバーをインストールするために使用できるURLハンドラも含まれています。URLを形成するには、--add-mcp に提供する形式と同じ形式で obj オブジェクトを構築し、次のロジックを使用してリンクを作成します：

// Insidersの場合、`code`の代わりに`code-insiders`を使用
const link = `code:mcp/install?${encodeURIComponent(JSON.stringify(obj))`;

このリンクはブラウザで使用するか、Linuxでは xdg-open $LINK などのコマンドラインで開くことができます。

トラブルシューティング

VSCodeがMCPサーバーで問題に遭遇すると、チャットビューにエラーインジケータが表示されます。チャットビューのエラー通知を選択し、「出力を表示」オプションを選択してサーバーログを表示します。または、コマンドパレットから MCP: サーバーの一覧表示 を実行し、サーバーを選択して「出力を表示」を選択することもできます。

MCPサーバーの作成

VSCodeには、独自のMCPサーバーを開発するために必要なすべてのツールが揃っています。MCPサーバーは stdout を処理できる任意の言語で作成できますが、MCPの公式SDKは良い出発点です：

TypeScript SDK
Python SDK
Java SDK
Kotlin SDK
C# SDK

まとめ

VSCodeにMCPサーバーを統合することで、AIアシスタントの能力を大幅に拡張し、より効率的な開発ワークフローを実現できます。この記事で説明した手順に従って、VSCodeでMCPサーバーを設定し、GitHub Copilotのエージェントモードでそれらのツールを活用してみてください。MCPの生態系は急速に進化しており、より多くの開発者がMCPを採用するにつれて、プロジェクトに統合できるサーバーとツールがますます増えていくことでしょう。

AIとツールの統合により、コーディングの未来は非常に明るいものになります。VSCodeとMCPサーバーを組み合わせることで、その未来の一部になりましょう。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up