Getting started with MCP Server in Visual Studio Code

In this tutorial, you will learn how to enable and use MCP servers in Visual Studio Code. The simple example we will use is the Timer MCP Server.

What is MCP?

Model Context Protocol (MCP) is an open standard developed by Anthropic, the company behind Claude. 

MCP is an open protocol that enables seamless integration between AI apps & agents and your tools & data sources.

Prerequisites

• Visual Studio Code
• Github Copilot Chat extension
• Docker Desktop

Getting Started

Start VS Code and click on the GitHub Copilot Chat icon.

Choose any Claude model and Agent mode. A tools button appears.

When you click on the tools button, you will see the tools that VS-Code GitHub Copilot Chat is using:

In Visual Studio Code, click on the gear in the bottom-left, then choose settings:

In the filter field, type MCP.

Note that Discovery is enabled and 'Chat' > 'Mcp' is also enabled. These are early days so Mcp is in preview.

Click on 'Mcp' >> 'Edit in settings.json'. The file will open in the editor. Note the mcp section with a sample mcp-server-time server:

"mcp": {   
  "inputs": [],
  "servers": {
    "mcp-server-time": {
      "command": "python",
      "args": [
        "-m",
        "mcp_server_time",
        "--local-timezone=America/Los_Angeles"
      ],
      "env": {}
    }
  }
}

In the chat window, click on the blue refresh tool.

If you do not have Python installed on your computer, you will get an error in the chat window:

Tap on the red error icon and choose “Show Output”.

The error is because python is not installed on the computer and, therefore, the MCP server cannot start.

Let us fix that by using an alternative way to run the MCP server without the need for Python. We will use Docker instead. Therefore, start your Docker Desktop.

Go to https://github.com/modelcontextprotocol/servers. Search for Time and click on it.

Find “Configure for Claude.app” >> “Using Docker”.

Copy the JSON code under mcpServers:

"mcpServers": {

 
  "time": {
    "command": "docker",
    "args": ["run", "-i", "--rm", "mcp/time"]
  }  

}

Back in settings.json, comment out (or delete) previous MCP servers under “mcp >> servers”. Paste the JSON code under mcp >> servers in settings.json. This is what the section will look like:

Click on the blue refresh tool again in the chat box. This time you should not experience any errors.

The time server now shows up among the available mcp servers when you click on tools.

Inside settings.json, start the server if it is not already started.

This will start the mcp/time server in Docker.

In the GitHub Copilot Chat window, enter: What is the current time?

It detects the running MCP server that knows how to handle requests for current time:

Click on Continue and you will get a response like this:

You can ask it to convert the time to another time zone with: What is that in pacific time zone?

Again, it will resort to our Time MCP server for assistance.

Click on Continue to get your answer.

You can even ask the time in another country. Example: What time is it in Cairo, Egypt?

Again, it uses our MCP Time server:

Click on Continue.

Finally, let us ask it to refresh the current time, with: Refresh the time in Egypt.

Conclusion

The ecosystem for MCP servers is growing rapidly. There are already many servers that you can explore at https://github.com/modelcontextprotocol/servers. In my next article, I will show you how youv can integrate the GitHub MCP server into VS Code.