MCP を使用GitHub Copilot エージェント モードの拡張

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

この記事で

メモ

Enterprise および organization 向けの Copilot での MCP サーバー ポリシーは、既定では無効になっており、MCP の使用を制御します。

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

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

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

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

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

  •         **Extended context**: MCP サーバーは、Copilot に外部の API、ツール、およびデータ ソースへのアクセスを提供します。

  •         **手作業の削減**: issue の作成やワークフローの実行などのタスクを Copilot で実行できるため、ユーザーはより価値の高いタスクに集中できます。

  •         **シームレスな統合**: Copilot を使うと、コンテキストを切り替えることなく、カスタム統合を必要とせずに、複数のツールとプラットフォームが関係するタスクを実行できます。

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

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

プロンプト戦略

  •         **目標を具体的に指定する**: 何を達成したいのか、どのような出力が必要なのかをプロンプトで明確に定義します。

  •         **文脈を提供してください**: プロジェクト及び要件に関する関連する背景情報を含めてください。また、Copilot がアクセスできる外部リソースへのリンクも含めてください。

  •         **境界を設定する**: タスクの制約や制限を指定します。 たとえば、Copilot で新しい機能の計画のみを行い、まだ変更を加えないようにする場合は、そのように指定します。 有効にする MCP ツールを制限することもできます。

  •         **確認を依頼する**: 重要な変更を行う前に、Copilot が指示を正しく理解していることを確認します。

  •         **プロンプト ファイルまたはカスタム指示を使う**: プロンプト ファイルまたはカスタム指示ファイルを作成して、さまざまな MCP サーバーでの動作方法を Copilot に指示することができます。 「[AUTOTITLE](/copilot/concepts/about-customizing-github-copilot-chat-responses) を参照してください。

MCP サーバーの使用

  •         **関連するサーバーを選ぶ**: 特定のワークフローのニーズに合った MCP サーバーを選んで有効にします。

  •         **シンプルに始める**: より複雑な統合を追加する前に、運用実績のある少数の MCP サーバーから始めます。

  •         **接続をテストする**: エージェント モードのタスクを開始する前に、すべての MCP サーバーが適切に構成され、アクセス可能であることを確認します。

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

  •         **使用できる場合は OAuth を使う**: GitHub MCP などの MCP サーバーの場合は、personal access tokens よりも OAuth 認証を優先します。 「[AUTOTITLE](/copilot/customizing-copilot/using-model-context-protocol/using-the-github-mcp-server#remote-mcp-server-configuration-with-oauth) を参照してください。

  •         **アクセス許可を制限する**: タスクに必要な最小限のアクセス許可のみを MCP サーバーに付与します。

  •         **接続を確認**: MCP サーバーが開発環境にアクセスしているかを定期的に監査します。

  •         **アクティビティを監視する**: MCP サーバーを通じて Copilot が実行するアクションを追跡します。

  •         **Prevent シークレット リーク**: プッシュ保護は、シークレットが AI によって生成された応答に含まれるのをブロックし、GitHub MCP サーバーを使用して実行するすべてのアクションを通じてシークレットを公開できないようにします。 現在、これはパブリック リポジトリでのみ使用できます。 「[AUTOTITLE](/code-security/secret-scanning/introduction/about-push-protection)」を参照してください。

シナリオ例: アクセシビリティコンプライアンスの実装

メモ

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

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

  • 設計チームによって定義された仕様の一覧。
  • アクセシビリティ監査後にprojectのリポジトリに作成された問題。

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

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

  •         [前提条件](#prerequisites)

  •         [MCP サーバーの設定](#setting-up-mcp-servers)

  •         [ステップ 1: 調査ループ - アクセシビリティ要件の分析](#step-1-research-loop---analyzing-accessibility-requirements)

  •         [手順 2: 計画ループ - アクセシビリティ実装戦略](#step-2-planning-loop---accessibility-implementation-strategy)

  •         [手順 3: 実装loop - アクセシビリティの向上](#step-3-implementation-loop---making-accessibility-improvements)
  • 手順 4: テストループ - Playwrightを使用したアクセシビリティの検証
  •         [手順 5: GitHub の問題の更新](#step-5-updating-github-issues)

  •         [参考資料](#further-reading)

前提条件

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

  • Copilot 統合と MCP サポートを備えた IDE (Visual Studio Code など)
  • エージェント モードが有効になっている
  • 使用する必要な MCP サーバーにAccessする

MCP サーバーの設定

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

  •         **GitHub MCP サーバー**: GitHub MCP サーバーを構成して、 Copilot がリポジトリをaccessできるように、コードベースの調査、既存の問題の調査、ブランチの作成、プル要求の管理を行えるようにします。 「[AUTOTITLE](/copilot/customizing-copilot/using-model-context-protocol/using-the-github-mcp-server) を参照してください。

  •           **Figma MCP サーバー**: Copilot が、色のコントラスト要件、フォーカス状態、相互作用パターンなどのアクセシビリティ仕様を含むデザインファイルにアクセスできるように Figma MCP サーバーを構成します。 
        [Figma-Context-MCP](https://github.com/GLips/Figma-Context-MCP) を参照するか、[Dev モード MCP サーバー](https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Dev-Mode-MCP-Server)を試してください。

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

手順 1: ループの調査 - アクセシビリティ要件の分析

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

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

プロンプトの例 1

Copilot prompt
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.

応答の例 1

**
Copilot は最初に、Figma サーバーと GitHub MCP サーバーからツールの実行を要求して応答する必要があります。 これを許可すると、Copilot は Figma のデザイン仕様を分析し、GitHub の問題を検索し、カテゴリに整理します。

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

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

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

手順 2: ループの計画 - アクセシビリティ実装戦略

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

プロンプトの例 2

Copilot prompt
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.

応答の例 2

Copilot は、即時のプルリクエスト用に重大なアクセシビリティ上の課題に重点を置いて優先順位が付けられた実装計画を作成し、残りの作業に対するフォローアップイシューを提案します。

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

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

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

手順 3: 実装loop - アクセシビリティの向上

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

プロンプトの例 3

Copilot prompt
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.

応答例 3

Copilot により、実装計画が実行され、特定されたアクセシビリティの問題を解決するためにコードに変更を加え、プルリクエストが作成されます。

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

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

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

手順 4: loopのテスト - Playwright を使用したアクセシビリティ検証

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

プロンプトの例 4

Copilot prompt
Create focused accessibility tests for the components we've updated in the pull request. Use the Playwright MCP.

応答の例 4

Copilot は、ユーザー補助テストを行い、その結果に応じて必要に応じて Playwright 構成ファイルを作成します。

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

          **テスト実装:**

          `tests/accessibility/` にターゲット テスト ファイルを作成しました。

          `contrast.spec.ts` - テキストのコントラスト比を検証します

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

手順 5: GitHub の更新に関する問題

最後に、Copilot にプロンプトを表示して、プル要求で対処された GitHub の問題を更新し、フォローアップの問題を作成します。

プロンプトの例 5

Copilot prompt
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.

応答の例 5

Copilot は、 GitHub MCP サーバーから必要なツールを使用するためのアクセス許可を求めることによって応答します。 その後、GitHub の問題が詳細なコメントに更新され、残りの作業に関する構造化されたフォローアップの問題が作成されます。

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

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

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

ハンズオン プラクティス

          [MCP と GitHub Copilot を統合するスキル演習](https://github.com/skills/integrate-mcp-with-copilot/)を試して、MCP と GitHub Copilot の統合に関する実践的な経験を積んでください。

参考資料

  •         **MCP の基礎**: MCP サーバーの設定と構成の詳細については、「[AUTOTITLE](/copilot/customizing-copilot/using-model-context-protocol/extending-copilot-chat-with-mcp)」を参照してください。
  • MCP サーバーの使用: MCP と GitHub Copilot の統合に関するその他のアイデアについては、the GitHub Blog で GitHub Copilot と MCP を使用してワークフローを変換する方法5 を参照してください。