How to Set Up Your First MCP Server in VS Code: A 5-Minute Guide

Welcome to another installment in our MCP server series. In this article, we will provide a straightforward guide on how to set up your very first MCP server directly within Visual Studio Code.

If you're unfamiliar with what an MCP server is or the problems it solves, we recommend reading the first article in this series. It covers the fundamentals of MCP, client-server interactions, and how it addresses the bottlenecks of traditional LLMs.

This guide will be a hands-on walkthrough to get the MCP server running on your local machine with VS Code.

Prerequisites: Setting Up Your Environment

First, we need to configure the VS Code environment to run the server locally. This involves installing a few essential extensions.

1. Navigate to the Extensions tab in VS Code.
2. Install the following three extensions:
   • GitHub Copilot
   • GitHub Copilot Chat
   • GitHub Copilot for Azure: This is the most critical extension for our purposes, as it allows us to query Azure resources.

Once these extensions are installed and enabled, ensure you are logged into your GitHub account and have an active Azure subscription. These components must be fully functional before proceeding.

Enabling the MCP Feature in VS Code

Before you can use the MCP server, you must enable the feature itself.

Note: The MCP feature is still in preview, so you'll need a recent version of VS Code. Ensure your installation is up-to-date.

1. Click the Settings icon on the left-hand side and select Settings.
2. In the search bar, type MCP.
3. You will see a section for this feature. By default, it should be enabled. If it isn't, check the box to activate it.

To view the configuration, you can click on the settings.json file. An example server configuration is usually included to show the required syntax.

{
    "github.copilot.sidecar.enable": true,
    "github.copilot.sidecar.servers": [
        {
            "name": "Azure MCP Server",
            "command": "npx",
            "args": [
                "-y",
                "@azure/static-web-apps-cli-mcp-server",
                "--port",
                "7777"
            ]
        }
    ]
}

While numerous MCP servers are available today, this article will focus on a single server to avoid confusion.

Interacting with Copilot: Before and After MCP

To understand the difference the MCP server makes, let's first ask a few questions to the standard Copilot Chat. Make sure your chat is in agentic mode (using a model like GPT-4).

Example Questions (Without MCP Server Running):

• list all my Azure subs
• list all the storage accounts in my Azure subscription
• list all the resources from my storage account named dummy-storage

Typically, Copilot will respond with the correct Azure CLI commands but may not execute them automatically.

Installing and Activating the Azure MCP Server

Now, let's integrate the MCP server. When you click the "tools" button in the chat interface, you'll see the available utilities, but the custom server won't be listed yet.

You can add it in two ways:

1. Manually: Copy the configuration snippet into your settings.json file.
2. Automatically: Go to the View > Command Palette and type MCP: Add Server. You can select from various server types like npm package, pip package, docker image, or http.

For this guide, we'll use the npm package option, which adds the server configuration for you.

Note: Using the npx command requires you to have Node.js installed on your machine. Ensure all prerequisites for your chosen server type are met.

Once the server is configured, start it. A new tool, MCP Server: Azure MCP Server, will appear in your tools list, along with numerous cached tools (e.g., 49 cached tools) that are now available to answer your queries.

Querying with the MCP Server

Let's ask the same question again with the server running:

list all the storage accounts from my Azure sub

This time, you'll notice a new prompt. The chat will identify that the ACMCP tool can handle this request and will ask for your permission to run it.

Click Continue. The server will execute the request, possibly asking for credentials if they aren't cached. The output will be directly displayed in the chat.

The Magic of Agentic Mode: Handling Ambiguity

The real power of this setup shines when dealing with imperfect queries. Let's intentionally use an incorrect storage account name:

list all the resources from my storage account named dummystorage

Even with the typo (the actual name is dummy-storage), the MCP server is intelligent enough to identify the correct resource and pull the right information. This seamless flow demonstrates how the server abstracts away the complexity of finding the exact tool or command for the job.

Key Benefits of Using MCP Servers

1. Automatic Server Startup: If a server is configured in your settings.json but not running, VS Code will prompt you to start it automatically when you execute a relevant query. This saves you the trouble of manually managing server processes.

2. Multi-Server Management: Imagine you have several servers defined—one for SQL queries, one for Google searches, and the Azure server. You don't need to start them all. The system intelligently detects which server is appropriate for your query and triggers only that one.

3. Abstraction Layer: Instead of the LLM needing to know about every single tool, it only needs to communicate with the MCP server. The server handles the registration and execution of all its underlying tools, creating a much cleaner and more efficient architecture.

If you wish to stop using the server at any time, you can simply stop it from the VS Code interface. Subsequent queries will revert to the default Copilot behavior.