How to Use VSCode MCP Server

This tutorial will guide you through everything you need to know about using MCP servers with VSCode, from initial setup to advanced configurations and troubleshooting.

Ashley Goolam

Ashley Goolam

5 April 2025

How to Use VSCode MCP Server

Introduction to VSCode MCP Server

MCP (Model Context Protocol) is an innovative open standard that transforms how AI models interact with external tools and services through a unified interface. In VSCode, MCP support enhances GitHub Copilot's agent mode by allowing you to connect any MCP-compatible server to your AI-powered coding workflows. This tutorial will guide you through everything you need to know about using MCP servers with VSCode, from initial setup to advanced configurations and troubleshooting.

💡
Before diving into the setup of Github MCP Server, check out Apidog—a powerful tool for designing, testing, and documenting APIs. Apidog allows you to seamlessly integrate your APIs, enhancing your workflow with structured models and easy collaboration. If you're looking to boost your automation and API management, Apidog is a great companion tool to use alongside Zapier MCP.
button

What is VSCode MCP Server

The Model Context Protocol enables AI models to discover and interact with external tools, applications, and data sources through a standardized interface. When using VSCode with Copilot's agent mode, the AI can leverage various tools to perform tasks such as file operations, accessing databases, or calling APIs based on your requests.

MCP follows a client-server architecture:

For example, a file system MCP server might provide tools for reading, writing, or searching files and directories. GitHub's MCP server offers tools to list repositories, create pull requests, or manage issues. These servers can run locally on your machine or be hosted remotely.

Setting Up Your First VSCode MCP Server

Step 1: Adding an MCP Server to Your Workspace

There are several ways to add an MCP server to VSCode:

Using the workspace configuration file:

Using the Command Palette:

Using User Settings for global access:

Step 2: Understanding VSCode MCP Server Configuration Format

The MCP server configuration follows a specific JSON format:

{
  "inputs": [
    {
      "type": "promptString",
      "id": "api-key",
      "description": "API Key",
      "password": true
    }
  ],
  "servers": {
    "MyServer": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-example"],
      "env": {
        "API_KEY": "${input:api-key}"
      }
    }
  }
}

The key elements are:

VSCode MCP Server Connection Types and Configuration Options

STDIO Connection for VSCode MCP Server

For standard input/output connections:

"MyServer": {
  "type": "stdio",
  "command": "npx",
  "args": ["server.js", "--port", "3000"],
  "env": {"API_KEY": "${input:api-key}"}
}

SSE Connection for VSCode MCP Server

For server-sent events connections:

"MyRemoteServer": {
  "type": "sse",
  "url": "http://api.example.com/sse",
  "headers": {"VERSION": "1.2"}
}

Using Variables in VSCode MCP Server Configuration

You can use predefined variables in your configuration:

"MyServer": {
  "type": "stdio",
  "command": "node",
  "args": ["${workspaceFolder}/server.js"]
}

Advanced VSCode MCP Server Configuration Examples

Here's a more comprehensive example showing multiple servers and input variables:

{
  "inputs": [
    {
      "type": "promptString",
      "id": "perplexity-key",
      "description": "Perplexity API Key",
      "password": true
    }
  ],
  "servers": {
    "Perplexity": {
      "type": "stdio",
      "command": "docker",
      "args": ["run", "-i", "--rm", "-e", "PERPLEXITY_API_KEY", "mcp/perplexity-ask"],
      "env": {
        "PERPLEXITY_API_KEY": "${input:perplexity-key}"
      }
    },
    "Fetch": {
      "type": "stdio",
      "command": "uvx",
      "args": ["mcp-server-fetch"]
    },
    "RemoteServer": {
      "type": "sse",
      "url": "http://api.contoso.com/sse",
      "headers": {"VERSION": "1.2"}
    }
  }
}

Using VSCode MCP Tools in Agent Mode

Once you've configured your MCP servers, you can use their tools in Copilot's agent mode:

  1. Open the Chat view (Windows, Linux: Ctrl+Alt+I, Mac: ⌃⌘I)
  2. Select "Agent" mode from the dropdown
  3. Click the "Tools" button to view available tools
  4. Select or deselect tools as needed
  5. Enter your prompt in the chat input

When a tool is invoked, you'll need to confirm the action before it runs. You can configure VSCode to automatically confirm specific tools for the current session, workspace, or all future invocations using the "Continue" button dropdown.

Managing VSCode MCP Servers and Tools

Viewing and Managing Servers

Run the MCP: List Servers command from the Command Palette to view your configured MCP servers. From this view, you can:

Direct Tool References in VSCode MCP Server

You can directly reference a tool in your prompt by typing # followed by the tool name. This works in all chat modes (ask, edit, and agent mode).

Command-line Configuration for VSCode MCP Server

You can add MCP servers using the VSCode command line:

code --add-mcp "{\"name\":\"my-server\",\"command\":\"uvx\",\"args\":[\"mcp-server-fetch\"]}"

Troubleshooting VSCode MCP Server Issues

When VSCode encounters MCP server issues, it displays an error indicator in the Chat view. To diagnose problems:

  1. Click the error notification in the Chat view
  2. Select "Show Output" to view server logs
  3. Alternatively, run MCP: List Servers from the Command Palette, select the server, and choose "Show Output"

Common issues include:

Creating Your Own VSCode MCP Server

If you want to develop your own MCP server, you can use any programming language capable of handling stdout. Several official SDKs are available:

Your server should implement the MCP standard which defines how tools are discovered, invoked, and how responses are formatted.

VSCode MCP Server Auto-Discovery and Integration

VSCode can automatically detect and reuse MCP servers defined in other tools, such as Claude Desktop. You can enable auto-discovery with the chat.mcp.discovery.enabled setting in your VSCode settings.

FAQ: Common Questions about VSCode MCP Server

Can I control which MCP tools are used?

Yes, you can toggle specific tools on/off in the Agent mode interface, directly reference tools with the # prefix in your prompts, or use .github/copilot-instructions.md for more advanced control.

Are MCP servers secure?

VSCode implements security measures such as requiring confirmation before running tools and securely storing sensitive inputs like API keys. However, you should only use MCP servers from trusted sources.

Can I use MCP servers with other AI assistants?

MCP is an open standard designed to work with multiple AI models. While VSCode currently integrates it with GitHub Copilot, the protocol is compatible with other AI systems that support the standard.

Conclusion: Maximizing VSCode MCP Server Potential

MCP servers significantly extend the capabilities of AI assistants in VSCode by providing standardized access to external tools and services. By following this guide, you can now:

The Model Context Protocol is still evolving, with a growing ecosystem of servers and tools available for integration with your projects. By mastering VSCode MCP servers, you're positioning yourself at the forefront of AI-assisted development, enabling more powerful and efficient coding workflows.

Keep exploring the MCP ecosystem and experiment with different servers to find the tools that best enhance your development process. With proper configuration and understanding of the protocol, you can transform your AI assistant into a truly powerful coding partner.

Explore more

Kong Pricing 2025 Explained, and 8 Kong Alternatives to Consider

Kong Pricing 2025 Explained, and 8 Kong Alternatives to Consider

The role of an API gateway is paramount. It acts as the central nervous system for managing, securing, and scaling API traffic. Kong, a dominant player in this space, offers a powerful and flexible solution. However, understanding its pricing structure and how it stacks up against the competition is crucial for any organization looking to make an informed decision. This comprehensive article delves into the intricacies of Kong's pricing and explores the top eight alternatives, offering a detaile

7 June 2025

How to Extract Data from APIs for Data Pipelines using Python

How to Extract Data from APIs for Data Pipelines using Python

Application Programming Interfaces (APIs) have emerged as the linchpins of modern data architecture. They are the conduits through which applications communicate and exchange information, making them an invaluable resource for building robust and dynamic data pipelines. The ability to effectively extract data from APIs using a versatile language like Python is a cornerstone skill for any data engineer, data scientist, or analyst. This article will delve into the intricacies of this process, prov

7 June 2025

Top 10 Best Web Scraping APIs for Developers in 2025

Top 10 Best Web Scraping APIs for Developers in 2025

In the digital gold rush of the 21st century, data is the new currency. From market analysis and price monitoring to lead generation and machine learning model training, the ability to harvest information from the web is a critical advantage. However, the modern web is a complex and often hostile environment for data extraction. Websites employ sophisticated anti-bot measures, dynamic JavaScript-heavy interfaces, and ever-changing layouts, making traditional web scraping a Sisyphean task. This i

7 June 2025

Practice API Design-first in Apidog

Discover an easier way to build and use APIs