How to add an MCP server to VS Code
Last verified against the official documentation linked below.
VS Code adds MCP servers for its agent through the 'MCP: Add Server' command or the MCP server gallery. This guide follows the official VS Code documentation and uses the Playwright MCP server as the local example.
Before you start
- Turn on VS Code's AI features and open a local project folder. (code.visualstudio.com/docs/copilot/customization/mcp-servers)
- A server started by a command needs its runtime installed. For Playwright that's Node.js 18 or newer with npx (check with node --version and npx --version). A remote HTTP server needs no local runtime but may need an account. (code.visualstudio.com/docs/copilot/customization/mcp-servers)
Steps
Run 'MCP: Add Server'
Open the Command Palette (Ctrl+Shift+P, or Cmd+Shift+P on macOS) and run MCP: Add Server.
Source: code.visualstudio.com/docs/copilot/customization/mcp-servers
Pick the connection type
Choose HTTP if the publisher gave you a URL, or Command (stdio) if they gave you a launch command. For Playwright choose Command (stdio) and enter the command below.
npx -y @playwright/mcp@latestSource: code.visualstudio.com/docs/copilot/customization/mcp-servers
Name it
Enter a server ID that isn't already used, such as playwright.
Source: code.visualstudio.com/docs/copilot/customization/mcp-servers
Choose where it's saved
For yourself, choose Global and then Copilot Global, which writes to ~/.copilot/mcp-config.json. To share with a team, use a workspace configuration instead. Portable files use an mcpServers object while the older VS Code format uses servers, so don't copy configs between them unchecked.
Source: code.visualstudio.com/docs/copilot/customization/mcp-servers
Review trust and sign-in prompts
Read any trust or authentication prompt before accepting it. Don't paste credentials into chat or commit them to your project.
Source: code.visualstudio.com/docs/copilot/customization/mcp-servers
Or install from the gallery
Open the Extensions view (Ctrl+Shift+X), search for @mcp, review the publisher and requirements, and click Install (or Install in Workspace to share it).
Source: code.visualstudio.com/docs/copilot/customization/mcp-servers
Check it worked
- Ask the agent to use the server by name for a harmless task, for example opening a page with Playwright and reporting its title without changing files. (code.visualstudio.com/docs/copilot/customization/mcp-servers)
- Expand the tool call in the conversation. It worked if a tool from your server was called, it returned output without a connection error, and the answer reflects that output. (code.visualstudio.com/docs/copilot/customization/mcp-servers)
Safety notes
- Local MCP servers can run code on your machine, and tools can reach external services with your permissions. Check the publisher, the command or endpoint and the access requested before starting a server. (code.visualstudio.com/docs/copilot/customization/mcp-servers)
Related listings
More guides
- How to add an MCP server to Claude Desktop
- How to add an MCP server to Cursor
- Remote vs local MCP servers: how they differ and which to use
- MCP server security checklist
Sources: code.visualstudio.com/docs/copilot/customization/mcp-servers. Menus and file paths change between versions: if a step doesn't match what you see, follow the official page linked for that step.