How to add 100+ MCP servers to VS Code in minutes

Within the last few months, MCP popularity has skyrocketed, and it has been a genuinely positive experience for all users. Recently, VSCode has extended support for MCP servers.

And if you’re one of the people who haven’t moved to Cursor, you can now finally add any tools to your VS Code workspace and keep up with the vibe coding crowd. Kidding! It’s genuinely a productivity booster, and in this article, we will discuss how to add several useful MCP servers in minutes.

Table of Contents

Feel free to navigate to the step-by-step guide sections for getting up to work quickly.

1. What are MCP Servers & What’s not
2. How the MCP Server Works
3. Step-by-step guide to connect VS Code to Custom + Hosted MCP Servers
4. How to use MCP with VS Code Agent Mode
5. Practical Use Cases with examples

To orchestrate the workflow, I will use Composio’s fully managed MCP Servers, as they have over 200 tool integrations and built-in authentication.

Let’s dive in

What Are MCP Servers & What’s Not

Model Context Protocol (MCP) is an open standard that enables AI models to interact with external tools and services through a unified interface.

MCP acts as a bridge, allowing AI agents to access a diverse set of tools—ranging from file management utilities to cloud APIs—directly from your editor, without the need to define or maintain separate servers.

Think of MCP as a universal adapter for your AI agent. With MCP, your agent can:

• → Query databases.

• → Manipulate files.

• → Automate ticketing systems.

• → Trigger CI/CD pipelines.

• → Fetch data from APIs.

All at once, without leaving your code editor or juggling through multiple apps.

However, be considerate, MCP servers are not:

• A direct API replacement: MCP servers often wrap APIs, but they provide a standardised interface rather than replacing native API endpoints.
• A database: MCP servers serve as bridges, not as primary data stores.

& only download the MCP Server from trusted sources!

How the MCP Server Works

Under the hood, MCP follows a client-server architecture. Here is what happens using an example (leaving intricate details):

Scenario: Adding task/ticket – Fix login bug in website on high priority on Linear.

• → You give a prompt in VS Code, e.g, Add “Fix login bug” to my high-priority tasks.
• → The VS Code (MCP Client) requests the LLM (Agent) to process this prompt.
• → Agent derives a plan of action and connects to two MCP servers:
  • One for a task management system (e.g., Linear, or Jira)
  • Another for version control or code context (e.g., GitHub)

• → The Linear MCP server interacts with the Linear Account to find and update the “high priority” task list with a new entry: “Fix login bug”.

If needed, extra context.

• → The Agent may call GitHub MCP to inspect relevant commit history, open issues to link context, or add metadata.

• → Both MCP’s Servers send their responses back to the MCP client.

• → VS Code (MCP client) aggregates the responses. It forwards them to the LLM Agent, which displays the outcome in VS Code — e.g. a confirmation message, a summary of changes, or even suggestions based on linked issues or logs.

If you want to delve deep into the details about depth, lifecycle, protocol, drawbacks and all things MCP, check out this interesting blog: What is Model Context Protocol?

Assuming you understood the flow, now let’s look at how to connect MCP Servers to VS Code (locally & online)

How to connect VS Code to MCP servers: step-by-step guide

There are many ways to connect VS Code to the MCP server, but let’s follow the most straightforward route.

I will use calculator_mcp_server.py for local MCP connections. However, feel free to build one yourself. For reference, you can check out: MCP server: A step-by-step guide to building from scratch.

A quick bit of info:

VS Code or any client supports two ways to add MCP servers

• Local Version – You develop the server, define its functionality and expose it locally to be fetched by the client. This is done using the STDIO (Standard Input/Output) connection method.
• Hosted Version – A server developed by someone else and hosted elsewhere. You gain access by using SSE (Server-Side Events) / HTTP connection method.

Keep the above in mind & let’s begin!

1. Prerequisites

Before we begin, ensure you meet the following prerequisites.

• VS Code Latest Stable Build: If you don’t download from the official site/upgrade.
• Python, Uv, NPX or NPM package manager installed.
• Admin access to the VS Code settings.json file.
• A clear understanding of file paths in your os. (a must!)

Assuming you met the criteria, let’s move on.

2. Enable MCP in VS Code

VS Code, by default, has the MCP server enabled. To verify hit CTRL+SHIFT+P (Windows & Linux) / CMD+SHIFT+P (Mac) and search MCP.

3. Add Local MCP Servers to VS Code

Click MCP: Add MCP Server & Select Command (stdio).

Now follow the instructions carefully on all tabs!

→ Enter Command: Enter the command to run the server. Ensure that you use an absolute path, so Python calculator_mcp_server on Windows becomes 👇

"C:\\\\Users\\\\Harsh\\\\Documents\\\\mcp\\\\mcp\\\\Scripts\\\\python.exe" "C:\\\\Users\\\\Harsh\\\\Documents\\\\mcp\\\\calculator_mcp_server.py"

→ Enter Server ID: Name your server – choose a name that is meaningful.

→ Choose Config Saving:

• User Setting – accessible everywhere, config gets added to settings.json .
• Workspace Settings – only applicable to the current project (highly recommended). This also creates a mcp.json in .vscode folder.

Here is a demo of me doing the same👇

To verify in Copilot, choose agent mode & LLM and prompt for calculation, the agent will detect the custom tools defined in calculator_mcp.json . Make sure to give consent.

Add a tool call in action using MCP

Tan tool call in action using MCP

MCP server with agent mode in action

But how did all this happen? Time to dig behind the scenes?

Depending on the workspace type, two files are created: settings.json and mcp.json. Both have a similar structure.

{
    "servers": {
        "calc_serve": {
            "type": "stdio",
            "command": "C:\Users\Harsh\Documents\mcp\mcp\Scripts\python.exe",
            "args": [
                "C:\Users\Harsh\Documents\mcp\calculator_mcp_server.py"
            ]
        }
    }
}

Important fields are:

• name: Name of MCP Server exposed to LLM. I named it calc_serve
• type: what type of connection it is – SSE / STDIO / HTTP.
  • The same needs to be configured in the transport parameter of mcp.run() within the server
• command : Base command used to run the server
  • python, npx, npm , uv – are all potential candidates
  • Make sure to provide the absolute path to the .exe files of the same. Can do a which / where name in terminal
  • For env, it’s better to use the path for Python present in the .venv folder.
  • In case you select User Settings -> in settings.json path changes to \\ instead of \\\
• args : additional arguments can be passed.
  • If using stdio, ensure you use full path to the file.py
  • for npm / npx/ yarn -y or any command line args can be used here.
  • Args should be provided in the same manner as you would in the terminal

A quick tip 💡

Combine the command and args In the same manner as defined and run in terminal, if it fails, that means it’s the wrong way to run. This can help you fix the MCP server’s issue (command not found) easily.

Local is relieved, but in production, hosted MCP servers are used. Let’s look at how to connect those to your VS Code.

4. Add Hosted MCP Servers to VS Code

For demonstration, I will use composio-mcp because of its 200+ fully managed MCP Servers with built-in authentication. Ya, it does my heavy lifting nowadays!

Let’s look at how to add one to VS Code using HTTP. Follow the steps

Ensure you are logged in, else sign up (it’s free)

Super easy, clean and intuitive, right

For reference, here are the steps followed:

• → Head to the Composio MCP Server directory.

• → Click Dashboard on top. Select your tool of choice:
  • I will go with Notion Docs. Feel free to search for it.

• → Toggle on to initiate the connection. Select O-Auth, give all permissions and wait for the redirect

• → Once redirected, click Create Server. Fill in the details:
  • name: server name – notion-server-composio
  • Configure actions: select required tools – all (optional)
  • Select HTTP Stream and copy the given URL

• → Go to VS Code and hit CTRL+SHIFT+P /Use the bar.

• → Search MCP and select MCP Server

• → However, this time select HTTP Streaming, as opposed to SSE / STDIO

• → Feed in the copied URL, enter a unique server name (notion_docs_composio) and select the workspace.

• → Go to .vscode/mcp.json and start the server (press the restart button). Ensure that the terminal it shows n tools detected

And you are done!

Time to test it out in VS Code agent mode!

How to use MCP in VS Code Agent Mode

VS Code allows agent mode to use MCP. So, let’s test it out. For reference, here are the steps:

• → Head to the copilot

• → Switch to Agent Mode

• → Select Model – I choose Gpt4o, some models might perform even better.

• → Ensure agents have access to tools. To check, click on the 🛠️ icon and check if the MCP server is listed. If no,t enable it and recheck

• → Enter your query and let the agent do the job!

So, what changed vscode/mcp.json to enable HTTP support? Let’s have a look

{
    "servers": {
        "notion-server-composio": {
            "url": "<https://mcp.composio.dev/composio/server/6d4250f0-a6e6-4c1c-8974-a7df9a9ee408/mcp?include_composio_helper_actions=true>"
        }
    }
}

Most parameter configuration is gone, except name for url gets added. The URL is responsible for connecting to the server and exposing pre-defined tools in the Composio Notion toolset.

However, there is more: just like building blocks, we can connect multiple MCPs and work productively together. Let’s explore it with a real use case!

Practical Use Cases with examples

MCP really shines when it comes to automating multiple tasks across multiple apps. Let’s look at how you can turn your IDE into a full-fledged working environment that can:

• → Find Issues in the codebase

• → Create a linear ticket & milestone

• → Send an update to the Slack channel

all without leaving your IDE. Check it out 👇

Prompt

I need you to create me a Linear issue under this project: @web
<https://linear.app/devloper-hs/project/park-manager-329e1aa897d8>

Title the issue as: "Fix the circular import error asap! ⌛"
Add a comment to the issue saying: "Fix the circular import issue in app/__init__.py.!"

Then, post the status of whether the work was successful or not in my 'proj-park-manager' Slack channel. If it was successful, include a quick status update with the URL to the Linear issue: @web
<https://devloperhs201-0lu6943.slack.com/archives/C08H18UBB19>

Results 👇

What I liked about this is – Agent 1st plans the outline, then figures out the tools and finally executes it based on the settings in .vscode/settings.json. I hope you got an idea and now create powerful automation flows using the same – Make your prompt specific!

With this, we have come to the end of this informative blog, and here are my final thoughts!

Final Thoughts

Integrating MCP servers with VS Code takes just a few minutes (with Composio, Anthropic, and relevant sources) and unlocks a new level of automation and collaboration.

Whether you’re automating tasks, connecting to cloud APIs, or enabling team-wide agentic workflows, MCP makes it easy to scale your productivity—one server at a time.

Ready to get started? Open your .vscode/mcp.json Add your first server, and watch your project development transform!