Blog Guides Alternatives Compare
Back to Blog
AI

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

View as Markdown Open in ChatGPT Open in Claude
DesignRevision Editorial DesignRevision Editorial · SaaS, frontend & developer tooling
• 6 min read
Human Written
Share:

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 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 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:

{
  "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.)

Add DesignRevision MCP to VS Code

DesignRevision MCP — the server that installs real shadcn/ui 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:

{
  "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, Cursor, and 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

Frequently Asked Questions

Yes — VS Code has full Model Context Protocol support built into GitHub Copilot's agent mode. It connects to both local (stdio) and remote (HTTP/SSE) MCP servers, and once a server is added, Copilot's agent can call its tools during a task. You add servers via the MCP: Add Server command, the @mcp extensions gallery, or a mcp.json file.

Three ways: run MCP: Add Server from the Command Palette for a guided flow; open the Extensions view, search @mcp, and install from the gallery; or edit .vscode/mcp.json directly. In the JSON, add an entry under the top-level servers key — a command for a local server, or type "http" and a url for a remote one.

Two places. A workspace config lives at .vscode/mcp.json in your project (commit it to share servers with your team). A user-level config is opened with the MCP: Open User Configuration command and applies across all your workspaces. Both use the same servers schema.

VS Code uses a top-level servers key — not mcpServers. This trips people up because Cursor, Claude Desktop, and Windsurf all use mcpServers. Pasting a mcpServers block into .vscode/mcp.json will not work; rename the top-level key to servers.

Yes. Give the server an entry with "type": "http" and a url, and add a headers object for authentication (for example an Authorization bearer token). VS Code can prompt for the secret with an inputs entry so the token is not stored in plain text. Local servers use command and args instead.

In .vscode/mcp.json, add a server with "type": "http", the url https://mcp.designrevision.com/mcp, and an Authorization: Bearer header using your token. Because DesignRevision MCP is a remote HTTP server, it connects directly — no bridge needed. Then use Copilot agent mode to install shadcn/ui components.

Yes — MCP tools are used by Copilot's agent mode in VS Code, so you need GitHub Copilot enabled and the chat set to Agent mode. Once a server is configured, its tools appear to the agent automatically, and you approve tool calls as they run.

Join 50k+ subscribers

Web dev, SaaS, growth & marketing. Weekly.

Thanks for subscribing! Check your email.

No spam, unsubscribe anytime.

Back to all articles

Keep Learning

More articles you might find interesting.