VS Code で MCP を GitHub Copilot と統合する方法

モデルコンテキストプロトコル (MCP)ですAnthropic が開発したオープンスタンダード大規模言語モデル (LLM) を外部ツール、データベース、API と統合する方法を簡素化および標準化します。 MCP を AI モデルの「USB-C ポート」と考えてください。USB-C 統合デバイス接続と同様に、MCP は AI とツールの相互作用のためのユニバーサルインターフェイスを作成することを目指しています。

元々は機能を強化するために構築されましたクロードさんの外部システムと対話する機能、MCP は2024 年初頭にオープンソース化業界全体の導入を促進します。 Anthropic の目標は、プロトコルを公開することで、カスタム統合の必要性を最小限に抑えながら、ツール通信のための共有インフラストラクチャを確立することでした。モジュール性、相互運用性、そして開発者の生産性AI アプリケーションで。

MCP を通じて、言語モデルは次のことが可能になります。

APIを動的に呼び出してリアルタイムデータを取得する
一貫したシステムを使用してデータベースやサードパーティのツールと対話します。
形式
ハードコーディングされたロジックを回避し、モデルの動作をより柔軟にし、
保守可能

要するに、MCP は AI モデルを現実世界に組み込む方法を再構築しています、孤立したモノリシックシステムから、標準化された方法を使用して推論、取得、および動作できる柔軟なツール認識エージェントに移行しています。

前提条件

始める前に、次のものが揃っていることを確認してください。

Visual Studio コード (VS コード)：最新バージョンに更新されました。

GitHub アカウント: GitHub Copilot へのアクセス付き (無料、プロ、ビジネス、またはエンタープライズプラン)。

GitHub コパイロット拡張機能: GitHub Copilot と GitHub Copilot Chat 拡張機能の両方が VS Code にインストールされ有効になっています。

Node.js: 最新の LTS バージョンがインストールされています (次の方法で確認してください)node -v端末内)。からダウンロードしてくださいNode.js の公式 Web サイト必要に応じて。

パイソン: PIP パッケージ用にインストールされます (MCP サーバーに応じてオプション)。からダウンロードしてくださいPythonの公式ウェブサイト必要に応じて。

Git: バージョン管理とリポジトリ管理のためにインストールされます。

ステップ 1:
環境

VS コードを更新する:

VS Code を開き、[ヘルプ] > [更新の確認] メニューから更新を確認します。

MCP 統合をサポートするには、最新の安定版または Insiders バージョンを実行していることを確認してください。

GitHub にサインインする:

VS Code で、アクティビティバーの [アカウント] メニューに移動します。

「Sign in with GitHub to use GitHub Copilot」を選択し、プロンプトに従って GitHub アカウントを使用して認証します。 Copilot サブスクリプションをお持ちでない場合は、入力内容とチャットインタラクションが制限された Copilot Free プランにサインアップすることになります。

Node.js と Python をインストールする:

実行して Node.js のインストールを確認します。node -vあなたの端末で。最新の LTS バージョンが存在しない場合はインストールします。

実行して Python のインストールを確認します。python --versionまたはpython3 --version。 PIP ベースの MCP サーバーに必要な場合は、Python をインストールします。

MCP は複数の言語とパッケージ (TypeScript、Docker、C# など) をサポートしていますが、このガイドでは NPX パッケージの Node.js と PIP パッケージの Python に焦点を当てています。

GitHub Copilot 拡張機能をインストールする:

VS Code で、[拡張機能] ビュー (Ctrl+Shift+XまたはCmd+Shift+XmacOS の場合）。

「GitHub Copilot」を検索し、両方のGitHub コパイロットそしてGitHub 副操縦士チャット拡張子。

インストール後に VS Code を再起動します。

ステップ 2: VS Code での MCP の構成

MCP サーバーは GitHub Copilot の機能を強化しますエージェントモードリポジトリ管理、ファイル操作、API 呼び出しなどのタスク用のツールを提供することによって。 VS Code で MCP サーバーを構成する方法は次のとおりです。

推奨読書:Zoom と Google カレンダーを段階的に統合する

MCP サーバーの選択:

にアクセスしてください。MCP ドキュメントまたはGitHub の MCP サーバーリポジトリサポートされているサーバーのリストについては、(GitHub MCP サーバー、Microsoft Playwright MCP サーバーなど) をご覧ください。

このガイドでは、GitHub MCP サーバー課題の作成やファイルの比較など、リポジトリ関連のアクション用。

MCPサーバーをインストールする:

VS Code でターミナルを開きます (Ctrl+`(next 1) ormacOS では Cmd+`)。

GitHub MCP サーバーの場合は、公式リポジトリのセットアップ手順に従ってください (例:npm install @github/copilot-language-serverNode.js ベースのサーバーの場合)。

あるいは、VS Code インターフェイスを使用します。

GitHub Copilot Chat ビューを開きます (Ctrl+Alt+IまたはCmd+Alt+I）。

選択エージェントモードチャットモードドロップダウンから。

プロンプトが表示されたら、[MCP サーバーのインストール] ボタンをクリックします (例: Azure MCP サーバーまたは GitHub MCP サーバーの場合)。

ワークスペース設定で MCP を構成する:

を作成します.vscode/mcp.jsonワークスペースフォルダー内のファイルを使用して、MCP サーバー設定を定義します。例：

コピー


{
	"servers": [
	{
		"name": "GitHub MCP Server",
		"transport": "stdio",
		"command": ["node", "./node_modules/@github/copilot-language-server/dist/language-server.js", "--stdio", "true"]
	}
	]
}

あるいは、MCP サーバー設定をユーザー設定に追加します(Ctrl+,またはCmd+,> 「MCP」を検索します):

コピー


{
	"mcp.servers": [
		{
		"name": "GitHub MCP Server",
		"transport": "stdio",
		"command": ["node", "./node_modules/@github/copilot-language-server/dist/language-server.js", "--stdio", "true"]
		}
	]
	}

を確認してください。commandは、MCP サーバー実行可能ファイルの正しいパスを指します。

MCP ツールを有効にする:

[Copilot Chat] ビューで、次のように切り替えます。エージェントモード。

をクリックします。ツールボタンを押してツールリストを更新します。インストールされている MCP サーバー (例: 「GitHub MCP Server」) が表示されます。必要に応じてオンに切り替えます。

ステップ 3: MCP コードの作成とテスト

MCP を使用すると、Copilot は GitHub 問題の作成やファイルの比較などのアクションを実行できます。 MCP 関連のインタラクションを作成してテストする方法は次のとおりです。

MCP プロンプトの作成:

Copilot Chat ビューで、次のことを確認します。エージェントモードが選択されます。

コンテキスト変数を含む自然言語プロンプトを使用します。例:

プロンプト: 「新しい問題を追加するための GitHub 問題を作成する」
機能を私のリポジトリに追加します。」
プロンプト：「私のものと比べてください」ServerConfig.json
同様のパブリック GitHub リポジトリ構成を使用して、
改善。 #ファイル:ServerConfig.json」

を使用してコンテキストを追加しますコンテキストの追加ボタンまたは変数のような#fileまたは#codebase。

MCP インタラクションのテスト:

Copilot Chat 入力フィールドにプロンプトを入力し、Enter キーを押します。

Copilot は MCP サーバーのツール (問題を作成するための GitHub API など) を呼び出し、結果をチャットビューに表示します。

出力を確認します (リポジトリで作成された新しい問題やファイル比較の差分など)。

選択して変更を受け入れます保つまたは受け入れるチャットビューで、または間違っている場合は拒否してください。

MCP インタラクション用の Node.js コードの例:

カスタム MCP サーバーを開発する場合は、MCP SDK を使用します。以下は、リポジトリファイルを一覧表示するツールを作成する基本的な Node.js の例です。

コピー


const { MCPServer } = require('@anthropic/mcp-sdk');
	
const server = new MCPServer({
transport: 'stdio',
tools: [
	{
	name: 'list_repository_files',
	description: 'Lists files in a GitHub repository',
	execute: async (params) => {
		const { repo } = params;
		// Simulated GitHub API call
		return ['index.js', 'package.json', 'README.md'];
	},
	},
],
});

server.start();

これを名前を付けて保存mcp-server.jsそしてそれを実行しますnode mcp-server.jsステップ 2 に示すように、このサーバーを使用するように VS Code を構成します。

MCP インタラクションの Python コード例:

Python ベースの MCP サーバーの場合は、Python MCP SDK を使用します。

コピー


from mcp_sdk import MCPServer

server = MCPServer(
	transport="stdio",
	tools=[
		{
			"name": "create_github_issue",
			"description": "Creates a GitHub issue in a repository",
			"execute": lambda params: f"Issue created in {params['repo']} with title: {params['title']}",
		}
	],
)

server.start()span>Use async/await for asynchronous code.

名前を付けて保存mcp_server.pyそして一緒に走りますpython mcp_server.py。を更新します.vscode/mcp.jsonファイルをこのスクリプトを指すように設定します。

ステップ 4: 高度な機能とカスタマイズ

カスタム指示:

を作成します.github/copilot-instructions.mdファイルを使用して、プロジェクト固有のコンテキスト (コーディング標準、優先ライブラリなど) を提供します。例：

コピー


# Copilot Instructions
This project is a web application built with Node.js and Express.
- Use camelCase for variable names.
- Prefer async/await over callbacks.
- Use the GitHub MCP server for repository actions.

Copilot は、エージェントモードでこれらの指示を自動的に適用します。

動的なツールの更新:

MCP サーバーは、リスト変更イベントを使用してツールを動的に更新できます。新しいツールが追加されたときに更新を発行するように MCP サーバーコードを変更します。

リモート MCP サーバー:

リモートアクセスのために、Azure Container Apps などのプラットフォームで MCP サーバーをホストします。標準入出力ではなくサーバー送信イベント (SSE) を介して接続するように VS Code を構成します。

迅速なエンジニアリング:

より良い結果を得るには、特定のプロンプトを使用してください。例: 「GitHub MCP サーバーを使用して API からデータをフェッチする Node.js 関数を生成します。

ステップ 5: トラブルシューティングとベストプラクティス

トラブルシューティング:

MCPサーバーが検出されない：確認してください
.vscode/mcp.jsonファイルで正しいコマンドパスを確認してください。走る
MCP: List Serversコマンドパレットから確認してください。
提案はありません: エージェントモードがアクティブであり、
MCP サーバーは、[ツール] メニューでオンに切り替えられます。
チャットビューのエラー：エラー通知を選択します
[出力の表示] を選択してサーバーログを表示します。
認証の問題: GitHub を再認証します
Copilot が接続に失敗した場合は、[アカウント] メニューからアカウントを確認してください。

ベストプラクティス:

信頼できる MCP サーバーを使用する: サーバーのみをインストールします
セキュリティリスクを回避するために検証済みのソースを使用します。
プロンプトを具体的にする: タスクをより小さなものに分割し、
プロンプトをクリアします (例: 「関数を作成する」の代わりに「関数を生成する」
アプリ"）。
バージョン管理の手順：店
.github/copilot-instructions.md共有するリポジトリにある
あなたのチームと一緒に。
テストの変更: 常に Copilot のレビューとテストを行ってください。
MCP アクションによりファイルやファイルが変更される可能性があるため、受け入れる前に提案を行ってください。
リポジトリ。

結論

Model Context Protocol (MCP) を VS Code の GitHub Copilot と統合すると、強力な AI 駆動型機能が解放され、GitHub リポジトリ、API、外部ツールとのシームレスな対話が可能になります。このガイドに従うことで、環境のセットアップ、MCP サーバーの構成、MCP インタラクションの作成とテスト、カスタム命令などの高度な機能の活用方法を学習しました。 MCP の標準化されたインターフェイスを使用すると、プロジェクトのニーズに合わせて Copilot のエージェントモードを拡張でき、生産性とモジュール性が向上します。