GitHub Copilot Agent Mode & MCP Server: A Developer's Guide

GitHub Copilot is revolutionizing how developers code, and the introduction of Agent Mode with Model Context Protocol (MCP) server support in VS Code is a game-changer. This article provides a comprehensive overview of MCP, its benefits, and a step-by-step guide on how to leverage GitHub Copilot's new capabilities to enhance your development workflow. Discover how MCP servers connect LLM applications with external data sources for a more context-aware and efficient coding experience.

What is Model Context Protocol (MCP)?

Model Context Protocol (MCP) is an open standard that enables seamless integration between Large Language Model (LLM) applications and external data sources.

Think of it as a bridge connecting your AI-powered coding assistant with a wealth of external knowledge, allowing it to understand and assist you better. This is critical for tasks that require context beyond the immediate codebase. MCP allows LLM applications to connect with external servers to gain more information about data sources, knowledge bases, and any application you want to interact with, thus extending the capabilities of tools such as Github COPILOT. The official website is modelcontextprotocol.io. It provides a standardized way to connect LLMs with the context they need.

MCP Architecture and How it Works

MCP architecture generally involves a client, one or more MCP servers, and external data sources.

The client (e.g., GitHub Copilot in VS Code) uses the MCP protocol to communicate with MCP servers. The servers, in turn, interact with various external data sources, such as databases, APIs, or knowledge graphs, to fetch Relevant information. This information is then relayed back to the client, enriching its understanding of the current coding task. The Diagram displayed illustrates this, showcasing a client interacting with several servers to access local and remote data sources. The core idea behind MCP is that the LLM application (like Copilot) becomes more effective when it is aware of the context surrounding the task. By leveraging external data through MCP servers, Copilot can provide more accurate suggestions, identify potential issues, and automate tasks more intelligently.

Existing MCP Servers and Their Capabilities

The power of MCP lies in its extensibility and the growing ecosystem of MCP servers. Many servers are available, connecting to various data sources and applications.

These servers include:

• AWS KB Retrieval: Retrieves information from AWS Knowledge Base.
• Brave Search: Provides web and local search results using Brave's Search API.
• Google Maps: provides location services, directions, and place details.
• PostgreSQL: Connects to PostgreSQL databases with schema inspection.
• Redis: Interacts with Redis key-value stores.
• Sentry: Retrieves and analyzes issues from Sentry.io.
• ClickHouse: Connects to ClickHouse database server.

This list is continuously growing, offering developers a wide range of options to integrate contextual data into their coding workflows. MCP is not restricted to any specific type of application and is focused on giving more context for precise access to schema and data when an application is being built.

Installing and Configuring an MCP Server in VS Code

The following steps will get you setup to run MCP Servers in VS Code with Github Copilot:

1. Install VS Code: Ensure you have VS Code installed on your system.

2. Install the Github Copilot Extension: Add the Github Copilot extension to your VS Code install.

3. Create a .vscode Directory: If one doesn't already exist.

   

   This directory stores workspace-specific settings.

4. Create an mcp.json File: Inside the .vscode directory, create a file named mcp.json. This file will contain the configuration for your MCP servers.

5. Add the Github MCP Configuration: Below is an example of a basic configuration for a GitHub MCP server in a docker instance, you can see this Docker and NPX example configuration below, to be added to the mcp.json file:

{
    "inputs": [
        {
            "type": "promptString",
            "id": "github-key",
            "description": "GitHub PAT"
        }
    ],
    "servers": [
        {
            "github": {
                "command": "docker",
                "args": [
                    "run",
                    "-i",
                    "--rm",
                    "-e",
                    "GITHUB_PERSONAL_ACCESS_TOKEN",
                    "mcp/github"
                ],
                "env": {
                    "GITHUB_PERSONAL_ACCESS_TOKEN": "${input:github-key}"
                }
            }
        }
    ]
}

{
    "inputs": [
        {
            "type": "promptString",
            "id": "github-key",
            "description": "GitHub PAT"
        }
    ],
    "servers": [
        {
            "github": {
                "command": "npx",
                "args": [
                    "@modelcontextprotocol/server-github"
                ],
                "env": {
                    "GITHUB_PERSONAL_ACCESS_TOKEN": "${input:github-key}"
                }
            }
        }
    ]
}

6. Add Your GitHub Personal Access Token (PAT): Note that to enable the server you need to replace `` with a generated token.
7. Update the Tools: Refresh the tools inside VS Code with Github Copilot by clicking reload on the tools button.

Here's an example of the configurations for Claude Desktop as well. This shows MCP is being used by other platforms also.

{
  "mcpServers": {
    "github": {
      "command": "docker",
      "args": [
        "run",
        "-i",
        "--rm",
        "-e",
        "GITHUB_PERSONAL_ACCESS_TOKEN",
        "mcp/github"
      ],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "YOUR_TOKEN"
      }
    }
  }
}

Using GitHub Copilot with MCP Servers: A Practical Example

To see how Copilot interacts with an MCP server, consider creating and managing GitHub issues.

First, without MCP, attempting to create an issue directly via Copilot chat results in a description of the issue within the chat but no actual action taken on the repository. This is where MCP integration shines.

1. Enable Agent Mode: Switch to Agent Mode in Copilot Chat
2. Select Tools: Pick the necessary tool or functionality that will be made available inside the agent's toolset.
3. Prompt Copilot: Enter the Github PAT token when prompted, to connect the tool set to your Github and give it the correct authorization to make changes.
4. Create a new Change Log: Ask Copilot to create a new issue. Copilot, now armed with the necessary tools from the Github MCP server can then read existing release information to create the Changelog.md file.

Key Takeaway: The difference is that Agent Mode with MCP Servers provides the Github Copilot with the tooling and information it needs to actually take actions rather than give a description of what is happening.

Install VS Code and Github Copilot

First, you have to make sure both VS Code and the Github Copilot extension is installed on your system. Follow the instructions on the VS Code marketplace to download and install the Github Copilot extension, and follow instructions from Microsoft about VS Code download and installation.

Create an MCP Configuration File

With VS Code open, create a new file inside the .vscode folder. Call this file mcp.json. This file needs to have the JSON contents added to it in order for Copilot to know how to interface with Github.

As a reminder, the contents of mcp.json are as follows, with `` needing to be replaced:

{
    "inputs": [
        {
            "type": "promptString",
            "id": "github-key",
            "description": "GitHub PAT"
        }
    ],
    "servers": [
        {
            "github": {
                "command": "docker",
                "args": [
                    "run",
                    "-i",
                    "--rm",
                    "-e",
                    "GITHUB_PERSONAL_ACCESS_TOKEN",
                    "mcp/github"
                ],
                "env": {
                    "GITHUB_PERSONAL_ACCESS_TOKEN": "${input:github-key}"
                }
            }
        }
    ]
}

Update The Available Toolsets and Refresh

Ensure that your mcp.json is saved in the .vscode directory. This will enable Copilot to interface with the tools. To refresh, navigate to where you ask Copilot your query, and click the tool symbol.

It will ask you for your Github PAT token, enter that here, then you can refresh and you should see Github toolsets available. You will also want to select that those tools remain available for this workspace for future use.

You're off to the Races!

That's it, you're setup and able to utilize Github Copilot with MCP Github servers to automate things like issue creation, pull requests, branching, and so much more!

Follow along in the video for specific implementation examples.

Understanding GitHub Copilot's Pricing Structure

GitHub Copilot offers different pricing options depending on the user type:

• Individual: $10 per month or $100 per year.
• Business: $19 per user per month.
• Enterprise: Contact sales for custom pricing.

Exploring GitHub Copilot's Main functionalities

GitHub Copilot offers a range of features designed to accelerate and improve the coding process:

• Code Completion: Suggests code snippets and entire functions in real-time.
• Code Generation: Generates code from natural language comments and descriptions.
• Context Awareness: Understands the context of the code being written to provide more relevant suggestions.
• Multiple Language Support: Supports a wide range of programming languages.
• Integration with VS Code: Seamlessly integrates with VS Code and other popular IDEs.
• Automated Code Suggestions: Reduces development times by automating tedious development tasks and offering multiple automated code suggestions at a time.

GitHub Copilot: use Cases

GitHub Copilot serves a multitude of development scenarios:

• Rapid Prototyping: Quickly generate code for prototypes and proof-of-concept projects.
• Automated task Generation: Generate tasks automatically.
• Learning New Languages: Get assistance with unfamiliar programming languages.
• Code Refactoring: Receive suggestions for improving code quality and maintainability.
• Automated bug Fixing: Fixing bugs.
• Automated testing: Create unit tests for new code snippets.