# VS Code MCP: How to Add a Server (2026)

> Add an MCP server to VS Code with the MCP: Add Server command or a .vscode/mcp.json file — the servers key, local and remote setup, and agent mode.

Source: https://designrevision.com/blog/add-mcp-server-to-vscode

---

To add an MCP server to VS Code, run **MCP: Add Server** from the Command Palette, or create a `.vscode/mcp.json` file with an entry under the `servers` key.

VS Code has full [Model Context Protocol](https://modelcontextprotocol.io) support built into GitHub Copilot's agent mode — local and remote servers alike. The same servers you use in Claude Code or Cursor work here too. But one detail catches everyone: VS Code uses a **`servers`** key, not the `mcpServers` key every other JSON client uses. This guide covers all three ways to add a server, the config schema, and how to wire up a real one.

*Last updated: July 2026. VS Code's MCP support is now full-spec but still evolving; the steps below were verified against [VS Code's official MCP docs](https://code.visualstudio.com/docs/agent-customization/mcp-servers) in July 2026 — check there if a menu label has moved.*

## Prerequisites

- **VS Code with GitHub Copilot**, and chat set to **Agent mode** — MCP tools are called by the Copilot agent, so that's where they show up.
- **The server details** — a launch command for a local server, or an HTTPS URL for a remote one.

## Three Ways to Add an MCP Server

Whether you searched for *how to add an MCP server to VS Code* or just *vscode add mcp server*, there are three routes — a guided flow, a gallery, and a config file. They end up in the same place.

1. **`MCP: Add Server` command.** Open the Command Palette (`Ctrl/Cmd+Shift+P`), run **MCP: Add Server**, and follow the guided flow — you pick a **Workspace** or **Global** target and enter the server details.
2. **The `@mcp` extensions gallery.** Open the Extensions view (`Ctrl/Cmd+Shift+X`), type `@mcp`, and hit **Install** (or right-click → **Install in Workspace**) on a listed server — the one-click path.
3. **Edit `mcp.json` directly.** The most transparent option, and the one worth understanding, since the other two just write this file for you.

## The `mcp.json` Config File

VS Code reads MCP config from two locations:

- **Workspace:** `.vscode/mcp.json` in your project. **Commit it** and everyone on the repo gets the same servers.
- **User:** run **MCP: Open User Configuration** to edit the user-level `mcp.json`, which applies across all your workspaces.

Both use a top-level **`servers`** object. A local server takes a `command` and `args`; a remote one takes `"type": "http"` and a `url`:

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

**Watch the key name.** It's `servers`, not `mcpServers` — the single most common VS Code MCP mistake, because Cursor, Claude Desktop, and Windsurf all use `mcpServers`. Paste one of their blocks in unchanged and nothing loads. (See how each agent differs in our [MCP clients comparison](/blog/mcp-clients-compared).)

## Add DesignRevision MCP to VS Code

[DesignRevision MCP](/mcp) — the server that installs real [shadcn/ui components](/components) — is a remote HTTP server, which is a **direct fit** for VS Code: no `mcp-remote` bridge, unlike Claude Desktop or JetBrains. Add it as an `http` server with an `Authorization` header, and let VS Code prompt for the token so it isn't stored in plain text:

```json
{
  "inputs": [
    {
      "type": "promptString",
      "id": "dr-token",
      "description": "DesignRevision MCP token",
      "password": true
    }
  ],
  "servers": {
    "design-revision": {
      "type": "http",
      "url": "https://mcp.designrevision.com/mcp",
      "headers": { "Authorization": "Bearer ${input:dr-token}" }
    }
  }
}
```

VS Code asks for the token the first time the server starts and injects it into the header. Open Copilot chat in **Agent mode**, and it can discover, inspect, and install shadcn/ui components on request. It's freemium, so you can connect it and pull components on the free plan.

## Workspace vs. User Config

The two config locations answer different questions:

- **`.vscode/mcp.json` (workspace)** — servers scoped to this project, and **committable**, so a `git pull` gives your teammates the same MCP setup. This is VS Code's real advantage over clients like JetBrains, where MCP lives in IDE settings and can't be shared through the repo.
- **User `mcp.json`** — servers that follow you into every workspace. Best for general-purpose servers like GitHub.

Keep project-specific servers in the workspace file and personal ones in the user file, and you won't push a teammate a server they can't authenticate.

## Using MCP Tools in Agent Mode

MCP tools only surface in **Agent mode**, not the plain chat or edit modes. Open Copilot Chat, switch the mode selector to **Agent**, and the tools from every configured server become available. Ask the agent to do something a server enables and it calls the matching tool, pausing for your approval before it runs. You can also click the tools icon in the chat to see and toggle exactly which MCP tools are active — useful for keeping the agent focused.

## Troubleshooting

- **`mcpServers` instead of `servers`.** The number-one cause of "nothing happens." VS Code's top-level key is `servers`; rename it.
- **Tools don't appear.** You're probably not in **Agent mode** — switch the chat mode selector. Also confirm the server is enabled in the config.
- **Remote server returns 401.** The `headers` object is missing or the token is wrong. Double-check the `Authorization` value (and that your `${input:…}` id matches the `inputs` entry).
- **Server won't start (local).** Run the `command` and `args` in a terminal first; a failing `npx` there fails in VS Code too.

## Which MCP Servers Should You Add?

The servers are the same across agents — only the config changes. A focused set of GitHub, Context7, a database server, and **DesignRevision MCP** for UI covers most work. We rank the best picks in our roundups for [Claude Code](/blog/best-mcp-servers-for-claude-code), [Cursor](/blog/best-mcp-servers-for-cursor), and [Codex](/blog/best-mcp-servers-for-codex).

## Conclusion

VS Code is a full MCP client through Copilot's agent mode: add a server with **MCP: Add Server**, the `@mcp` gallery, or a `.vscode/mcp.json` file — just remember the top-level key is **`servers`**, not `mcpServers`. Local servers use `command`/`args`, remote ones use `type: "http"` with a `url` and `headers`, and a remote server like DesignRevision MCP connects directly with an `Authorization` header. Commit the workspace file to share your setup, switch Copilot to Agent mode, and the tools are there.

---

## Related Resources

- [DesignRevision MCP — the shadcn/ui MCP server](/mcp)
- [MCP Clients Compared: Every AI Coding Agent](/blog/mcp-clients-compared)
- [ChatGPT MCP: How to Add a Server (2026)](/blog/add-mcp-server-to-chatgpt)
- [JetBrains MCP: How to Add a Server (2026)](/blog/add-mcp-server-to-jetbrains)
- [How to Add an MCP Server to Claude Code (2026 Guide)](/blog/add-mcp-server-to-claude-code)
- [How to Add an MCP Server to Cursor (2026 Guide)](/blog/add-mcp-server-to-cursor)
- [Browse the shadcn/ui component registry](/components)