Supercharge VS Code with MCP Servers: A 5-Minute Guide |

In this article, we're going to explore how to add a Model Context Protocol (MCP) server inside of VS Code to dramatically enhance its capabilities.

What is an MCP Server?

First off, what is an MCP server, and why would you want to add one to VS Code? MCP, which stands for Model Context Protocol, defines a standardized way for AI agents to use tools. Think of tools as specific actions like performing a web search, sending an email, or, as we'll see in our demo, accessing Azure artifacts. These are all functionalities you can define via MCP and provide to your AI agents.

By setting up an MCP server, we can grant our GitHub Copilot agent full access to these tools, greatly increasing its capabilities.

Why Use an MCP Server in VS Code?

The reason is simple: it allows you to integrate powerful components that aren't natively built into GitHub Copilot directly within your local development environment.

MCP servers can take various forms: - A simple HTTP call (e.g., an MCP server exposed via Azure Functions). - An NPX or a pip package. - A Docker container.

Whichever type you choose, you must ensure you have the necessary prerequisite components installed on your workstation. For example, you need Node.js installed to use an NPX package. While this article will focus on using the Azure MCP server in VS Code, the approach is completely generic. You can follow the same steps to install any MCP server.

To explore the hundreds of pre-built MCP servers available, the official GitHub repository is an excellent place to start. It provides easy ways to integrate various MCP servers into your local VS Code environment.

With that said, let's dive into the details and see how easy it is to set up an MCP server in VS Code.

Step-by-Step: Adding an MCP Server in VS Code

Here’s a look at how to add an MCP server within a standard VS Code installation.

1. Prerequisites and Initial Setup

First, ensure you have the latest edition of VS Code. - Navigate to Help > About. - Verify the version is higher than 1.99. This ensures you have the correct agent mode and MCP server support.

Next, check your extensions. - In the Extensions view, make sure you have GitHub Copilot installed. For this demonstration, the GitHub Copilot for Azure extension is also installed, which may slightly alter some results.

Finally, enable MCP server settings. - Go to Settings and search for mcp. - Ensure the "Enable MCP Servers" checkbox is checked. This should be enabled by default in recent versions of VS Code.

2. Viewing and Managing Installed Servers

You can edit, modify, and view installed MCP servers in your settings.json file. - Open settings.json to see the configurations. By default, a Python-related time server might be present.

You can also list servers using the command palette: 1. Press Ctrl+Shift+P. 2. Type and select "MCP Servers: List Servers". This will show all currently installed servers.

From this view, you can click "Add Server" to install a new one, choosing from options like HTTP, NPM, pip, or Docker. Remember, prerequisites are necessary; for instance, attempting to start a pip-based server without Python installed will result in an error.

3. Pre-Installation: A Baseline Test

Before installing our new server, let's test GitHub Copilot's default behavior. 1. In the bottom right, toggle the Agent Mode. 2. Click the Tools icon. This lists all available tools/MCP servers. Initially, this will show tools corresponding to the installed Azure extension. 3. In the chat, ask a question:

list all my azure storage accounts

Copilot will likely generate a CLI command for you to run. You can expand the "run" details to see the exact command and click Continue to execute it. This generates a command you can use to list your storage accounts.

4. Installing the Azure MCP Server

Now, let's install the open-source Azure MCP server to see how the experience changes. We'll navigate to its official open-source GitHub repository, which outlines its capabilities, including support for Storage Accounts, Cosmos DB, and more.

Note: This server is in public preview, so features may change over time.

The repository provides pre-built buttons for easy installation in VS Code. 1. Click the "Install Azure MCP Server" button on the repository page. 2. This will open VS Code and prompt you to "Install Server". 3. The necessary configuration will be automatically added to your settings.json file.

To activate it, you can either click Start directly from the notification or use the command palette (Ctrl+Shift+P -> "MCP Servers: List Servers"), select the new server, and click "Start Server".

This starts a local process that communicates with Azure components in the cloud, acting as a facilitator.

5. Post-Installation: Enhanced Capabilities

With the server installed, let's see the new results. - Start a new chat. Notice the Tools icon now shows a higher count (e.g., 51), indicating the new tools from the Azure MCP server are available.

Let's ask the same question again:

list all the storage accounts in azure

This time, instead of presenting a command to execute, Copilot responds differently. It recognizes it can use a tool to get the answer directly. - It will suggest running a tool like amcp-storage-account-list. - You can expand the details to see the exact command and click Continue.

The server will now query your Azure subscription.

A Note on Dynamic Behavior: During the process, the agent might encounter an issue, such as not knowing the default subscription. This highlights the dynamic nature of working with AI copilots. If prompted, you can set your default subscription. For example:

The agent asks to set the default subscription.
Confirm by selecting "Yes".
Use the subscription picker to set the correct one.
The agent will then ask to run the command again.

After running the command successfully, it will return the results directly. For instance, it might list the storage accounts it found:

Found 1 storage account:
- yourstorageaccountname

We can go further and ask it to list containers. The results provided by the Azure MCP server are far more detailed than the default GitHub Copilot responses, providing specific information about the container and its components.

Exploring Other MCP Servers

With this process, you can add more tooling to GitHub Copilot inside VS Code. Some other popular MCP servers include: - File System: For accessing the local file system. - Context 7: Provides up-to-date documentation, which is useful when working with new technologies like the Azure MCP server. - Brave Search: Adds enhanced search capabilities to your agents.

You can find numerous reference servers and third-party tools in the official GitHub MCP repository. The installation process is identical to what we followed here.

Final Thoughts

Working with AI agents like GitHub Copilot and MCP servers can be a powerful but sometimes unpredictable experience. The outcome may not be identical every time, as the agent might follow a different code path or require clarification. This is part of the learning curve. As the agent learns your environment (like your default subscription), its behavior will become more consistent.

Keep in mind that optimizing your workflow with these tools might take a few iterations and a bit of learning on your part.