以下の内容はhttps://bluebirdofoz.hatenablog.com/entry/2025/05/26/221829より取得しました。


VisualStudioCodeのGitHubCopilotのドキュメントを読む その9(MCPサーバの設定)

本日はVisualStudioCodeの学習枠です。
VisualStudioCodeのGitHubCopilotのドキュメントを読みながら実際に操作を試してみました。

前回記事

以下の前回記事の続きです。
bluebirdofoz.hatenablog.com

Use MCP servers in VS Code

以下のUse MCP servers in VS Codeドキュメントを日本語訳しながら実行時のキャプチャをしていきます。
code.visualstudio.com

設定形式

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

"servers": {} フィールドはMCPサーバのリストを保持し、Claude Desktopの設定フォーマットに従います。
キーとしてサーバ名を指定し、値としてサーバ構成を指定します。
VS CodeMCPサーバリストにサーバ名を表示します。サーバ名は以下の命名規則に従ってください。

・"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]ボタンのドロップダウンオプションを使用して、現在のセッション、ワークスペース、または今後の全ての呼び出しに対して確認します。

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




以上の内容はhttps://bluebirdofoz.hatenablog.com/entry/2025/05/26/221829より取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14