本日はVisualStudioCodeの学習枠です。
VisualStudioCodeのGitHubCopilotのドキュメントを読みながら実際に操作を試してみました。
前回記事
以下の前回記事の続きです。
bluebirdofoz.hatenablog.com
Use MCP servers in VS Code
以下のUse MCP servers in VS Codeドキュメントを日本語訳しながら実行時のキャプチャをしていきます。
code.visualstudio.com
設定形式
"servers": {} フィールドはMCPサーバのリストを保持し、Claude Desktopの設定フォーマットに従います。
キーとしてサーバ名を指定し、値としてサーバ構成を指定します。
VS CodeはMCPサーバリストにサーバ名を表示します。サーバ名は以下の命名規則に従ってください。
・"uiTesting"のようにサーバー名にはキャメルケースを使用してください。
・空白文字や特殊文字の使用は避けてください。
・競合を避けるため、各サーバーに固有の名前を使用してください。
・"github"や"database"など、サーバーの機能やブランドを反映した説明的な名前を使用してください。
サーバー設定に以下のフィールドを用意します。
ワークスペースフォルダを参照する (${workspaceFolder}) など定義済みの変数をサーバー設定で使用することができます。
stdioと接続する場合
| フィールド | 説明 | 設定例 |
|---|---|---|
| type | サーバーの接続タイプ。 | "stdio" |
| command | サーバー実行ファイルを起動するコマンド。コマンドはシステムパスで利用可能かフルパスが含まれている必要があります。dockerを使用する場合は、detachオプションを使用しないでください。 | "npx","node", "python", "docker" |
| args | コマンドに渡される引数の配列。 | ["server.py", "--port", "3000"] |
| env | サーバーの環境変数。 | {"API_KEY": "${input:api-key}"} |
| envFile | 追加の環境変数をロードするための .env へのパス。 | "${workspaceFolder}/.env" |
sseまたはhttpと接続する場合
| フィールド | 説明 | 設定例 |
|---|---|---|
| type | サーバー接続タイプ。VS Codeはまずストリーミング可能なHTTPトランスポートを試み、HTTPがサポートされていない場合はSSEにフォールバックする。 | "sse", "http" |
| url | サーバーのURL。 | "http://localhost:3000" |
| headers | サーバーのHTTPヘッダー。 | {"API_KEY": "${input:api-key}"} |
"inputs": [] フィールドでは設定値のカスタムプレースホルダを定義することができます。
これにより機密情報のハードコーディングを避けることができます。
VS Codeはサーバの初回起動時にこれらの値の入力を求め、 以降の使用のために安全に保存します。
入力された値を表示しないようにするには、password フィールドを true に設定します。
code.visualstudio.com
設定例
次のコードスニペットは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" } } } }
AgentモードでのMCPツールの使用
MCPサーバーを追加するとAgentモードで提供されるツールを使用できるようになります。
AgentモードでMCPツールを使用するには以下の手順を実行します。
チャットビューを開き(Ctrl + Alt + I)、ドロップダウンからAgentモードを選択します。

[Tool]ボタンを選択して使用可能なツールの一覧を表示します。
必要に応じて、使用するツールを選択または選択解除します。検索ボックスに入力してツールを検索できます。

これでチャット入力ボックスにプロンプトを入力すると、必要に応じてツールが自動的に呼び出されます。
デフォルトではツールが呼び出されたときに、実行前にアクションを確認する必要があります。
これはツールがコンピューター上でローカルに実行され、ファイルやデータを変更するアクションを実行する可能性があるためです。
[Continue]ボタンのドロップダウンオプションを使用して、現在のセッション、ワークスペース、または今後の全ての呼び出しに対して確認します。

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