Exercise: Integrate MCP with Copilot

[github-actions]

Integrate MCP with Copilot

👋 Hey there @shawj1-bot! Welcome to your Skills exercise!

This exercise will help you learn how to expand GitHub Copilot's capabilities with Model Context Protocol (MCP).

---

✨ This is an interactive, hands-on GitHub Skills exercise!

As you complete each step, I’ll leave updates in the comments:

• ✅ Check your work and guide you forward
• 💡 Share helpful tips and resources
• 🚀 Celebrate your progress and completion

Let’s get started - good luck and have fun!

_{— Mona}

[github-actions]

Step 1: Introduction to MCP and environment setup

In the Getting Started with GitHub Copilot exercise, we were introduced to the Mergington High School's extracurricular activities website, which allowed students to sign up for events.

And now we have a problem... but.. it's a good one! More teachers are asking to use it! 🎉

Our fellow teachers have lots of ideas but we can't seem to keep up with all the requests! 😮 To fix this issue, lets give GitHub Copilot an upgrade by enabling Model Context Protocol (MCP). To be more specific, we will add the GitHub MCP server, which will enable a combined workflow of issue management and website upgrades. 🧑‍🚀

Let's get started!

What is Model Context Protocol (MCP)?

Model Context Protocol (MCP) is often referred to as "USB-C for AI" - a universal connector that allows GitHub Copilot (and other AI tools) to seamlessly interact with other services.

Essentially, it is a way to describe the capabilities and requirements of a service, so AI tools can easily determine what methods to use and to accurately provide the parameters. An MCP server is providing that interface.

graph LR
    A[Developer] -->|Uses| B[GitHub Copilot]
    B -->|Unified API| MCP[Model Context Protocol]

    MCP <-->|Unique API| C[(GitHub)]
    MCP <-->|Unique API| D[(Slack)]
    MCP <-->|Unique API| E[(Figma)]

    style B fill:#4CAF50,stroke:#333,stroke-width:2px

    subgraph "Less Context Switching, More Coding"
        B
        MCP
        C
        D
        E

    end

Loading

⌨️ Activity: Get to know your environment

Before we dive into MCP, let's start up our development environment and refamiliarize ourself with the extracurricular activity application.

1. Right-click the below button to open the Create Codespace page in a new tab. Use the default configuration.

   

2. Validate the Copilot Chat and Python extensions are installed and enabled.

   
   
   

3. Verify our application runs before modification. In the left sidebar, select the Run and Debug tab and then press the Start Debugging icon.

   📸 Show screenshot

   
   
   🤷 Having trouble?

   
   

   If the Run and Debug area is empty, try reloading VS Code: Open the command palette (Ctrl+Shift+P) and search for Developer: Reload Window.

   

4. Use the Ports tab to find the webpage address, open it, and verify it is running.

   📸 Show screenshot

   
   

   

⌨️ Activity: Add the GitHub MCP server

1. Inside your codespace, open the Copilot Chat panel and verify Agent mode is selected.

   
   Agent mode missing?

   
   

   • Verify VS Code is at least v1.99.0.

   • Verify the Copilot extension is at least v1.296.0.

   • Check if Agent mode is enabled in your user or workspace settings.

     

2. Inside your codespace, navigate to the .vscode folder, and create a new file named mcp.json. Paste the following contents:

   📄 .vscode/mcp.json

   {
     "servers": {
       "github": {
         "type": "http",
         "url": "https://api.githubcopilot.com/mcp/"
       }
     }
   }

3. In the .vscode/mcp.json file, click the Start button and accept the prompt to authenticate with GitHub. This has just informed GitHub Copilot of the MCP server's capabilities.

   

   
   

   

4. In the Copilot side panel, click the 🛠️ icon to show the additional capabilities.

   

5. Commit and push the .vscode/mcp.json file to the main branch.

   🪧 Note: Pushing directly to main is not a recommended practice. It is only to simplify this exercise.

6. Now that your MCP server configuration is pushed to GitHub, Mona should already be busy checking your work. Give her a moment and keep watch in the comments. You will see her respond with progress info and the next lesson.

Note

The next steps will involve creating GitHub issues. If you would like to avoid notification emails, you can unwatch the repository.

Having trouble?

Make sure:

• Your .vscode/mcp.json file is similar to the example provided.
• You pushed the changes to the main branch.

[github-actions]

🎉🎉🎉 Nice work! Everything is perfect! 🎉🎉🎉
Preparing content for step 2! One moment... 🤓

[github-actions]

Step 2: Agent Mode and an MCP Server for GitHub

Great work! You just connected your first MCP server to GitHub Copilot! 🎉

🚨 It seems the teachers keep submitting bugs and requests! So many good ideas! We should probably look into them and start researching for other upgrades.

Fortunately, with an MCP server for GitHub, triaging these and even doing some research to get ahead should be pretty quick! 🕵️

How do we use an MCP server's tools?

Good news! The same way you would normally interact with Copilot, natural language. Just keep in mind the available capabilities and any permission restrictions from your token.

So, with the MCP Server available, we can now ask Copilot things beyond just our code. Here are some ideas to imagine the possibilities:

For example:

• Searching issues considering description, comments, and likes.
• To open, update, or close issues on another repository.
• Comparing repositories.
• Learning about other authors you are working with.
• Retrieve an issue, make changes on a branch, and start a pull request.

Isn't that cool?! Now let's do it! 👩‍🚀

⌨️ Activity: Quickly find and save ideas

1. Close any open files inside your codespace. This will help reduce unnecessary context.

2. Ensure the Copilot Chat panel is open and Agent mode is selected. Verify the MCP server tools are also still available.

3. Ask Copilot to search GitHub for projects similar to this one.

   

   Search for any other repositories for organizing extra curricular activities
   

4. When an MCP tool is required, Copilot will ask for permission. Verify the request and modify if necessary, then click Continue.

   

5. Ask Copilot to describe one of the projects. Explore until you find something you like.

   

   Please look at the code for the 3rd option and give me a detailed description of the features.
   

6. Use Copilot to compare and generate ideas for enhancements.

   

   Please compare these features to our project. Which would be new?
   

7. Nice! Let's have Copilot create issues to save these ideas.

   

   I like it. Let's create issues for these in my repository.
   

8. Copilot will ask for permission to create issues on your repository. Click Continue for each new issue. Reminder: verify the request before running.

   

9. Since we are done researching, let's finish this chat session to clear the context. At the top of the Copilot Chat panel, click the New Chat icon (plus sign).

10. With the new issues created, Mona should already be busy checking your work. Give her a moment and keep watch in the comments. You will see her respond with progress info and the next lesson.

Note

The Model Context Protocol (MCP) landscape is quickly evolving. Many servers, including the Official GitHub MCP server are in active development and do not have full parity with their stable APIs.

[github-actions]

🎉🎉🎉 Nice work! Everything is perfect! 🎉🎉🎉
Preparing content for step 3! One moment... 🤓

[github-actions]

Step 3: Solve issues with Agent Mode and GitHub MCP Server

Great work doing that research and finding a potential collaboration opportunity.
Not only did we find some new ideas to help organize extracurricular activities, but we did all that quickly too.

Plenty of time to focus on the fun stuff, like teaching our awesome students! 🌱

On that note, it seems the teachers have also been active.
Looks like they submitted some bugs and requests! Perfect! 🚀

Now, let's use our MCP server's tools and Copilot to do a bit of triage and get some work done.

⌨️ Activity: Easily implement an important issue

1. Ensure the Copilot Chat panel is open and Agent mode is selected. Verify the MCP server tools are also still available.

2. Ask Copilot about the open issues on this repository.

   

   How many open issues are there on my repository?
   

   🪧 Note: Check that the List Issues tool is called with proper parameters.

3. Ask Copilot to summarize the important issues.

   

   Oh no. That's too many for me! Please get the list of issues,
   review the descriptions and comments, and pick the top 3 most important.
   

   💡 Tip: Pre-authorize tool usage

   
   

   If Copilot uses a tool often, you can proactively grant permission for the rest of the conversation session.

   

4. Review the suggested issues. If Copilot didn't give a specific recommendation, try providing some feedback to narrow the results.

5. With the list narrowed, ask Copilot to implement an issue. Mona won't grade if the changes work, just that an attempt was made.

   

   #codebase Let's do the first one. Follow these steps:
   1. Checkout a new local branch for making our changes.
   2. Make the changes then confirm with me that they look correct.
   3. Push the changes and start a pull request.
   

   ⚠️ Warning: Always verify the the actions Copilot is asking to perform, especially with the external abilities provided by an MCP server, which probably have no undo option.

6. Once the pull request is created, Mona will start checking your work. Give her a moment and keep watch of the comments. You will see her respond with progress info and the next step!

Having trouble?

• If tools are not being requested, verify your MCP configuration is correct.
• If Copilot cannot retrieve results, verify you are using this Codespace's token or a Personal Access Token (PAT) with appropriate permissions. By default, the codespace token we are using only has access to this repository.

[github-actions]

Please, follow the steps above.
I'll watch your progress in the background to provide feedback. 🧐