DEV Community

Thang Chung
Thang Chung

Posted on • Edited on

23 1

Visual Studio Code + Model Context Protocol (MCP) Servers - the first look

#webdev #ai #mcp #vscode

Introduction

Model Context Protocol (MCP) has gained traction, and we can see everybody talked about it on X, YouTube, LinkedIn, FaceBook and everywhere.

This post is going to have a look and set up MCP servers such as @modelcontextprotocol/server-filesystem, Custom MCP server with .NET SDK, and @modelcontextprotocol/server-postgres on Visual Studio Code with Copilot (MCP client).

Prerequisites

Make sure you have @modelcontextprotocol/server-filesystem@2025.1.14, @modelcontextprotocol/server-postgres@0.6.2. If not, you have to install it by using

npm -g @modelcontextprotocol/server-filesystem
npm -g @modelcontextprotocol/server-postgres
Enter fullscreen mode Exit fullscreen mode

You should see as below:

> npm list -g --depth=0
C:\Program Files\nodejs -> .\
+-- @modelcontextprotocol/server-filesystem@2025.1.14
+-- @modelcontextprotocol/server-postgres@0.6.2
+-- corepack@0.31.0
+-- npm@11.1.0
`-- uv@1.4.0
Enter fullscreen mode Exit fullscreen mode

Set it up

Open vscode insiders version, then on the top of this editor click on the Copilot icon as below:

Open Colilot

Then, we open up the Chat windows, then choose Agent mode as follows:

Copilot Agent mode

In the next step, we open the vscode settings at File -> Preferences -> Settings -> on Search settings, we type mcp -> and on Mcp panel choose Edit in settings.json, we will see:

{
    ...
    "chat.mcp.discovery.enabled": true,
    "mcp": {
        "inputs": [],
        "servers": {
            "mcp-server-time": {
                "command": "python",
                "args": [
                    "-m",
                    "mcp_server_time",
                    "--local-timezone=America/Los_Angeles"
                ],
                "env": {}
            }
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

When you start the mcp-server-time, it will throw an error if you don't have Python on your machine or mcp_server_time package.

Solution:
If we have got an error "No module named mcp_server_time"
Then I found the issue here: https://github.com/microsoft/vscode/issues/244637#issuecomment-2760114961

Make sure you have python on your machine, and then run python -m pip install mcp-server-time, then you're good to go.

If everything is okay, now we can use this tool to look at the top of the chat windows. See

MCP tools on Copilot

Now, let's use it (I typed What's time in Saigon?, then I typed The gaps with London?)

Chat with mcp-time

Look at it. It can use 2 tools that we have to get the current time zone (Saigon) and convert it (London). It's very cool, right?

MCP with our custom code

Now, let's imagine that we want to develop our own MCP server using C# SDK for Model Context Protocol servers and clients. The code for it is below

var builder = Host.CreateEmptyApplicationBuilder(settings: null);
builder.Services
    .AddMcpServer()
    .WithStdioServerTransport()   
    .WithTools();
await builder.Build().RunAsync();

[McpToolType]
public static class TimeTool
{
    [McpTool, Description("Get the current time for a city")]
    public static string GetCurrentTime(string city) => 
        $"It is {DateTime.Now.Hour}:{DateTime.Now.Minute} in {city}.";
}
Enter fullscreen mode Exit fullscreen mode

Build the solution, then we configure it with VS Code - Copilot as below:

"mcp": {
    "servers": {
        "my-own-mcp-server": {
            "command": "C:\\Users\\thangchung\\source_code\\ai_labs\\mcp-labs\\vscode-mcp-servers\\MCPServer\\bin\\Debug\\net9.0\\MCPServer.exe"
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Starting our own server, then back to the chat window:

Our own tool

Let's do some chat:

Chat with our own tool

MCP file server

Now, let's configure another MCP Server for @modelcontextprotocol/server-filesystem as below

"mcp": {
    "servers": {
        // remove for brevity
        "filesystem": {
            "command": "npx",
            "args": [
                "-y",
                "@modelcontextprotocol/server-filesystem",
                "C:\\temp"
            ],
            "env": {
                "DEBUG": "*"
            }
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

We create a folder on C:\ with the named temp, then create a test.txt file inside it.

Temp folder structure

Start the server, then we type as:

Show me the file on the folder

MCP Postgres server

One day last month, my colleague challenged me whether I could use the MCP client to connect with the MCP Postgres server, and then use some kind of natural language (English) to command and let the foundation model (GPT-4o) analyse, plan, and generate the T-SQL, then it can connect to the database to query the data out. Challenge accepted 😂. I keep thinking about it, and now I will show you how can it work.

Firstly, we need the Postgres database and seed the Northwind database for trying some experiments. I use .NET Aspire to set it up (you can run docker image or docker-compose, or whatever it is). The code is as below:

var builder = DistributedApplication.CreateBuilder(args);

// !External params
var username = builder.AddParameter("db-username");
var password = builder.AddParameter("db-password");

var postgresQL = builder.AddPostgres("postgresQL", userName: username, password: password)
                        .WithLifetime(ContainerLifetime.Persistent)
                        .WithBindMount("./Scripts", "/docker-entrypoint-initdb.d")
                        .WithEndpoint("tcp", (e) =>
                        {
                            e.Port = 5432;
                            e.IsProxied = false;
                        })
                        .WithPgWeb();

var postgres = postgresQL.AddDatabase("postgres");

builder.Build().Run();
Enter fullscreen mode Exit fullscreen mode

Then, run it:

> dotnet run
Enter fullscreen mode Exit fullscreen mode

.NET Aspire dashboard

The Northwind data is in place:

Northwind db

"mcp": {
    "inputs": [],
    "servers": {
        // remove for brevity
        "postgres": {
            "command": "npx",
            "args": [
                "-y",
                "@modelcontextprotocol/server-postgres",
                "postgresql://postgres:P@ssW0rd@123@localhost:5432/postgres?connect_timeout=20"
            ],
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Now, it is a show time:

Chat with Postgres DB

The T-SQL script is generated as:

SELECT od.*, o.*, p.* 
FROM order_details od JOIN orders o ON od.order_id = o.order_id JOIN products p ON od.product_id = p.product_id 
ORDER BY od.unit_price DESC 
LIMIT 10;
Enter fullscreen mode Exit fullscreen mode

We can do even better like convert it into LINQ:

LINQ

The source code to get started can be found at https://github.com/thangchung/mcp-labs/tree/main/vscode-mcp-servers

Conclusion

In this post, we do many things to experiment with MCP servers. When use it correctly, then we can improve a lot in DevEx and Vibe coding actually.
In the next step, I will try to think about how can we build the Agentic AI architecture on the coffee shop apps. Happy hacking.

References

Top comments (0)