Using the timer MCP Server in Visual Studio Code

In a previous article, I discussed “Getting started with MCP Server in Visual Studio Code”. I decided to update this article because the process has become much easier with the latest version of VS 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.

Companion Video: https://youtu.be/H14yMdHuyM4

What is MCP?

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

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

Prerequisites

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

NOTE:  This article uses Visual Studio Code version 1.103.1 as shown below:

Later versions of Visual Studio Code will likely have minor UI changes that may look different from the screen captures in this article.

Getting Started

We will setup an MCP Server that provides current time information. This will be done in a local workspace, as opposed to making it globally available in VS Code. Also, the MCP server will run in Docker.

Start Docker Desktop.

Create a working directory named time-mcp-server and open VS Code in that directory with:

mkdir time-mcp-server

cd time-mcp-server

code .

In VS Code, click on the GitHub Copilot Chat icon and select “Open Chat”.

In the chat window that opens, choose Agent mode and the latest Claude model. A tools button appears.

When you click on the tools button, a pop-up window will display the tools used by VS-Code GitHub Copilot Chat.

Click on OK to close the pop-up window.

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. These are early days, so some Mcp features are in Experimental mode.

Click on 'Edit in settings.json'. 

The file will open in the editor. Note that chat.mcp.discovery.enabled is set to true.

You can close the settings.json file in the editor.

Find a suitable MCP Server

Go to https://github.com/modelcontextprotocol/servers. Search for Time under Reference Servers.

Click on the Time link. Then fing Configuration >> Configure for Claude App >> Unsing docker.

Take note of the name of the docker image mcp/time.

Setup a timer MCP Server

In Visual Studio Code, click on View >> Command Palette….

Choose “MCP: Add Server…”.

Choose “Docker Image Install from a Docker image”.

For "Docker Image Name", enter “mcp/time”.

Next, choose Allow.

Accept the default Server ID.

Choose “Workspace Available in this workspace, runs locally”.

When prompted to trust and run the MCP server time, click on Trust.

A file named mcp.json gets created in a folder named .vscode inside your workspace with content:

{

"servers": {

"time": {

"command": "docker",

"args": [

"run",

"-i",

"--rm",

"mcp/time"

],

"type": "stdio"

}

},

"inputs": []

}

If the MCP server is not yet started, click on Start.

This will start the mcp/time server in Docker.

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

 VS Code detects the running MCP server which 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 should resort to the 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.