# How to connect MCP servers to VS Code

- Tool: MCP
- Difficulty: Beginner
- Time required: 5 min
- Compatibility: VS Code 1.99+, GitHub Copilot extension, any MCP server
- Last updated: March 2026

## TL;DR

Connect MCP servers to VS Code by creating a .vscode/mcp.json file in your project root. VS Code uses the key 'servers' (not 'mcpServers' like Claude Desktop and Cursor). Each server entry specifies command, args, and optional env. MCP tools are available to GitHub Copilot chat and other MCP-aware VS Code extensions. Restart VS Code after configuration changes.

## Set Up MCP Servers in VS Code

VS Code added native MCP support for GitHub Copilot's agent mode. The key difference from Cursor and Claude Desktop is the configuration format: VS Code uses 'servers' as the top-level key instead of 'mcpServers'. This tutorial shows you the correct configuration format, how to add servers, and how to use them with Copilot. If you are migrating from Cursor, the only change is the config key name.

## Before you start

- VS Code 1.99 or later installed
- GitHub Copilot extension installed and active
- An MCP server to connect (npm package, local server, or Docker image)

## Step-by-step guide

### 1. Create the .vscode/mcp.json configuration file

Create a .vscode directory in your project root (if it does not already exist) and add an mcp.json file. The critical difference from Cursor and Claude Desktop is that VS Code uses 'servers' as the top-level key, not 'mcpServers'. Each server entry has a type field (usually 'stdio'), command, args, and optional env.

```
// .vscode/mcp.json
{
  "servers": {
    "filesystem": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/path/to/directory"]
    }
  }
}
```

**Expected result:** A .vscode/mcp.json file exists with the 'servers' key and at least one server configured.

### 2. Add multiple servers with environment variables

Add additional servers to the configuration. Each server gets a unique key name. Use the env field for API keys and secrets. VS Code launches all configured servers and makes their tools available to Copilot.

```
// .vscode/mcp.json
{
  "servers": {
    "filesystem": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/Users/you/projects"]
    },
    "github": {
      "type": "stdio",
      "command": "docker",
      "args": ["run", "-i", "--rm",
        "-e", "GITHUB_PERSONAL_ACCESS_TOKEN",
        "ghcr.io/github/github-mcp-server"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_your_token_here"
      }
    },
    "brave-search": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-brave-search"],
      "env": {
        "BRAVE_API_KEY": "your-brave-api-key"
      }
    }
  }
}
```

**Expected result:** Multiple servers are configured with environment variables.

### 3. Use VS Code settings.json as an alternative

You can also configure MCP servers in VS Code's settings.json instead of a separate mcp.json file. Use the 'mcp' key in settings.json with the same 'servers' structure. The mcp.json file takes precedence if both exist.

```
// .vscode/settings.json
{
  "mcp": {
    "servers": {
      "filesystem": {
        "type": "stdio",
        "command": "npx",
        "args": ["-y", "@modelcontextprotocol/server-filesystem", "/Users/you/projects"]
      }
    }
  }
}
```

**Expected result:** MCP servers can be configured in either mcp.json or settings.json.

### 4. Connect a remote MCP server via HTTP

For remote servers, use type 'sse' or specify a url field. VS Code supports connecting to MCP servers running on remote machines via Streamable HTTP transport.

```
{
  "servers": {
    "remote-api": {
      "type": "sse",
      "url": "https://mcp.your-company.com/api"
    }
  }
}
```

**Expected result:** VS Code connects to the remote MCP server over HTTP.

### 5. Restart VS Code and verify the connection

After saving the configuration, reload VS Code (Cmd+Shift+P then 'Developer: Reload Window'). Open the GitHub Copilot chat panel and check the available tools. MCP tools should appear in the tools list when you are in agent mode. You can also check the Output panel (View > Output) and select 'MCP' from the dropdown to see server connection logs.

**Expected result:** VS Code shows connected MCP servers in the Output panel, and tools are available in Copilot's agent mode.

### 6. Use MCP tools in GitHub Copilot chat

Open GitHub Copilot chat (Cmd+Shift+I or the Copilot icon) and switch to agent mode. Ask a question that would benefit from an MCP tool. Copilot will detect available tools and use them to answer your question. For example, with the filesystem server, ask about your project's file structure.

```
// Example prompts for Copilot with MCP tools:
// With filesystem: "What is the folder structure of this project?"
// With GitHub: "Show me recent pull requests on this repository"
// With Brave Search: "Search for the latest MCP protocol documentation"
```

**Expected result:** Copilot uses MCP tools to answer your question, showing tool calls and results in the chat.

## Complete code example

File: `.vscode/mcp.json`

```json
{
  "servers": {
    "filesystem": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "/Users/you/projects"
      ]
    },
    "github": {
      "type": "stdio",
      "command": "docker",
      "args": [
        "run", "-i", "--rm",
        "-e", "GITHUB_PERSONAL_ACCESS_TOKEN",
        "ghcr.io/github/github-mcp-server"
      ],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_your_token_here"
      }
    },
    "brave-search": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-brave-search"],
      "env": {
        "BRAVE_API_KEY": "your-brave-api-key"
      }
    },
    "memory": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-memory"]
    },
    "custom-typescript": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "tsx", "/absolute/path/to/server/src/index.ts"],
      "env": {
        "API_KEY": "your-api-key"
      }
    },
    "custom-python": {
      "type": "stdio",
      "command": "uv",
      "args": ["run", "--directory", "/path/to/python-server", "server.py"]
    }
  }
}
```

## Common mistakes

- **Using 'mcpServers' instead of 'servers'** — undefined Fix: VS Code uses 'servers' as the top-level key. 'mcpServers' is for Claude Desktop and Cursor. Using the wrong key means VS Code ignores all your server configurations with no error message.
- **Missing the 'type' field in server entries** — undefined Fix: VS Code server entries should include a 'type' field set to 'stdio' for local servers or 'sse' for remote HTTP servers. While some versions may work without it, including type explicitly prevents issues.
- **Expecting MCP tools outside of agent mode** — undefined Fix: MCP tools are available in GitHub Copilot's agent mode, not in regular inline suggestions or basic chat. Make sure you are using Copilot in agent mode to access MCP tools.
- **Config file in wrong location** — undefined Fix: Place mcp.json in the .vscode directory at your project root, not in the global VS Code settings directory. For workspace-level config, use .vscode/mcp.json.

## Best practices

- Always use 'servers' as the top-level key in .vscode/mcp.json — never 'mcpServers'
- Include the 'type' field in every server entry for explicit transport selection
- Commit .vscode/mcp.json to git so your team shares the same MCP setup (exclude secrets via .env or gitignore)
- Pass API keys via env field, not in args — and consider using VS Code's secret storage for sensitive values
- Always include -y in npx commands to prevent interactive prompts
- Check the Output panel's MCP channel for server connection logs and errors
- Test servers with MCP Inspector before adding them to VS Code configuration
- Use absolute paths for server commands and directory arguments

## Frequently asked questions

### Why does VS Code use 'servers' instead of 'mcpServers'?

VS Code chose 'servers' for its MCP configuration format, which differs from the 'mcpServers' key used by Claude Desktop, Cursor, and Windsurf. This is a VS Code-specific design choice. When configuring MCP, always check which key format your specific host expects.

### Do I need GitHub Copilot for MCP in VS Code?

Currently, MCP tools in VS Code are primarily used through GitHub Copilot's agent mode. Other VS Code extensions may also implement MCP client support, but Copilot is the main consumer of MCP tools in VS Code.

### Can I use the same MCP servers in both VS Code and Cursor?

Yes, the same servers work in both editors. You just need separate config files: .vscode/mcp.json with 'servers' key for VS Code and .cursor/mcp.json with 'mcpServers' key for Cursor.

### How do I see MCP server logs in VS Code?

Open the Output panel (View > Output or Cmd+Shift+U) and select 'MCP' from the dropdown menu in the top-right corner. This shows server connection status, errors, and JSON-RPC messages.

### Can RapidDev help set up MCP across our team's VS Code installations?

Yes. RapidDev helps teams create shared .vscode/mcp.json configurations, build custom MCP servers for internal tools, and establish consistent MCP setups across VS Code, Cursor, and Claude Desktop.

### Can I configure MCP servers globally for VS Code?

Yes. Add the MCP configuration to your user-level settings.json under the 'mcp' key. This makes servers available across all VS Code projects. Project-level .vscode/mcp.json takes precedence over user settings.

---

Source: https://www.rapidevelopers.com/mcp-tutorial/how-to-connect-mcp-to-vs-code
© RapidDev — https://www.rapidevelopers.com/mcp-tutorial/how-to-connect-mcp-to-vs-code