1. はじめに

ブログをご覧の皆さまこんにちは。エンジニアの小川です。

前回の記事ではMCPサーバーの概要と導入時の注意点について書きましたが、 今回はVS CodeやClaudeCodeから実際にMCPサーバーを使用して外部サービスと連携する方法を実践形式で解説します。

MCPサーバーには現在、大きく分けて3つの提供形態があります。

・公式MCPサーバー：Anthropic社など、サービス提供会社が提供,公開しているMCPサーバー
・SaaS型MCPサーバー：Zapier社等が提供するクラウドサービス
・OSS MCPサーバー：GitHub等で公開されているオープンソースのコードを自分で構築・ホスティングする

これら3つの方法を実際に試してみて、それぞれの特徴と使い方を比較していきます。

本記事は第1部としてGitHub公式のMCPサーバーを使用した例を紹介します。
また本記事は主にVS CodeやClaude Codeの使用経験があるエンジニアの方を対象としています。

2. 公式GitHub MCPサーバーを使ってみよう

この項では以下の流れを行っていきます。

[準備フェーズ]
①GitHubでPersonal Access Tokenを作成
②VS CodeにMCPサーバ情報を設定
③作業対象のサンプルプロジェクトを作成

[実行フェーズ]
・GitHub Copilot Agentを使用してIssue情報を取得し、対応作業を実行して完了後にPRを出す。

2-1. 準備フェーズ

①Personal Access Tokenの作成
まずはGitHubでPersonal Access Token(PAT)を作成します。
今回は「Fine-grained personal access tokens」を使用しています。

GitHub MCPサーバーを使用するにあたり、PATに以下の権限を付与します。

・Repository permissions
  └ Contents: Read and write
  └ Issues: Read and write
  └ Pull requests: Read and write
  └ Metadata: Read-only

②MCPサーバーの接続情報ファイルをVS Codeに設定
VS Codeのワークスペースに.vscode/mcp.jsonファイルを作成し、以下の内容を記述します。

これでGitHub CopilotからGitHub MCPサーバを使用する準備は完了です。とても簡単ですね！

③作業対象のサンプルプロジェクトを作成
実際に操作する対象のサンプルプロジェクトを作成します。
今回は以下のような簡単なWEBページを(GitHub Copilotが)作成しました。

・GitHubリポジトリ: index.htmlのみ作成

・作成したWEBページ: ユニバース不動産 トップページ

2-2. 実行フェーズ

実行フェーズでは以下の操作を行っていきます。

　① GitHubにIssueを登録
　② VS CodeのGitHub Copilot AgentでIssue情報を取得
　③ Issueの対応作業を実行し、PRを作成する
　④ PRの確認

①GitHubにIssueを登録

GitHubに行わせたい作業のIssueを登録します。
ここではデザインを青から赤に変更し、TOP画面のメッセージを変更する内容のIssueを登録しました。

② VS CodeのGitHub Copilot AgentでIssue情報を取得

それではGitHub Copilot Agentを起動し、MCPサーバー経由でIssue情報を取得させてみます。

正しくIssue情報が取得できました。出力からMCPサーバーを経由していることがわかります。

③ Issueの対応作業を実行し、PRを作成する

それでは実際にIssueの対応作業を実行させ、完了後にPRを作成させてみます。

出力されたメッセージは以下の通りです。

以上の出力からGitHub Copilot AgentがIssueの内容を理解し、対応作業を実行してPRを作成したことがわかります。

またGitHub Copilot Agentの処理途中に何度か操作確認のメッセージが表示されました。
データの読み取りには確認がありませんが、追加/変更系の処理、またターミナルの実行時には確認が入る仕様となっている様です。

④ PRの確認

最後にGitHub上でPRが作成されていることを確認します。

PRと修正後の画面を確認すると、Issueで指定した内容が正しく反映されているようです。

ただし画面のスクリーンショットは正しく作成・アップロードできませんでした。
今回はチャットの途中で画像URLの入力を求められましたが、別のケースではPR内に存在しないURLを指定することもあり、このあたりはまだ正確さに欠けるようです。
これはGitHub Copilot Agentの現時点での制限事項と思われます。

3. まとめ

以上、GitHub CopilotのMCPサーバーを経由してIssue情報を取得し、作業を実行してPRを作成する例を紹介しました。

実は今回の内容に関しては、MCPサーバーを使用しなくてもGitHub CLIやgitコマンドで実現可能です。
実際MCPサーバーが利用できない場合、GitHub Copilot Agentは自動で処理方法を切り替えて動作します。

しかし、それでもMCPサーバーを使用することで以下のようなメリットがあります。

・統一されたインターフェースで複数のサービスと連携できる
・手元にGitHub CLIなどのツールをインストールする必要がない
・認証情報を一元管理できる
・今後のアップデートにより、MCPサーバーでしか実現できない機能が追加される可能性がある

特に複数の外部サービスを統合して利用する場合、MCPサーバーの真価が発揮されると考えられます。

今回はGitHub MCPサーバーを使って、MCPサーバーの基本的な使い方とGitHub Copilot Agentでどのように活用されるかを紹介しました。
次回はSaaS型MCPサーバーのZapier MCPを使用した例を紹介します。