Connecting 100+ MCP Servers to Vs Code in 5 Easy Steps

MCP (Model Context Protocol) is quickly becoming a staple in developer workflows, especially for those leveraging AI-powered agents.

If you want to supercharge your VS Code environment by connecting it to a wide array of MCP servers—enabling everything from seamless API automation to collaborative coding - this guide walks you through the process in a clear, step-by-step manner

Connect VS Code to MCP Servers in 5 Steps!

There are many ways to connect vs code to MCP server, but let’s follow the simplest 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 / any client support 2 ways to add MCP servers

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

I will show you both ways!

1. Prerequires

Before we begin, ensue you meet the following pre-requires.

• VS Code Latest Stable Build: If don’t download at official site / upgrade.
• Python, Uv, NPX or NPM package manager installed.
• Access to Vs Code settings.json file.
• 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 MCP server enabled, if not go to settings.json and add "chat.mcp.discovery.enabled": true at end of json.

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 carefully on all tabs!

→ Enter Command: Enter command to run the server. Ensure using 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 - call it something meaningful.

→ Choose Config Saving:

• User Setting - accessible everywhere, config get’s added to settings.json .
• Workspace Settings - only in current the project (highly suggested). 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 the consent.

But how all this happened, time to dig behind the scenes?

Behind The Sence

Depending upon the workspace type, 2 files get created: settings.json and mcp.json . Both have similar structure.

But how all this happened, time to dig behind the scenes?

Depending upon the workspace type, 2 files get created: settings.json and mcp.json . Both have 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:

A quick tip 💡

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

Local are relief, 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 signup (its free)

Super easy, clean and intuitive, right

For reference, here are the step followed:

→ Head to Composio MCP Server directory.

→ Click Dashboard on top. Select 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 redirect

→ Once redirect, 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 given url

→ Go to VS Code and hit CTRL+SHIFT+P / use tool bar.

→ Search MCP and select MCP Server

→ However, this time select HTTP Streaming, oppose to SSE / STDIO

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

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

and you are done!

Time to test it out in vs code agent mode!

5. Test MCP Integration

Vs code allows agent mode to use MCP. So, let’s test it out.

Let’s build a notion listicle page / short blog using mcp server we just added 👇

For reference here are the steps:

→ Head to copilot

→ Switch to Agent Mode

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

→ Ensure agent have access to tools. To check click on 🛠️ icon and check if mcp server listed. If not enable it and recheck

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

So, what changed in 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 and url gets added.

The url is responsible for connecting to the server and exposing pre-defined tools in composio notion toolset.

But there is more, much like building blocks, we can connect multiple mcps and productively get work done.

Let’s explore it with a real use case!

Bonus: Combining Multiple MCP Servers in VS Code

MCP really shines when it comes at automating multiple tasks across multiple apps. Let’s look at how you can turn your ide into a full fledge working environment which can:

→ Find Issues

→ Create a linear ticket & milestone

→ Send update to 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 figure out the tools and finally executes it based on settings in .vscode/settings.json. I hope you got an idea and now create powerful automation flows using same - Just make your prompt specific!

I also tried a another one, but focused on agency-based use case:

With this we have come to end of this informative blog, but there is more to that meet the eye at: Connecting VS Code to MCP Servers