MCP Servers in VS Code

The video demonstrates how to set up and integrate MCP (Model Context Protocol) servers within Visual Studio Code using simple JSON configurations, enabling access to external tools like time conversion directly in the editor. It shows how to add servers globally or per project, manage dependencies with Docker, and utilize these tools seamlessly through VS Code’s command palette for enhanced development workflows.

The video explains how to set up and use MCP (Model Context Protocol) servers within Visual Studio Code (VS Code). The presenter begins by navigating to a list of available MCP servers, which includes reference servers, third-party options, and numerous websites offering different servers. They highlight a classic example, the MCP time server, which provides tools like getting the current time, converting time zones, and installation options. These servers can be accessed and integrated into VS Code to enhance development workflows.

Next, the presenter demonstrates how to add MCP servers globally or within specific projects in VS Code. They show the process of opening the tools menu, selecting “more tools,” and choosing “add MCP server.” For project-specific setup, they recommend creating an mcp.json file within the project folder. They then add a Docker image for the MCP time server, configuring it with a unique ID and granting permission for installation. This setup allows the server to be downloaded and started automatically, streamlining the process of integrating external tools into the development environment.

The video emphasizes that MCP servers are configured through simple JSON files, making it easy to version control and share configurations with team members. When the server is added to a project, VS Code can automatically download the necessary Docker images or other dependencies, provided Docker (or an alternative like Podman) is installed on the system. The presenter confirms that Docker is required for containerized servers but notes that other container runtimes should work similarly, as the setup involves running specific commands to manage the server lifecycle.

Once configured, the MCP tools become accessible within VS Code. The presenter shows how to invoke these tools via the command palette or through a dedicated tools menu. They demonstrate tools like “get current time” and “convert time,” which appear as commands that can be run directly within the editor. The system intelligently recognizes the context and can automatically determine which tool to use based on the user’s input, thanks to GitHub Copilot’s assistance in parsing natural language commands.

Finally, the presenter illustrates how to use these tools to perform real-world tasks, such as finding the current time in Tokyo or converting that time to Eastern Time. They show how permissions can be managed for running commands, whether on a one-off basis, for the session, or permanently. The demonstration concludes with a practical example, revealing the current time in Tokyo and its equivalent in New York, showcasing the power and convenience of integrating MCP servers into VS Code for seamless, context-aware tool usage during development.