How to Add and Manage MCP Servers in VS Code

Model Context Protocol (MCP) servers are quickly becoming one of the most powerful ways to extend GitHub Copilot inside Visual Studio Code. They let Copilot interact with external tools, APIs, databases, file systems, and even full interactive apps — directly from chat. If you've ever wanted Copilot to run Playwright tests, query a database, or call a custom API, MCP servers are how you do it.

This guide walks you through adding, configuring, and managing MCP servers in VS Code, using both the graphical interface and the mcp.json configuration file.

1. What Are MCP Servers?

MCP (Model Context Protocol) is an open standard that connects AI models to external tools and services. In VS Code, MCP servers can provide:

• Tools — browser automation, file operations, API calls
• Resources — files, database tables, API responses
• Prompts — prebuilt commands you can trigger with /
• Apps — interactive UI components rendered directly in chat

Once installed, these capabilities appear automatically inside the Copilot Chat interface.

2. Quickstart: Install Your First MCP Server

Let's use the Playwright MCP server as an example.

1. Open Extensions (Ctrl+Shift+X on Windows/Linux, ⇧⌘X on macOS)
2. Search for @mcp playwright
3. Click Install
4. When prompted, confirm that you trust the server
5. Open Chat (Ctrl+Alt+I) and try a prompt like:

   Go to code.visualstudio.com, decline the cookie banner, and give me a screenshot of the homepage.

VS Code will automatically invoke the Playwright tools to perform the task.

3. Installing MCP Servers from the Gallery

To browse all available servers, open Extensions and search for @mcp. When installing, choose your scope:

• Install — adds to your user profile (all workspaces)
• Install in Workspace — adds to .vscode/mcp.json in your project

Security note: Local MCP servers can run arbitrary code. Always verify the publisher and configuration before trusting a server.

4. Adding MCP Servers Manually via mcp.json

You can configure MCP servers directly using JSON. VS Code provides IntelliSense for this file.

Example mcp.json:

{
  "servers": {
    "github": {
      "type": "http",
      "url": "https://api.githubcopilot.com/mcp"
    },
    "playwright": {
      "command": "npx",
      "args": ["-y", "@microsoft/mcp-server-playwright"]
    }
  }
}

You can also add a server via the Command Palette — run MCP: Add Server and choose Workspace or Global. Avoid hardcoding API keys; use environment variables or input variables instead.

5. Adding MCP Servers in Dev Containers

If you use Dev Containers, define MCP servers inside devcontainer.json:

{
  "customizations": {
    "vscode": {
      "mcp": {
        "servers": {
          "myServer": {
            "type": "http",
            "url": "https://example.com/mcp"
          }
        }
      }
    }
  }
}

VS Code will automatically write these into the remote mcp.json when the container starts.

6. Automatic Discovery

VS Code can detect MCP configurations from other apps (such as Claude Desktop). Enable chat.mcp.discovery.enabled in settings, then choose which apps to import configurations from. This is useful if you've already set up MCP servers for another AI client and want VS Code to pick them up automatically.

7. Adding from the Command Line

You can add a server directly using the VS Code CLI:

code --add-mcp '{"name":"server-name","command":"npx","args":["my-mcp-server"]}'

This supports both user profile and workspace scopes.

8. Sandboxing MCP Servers

On macOS and Linux, you can restrict what a local MCP server can access using the sandbox config:

{
  "servers": {
    "myServer": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@example/mcp-server"],
      "sandboxEnabled": true,
      "sandbox": {
        "filesystem": {
          "allowWrite": ["${workspaceFolder}"]
        },
        "network": {
          "allowedDomains": ["api.example.com"]
        }
      }
    }
  }
}

Sandboxing is not available on Windows.

9. Managing Installed Servers

You can start, stop, uninstall, or inspect servers in three ways:

• Extensions view — right-click a server under MCP Servers – Installed
• mcp.json editor — inline actions appear above each server entry
• Command Palette — run MCP: List Servers

10. Syncing Across Devices

If you use Settings Sync, enable MCP Servers in the sync categories. This keeps your MCP configuration consistent across machines — install once on your main machine, get it everywhere automatically.

11. Troubleshooting

If a server isn't working, check the output logs:

• Click the error indicator in Chat and choose Show Output
• Or run MCP: List Servers → Show Output from the Command Palette

For Docker-based servers, ensure the container isn't running in detached mode (-d), check command arguments, and inspect the server logs for errors.

What MCP Unlocks

MCP servers unlock a new level of extensibility for Copilot inside VS Code. Whether you're automating browsers, querying APIs, or building custom tools for your team, MCP gives Copilot the ability to interact with the real world — securely and flexibly.

The combination of a well-chosen set of MCP servers and a capable AI assistant is genuinely transformative for development workflows. Start with Playwright or the GitHub MCP server, get a feel for what's possible, and build from there.