Zenn
⚒️

VSCodeでMCPサーバーを使いこなす

に公開
AI
VS Code
GitHub Copilot
AIエージェント
Model Context Protocol
tech

最近、MCP（Model Context Protocol）って聞いたことありますか？これ、AIモデルが外部ツールやサービスと連携するための革新的なオープンスタンダードなんです。特にVSCodeでGitHub Copilotのエージェントモードと組み合わせると、もう開発効率が段違いになります。今回は初心者の方でも分かるように、セットアップから実践的な使い方まで、徹底的に解説していきますよ！

VS Code（バージョン1.99）で、Agent mode機能がリリースされました!

https://code.visualstudio.com/updates/v1_99

MCPサーバーって何？素人でも分かる超簡単解説

まず基本から説明すると、Model Context Protocolは、AIモデルが外部ツールやアプリと会話するための「共通言語」みたいなものです。VSCodeでCopilotのエージェントモードを使うとき、このプロトコルのおかげでAIがファイル操作やデータベースアクセス、API呼び出しなどを自動でやってくれるんですよ。

MCPの仕組みはこんな感じです：

  • MCPクライアント（VSCodeなど）がMCPサーバーに接続して、AIモデルのためにアクションをリクエスト
  • MCPサーバーが特定の機能を提供するツールを公開
  • プロトコルがクライアントとサーバー間の通信方法を定義

具体例を挙げると、ファイルシステムMCPサーバーならファイルの読み書きや検索ができるし、GitHubのMCPサーバーならリポジトリの管理やPR作成ができます。これらのサーバーはローカルでもリモートでも動かせるので、めちゃくちゃ便利なんです！

初めてのMCPサーバー設定

さて、実際にVSCodeにMCPサーバーを追加する方法を見ていきましょう。正直、最初は「難しそう...」と思ったんですが、やってみたらめちゃくちゃ簡単でした！

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

以下の3つの方法があります：

  1. ワークスペース構成ファイルを使う方法

    • ワークスペースに.vscode/mcp.jsonファイルを作成
    • 「サーバーを追加」ボタンでテンプレートを追加
    • VSCodeがIntelliSenseでサポートしてくれるので安心！

  2. コマンドパレットを使う方法

    • MCP サーバーの追加コマンドを実行
    • 「ワークスペース設定」を選択

  3. ユーザー設定でグローバルアクセスする方法

    • コマンドパレットからMCP サーバーの追加を実行
    • 「ユーザー設定」を選択

個人的には2番目の方法が一番シンプルで好きですね！

ステップ2：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：設定値のプレースホルダーを定義（APIキーなど）
  • servers：MCPサーバーのリスト
  • type：接続タイプ（「stdio」か「sse」）
  • command：サーバーを起動するコマンド
  • args：コマンドの引数
  • env：環境変数

最初は複雑に見えるかもしれませんが、テンプレートを使えば簡単にカスタマイズできますよ！

接続タイプと設定オプション：プロが教える最適な選択

STDIO接続：ローカルサーバーの定番

ローカルで動かすサーバーには標準入出力（STDIO）接続が便利です：

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

僕はこのタイプをよく使いますね。ローカル環境での開発には最適です！

SSE接続：リモートサーバーとの連携に

リモートサーバーを使う場合はServer-Sent Events（SSE）接続を使います：

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

チーム開発でリモートサーバーを共有する場合に便利ですよ！

変数の活用テクニック

設定ファイルでは変数も使えます：

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

これ、めちゃくちゃ便利なんですよ！プロジェクトごとに設定を変えなくても、自動的に適切なパスを使ってくれます。

実践的な高度設定例：複数サーバーの連携技

実際のプロジェクトでは、複数の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"}
    }
  }
}

僕の場合、Perplexityサーバーと一緒にFetchサーバーを組み合わせて使うことが多いです。情報検索と外部APIアクセスの組み合わせが最強ですね！

エージェントモードでMCPツールを使いこなす！

さあ、いよいよMCPサーバーを実際に使ってみましょう！設定が完了したら：

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

最初にツールを呼び出すと確認が求められますが、「続ける」ボタンのドロップダウンから「このセッションで許可する」などを選べば、毎回確認する手間が省けます。これ、地味に便利ですよ！

MCPサーバーとツールの管理：プロの技

サーバーの管理テクニック

コマンドパレットからMCP: サーバー一覧を実行すると、設定済みのサーバー一覧が表示されます。ここから：

  • サーバーの開始/停止/再起動
  • 設定の確認
  • ログの確認

ができます。トラブル発生時はログをチェックするのが一番ですね！

ツールの直接参照テクニック

プロンプト内で特定のツールを直接指定したい場合は、#に続けてツール名を入力します。例えば：

#Fetch https://example.com からデータを取得して

この方法、めちゃくちゃ便利ですよ！特定のツールだけを使いたい場合に最適です。

コマンドラインからの設定テクニック

VSCodeのコマンドラインからMCPサーバーを追加することもできます：

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

自動化スクリプトを作る場合に便利ですね！

トラブルシューティング：よくある問題と解決法

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

  • チャットビューのエラー通知をクリック
  • 「出力を表示」を選択してログを確認
  • またはMCP: サーバー一覧からサーバーを選択して「出力を表示」

僕が経験した一般的な問題と解決策をシェアします：

  1. サーバー構成の不正確さ：JSONの構文エラーがないか確認しましょう
  2. 依存関係の不足：必要なパッケージがインストールされているか確認
  3. ネットワーク接続の問題：リモートサーバーのURLが正しいか、ファイアウォールの設定を確認
  4. 権限の問題：実行ファイルに適切な権限が付与されているか確認

特に多いのは依存関係の問題ですね。npm installやpip installで必要なパッケージをインストールすると解決することが多いです！

自分だけのMCPサーバーを作る：開発者向けガイド

自分専用のMCPサーバーを作りたい場合は、stdoutを処理できる言語なら何でもOKです。公式SDKもあります：

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

個人的にはTypeScriptかPythonがおすすめです。特にTypeScriptはVSCodeとの相性が抜群ですね！

サーバー開発では、MCP標準に従ってツールの発見、呼び出し、応答のフォーマットを実装する必要があります。最初は公式サンプルを参考にするのがいいでしょう。

自動発見と統合：環境間の連携テクニック

VSCodeは、Claude Desktopなど他のツールで定義されたMCPサーバーを自動検出できます。VSCode設定のchat.mcp.discovery.enabledをtrueにすれば有効になります。

これ、めちゃくちゃ便利な機能なんですよ！複数の環境でMCPサーバーを共有できるので、設定の手間が大幅に減ります。

まとめ

MCPサーバーは、外部ツールやサービスへの標準化されたアクセスを提供することで、VSCode内のAIアシスタントの能力を大幅に拡張します。この記事を通じて：

  • VSCodeでのMCPサーバーの設定と構成方法
  • GitHub CopilotのエージェントモードでのMCPツールの使用法
  • MCPサーバーの管理とトラブルシューティング
  • 独自のMCPサーバー開発の基礎

を学びました。

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

僕自身、MCPサーバーを導入してから開発効率が30%以上向上しました。特にAPIドキュメントの検索や外部サービスとの連携が格段に楽になりましたね。皆さんもぜひ試してみてください！

最後まで読んでいただき、ありがとうございました！この記事を読んで少しでも理解を深めていただければ幸いです！

Discussion