Using MCP Servers in VS Code Explained in 5 Minutes

This is the second article in the MCP series. In this article, I'm going to show you how to use MCP servers in VS Code.

A Quick Recap: Model Context Protocol (MCP)

On a higher level, Model Context Protocol (MCP) can be broken down into three parts:

• Model: Refers to the many AI models available.
• Context: Providing more context to an LLM yields better results. This is where you can provide prompts under the hood.
• Protocol: Represents the standards or set of rules for communication.

If you're still a bit confused, a good explanation comes from the official MCP documentation. Before MCP, developers had to deal with numerous unique APIs to configure each LLM. After MCP, the LLM and the applications remain, but a new layer—the Model Context Protocol—sits in the middle, acting as a unified API. This concept simplifies developers' lives by making it easier to integrate various tools into AI applications.

Prerequisites

Before we begin the implementation, there are a few prerequisites:

1. VS Code: You need VS Code downloaded and installed on your computer.
2. Node.js: We will be using npx, so you must have Node.js installed.
3. Docker: One example uses Docker, so you'll need Docker installed and running.
4. GitHub Copilot: You should have GitHub Copilot configured in VS Code.

Getting Started: Two Simple Examples

I'm going to demonstrate two simple examples to use MCP servers in VS Code: 1. The File System MCP server. 2. The Time MCP server.

There are numerous MCP servers available, but these two are excellent for getting started.

Enabling MCP in VS Code

First, you need to enable MCP in your VS Code settings. 1. Go to Settings (Ctrl + , or Cmd + ,). 2. Search for "MCP". 3. Ensure the following settings are enabled: * MCP: Enabled Preview: Enables integration with MCP servers to provide additional tools and functionalities. * MCP: Discovery Enabled: Configures the discovery of MCP servers. Set this to true.

Once enabled, you're ready to implement your first MCP server.

Example 1: The File System MCP Server

Let's start with the File System MCP server. The goal is to provide the AI agent with context about a specific folder on your local machine, restricting its access to only that directory.

Without this server, if you ask the agent about a local folder, it will have no knowledge of it.

Note: To use MCP servers, you must be in the Agent mode within the chat interface, not the "ask" or "edit" modes. Ensure your VS Code is updated to the latest version.

Manual Setup with NPX

The File System MCP server is a Node.js server that implements MCP for file system operations like reading, writing, creating, listing, and moving files and directories.

While the configuration for platforms like Claude Desktop and VS Code can differ slightly in hierarchy, the core server is the same. We'll use npx for this setup.

1. Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P).
2. Search for and select "MCP: Add Server".
3. Choose "npm package" from the list of options. This requires npx to be installed.
4. When prompted for the package name, enter: @mcp/fs-server.
5. You will be asked to provide a root directory. This is the folder you want the server to have access to. For example, /home/user/Desktop/MCP.
6. You can also provide a list of other allowed directories, separated by commas.

After you confirm, your settings.json file will be updated automatically. It will look something like this:

{
  "mcp.servers": {
    "file-system": {
      "command": "npx",
      "args": [
        "--yes",
        "@mcp/fs-server"
      ],
      "options": {
        "root": "/path/to/your/allowed/folder"
      }
    }
  }
}

Now, when you open the agent chat, you'll see new tools available. If you ask the agent to list the contents of the specified MCP folder, it will use the listAllowedDirectories tool and show you the files inside.

For instance, if you have a file mcp.txt with "Hello World" inside, you can ask the agent to read it. It will use the readFile tool and display the content. You can even ask it to move the file to another allowed directory, and it will use the moveFile tool to do so, all through natural language commands in the chat interface.

Example 2: The Time MCP Server with Docker

Next, let's integrate the Time MCP server, which provides time and timezone conversion capabilities. This time, we'll use Docker and simply copy-paste the configuration.

You can stop the previous server from the settings if you wish.

1. Open your settings.json file.
2. Paste the following configuration inside the mcp.servers object.

{
  "mcp.servers": {
    "file-system": {
      // ... previous server config
    },
    "time": {
        "image": "ghcr.io/sourcegraph/mcp-time-server:main",
        "docker": true
    }
  }
}

Note: Make sure your Docker desktop application is running. If it's not, the server will fail to load.

After saving the file, the new tools from the Time server, like getCurrentTime and convertTime, will appear in the agent's tool list.

You can now ask questions like: * "What is the current time in Helsinki?" * "What is this time in Nepal?"

The agent will use the appropriate tools to get the current time and perform the timezone conversion, showing you the result directly in the chat. For example, it will identify the source timezone (Europe/Helsinki) and the target timezone (Asia/Kathmandu) and provide the converted time.

Recap and Key Takeaways

To recap, integrating MCP servers in VS Code is straightforward:

1. Ensure Prerequisites: Have VS Code, Node.js, and Docker (if needed) installed and running.
2. Enable MCP: Turn on the MCP settings in VS Code.
3. Add Servers: You can add servers manually through the Command Palette or by directly editing your settings.json file.
4. Use the Agent: Interact with the new tools through the agent chat interface.

By integrating MCP servers, you can extend the capabilities of your AI assistant directly within your development environment, saving you the effort of switching between multiple applications to find information or perform tasks.