MCP を使用した GitHub Copilot エージェント モードの強化

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

この記事で

メモ

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

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

          Copilotのエージェント機能は、一定のガイダンスなしで複数ステップのワークフローを実行し、コンテキスト **に** 基づいて適切なツールとアプローチを選択して **意思決定を行** い、フィードバックと結果に従ってアプローチを調整して **反復および適応** する機能を指します。 エージェント モードを使用して、これらの機能をaccessできます。

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

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

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

  •         **拡張コンテキスト**: MCP サーバーは、外部データ ソース、API、およびツールへのアクセスを Copilot に提供します。

  •         **手動作業の削減**: 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 アクションを追跡します。

  •         **シークレット リークを防ぐ**: プッシュ保護により、シークレットが 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 サーバーを構成する必要があります。 この例のシナリオでは、以下を使います。

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

  •         **Figma MCP サーバー**: figma MCP サーバーを構成して、色コントラスト要件、フォーカス状態、相互作用パターンなどのアクセシビリティ仕様を含むデザイン ファイルに Copilot がアクセスできるようにします。 
        [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: ループの調査 - アクセシビリティ要件の分析

アクセシビリティ要件と、プロジェクト内の既存のアクセシビリティ関連のCopilotの問題の両方を分析するようにGitHubを求めます。

プロンプトには 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の問題をカテゴリに検索して整理します。

たとえば、 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 は、カラー コントラスト カテゴリの問題を解決するために何を行う必要があるかを特定できます。

          **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 は、実装計画を実行し、特定されたアクセシビリティの問題に対処するためのターゲット コード変更を行い、プル要求を作成することで応答します。

たとえば、Copilotfix/critical-accessibility-issuesという新しいブランチを作成し、色のコントラストの問題に対処するために変更を加える場合があります。

  • ダッシュボードのテキスト コントラストの 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 の問題を更新する

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

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

ハンズオン プラクティス

MCP と GitHub Copilot Skills の統合演習で、MCP と GitHub Copilot の統合を実践します。

この演習では、次の方法を学習します。

  •         GitHub MCP サーバーをセットアップしてGitHub Copilotに接続します。
  • エージェント モードで MCP ツールを使用して外部サービスと対話するには、自然言語を使用します。
  • MCP を使用して同様のプロジェクトを検索して分析します。
  •         GitHubの問題をトリアージ、作成、管理した後、GitHub Copilotを使用して変更を実装します。

参考資料

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