How to Set Up MCP Servers in VS Code (Step-by-Step)

VS Code

Prerequisites

• Visual Studio Code version 1.99 or later
• GitHub Copilot extension installed and configured
• Docker Desktop or uvx or pip

What is MCP?

MCP (Model Context Protocol) follows a client-server architecture where:

• MCP clients (like VS Code) connect to MCP servers and request actions on behalf of the AI model
• MCP servers provide tools that expose specific functionalities through a well-defined interface
• The protocol defines the message format for communication between clients and servers

Enabling MCP Support

MCP support is enabled by default in VS Code 1.99+. If you need to manually enable it:

1. Open VS Code Settings
   (⌘, on macOS)
   (Ctrl+, on Windows/Linux)
2. Search for "chat.mcp.enabled"
3. Ensure the setting is checked

Adding an MCP Server

There are two main ways to configure MCP servers:

lets add the Time MCP Server for example

1. Workspace Configuration, recommended

Create a .vscode/mcp.json file in your workspace:

{
  "servers": {
    "time": {
      "command": "docker",
      "args": ["run", "-i", "--rm", "mcp/time"]
    }
  }
}

2. User Settings Configuration

To use an MCP server across all workspaces, add it to your VS Code user settings:

1. Open User Settings (⌘, on macOS, Ctrl+, on Windows/Linux)
2. Search for "mcp"
3. Add your server configuration under the "mcp.servers" setting

3. Starting the MCP Server

Before starting the MCP server:

1. Ensure Docker Desktop is running on your machine
2. Open your workspace that contains the mcp.json configuration

Once you have created the mcp.json file, VS Code will automatically detect it and display a "Start Server" button directly in the editor:

.vscode/mcp.json

Click the "Start Server" button to initialize the MCP server. Upon successful startup:

1. A Docker container will be created and started automatically:

Active Docker container running the MCP Time server

2. The mcp.json file will update to reflect the server's running status:

Updated mcp.json showing server running status

4. Using the MCP Server in VS Code Chat

Once the server is running, you can start using it through VS Code's chat interface:

1. Open VS Code's chat panel (Ctrl+Shift+I or Cmd+Shift+I)
2. You'll notice a "Select Tools" button in the chat input area:

Chat input showing the Select Tools button

3. Click "Select Tools" to configure Time MCP Server

MCP tool selection dialog showing available tools

Select the time-related tools you want to use. These tools will now be available in your chat conversations with GitHub Copilot.

5. Using MCP Functions

After enabling the tools, you can start using the MCP functions in your chat conversations. Here are some examples:

1. Getting the current time:
   • Simply ask for the current time in a specific timezone
   • If the model tries to write a time function, redirect it to use the MCP function

Using get_current_time MCP function

2. Converting between timezones:

Using convert_time MCP function

6. Monitoring MCP Server Activity

You can monitor the MCP server's activity through Docker container logs. These logs show the JSON-RPC communication between VS Code and the server, including:

• Server initialization and capability registration
• Tool definitions and schemas
• Request/response pairs for function calls

Security Considerations

⚠️ Caution: MCP servers can run arbitrary code on your machine. Only add servers from trusted sources, and always review the publisher and server configuration before starting it.

🔒 Important: Never hardcode sensitive information like API keys. Use input variables or environment files instead.

Troubleshooting

If you encounter issues:

1. Check the error indicator in the Chat view
2. Select "Show Output" to view detailed server logs
3. Use the "MCP: List Servers" command to check server status

Further Resources

• Official MCP Specification
• VS Code MCP Documentation
• MCP Server Repository List