Integrating Local MCP Servers with VS Code Explained in 5 Minutes
In this article, we'll demonstrate how to integrate your locally developed MCP (Microsoft Copilot Platform) servers with Visual Studio Code. With the latest updates to VS Code, you can now run your own MCP servers locally, and we're going to explore exactly how to do that.
Step 1: Enable MCP Server Integration in VS Code
First, ensure your Visual Studio Code is updated. The local MCP server setting is currently a preview feature. To enable it, you need to access a specific setting within VS Code.
You can typically find this by searching for experimental features in the settings. Once enabled, VS Code will confirm whether the MCP integration is active.
Step 2: Project Setup and Custom Tools
Next, we'll set up a project that runs an MCP server with a couple of custom tools. For this demonstration, our project includes two simple tools: 1. A tool to fetch a random office joke. 2. A tool to get the current date.
While these are toy examples, they perfectly illustrate the integration process.
Dependencies
To build this, you'll need several libraries. The primary ones are:
- fastapi
- mcp
- Other supporting libraries for your tools.
Core Logic in main.py
Our main application logic resides in main.py
. Here, we expose a single POST endpoint, /SSC
, which will be used by VS Code to communicate with our server.
Here is a simplified look at the code:
# main.py
from fastapi import FastAPI
from .tools import get_office_jokes, get_current_date # Importing our custom tools
app = FastAPI()
# This is the main endpoint VS Code will use
@app.post("/SSC")
async def handle_mcp_request(request: dict):
# Logic to parse the request from VS Code
# and determine which tool to call
tool_name = request.get("tool_name")
if tool_name == "get_office_jokes":
return get_office_jokes()
elif tool_name == "get_current_date":
return get_current_date()
else:
return {"error": "Tool not found"}
# The two tools are defined in a separate file and imported here.
# This structure keeps the code organized.
The FastAPI server listens for requests at the /SSC
endpoint. When VS Code sends a request, our server parses it, identifies which tool needs to be executed, and returns the result.
Step 3: Running the Local MCP Server
To start the server, we'll use uv
to create a virtual environment, install the dependencies from our requirements.txt
file, and then launch the FastAPI application.
# 1. Create a virtual environment
uv venv
# 2. Activate the environment and install dependencies
uv pip sync requirements.txt
# 3. Run the FastAPI server
uvicorn main:app --reload
Once running, the server will be available at a local API endpoint, typically something like http://127.0.0.1:8000
.
Step 4: Connecting VS Code to the Server
Now, let's connect Visual Studio Code to our running MCP server.
- Press
Ctrl+Shift+P
to open the command palette. - Type and select "MCP: Add Server".
- Choose HTTP as the protocol.
- Enter the full URL to your server's endpoint. In our case, it's
http://127.0.0.1:8000/SSC
. - Give your server a descriptive name, for example,
YouTube MCP Demo
. - Press Enter and choose to save the configuration in your workspace settings.
This process creates a mcp.json
file in your project's .vscode
directory, making your custom tools discoverable by the Copilot chat. You should see a confirmation that two new tools are available.
Step 5: Testing the Custom Tools
To verify that everything is working, let's test the integration.
- Open the Copilot chat window (you can use the
Ctrl+I
shortcut). - In the chat panel, you should see your new tools listed among the available options.
- Let's activate our agent by typing
@workspace
. - Now, ask for a joke:
"give me an office joke"
Copilot will process the request, identify that our get_office_jokes
tool is the correct one to use, and execute it. The joke returned from your local server will then appear in the chat.
Example Output:
Why did the scarecrow get a promotion? Because he was outstanding in his field.
It successfully understood which tool to call from our local MCP server and returned the result.
Final Thoughts
This article has shown how to run MCP servers locally and integrate them with Visual Studio Code. While these examples are running on a local machine, a future step could involve deploying the server to a remote endpoint for broader access.
Join the 10xdev Community
Subscribe and get 8+ free PDFs that contain detailed roadmaps with recommended learning periods for each programming language or field, along with links to free resources such as books, YouTube tutorials, and courses with certificates.