|
| 1 | +--- |
| 2 | +title: Enhancing Copilot agent mode with MCP |
| 3 | +allowTitleToDifferFromFilename: true |
| 4 | +shortTitle: Enhance agent mode with MCP |
| 5 | +intro: "Learn how to use the Model Context Protocol (MCP) to expand {% data variables.copilot.copilot_chat_short %}''s agentic capabilities." |
| 6 | +versions: |
| 7 | + feature: copilot |
| 8 | +topics: |
| 9 | + - Copilot |
| 10 | +type: how_to |
| 11 | +--- |
| 12 | + |
| 13 | +>[!NOTE] |
| 14 | +> * MCP support is currently in {% data variables.release-phases.public_preview %} and subject to change. |
| 15 | +> * MCP support is available in {% data variables.copilot.copilot_chat_short %} for {% data variables.product.prodname_vscode %}, {% data variables.product.prodname_vs %}, JetBrains, Eclipse, and Xcode. |
| 16 | +> * The [AUTOTITLE](/free-pro-team@latest/site-policy/github-terms/github-pre-release-license-terms) apply to your use of this product. |
| 17 | +
|
| 18 | +## About {% data variables.product.prodname_copilot_short %}'s agentic capabilities and MCP |
| 19 | + |
| 20 | +{% data variables.product.prodname_copilot_short %}'s agentic capabilities refer to the ability to **work independently** by executing multi-step workflows without constant guidance, **make decisions** by choosing appropriate tools and approaches based on context, and **iterate and adapt** by adjusting its approach according to feedback and results. You can access these capabilities by using agent mode. |
| 21 | + |
| 22 | +When combined with Model Context Protocol (MCP) servers, agent mode becomes significantly more powerful, giving {% data variables.product.prodname_copilot_short %} access to external resources without switching context. This enables {% data variables.product.prodname_copilot_short %} to complete agentic "loops", where it can dynamically adapt its approach by autonomously finding relevant information, analyzing feedback, and making informed decisions. With MCP, {% data variables.product.prodname_copilot_short %} can complete a task with minimal human intervention, continuously adjusting its strategy based on what it discovers. |
| 23 | + |
| 24 | +### Benefits of combining MCP with agent mode |
| 25 | + |
| 26 | +When you use MCP servers with agent mode, you unlock several key benefits: |
| 27 | + |
| 28 | +* **Extended context**: MCP servers provide {% data variables.product.prodname_copilot_short %} with access to external data sources, APIs, and tools. |
| 29 | +* **Reduced manual effort**: {% data variables.product.prodname_copilot_short %} can perform tasks like creating issues and running workflows while you focus on higher-value tasks. |
| 30 | +* **Seamless integration**: {% data variables.product.prodname_copilot_short %} can work on a task involving multiple tools and platforms without switching contexts or requiring custom integrations. |
| 31 | + |
| 32 | +## Best practices for using MCP with agent mode |
| 33 | + |
| 34 | +Follow these best practices to get the most out of combining MCP servers with agent mode. |
| 35 | + |
| 36 | +### Prompting strategies |
| 37 | + |
| 38 | +* **Be specific about goals**: Clearly define what you want to accomplish in your prompt and what output you want. |
| 39 | +* **Provide context**: Include relevant background information about your project and requirements, including links to external resources that {% data variables.product.prodname_copilot_short %} can access. |
| 40 | +* **Set boundaries**: Specify any constraints or limitations for the task. For example, if you want {% data variables.product.prodname_copilot_short %} to only plan a new feature and not make any changes yet, specify that. You can also limit which MCP tools are enabled. |
| 41 | +* **Request confirmations**: Ask {% data variables.product.prodname_copilot_short %} to confirm its understanding before proceeding with significant changes. |
| 42 | +* **Use prompt files or custom instructions**: You can create prompt files or custom instructions files to guide {% data variables.product.prodname_copilot_short %} on how to behave for different MCP servers. See [AUTOTITLE](/copilot/customizing-copilot/about-customizing-github-copilot-chat-responses). |
| 43 | + |
| 44 | +### MCP server use |
| 45 | + |
| 46 | +* **Choose relevant servers**: Select and enable MCP servers that align with your specific workflow needs. |
| 47 | +* **Start simple**: Begin with a few well-established MCP servers before adding more complex integrations. |
| 48 | +* **Test connectivity**: Ensure all MCP servers are properly configured and accessible before starting agent mode tasks. |
| 49 | + |
| 50 | +### Security considerations |
| 51 | + |
| 52 | +* **Use OAuth when available**: For MCP servers like {% data variables.product.prodname_dotcom %} MCP, prefer OAuth authentication over {% data variables.product.pat_generic_plural %}. See [AUTOTITLE](/copilot/customizing-copilot/using-model-context-protocol/using-the-github-mcp-server#remote-mcp-server-configuration-with-oauth). |
| 53 | +* **Limit permissions**: Only grant MCP servers the minimum permissions necessary for your tasks. |
| 54 | +* **Review connections**: Regularly audit which MCP servers have access to your development environment. |
| 55 | +* **Monitor activity**: Keep track of what actions {% data variables.product.prodname_copilot_short %} performs through MCP servers. |
| 56 | + |
| 57 | +## Example scenario: Implementing accessibility compliance |
| 58 | + |
| 59 | +> [!NOTE] The following scenario is only meant to demonstrate the patterns and strategies you can use with agent mode and MCP servers to complete a task from start to finish; the scenario, prompts and responses are just examples. |
| 60 | +
|
| 61 | +Let's say your team has received feedback that your customer portal needs to be updated to comply with the latest accessibility standards. You've been tasked with improving accessibility across the application with the following guidance: |
| 62 | + |
| 63 | +* A list of specifications defined by the design team. |
| 64 | +* Issues created in your project's repository after an accessibility audit. |
| 65 | + |
| 66 | +You can use {% data variables.product.prodname_copilot_short %} agent mode to leverage multiple MCP servers to efficiently implement accessibility improvements. |
| 67 | + |
| 68 | +The scenario below demonstrates how you can use separate prompts for different phases (research, planning, implementation, and validation), resulting in multiple agentic "loops" loosely aligned with software development lifecycle phases. This approach creates natural checkpoints where you can review progress, provide feedback, and adjust your requirements before {% data variables.product.prodname_copilot_short %} continues to the next phase. |
| 69 | + |
| 70 | +* [Prerequisites](#prerequisites) |
| 71 | +* [Setting up MCP servers](#setting-up-mcp-servers) |
| 72 | +* [Step 1: Research loop - Analyzing accessibility requirements](#step-1-research-loop---analyzing-accessibility-requirements) |
| 73 | +* [Step 2: Planning loop - Accessibility implementation strategy](#step-2-planning-loop---accessibility-implementation-strategy) |
| 74 | +* [Step 3: Implementation loop - Making accessibility improvements](#step-3-implementation-loop---making-accessibility-improvements) |
| 75 | +* [Step 4: Testing loop - Accessibility verification with Playwright](#step-4-testing-loop---accessibility-verification-with-playwright) |
| 76 | +* [Step 5: Updating {% data variables.product.github %} issues](#step-5-updating-github-issues) |
| 77 | +* [Further reading](#further-reading) |
| 78 | + |
| 79 | +### Prerequisites |
| 80 | + |
| 81 | +Before using agent mode with MCP, ensure you have: |
| 82 | + |
| 83 | +* An IDE with {% data variables.product.prodname_copilot_short %} integration and MCP support (such as {% data variables.product.prodname_vscode %}) |
| 84 | +* Agent mode enabled |
| 85 | +* Access to the required MCP servers you want to use |
| 86 | + |
| 87 | +### Setting up MCP servers |
| 88 | + |
| 89 | +First, you need to configure the MCP servers that you anticipate {% data variables.product.prodname_copilot_short %} will need. For this example scenario, we'll use: |
| 90 | + |
| 91 | +* **{% data variables.product.github %} MCP server**: Configure the {% data variables.product.github %} MCP server to enable {% data variables.product.prodname_copilot_short %} to access your repository, examine your codebase, research existing issues, create branches, and manage pull requests. See [AUTOTITLE](/copilot/customizing-copilot/using-model-context-protocol/using-the-github-mcp-server). |
| 92 | + |
| 93 | +* **Figma MCP server**: Configure the Figma MCP server to allow {% data variables.product.prodname_copilot_short %} to access design files that include accessibility specifications, such as color contrast requirements, focus states, and interaction patterns. See [Figma-Context-MCP](https://github.com/GLips/Figma-Context-MCP) or try out the [Dev Mode MCP server](https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Dev-Mode-MCP-Server) in open beta. |
| 94 | + |
| 95 | +* **Playwright MCP server**: Set up the Playwright MCP server to enable {% data variables.product.prodname_copilot_short %} to write and run automated accessibility tests, including screen reader compatibility and keyboard navigation tests. See [mcp-playwright](https://github.com/executeautomation/mcp-playwright). |
| 96 | + |
| 97 | +### Step 1: Research loop - Analyzing accessibility requirements |
| 98 | + |
| 99 | +Prompt {% data variables.product.prodname_copilot_short %} to analyze both accessibility requirements and existing accessibility-related {% data variables.product.github %} issues in the project. |
| 100 | + |
| 101 | +In your prompt, include a link to the Figma file. In order for Copilot to successfully read and analyze the design specifications, select a specific node or layer in the file, so that the node ID is included in the URL. |
| 102 | + |
| 103 | +**Example 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.` |
| 104 | + |
| 105 | +**Example response from {% data variables.product.prodname_copilot_short %}:** |
| 106 | + |
| 107 | +{% data variables.product.prodname_copilot_short %} should respond first by requesting to run tools from the Figma and GitHub MCP servers. Once you allow it, {% data variables.product.prodname_copilot_short %} will analyze the Figma design specifications and search for and organize GitHub issues into categories. |
| 108 | + |
| 109 | +For example, {% data variables.product.prodname_copilot_short %} may identify color contrast as a category based on finding multiple issues about it. |
| 110 | + |
| 111 | +> * Color Contrast Issues |
| 112 | +> * Issue #134: Dashboard text contrast ratio below 4.5:1 |
| 113 | +> * Issue #156: Form error states don't meet contrast requirements |
| 114 | +
|
| 115 | +This gives you a comprehensive overview of accessibility requirements that you can then have {% data variables.product.prodname_copilot_short %} prioritize and create a plan for. |
| 116 | + |
| 117 | +### Step 2: Planning loop - Accessibility implementation strategy |
| 118 | + |
| 119 | +Next, ask {% data variables.product.prodname_copilot_short %} to create a detailed implementation plan. |
| 120 | + |
| 121 | +**Example 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.` |
| 122 | + |
| 123 | +**Example response from {% data variables.product.prodname_copilot_short %}:** |
| 124 | + |
| 125 | +{% data variables.product.prodname_copilot_short %} will respond by creating a prioritized implementation plan focused on high-impact accessibility issues for an immediate pull request while suggesting follow-up issues for remaining work. |
| 126 | + |
| 127 | +For example, {% data variables.product.prodname_copilot_short %} may identify what needs to be done to fix the issues in the color contrast category. |
| 128 | + |
| 129 | +> * **1. Color Contrast Fixes:** |
| 130 | +> * Update text color variables in variables.scss to ensure 4.5:1 contrast ratio for all normal text |
| 131 | +> * Modify UI component colors in DashboardCard.vue and other primary components to meet 3:1 contrast ratio |
| 132 | +> * Prioritize fixing Issue #134 (Dashboard text contrast) and Issue #156 (Form error states) |
| 133 | +
|
| 134 | +You can ask {% data variables.product.prodname_copilot_short %} to adjust the plan based on what you want to focus on. The outcome is a plan you are comfortable with that you can now ask {% data variables.product.prodname_copilot_short %} to implement. |
| 135 | + |
| 136 | +### Step 3: Implementation loop - Making accessibility improvements |
| 137 | + |
| 138 | +After reviewing the plan, prompt {% data variables.product.prodname_copilot_short %} to begin implementing accessibility fixes. |
| 139 | + |
| 140 | +**Example 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.` |
| 141 | + |
| 142 | +**Example response from {% data variables.product.prodname_copilot_short %}:** |
| 143 | + |
| 144 | +{% data variables.product.prodname_copilot_short %} will respond by executing the implementation plan, making targeted code changes to address the identified accessibility issues and creating a pull request. |
| 145 | + |
| 146 | +For example, {% data variables.product.prodname_copilot_short %} may create a new branch called `fix/critical-accessibility-issues` and make changes to address the color contrast issues. |
| 147 | + |
| 148 | +> * Fixed dashboard text contrast issues (Issue #134): |
| 149 | +> * Updated text color variables in `src/styles/variables.scss` from #767676 to #595959 |
| 150 | +> * Modified dark text on light gray backgrounds in `DashboardCard.vue` to ensure 4.5:1 ratio |
| 151 | +> |
| 152 | +>I've opened pull request #213 with these changes. |
| 153 | +
|
| 154 | +### Step 4: Testing loop - Accessibility verification with Playwright |
| 155 | + |
| 156 | +You can prompt {% data variables.product.prodname_copilot_short %} to create and run accessibility tests using the Playwright MCP. |
| 157 | + |
| 158 | +**Example prompt**: `Create focused accessibility tests for the components we've updated in the pull request. Use the Playwright MCP.` |
| 159 | + |
| 160 | +**Example response from {% data variables.product.prodname_copilot_short %}:** |
| 161 | + |
| 162 | +{% data variables.product.prodname_copilot_short %} will respond by developing accessibility tests and, if necessary, creating a Playwright configuration file. |
| 163 | + |
| 164 | +For example, {% data variables.product.prodname_copilot_short %} may create a test file around text contrast. |
| 165 | + |
| 166 | +> **Test implementation:** |
| 167 | +> |
| 168 | +> * Created a targeted test file in `tests/accessibility/`: |
| 169 | +> * `contrast.spec.ts` - Validates text contrast ratios |
| 170 | +
|
| 171 | +Once the tests are created, {% data variables.product.prodname_copilot_short %} will ask for permission to use various tools from the Playwright MCP to run the tests. Note that sometimes Copilot may do additional testing that you didn't necessarily ask for; you can try to prevent this by adjusting your prompt to be stricter. |
| 172 | + |
| 173 | +### Step 5: Updating {% data variables.product.github %} issues |
| 174 | + |
| 175 | +Finally, prompt {% data variables.product.prodname_copilot_short %} to update the {% data variables.product.github %} issues that have been addressed in the pull request, and create follow-up issues. |
| 176 | + |
| 177 | +**Example 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.` |
| 178 | + |
| 179 | +**Example response from {% data variables.product.prodname_copilot_short %}:** |
| 180 | + |
| 181 | +{% data variables.product.prodname_copilot_short %} will respond by asking for permission to use the necessary tools from the {% data variables.product.github %} MCP server. It will then update the {% data variables.product.github %} issues with detailed comments and create structured follow-up issues for remaining work. |
| 182 | + |
| 183 | +For example, {% data variables.product.prodname_copilot_short %} will add comments in the color contrast issues initially identified in the research step. |
| 184 | + |
| 185 | +> **Updated issues with comments:** |
| 186 | +> |
| 187 | +> * Issue #134: "Dashboard text contrast ratio below 4.5:1" |
| 188 | +> * Comment: "Fixed in PR #213 by updating text color variables in variables.scss and DashboardCard component. All dashboard text now meets 4.5:1 contrast ratio, verified by automated tests." |
| 189 | +
|
| 190 | +Now you can review the pull request and make any adjustments. Once you have verified that the changes are valid, you can merge as with any other pull request. |
| 191 | + |
| 192 | +## Further reading |
| 193 | + |
| 194 | +* **Hands-on practice**: Try the [Integrate MCP with Copilot](https://github.com/skills/integrate-mcp-with-copilot/) Skills course for practical experience with MCP and agent mode. |
| 195 | +* **MCP fundamentals**: For more information about setting up and configuring MCP servers, see [AUTOTITLE](/copilot/customizing-copilot/using-model-context-protocol/extending-copilot-chat-with-mcp). |
0 commit comments