How to set up Model Context Protocol (MCP) in VS Code

• What you will learn: what MCP is and how to add an MCP server in VS Code.
• Who it is for: people who use AI in VS Code and want it to access other tools.
• Outcome: a working MCP server and a simple flow to create, review and publish.
• Prerequisite: updated VS Code and an AI assistant logged in.

MCP stands for Model Context Protocol. It is a standard that connects AI agents to external tools, such as a browser, database or GitHub.

Think of MCP as a universal outlet. A tool that speaks MCP works with any agent that also speaks it.

What you need before you start

• Updated VS Code.
• An AI assistant logged in. In Copilot, sign in with your GitHub account using the icon in the bottom bar.
• Node.js installed, if you want to use the example in this guide.

Step 1: sign in to the assistant

Start with login using your account, no key needed. In Copilot, those who do not subscribe can use Copilot Free.

If you use Claude Code, it also accepts MCP servers and signs in with a Pro or Max subscription. See our guide on how to install and use Claude Code in VS Code.

Step 2: add the server from the gallery

The easiest way: open the Extensions tab and type @mcp in the search. An MCP server gallery appears.

Choose one and click to install. VS Code handles the configuration and shows the server in the chat tools list, where you can turn each one on or off.

Step 3: add via command

For a server outside the gallery, open the command palette and run "MCP: Add Server".

Choose the type:

• HTTP: the server is on the internet, and you provide the address.
• Command (stdio): the server runs on your computer via a command.

For example, the Playwright server, which controls a browser, uses this command:

$ npx -y @playwright/mcp@latest

Then choose where to save: just for your user or for the project, in the file .vscode/mcp.json.

Step 4: check the file

In the project, the file looks like this:

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

Other tools use a file .mcp.json with the key mcpServers. The idea is the same.

Security note

Local servers can run code on your computer. Install only servers from trusted sources and read what each one does.

Practical flow: create, review and publish

1. Create

Write the request as if you were talking to a colleague:

Request: "Open the site in the browser using Playwright and list the broken links on the home page. Before making changes, show me the plan."

Read the plan, approve it or ask for adjustments. Then the agent writes the code and runs the project to check.

2. Review

Look at the changes before accepting them. The editor's Source Control tab shows each line changed.

Also ask: "Review what you did and explain it in simple language." If something breaks, paste the error in the chat and ask for a fix.

3. Publish

Git is the version history of the project. A pull request, or PR, is a request to merge changes into the main project after a review.

1. Ask: "Create a branch called corrige-links and make a commit with a clear message."
2. Ask: "Push the branch to GitHub and open the PR."
3. Review the PR on GitHub and do the merge.

The same flow in bridgecode, with separate roles

In bridgecode, MCP becomes a team tool. Each role uses what it needs:

• Planner: reads the request and breaks it into small tasks.
• Executor: writes the code for each task.
• Reviewer: checks everything and points out errors before the PR.

Each agent works on a separate copy of the project, so one does not interfere with the other. You approve the plan at the start and the PR at the end.

For example, the reviewer uses Playwright to open the page and check that everything works before the PR.

Common mistakes and how to avoid them

Installing too many servers

Each server adds tools that the agent needs to understand, and that takes up space in the conversation. Start with one or two and add others only when needed.

Putting passwords in the file

Don't write passwords in mcp.json. VS Code allows you to request these values at runtime, without saving in the file.

MCP news comes out every week, such as Copilot CLI 1.0.103 with MCP in sandbox. To understand agentic environments, see why devs are switching traditional IDEs for agentic environments.