How to Add an MCP Server to VS Code

VS Code connects to MCP servers through a file called mcp.json, and GitHub Copilot's agent uses their tools. You can add a server from the command palette, from the Extensions view, or by editing the file. This guide covers all three, plus the inputs feature that keeps API keys out of your config.

Every server in our MCP server directory with verified connection details has a ready-made VS Code snippet on its page.

Where the config lives

VS Code's format uses a top-level servers key, not the mcpServers key that Claude Desktop and Cursor use. That's the usual reason a snippet copied from another client does nothing.

The quick routes

• Command palette: run MCP: Add Server, pick hosted (HTTP) or local (command), and answer the prompts. VS Code writes the entry for you.
• Extensions view: run MCP: Browse MCP Servers, or search @mcp in Extensions, and install a server from the gallery.

Both routes end up in mcp.json, so the rest of this guide is what they write.

Add a hosted server

{
  "servers": {
    "github": {
      "type": "http",
      "url": "https://api.githubcopilot.com/mcp/"
    }
  }
}

type is http for a hosted server. If the server uses OAuth, VS Code asks you to sign in the first time it starts. A few vendors only document an SSE endpoint (the URL usually ends in /sse). Use "type": "sse" for those.

For a server that takes an API key in a header, add a headers block, ideally filled from an input (next section) rather than typed in:

{
  "inputs": [
    {
      "type": "promptString",
      "id": "context7-key",
      "description": "Context7 API key",
      "password": true
    }
  ],
  "servers": {
    "context7": {
      "type": "http",
      "url": "https://mcp.context7.com/mcp",
      "headers": {
        "Authorization": "Bearer ${input:context7-key}"
      }
    }
  }
}

Add a local server

{
  "servers": {
    "playwright": {
      "type": "stdio",
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

type is stdio for a local server, which VS Code starts as a process on your machine. You need whatever runtime the server uses (Node.js for npx, uv for uvx, Docker for docker).

Keep keys out of the file with inputs

The inputs block is VS Code's way of handling secrets. You declare an input once, reference it as ${input:id} anywhere in a server's env or headers, and VS Code prompts for the value the first time the server starts, then stores it securely. "password": true masks it as you type.

{
  "inputs": [
    {
      "type": "promptString",
      "id": "brave-key",
      "description": "Brave Search API key",
      "password": true
    }
  ],
  "servers": {
    "brave-search": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@brave/brave-search-mcp-server", "--transport", "stdio"],
      "env": {
        "BRAVE_API_KEY": "${input:brave-key}"
      }
    }
  }
}

This is what makes it safe to commit .vscode/mcp.json: the file describes the servers, and each person supplies their own key.

Start, stop and trust servers

Run MCP: List Servers to see every configured server and start, stop or restart it. When you open mcp.json, VS Code also shows inline actions above each server. The first time a server starts, VS Code asks you to confirm you trust it. MCP: Reset Trust clears those decisions.

Using the tools

MCP tools are available to Copilot's agent in the Chat view. Open the tools picker to see which servers and tools are enabled for the chat, and switch off the ones you don't need, since a long tool list makes the agent slower to choose. VS Code asks for confirmation before running a tool unless you've allowed it.

Common problems

Nothing happens after pasting a snippet. Check the top-level key is servers, not mcpServers, and that each server has a type.

A local server won't start. Open the server's output (from MCP: List Servers, choose the server, then Show Output) to see the error. Missing runtimes and missing environment variables are the usual causes.

A hosted server returns 404. Check the URL against the server's page in the directory. Many endpoints end in /mcp.

Next steps

Browse the MCP server directory by category. Every page says who maintains the server, whether it's hosted or local, and how it authenticates. The same walkthrough exists for Claude Code, Claude Desktop and Cursor.