出典: https://github.com/microsoft/mcp-for-beginners フォーク元リポジトリ: https://github.com/microsoft/mcp-for-beginners (Microsoft) ライセンス: MIT License

GitHub Copilot Agentモードでサーバーを利用する¶

Visual Studio CodeとGitHub Copilotはクライアントとして動作し、MCPサーバーを利用することができます。なぜそれをしたいのか疑問に思うかもしれませんね。つまり、MCPサーバーが持つ機能をIDE内から直接使えるようになるということです。例えばGitHubのMCPサーバーを追加すれば、特定のコマンドをターミナルで打つ代わりにプロンプトでGitHubを操作できるようになります。あるいは、自然言語で操作できる開発者体験を向上させる何かを想像してみてください。これで利点が見えてきましたよね？

概要¶

このレッスンでは、Visual Studio CodeとGitHub CopilotのAgentモードを使ってMCPサーバーのクライアントとして利用する方法を説明します。

学習目標¶

このレッスンを終える頃には、以下ができるようになります：

• Visual Studio Codeを通じてMCPサーバーを利用する。
• GitHub Copilotを使ってツールなどの機能を実行する。
• Visual Studio Codeを設定してMCPサーバーを検出・管理する。

使い方¶

MCPサーバーは以下の2つの方法で操作できます：

• ユーザーインターフェース：この章の後半で詳しく説明します。
• ターミナル：code実行ファイルを使ってターミナルから操作可能です。

ユーザープロファイルにMCPサーバーを追加するには、--add-mcpコマンドラインオプションを使い、JSON形式のサーバー設定（{\"name\":\"server-name\",\"command\":...}）を指定します。

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

スクリーンショット¶

次のセクションでビジュアルインターフェースの使い方について詳しく説明します。

アプローチ¶

大まかな流れは以下の通りです：

• MCPサーバーを見つけるための設定ファイルを用意する。
• サーバーを起動または接続し、利用可能な機能を取得する。
• GitHub Copilot Chatインターフェースを通じてその機能を使う。

流れがわかったところで、Visual Studio Codeを使ってMCPサーバーを利用する演習に挑戦しましょう。

演習：サーバーを利用する¶

この演習では、Visual Studio Codeを設定してMCPサーバーを見つけ、GitHub Copilot Chatインターフェースから利用できるようにします。

-0- 事前準備：MCPサーバーの検出を有効にする¶

MCPサーバーの検出を有効にする必要があるかもしれません。

1. Visual Studio Codeで ファイル -> 設定 -> 設定 に移動します。

2. 「MCP」で検索し、settings.jsonファイル内の chat.mcp.discovery.enabled を有効にします。

-1- 設定ファイルを作成する¶

まず、プロジェクトのルートに設定ファイルを作成します。.vscodeというフォルダを作り、その中にMCP.jsonというファイルを置きます。内容は以下のようになります：

.vscode
|-- mcp.json

次に、サーバーのエントリを追加する方法を見てみましょう。

-2- サーバーを設定する¶

mcp.jsonに以下の内容を追加します：

{
    "inputs": [],
    "servers": {
       "hello-mcp": {
           "command": "node",
           "args": [
               "build/index.js"
           ]
       }
    }
}

上記はNode.jsで書かれたサーバーを起動する簡単な例です。その他のランタイムの場合は、commandとargsで適切な起動コマンドを指定してください。

-3- サーバーを起動する¶

エントリを追加したら、サーバーを起動しましょう：

1. mcp.json内のエントリを見つけ、「再生」アイコンがあることを確認します：

1. 「再生」アイコンをクリックすると、GitHub Copilot Chatのツールアイコンに利用可能なツールの数が増えます。ツールアイコンをクリックすると登録されたツールの一覧が表示されます。GitHub Copilotにツールをコンテキストとして使わせたい場合はチェックを入れたり外したりできます：

1. ツールを実行するには、ツールの説明に合致するプロンプトを入力します。例えば「add 22 to 1」のようなプロンプトです：

「23」と返答が返ってくるはずです。

課題¶

mcp.jsonにサーバーのエントリを追加し、サーバーの起動・停止ができることを確認してください。また、GitHub Copilot Chatインターフェースを通じてサーバー上のツールと通信できることも確認しましょう。

解答例¶

Solution

重要なポイント¶

この章のポイントは以下の通りです：

• Visual Studio Codeは複数のMCPサーバーとそのツールを利用できる優れたクライアントです。
• GitHub Copilot Chatインターフェースがサーバーとのやり取りの窓口となります。
• APIキーなどのユーザー入力をプロンプトで受け取り、mcp.jsonのサーバー設定に渡すことができます。

サンプル¶

• Java Calculator
• .Net Calculator
• JavaScript Calculator
• TypeScript Calculator
• Python Calculator

追加リソース¶

• Visual Studio docs

次に進む¶

• 次へ: SSEサーバーの作成

免責事項：
本書類はAI翻訳サービス「Co-op Translator」を使用して翻訳されました。正確性を期しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。原文の言語によるオリジナル文書が正式な情報源とみなされるべきです。重要な情報については、専門の人間による翻訳を推奨します。本翻訳の利用により生じた誤解や誤訳について、当方は一切の責任を負いかねます。