Exercise: Integrate MCP with Copilot

[github-actions]

Integrate MCP with Copilot

👋 Hey there becco! Welcome to your Skills exercise!

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

As you complete each step, I will respond in the comments to:

• check your work and give feedback
• share next steps
• occasionally share tips
• congratulate you when you finish!

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, create a new file named mcp.json in the .vscode directory and paste the following contents:

   📄 .vscode/mcp.json

   {
     "servers": {
       "github": {
         "command": "docker",
         "args": [
           "run",
           "-i",
           "--rm",
           "-e",
           "GITHUB_PERSONAL_ACCESS_TOKEN",
           "ghcr.io/github/github-mcp-server:v0.1.1"
         ],
         "env": {
           "GITHUB_PERSONAL_ACCESS_TOKEN": "${input:github_token}"
         }
       }
     },
     "inputs": [
       {
         "type": "promptString",
         "id": "github_token",
         "description": "GitHub Personal Access Token",
         "password": true
       }
     ]
   }

   🪧 Note: Entering a hard-coded token is never recommended, you should use input variables or envFiles when an MCP server requires credentials.

3. Expand the VS Code terminal panel. Run the following command to view and make a copy of your codespace's GitHub Token.

      echo $GITHUB_TOKEN

   Why do I need this?

   
   

   The MCP server is a separate background process and needs credentials to perform operations. In this case, we use the temporary codespace authorization credential which becomes invalid when the codespace stops.

4. In the .vscode/mcp.json file, click the Start button and provide the token. This has just informed GitHub Copilot of the MCP server's capabilities.

   

   

5. In the Copilot side panel, click the 🛠️ Select Tools... icon to show the additional capabilities.

   

6. 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.

7. 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]

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