Using MCP Servers in VS Code Explained in 10 Minutes |

This is the second article in the MCP series. In this article, we'll explore how to use MCP servers in VS Code.

A Quick Recap: Model Context Protocol (MCP)

At a high level, the Model Context Protocol (MCP) is built on three core ideas: * Model: Acknowledges the existence of numerous AI models. * Context: Emphasizes that providing more context to Large Language Models (LLMs) yields better results. This is where prompts are managed under the hood. * Protocol: Refers to the standards or set of rules that govern the interaction.

A helpful diagram illustrates the shift MCP brings. Before MCP, developers dealt with various LLMs, each requiring a unique API for configuration. After MCP, the LLMs and applications remain, but a new layer—the Model Context Protocol—sits in the middle, acting as a unified API. This concept simplifies the integration of different tools into AI applications, making developers' lives easier.

Prerequisites

Before we begin the implementation, ensure you have the following set up: * VS Code: Downloaded and installed on your computer. * Node.js: Required for using npx. * Docker: Installed and running, as one of our examples will use it. * GitHub Copilot: Configured and enabled in VS Code.

For more background on the Model Context Protocol, you can refer to the first article in this series.

Getting Started with MCP in VS Code

We will walk through a couple of simple examples to demonstrate how to use MCP servers in VS Code: 1. The File System MCP Server 2. The Time MCP Server

There are many 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. 2. Search for mcp. 3. Enable MCP Enabled Preview, which allows integration with MCP servers. 4. Set MCP Discovery Enabled to true to allow VS Code to find MCP servers.

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

Implementing the File System MCP Server

Without an MCP server, an AI agent in VS Code has no context about your local file system. For example, if you ask it about files in a specific folder, it won't be able to answer. By implementing the file system server, we provide the LLM with the necessary context, restricted to only the folders you specify.

Note: To use these features, you must be in the agent mode within the VS Code chat interface. Ensure your VS Code is updated to the latest version to see this option.

Manual Installation via NPX

The configuration for MCP servers can differ across platforms. For instance, the hierarchy in settings.json for VS Code is slightly different from that in other environments. In VS Code, the structure is mcp.servers, with each server defined within.

Let's add the file system server manually: 1. Open the Command Palette (Cmd+Shift+P on Mac, Ctrl+Shift+P on Windows/Linux). 2. Type and select MCP: Add Server. 3. Choose npm package from the list of options. 4. When prompted for the package name, enter: @mcp/file-system-mcp-server. 5. Next, provide the absolute path to the root directory you want the server to access (e.g., /Users/your-user/Desktop). 6. You can also provide a comma-separated list of other allowed directories. 7. The server name file-system will be picked up automatically. Press Enter to confirm.

This process updates your settings.json file with the new server configuration. It should look something like this:

{
  "mcp.servers": {
    "file-system": {
      "command": "npx",
      "args": [
        "@mcp/file-system-mcp-server",
        "server",
        "--root-directory",
        "/Users/your-user/Desktop",
        "--allowed-directories",
        "/Users/your-user/Desktop"
      ]
    }
  }
}

After this is configured, you'll notice that over 10+ new tools are available to the agent, all related to file system operations like reading, writing, creating, listing, and moving files.

Using the File System Server

Now, you can interact with your file system using natural language.

Listing Files: Ask the agent, "What files do I have in the MCP folder?" It will use the listAllowedDirectories tool and show you the contents.
Reading Files: If the folder contains a file like mcp.txt, you can say, "Show me the contents of mcp.txt." The agent will use the readFile tool, and after you grant permission, it will display the file's content.
Moving Files: You can issue commands like, "Can you move the mcp.txt file to my Desktop?" The agent will use the moveFile tool, ask for your approval, and execute the operation.

This powerful integration allows you to manage your file system without ever leaving the editor's chat interface.

Integrating the Time MCP Server

Next, let's add a server for time and timezone conversions.

Installation via Docker and `settings.json`

Instead of using the command palette, you can add servers by directly editing your settings.json file. This is particularly useful when using Docker.

Make sure Docker is installed and running on your machine.
Open your settings.json file.
Add the following configuration for the time server inside the mcp.servers object:

{
  "mcp.servers": {
    // ... your file-system server config
    "time": {
      "command": "docker",
      "args": [
        "run",
        "--rm",
        "-i",
        "ghcr.io/sourcegraph/mcp-server-time:main"
      ]
    }
  }
}

Make sure the JSON is correctly formatted. Once you save the file, VS Code will detect the new server, and you'll see additional tools available, such as getCurrentTime and convertTime.

Using the Time Server

With the time server active, you can ask time-related questions.

Getting Current Time: Ask, "What is the current time in Helsinki?" The agent will use the timeConversion tool, and after you approve, it will provide the current time.
Converting Time: You can follow up with, "What is this time in Nepal?" The agent will use the convertTime tool, taking the source time and timezone (Helsinki) and the target timezone (Asia/Kathmandu) to give you the converted time.

Summary and Key Takeaways

To recap, integrating MCP servers into VS Code is a straightforward process. * Prerequisites are key: Ensure you have VS Code, Node.js, and Docker (if needed) installed and running. * Two ways to install: You can use the Command Palette for a guided setup or edit your settings.json file directly for more control. * Enable and Run: Remember to enable MCP in settings and ensure any required services, like Docker, are running locally. If a service is not running, the server will fail to load.

You should now have a solid understanding of how to use MCP servers directly within the VS Code chat interface. By integrating various MCP servers, you can enhance your development workflow, bringing powerful tools directly into your editor and reducing the need to switch between different applications.