Apidog

オールインワン協働API開発プラットフォーム

API設計

APIドキュメント

APIデバッグ

APIモック

API自動テスト

無料会員登録
ダウンロードMacとLinux版はこちら
Home

/

VSCode MCPサーバーの使い方

VSCode MCPサーバーの使い方

中村 拓也

中村 拓也

Updated on 4月 5, 2025

VSCode MCPサーバーの紹介

MCP（Model Context Protocol）は、AIモデルが統一されたインターフェースを通じて外部ツールやサービスとどのように相互作用するかを変革する革新的なオープンスタンダードです。VSCodeでは、MCPサポートがGitHub Copilotのエージェントモードを強化し、MCP互換のサーバーをAI駆動のコーディングワークフローに接続できるようにします。このチュートリアルでは、初期設定から高度な構成やトラブルシューティングまで、VSCodeでのMCPサーバーの使用に関する必要な知識をすべてガイドします。

💡
Github MCP Serverのセットアップに飛び込む前に、強力なAPI設計、テスト、ドキュメント作成ツールであるApidogをチェックしてください。Apidogを使用すると、APIの統合がシームレスに行われ、構造化されたモデルと簡単なコラボレーションでワークフローを強化できます。自動化とAPI管理を向上させたい方には、Zapier MCPと一緒に使用するのに最適な補助ツールです。
ボタン

VSCode MCPサーバーとは

Model Context Protocolは、AIモデルが標準化されたインターフェースを通じて外部ツール、アプリケーション、データソースを発見し、相互作用することを可能にします。VSCodeでCopilotのエージェントモードを使用する際、AIは様々なツールを活用してファイル操作、データベースへのアクセス、またはリクエストに基づいてAPIを呼び出すなどのタスクを実行できます。

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

  • MCPクライアント（VSCodeのような）は、MCPサーバーに接続し、AIモデルのためにアクションをリクエストします。
  • MCPサーバーは、明確に定義されたインターフェースを通じて特定の機能を公開するツールを提供します。
  • プロトコルは、クライアントとサーバー間の通信のためのメッセージフォーマットを定義し、ツールの発見、呼び出し、応答処理をカバーします。

たとえば、ファイルシステムMCPサーバーは、ファイルおよびディレクトリの読み取り、書き込み、または検索のためのツールを提供する場合があります。GitHubのMCPサーバーは、リポジトリをリストし、プルリクエストを作成したり、問題を管理するためのツールを提供します。これらのサーバーは、あなたのマシン上でローカルに実行することも、リモートでホストすることもできます。

最初のVSCode MCPサーバーの設定

ステップ1：ワークスペースにMCPサーバーを追加する

VSCodeにMCPサーバーを追加する方法はいくつかあります：

ワークスペース構成ファイルを使用する：

  • ワークスペースに.vscode/mcp.jsonファイルを作成します。
  • 新しいサーバーのテンプレートを追加するために「サーバーを追加」ボタンを選択します。
  • VSCodeは、MCPサーバー構成に対するIntelliSenseを提供します。

コマンドパレットを使用する：

  • MCP: サーバーを追加コマンドを実行します。
  • 「ワークスペース設定」を選択して、ワークスペースに.vscode/mcp.jsonファイルを作成します。

ユーザー設定を使用してグローバルアクセスを行う：

  • コマンドパレットを開いてMCP: サーバーを追加を実行します。
  • 「ユーザー設定」を選択して、MCPサーバー構成をグローバルに追加します。

ステップ2：VSCode MCPサーバー構成フォーマットの理解

MCPサーバー構成は特定のJSONフォーマットに従います：

{
  "inputs": [
    {
      "type": "promptString",
      "id": "api-key",
      "description": "APIキー",
      "password": true
    }
  ],
  "servers": {
    "MyServer": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-example"],
      "env": {
        "API_KEY": "${input:api-key}"
      }
    }
  }
}

主な要素は：

  • inputs：構成値のカスタムプレースホルダーを定義します。
  • servers：MCPサーバーのリストを含みます。
  • type：接続の種類（「stdio」または「sse」）
  • command：サーバー実行ファイルを起動するためのコマンド
  • args：コマンドに渡される引数の配列
  • env：サーバー用の環境変数

VSCode MCPサーバー接続タイプと構成オプション

VSCode MCPサーバー用STDIO接続

標準入力/出力接続の場合：

"MyServer": {
  "type": "stdio",
  "command": "npx",
  "args": ["server.js", "--port", "3000"],
  "env": {"API_KEY": "${input:api-key}"}
}

VSCode MCPサーバー用SSE接続

サーバー送信イベント接続の場合：

"MyRemoteServer": {
  "type": "sse",
  "url": "http://api.example.com/sse",
  "headers": {"VERSION": "1.2"}
}

VSCode MCPサーバー構成での変数の使用

構成で定義済みの変数を使用できます：

"MyServer": {
  "type": "stdio",
  "command": "node",
  "args": ["${workspaceFolder}/server.js"]
}

高度なVSCode MCPサーバー構成例

複数のサーバーと入力変数を示すより包括的な例を示します：

{
  "inputs": [
    {
      "type": "promptString",
      "id": "perplexity-key",
      "description": "Perplexity APIキー",
      "password": true
    }
  ],
  "servers": {
    "Perplexity": {
      "type": "stdio",
      "command": "docker",
      "args": ["run", "-i", "--rm", "-e", "PERPLEXITY_API_KEY", "mcp/perplexity-ask"],
      "env": {
        "PERPLEXITY_API_KEY": "${input:perplexity-key}"
      }
    },
    "Fetch": {
      "type": "stdio",
      "command": "uvx",
      "args": ["mcp-server-fetch"]
    },
    "RemoteServer": {
      "type": "sse",
      "url": "http://api.contoso.com/sse",
      "headers": {"VERSION": "1.2"}
    }
  }
}

エージェントモードでのVSCode MCPツールの使用

MCPサーバーを構成したら、Copilotのエージェントモードでそのツールを使用できます：

  1. チャットビューを開きます（Windows、Linux：Ctrl+Alt+I、Mac：⌃⌘I）
  2. ドロップダウンから「エージェント」モードを選択します。
  3. 「ツール」ボタンをクリックして利用可能なツールを表示します。
  4. 必要に応じてツールを選択または選択解除します。
  5. チャット入力にプロンプトを入力します。

ツールが呼び出されると、実行前にアクションを確認する必要があります。VSCodeを構成して、現行セッション、ワークスペース、または今後のすべての呼び出しに対して特定のツールを自動的に承認することができます。「続ける」ボタンのドロップダウンを使用してください。

VSCode MCPサーバーとツールの管理

サーバーの表示と管理

コマンドパレットからMCP: サーバー一覧コマンドを実行して、構成済みのMCPサーバーを表示します。このビューから、次のことができます：

  • サーバーを開始、停止、または再起動します。
  • サーバー構成を表示します。
  • トラブルシューティングのためにサーバーログにアクセスします。

VSCode MCPサーバーでのツールの直接参照

プロンプト内でツールを直接参照するには、#に続けてツール名を入力します。これはすべてのチャットモード（問合せ、編集、エージェントモード）で機能します。

VSCode MCPサーバーのコマンドライン設定

VSCodeのコマンドラインを使用してMCPサーバーを追加できます：

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

VSCode MCPサーバーの問題のトラブルシューティング

VSCodeがMCPサーバーの問題に遭遇すると、チャットビューにエラーインジケーターが表示されます。問題を診断するには：

  1. チャットビューのエラー通知をクリックします。
  2. 「出力を表示」を選択してサーバーログを表示します。
  3. または、コマンドパレットからMCP: サーバー一覧を実行し、サーバーを選択して「出力を表示」を選択します。

一般的な問題には以下が含まれます：

  • サーバー構成が不正確であること
  • 依存関係が不足していること
  • リモートサーバーのネットワーク接続の問題
  • ローカル実行可能ファイルの権限の問題

自分自身のVSCode MCPサーバーの作成

独自のMCPサーバーを開発したい場合は、stdoutを処理できる任意のプログラミング言語を使用できます。いくつかの公式SDKがあります：

  • TypeScript SDK
  • Python SDK
  • Java SDK
  • Kotlin SDK
  • C# SDK

サーバーは、ツールの発見、呼び出し、応答のフォーマット方法を定義したMCP標準を実装する必要があります。

VSCode MCPサーバーの自動発見と統合

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

FAQ：VSCode MCPサーバーに関する一般的な質問

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

はい、エージェントモードインターフェースで特定のツールをオン/オフ切り替えたり、プロンプトで#接頭辞を使ってツールを直接参照したり、より高度な制御のために.github/copilot-instructions.mdを使用できます。

MCPサーバーは安全ですか？

VSCodeは、ツールを実行する前に確認を求めたり、APIキーのような機密情報を安全に保管するなどのセキュリティ対策を実施しています。ただし、信頼できるソースからのMCPサーバーのみを使用することをお勧めします。

他のAIアシスタントと一緒にMCPサーバーを使用できますか？

MCPは、複数のAIモデルで機能するように設計されたオープンスタンダードです。VSCodeは現在、GitHub Copilotとの統合を行っていますが、プロトコルは標準をサポートする他のAIシステムとも互換性があります。

結論：VSCode MCPサーバーの可能性を最大限に引き出す

MCPサーバーは、外部ツールやサービスへの標準化されたアクセスを提供することにより、VSCode内のAIアシスタントの機能を大幅に拡張します。このガイドに従うことで、あなたは今：

  • VSCode環境でMCPサーバーを設定し、構成できます。
  • GitHub CopilotのエージェントモードでMCPツールを使用できます。
  • MCPサーバーを管理し、トラブルシュートできます。
  • 必要に応じて独自のMCPサーバーを作成できます。

Model Context Protocolは進化を続けており、プロジェクトとの統合が可能なサーバーとツールのエコシステムが拡大しています。VSCode MCPサーバーをマスターすることで、AI支援の開発の最前線に立ち、より強力で効率的なコーディングワークフローを実現できます。

MCPエコシステムを探求し、異なるサーバーを試して、あなたの開発プロセスを最も向上させるツールを見つけてください。プロトコルの適切な構成と理解を持って、AIアシスタントを本当に強力なコーディングパートナーに変えることができます。