MCP による GitHub Copilot エージェント モードの強化

モデル コンテキスト プロトコル (MCP) を使って Copilot Chat のエージェント機能を拡張する方法について説明します。

この記事の内容

メモ

MCP servers in Copilot policy for enterprises and organizations, disabled by default, controls the use of MCP.

Copilot のエージェント機能と MCP について

Copilot のエージェント機能とは、継続的なガイダンスなしで複数手順のワークフローを実行して独立して作業し、コンテキストに応じて適切なツールとアプローチを選んで決定を下し、フィードバックと結果に応じてアプローチを調整して、反復と適応を行う機能です。 エージェント モードを使ってこれらの機能にアクセスできます。

モデル コンテキスト プロトコル (MCP) サーバーと組み合わせると、エージェント モードが大幅に強化され、コンテキストを切り替えることなく Copilot から外部リソースにアクセスできるようになります。 これにより、Copilot はエージェントの "ループ" を完了できるため、関連する情報を自律的に見つけ、フィードバックを分析し、情報に基づいて決定を下すことで、アプローチを動的に調整できます。 Copilot で MCP を使うと、人間の介入を最小限に抑えてタスクを完了し、検出内容に基づいて戦略を継続的に調整することができます。

MCP とエージェント モードを組み合わせる利点

エージェント モードで MCP サーバーを使うと、次のようないくつかの重要な利点があります。

  • 拡張コンテキスト: MCP サーバーは、Copilot に外部データ ソース、API、ツールへのアクセスを提供します。
  • 手作業の削減: issue の作成やワークフローの実行などのタスクを Copilot で実行できるため、ユーザーはより価値の高いタスクに集中できます。
  • シームレスな統合: Copilot を使うと、コンテキストを切り替えることなく、カスタム統合を必要とせずに、複数のツールとプラットフォームが関係するタスクを実行できます。

エージェント モードで MCP を使うためのベスト プラクティス

MCP サーバーとエージェント モードを組み合わせて最大限に活用するには、次のベスト プラクティスに従ってください。

プロンプトの戦略

  • 目標を具体的に指定する: 何を達成したいのか、どのような出力が必要なのかをプロンプトで明確に定義します。
  • コンテキストを提供する: Copilot からアクセスできる外部リソースへのリンクなど、プロジェクトと要件に関する背景情報を含めます。
  • 境界を設定する: タスクの制約や制限を指定します。 たとえば、Copilot で新しい機能の計画のみを行い、まだ変更を加えないようにする場合は、そのように指定します。 有効にする MCP ツールを制限することもできます。
  • 確認を依頼する: 重要な変更を行う前に、Copilot が指示を正しく理解していることを確認します。
  • プロンプト ファイルまたはカスタム指示を使う: プロンプト ファイルまたはカスタム指示ファイルを作成して、さまざまな MCP サーバーでの動作方法を Copilot に指示することができます。 「GitHub Copilot Chat の回答のカスタマイズについて」を参照してください。

MCP サーバーの使用

  • 関連するサーバーを選ぶ: 特定のワークフローのニーズに合った MCP サーバーを選んで有効にします。
  • シンプルに始める: より複雑な統合を追加する前に、運用実績のある少数の MCP サーバーから始めます。
  • 接続をテストする: エージェント モードのタスクを開始する前に、すべての MCP サーバーが適切に構成され、アクセス可能であることを確認します。

セキュリティに関する考慮事項

  • 使用できる場合は OAuth を使う: GitHub MCP などの MCP サーバーの場合は、personal access tokens よりも OAuth 認証を優先します。 「GitHub MCP サーバーの使用」を参照してください。
  • アクセス許可を制限する: タスクに必要な最小限のアクセス許可のみを MCP サーバーに付与します。
  • 接続をレビューする: 開発環境にアクセスできる MCP サーバーを定期的に監査します。
  • アクティビティを監視する: MCP サーバーを通じて Copilot が実行するアクションを追跡します。
  • シークレットの漏えいの防止: プッシュ保護を使用すると、AI によって生成される応答にシークレットが含まれるのをブロックし、ユーザーが GitHub MCP サーバーを使って実行するアクションを通じてシークレットを公開するのを防止できます。 現在、これはパブリック リポジトリでのみ使用できます。 「プッシュ保護について」を参照してください。

シナリオ例: ユーザー補助コンプライアンスの実装

メモ

次のシナリオは、エージェント モードと MCP サーバーを使ってタスクを最初から最後まで完了するために使用できるパターンと戦略を示すことのみを目的としています。シナリオ、プロンプト、回答はあくまで例です。

最新のユーザー補助標準に準拠するためにカスタマー ポータルを更新する必要がある、というフィードバックをチームが受け取ったとします。 次のガイダンスに従って、アプリケーション全体のユーザー補助を向上させることが求められています。

  • 設計チームによって定義された仕様の一覧。
  • ユーザー補助の監査後にプロジェクトのリポジトリに作成された issue。

Copilot エージェント モードを使うと、複数の MCP サーバーを利用して、ユーザー補助の改善を効率的に実装できます。

以下のシナリオは、さまざまなフェーズ (調査、計画、実装、検証) に個別のプロンプトを使って、ソフトウェア開発ライフサイクル フェーズと緩く連携した複数のエージェント "ループ" を作成する方法を示しています。 このアプローチにより、自然なチェックポイントが作成され、Copilot が次のフェーズに進む前に、進行状況をレビューし、フィードバックを提供し、要件を調整することができます。

前提条件

MCP でエージェント モードを使う前に、次の点を確認します。

  • Copilot 統合と MCP サポートを備えた IDE (Visual Studio Code など)
  • エージェント モードが有効になっている
  • 使う必要がある MCP サーバーへのアクセス

MCP サーバーの設定

まず、Copilot に必要な MCP サーバーを構成する必要があります。 この例のシナリオでは、以下を使います。

  • GitHub MCP サーバー: GitHub MCP サーバーを構成して、Copilot がリポジトリにアクセスし、コードベースについて確認し、既存の issue について確認し、ブランチを作成し、pull request を管理できるようにします。 「GitHub MCP サーバーの使用」を参照してください。

  • Figma MCP サーバー: Figma MCP サーバーを構成して、Copilot が色のコントラスト要件、フォーカス状態、相互作用パターンなどのユーザー補助仕様を含むデザイン ファイルにアクセスできるようにします。 Figma-Context-MCP を参照するか、オープン ベータ版の Dev Mode MCP サーバーを試してください。

  • Playwright MCP サーバー: Playwright MCP サーバーを設定して、Copilot がスクリーン リーダーの互換性やキーボード ナビゲーション テストなどの自動ユーザー補助テストを作成および実行できるようにします。 mcp-playwright を参照してください。

手順 1: 調査ループ - ユーザー補助要件の分析

プロジェクトのユーザー補助要件と既存のユーザー補助に関連する GitHub の issue の両方を分析するには、Copilot にプロンプトを入力します。

プロンプトには Figma ファイルへのリンクを含めます。 Copilot が設計仕様を正常に読み取って分析できるようにするには、ファイル内の特定のノードまたはレイヤーを選び、そのノード ID が URL に含まれるようにします。

プロンプトの例: I need to make our customer portal WCAG 2.1 AA compliant. Use the Figma MCP to analyze our design specifications at https://figma.com/design/DESIGN-FILE-FOR-ACCESSIBILITY-SPECS?node-id=NODE_ID for accessibility requirements. Also use the GitHub MCP to find open GitHub issues with the labels accessibility or WCAG in the customer-portal repository. Then sort them into categories and list each issue that falls under the category with the issue title and number.

Copilot からの回答例:

Copilot からは、まず Figma および GitHub MCP サーバーからツールを実行することを要求されるはずです。 あなたが許可すると、Copilot により、Figma の設計仕様が分析され、GitHub の issue を検索してカテゴリに整理されます。

たとえば、色のコントラストに関する複数の issue が見つかったことに基づいて、Copilot によって色のコントラストがカテゴリとして特定される可能性があります。

  • 色のコントラストに関する issue
    • Issue #134: ダッシュボードのテキストのコントラスト比が 4.5: 1 未満
    • Issue #156: フォームのエラー状態がコントラスト要件を満たしていない

これにより、ユーザー補助要件の包括的な概要を把握し、Copilot で優先順位を付けて計画を作成できるようになります。

手順 2: 計画ループ - ユーザー補助の実装戦略

次に、Copilot に詳細な実装計画の作成を依頼します。

プロンプトの例: Based on your accessibility analysis of our Figma designs and GitHub issues, create a focused implementation plan for an immediate pull request addressing the highest priority accessibility issues. Don't make any changes yet. Also suggest follow-up issues we should create for the remaining Figma specifications.

Copilot からの回答例:

Copilot により、即時の pull request に対して影響の大きいユーザー補助の issue に重点を置いて優先順位が付けられた実装計画が作成され、残りの作業に対するフォローアップの issue が提案されます。

たとえば、Copilot により、色のコントラスト カテゴリの issue を修正するために何を行う必要があるかが特定される可能性があります。

  • 1.色のコントラストの修正:
    • variables.scss のテキスト色変数を更新して、すべての通常テキストのコントラスト比を 4.5:1 に設定してください
    • DashboardCard.vue およびその他のプライマリ コンポーネントの UI コンポーネントの色を変更して、3:1 のコントラスト比を満たすようにしてください
    • Issue #134 (ダッシュボードのテキストのコントラスト) と issue #156 (フォームのエラー状態) の修正を優先してください

重点を置く内容に基づいて、Copilot に計画を調整するよう依頼できます。 その結果、納得のいく計画が完成し、Copilot にその実施を依頼できるようになりました。

手順 3: 実装ループ - ユーザー補助の改善

計画をレビューした後、Copilot にユーザー補助修正の実装を開始するように指示します。

プロンプトの例: Create a new branch and implement the critical accessibility fixes according to your proposed implementation plan. Focus on the top three categories that you identified as highest priority. Create a pull request with proper references to the issues being fixed.

Copilot からの回答例:

Copilot により、実装計画が実行され、特定されたユーザー補助の issue を解決するための対象コードの変更が実行され、pull request が作成されます。

たとえば、Copilot により、fix/critical-accessibility-issues という新しいブランチが作成され、色のコントラストの issue を解決するための変更が行われる可能性があります。

  • ダッシュボードのテキスト コントラストの issue を修正しました (issue #134):
    • src/styles/variables.scss のテキスト色変数を #767676 から #595959 に更新しました
    • DashboardCard.vue の明るい灰色の背景表示される暗いテキストを、4.5:1 の比率になるように変更しました

これらの変更を加えた pull request #213 を開きました。

手順 4: テスト ループ - Playwright によるユーザー補助の検証

Playwright MCP を使ってユーザー補助テストを作成し、実行するように Copilot に指示できます。

プロンプトの例: Create focused accessibility tests for the components we've updated in the pull request. Use the Playwright MCP.

Copilot からの回答例:

Copilot により、ユーザー補助テストが開発され、必要に応じて Playwright 構成ファイルが作成されます。

たとえば、Copilot により、テキストのコントラストに関するテスト ファイルが作成される可能性があります。

テスト実装:

  • tests/accessibility/ にターゲット テスト ファイルを作成しました。
    • contrast.spec.ts - テキストのコントラスト比を検証します

テストが作成されたら、Copilot から、Playwright MCP のさまざまなツールを使ってテストを実行するためのアクセス許可が求められます。 Copilot では、必ずしも依頼していない追加のテストが行われる場合があることに注意してください。プロンプトをより厳格に調整することで、これを防ぐことができます。

手順 5: GitHub の issue の更新

最後に、pull request で対処された Copilot の issue を更新し、フォローアップの issue を作成するように GitHub に指示します。

プロンプトの例: Update the GitHub issues we've fixed in the pull request with comments summarizing the changes. Create the follow-up issues you suggested for the remaining accessibility work.

Copilot からの回答例:

Copilot により、GitHub MCP サーバーから必要なツールを使うアクセス許可が求められます。 その後、GitHub の issue が詳細なコメントで更新され、残りの作業について構造化されたフォローアップの issue が作成されます。

たとえば、Copilot により、調査手順で最初に特定された色のコントラストの issue にコメントが追加されます。

コメントに関する issue を更新しました:

  • Issue #134: "ダッシュボードのテキストのコントラスト比が 4.5: 1 未満"
    • コメント: "PR #213 で、variables.scss と DashboardCard コンポーネントのテキスト色変数を更新することで修正しました。 すべてのダッシュボード テキストは、自動テストによって検証され、4.5:1 のコントラスト比を満たすようになりました。"

これで、pull request をレビューし、調整を行うことができます。 変更が有効であることを確認したら、他の pull request と同様にマージできます。

ハンズオン プラクティス

MCP と GitHub Copilot の統合を実際に体験するために、「MCP と GitHub Copilot の統合」のスキル演習を試してみてください。

参考資料