Unlocking AI Development with Model Context Protocol (MCP)

Model Context Protocol, or MCP, is a topic gaining significant traction these days. You might be wondering what these MCP servers are, why they matter, how they can help you develop better and faster, and how to configure tools like Visual Studio Code to use them. This article will break down what MCPs are at a high level, why you might want to use them, and how to set up Visual Studio Code to use them with GitHub Copilot.

What is Model Context Protocol (MCP)?

At a very high level, think of it like this: there are numerous different services like your computer's file system, OneDrive, Google Drive, Figma, and GitHub. They all have different APIs for performing various commands, such as getting files, managing pull requests, or creating issues. If you have an AI agent or an LLM, how do you enable it to communicate with all of them?

You do that through a standardization or a protocol—a Model Context Protocol. The goal is to have LLM models call into different services or other agents that can also perform actions. That's what it is: a standardization or a middle layer between the APIs of services like GitHub or OneDrive and the models that talk to them, such as GitHub Copilot agents. This allows them to execute additional commands.

These MCPs also have servers that run on your machine (or a remote machine) that agents can talk to. For example, within GitHub Copilot, you would be talking to different MCP servers configured to your preferences. You configure the servers you use, essentially adding more tools to your development toolbox.

For instance, while you can already create and manage pull requests in VS Code through extensions, you might want an agent to perform actions for you, like creating multiple issues in real-time, providing additional information, pulling data from a different service, or attaching a file. This is what MCP servers enable. Let's explore how to get this set up inside Visual Studio Code.

Getting Started with MCP in VS Code

The place to start is the Model Context Protocol GitHub organization. This repository provides everything you need, including documentation, specifications, discussions, and SDK access. While you can create your own servers, there's also a list of maintained servers available.

As you explore the repository, you'll find a collection of reference servers. Some are developer-focused, while others are more general, as they can be used in any LLM tool.

Examples of available servers include: - File System - GitHub - Google Drive - Google Maps - Puppeteer - Redis - Sentry - Slack

There are also official third-party integrations and a growing list of community servers for platforms like Airbnb, Airtable, Airflow, AWS, Azure, BigQuery, and even the Ghost CMS.

A Practical Example: The Time Server

Let's walk through setting one up in VS Code. In this example, we're working on a coffee tracker application built with GitHub Copilot.

First, open the GitHub Copilot Chat panel. In the latest Visual Studio Code Insiders builds, you'll see different modes like Ask, Edit, and Agent. In Agent mode, a "tools" button appears, showing the tools available to GitHub Copilot chat. By default, these are built-in tools for interacting with the VS Code API, terminal, and more. MCP servers will also appear here.

To add a server, go to Settings and search for MCP. If you have MCP servers running elsewhere, you can enable Auto Discovery. Otherwise, you can edit the settings.json file directly to define your servers.

Clicking "Edit in settings.json" might automatically add a simple example, like the time server:

{
  "mcp.servers": [
    {
      "name": "time",
      "command": "python",
      "args": ["-m", "mcp.server.time"]
    }
  ]
}

This configuration tells VS Code to run a Python command to start the server. If you don't have Python installed, this will fail. Fortunately, many MCP servers are available as Docker containers.

Let's switch to the Docker version. Find the time server in the official list and copy the Docker command. Replace the previous configuration in your settings.json:

{
  "mcp.servers": [
    {
        "name": "time",
        "command": "docker",
        "args": [
            "run",
            "--rm",
            "-p",
            "8080:8080",
            "ghcr.io/model-context-protocol/time:latest"
        ]
    }
  ]
}

After saving the file, a notification will appear in the status bar indicating a new tool is available. You can start the server from there. Once running, the time server and its capabilities (like getting the current time or converting time zones) are available to the Copilot agent.

Now you can ask questions like: - "What is the current time?" - "What is that in Pacific Time Zone?" - "What time is it in Australia?"

Copilot will identify that the time tool can answer these questions and prompt you for permission to run it. This is a simple but effective demonstration of how an agent can leverage an external tool.

Integrating a More Powerful Tool: The GitHub MCP Server

Let's add a more substantial tool: the GitHub MCP server. This server offers a wide range of capabilities: - Create or update files - Push files to a repository - Search repositories - Create repositories - Get file contents - Create and list issues - Create pull requests - Create branches

It's available as a Docker container or a simple Node application. Since Node is installed on this machine, we can add it to our settings.json:

{
    "name": "github",
    "command": "npx",
    "args": [
        "--yes",
        "mcp-server-github"
    ],
    "env": {
        "GITHUB_TOKEN": "YOUR_PERSONAL_ACCESS_TOKEN"
    }
}

Note: You need to provide a GitHub Personal Access Token (PAT) with the appropriate scopes (e.g., for creating issues and pull requests). For security, it's a best practice to use input variables or launch configurations rather than pasting the token directly into your settings file.

With the server configured and running, you can now ask the agent to perform GitHub-related tasks. For example, you could ask: "Are there any issues open in the dotnet/maui repo about camera pickers?"

The agent will use the searchIssues tool from the GitHub MCP server, retrieve the information, and summarize it for you.

You can also interact with your own repositories. For instance: "Are there any pull requests open on my AppCoffeeTracker repo?"

The agent will use the listPullRequests tool, providing the owner and repo name, and summarize the open PRs. While you could find this information manually, the power lies in the conversational interface and the agent's ability to synthesize information. You can continue the conversation: "On this PR, what are the files changed?" The agent can then retrieve and summarize the file modifications.

From Idea to Implementation with MCP

The real power emerges when you combine these tools to move from idea to code.

Imagine you want to add a new feature. You can instruct the agent:

"Let's create a new issue for a new feature to have a camera option in the app. The feature should allow taking a photo of a bag of coffee to identify the roaster. Create the issue and add details about how I would do this in a .NET MAUI app."

Here, the agent uses its own knowledge to generate the implementation details and then uses the createIssue tool from the GitHub MCP server to create the issue in your repository. It will then confirm the action and provide a link to the new issue.

You can even ask it to update the issue with more details, such as a table of files that need to be changed. The agent maintains context, understands the code in your workspace, and can generate a detailed plan.

Finally, you can simply say:

"Let's implement this feature from the issue we created."

The agent will then switch into implementation mode and begin working on the code, using all the context it has gathered.

Advanced Server Management

Manually starting servers from the settings.json file isn't always practical. You can use the command palette (Ctrl+Shift+P or Cmd+Shift+P) and type MCP to see available commands: - MCP: List Servers: View your configured servers, start or stop them, and see their output. - MCP: Add Server: Add a new server from a Docker image, Pip package, or NPM package through a guided flow.

Building Your Own MCP Servers

If you have a service or tool you'd like to integrate, you can build your own MCP server. The official GitHub organization provides SDKs to help you get started. Recently, the .NET team released an official C# SDK for creating both servers and clients, allowing you to extend your AI agents with custom tools built in .NET.

Conclusion

This has been a quick introduction to Model Context Protocol. At a minimum, setting up the GitHub server is a great use case that can immediately enhance your workflow. As you explore the numerous other available servers, you'll find that they can work together to perform complex actions, turning your development environment into a more intelligent and productive space.

Give it a try by installing Visual Studio Code Insiders and setting up a few servers. The journey of integrating these new agent modes is exciting and is already helping developers become more productive every day.