MCP Directory

title: "MCPs in VSCode – Complete Setup Guide" description: "Comprehensive guide for integrating MCP servers with Visual Studio Code for enhanced AI development." slug: "vscode-integration" category: "ide" updatedAt: "2025-09-21T00:00:00.000Z" faqs:

  • q: "Does VSCode support MCP servers natively?" a: "VSCode requires extensions or configuration to work with MCP servers. Several community extensions are available."
  • q: "Can I use multiple MCP servers in VSCode simultaneously?" a: "Yes, you can configure multiple MCP servers to work together in VSCode through proper configuration."
IDEs
MCP SDK v2.1.0
Updated Sep 21, 20254 min read
vscode
visual studio code
integration
extension

MCPs in VSCode – Complete Setup Guide

Overview

Visual Studio Code can be enhanced with Model Context Protocol servers to provide powerful AI-assisted development capabilities. This guide covers installation, configuration, and usage.

Requirements

  • Visual Studio Code (latest version)
  • Node.js 18+ or Python 3.8+
  • MCP Extension for VSCode
  • Basic familiarity with VSCode settings

Installation

Step 1: Install MCP Extension

  1. Open VSCode
  2. Go to Extensions (Ctrl+Shift+X)
  3. Search for "Model Context Protocol"
  4. Install the official MCP extension

Step 2: Install MCP Servers

# Install filesystem MCP server
npm install -g @modelcontextprotocol/server-filesystem

# Install GitHub MCP server
npm install -g @modelcontextprotocol/server-github

Configuration

VSCode Settings

Add MCP configuration to your VSCode settings:

{
  "mcp.servers": {
    "filesystem": {
      "command": "mcp-server-filesystem",
      "args": ["--root", "${workspaceFolder}"],
      "env": {
        "NODE_ENV": "development"
      }
    },
    "github": {
      "command": "mcp-server-github",
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "${env:GITHUB_TOKEN}"
      }
    }
  },
  "mcp.autoStart": true,
  "mcp.logLevel": "info"
}

Workspace Configuration

For project-specific settings, create .vscode/settings.json:

{
  "mcp.servers": {
    "project-specific": {
      "command": "node",
      "args": ["./scripts/mcp-server.js"],
      "cwd": "${workspaceFolder}"
    }
  }
}

Usage

Command Palette

Access MCP features through the Command Palette (Ctrl+Shift+P):

  • MCP: Start Server
  • MCP: Stop Server
  • MCP: Restart Server
  • MCP: Show Logs

AI Assistant Integration

Once configured, MCP tools are available in:

  • GitHub Copilot Chat
  • Code completion suggestions
  • Inline AI assistance

Common Tasks

File Operations

// Ask AI to perform file operations
"Create a new component file with TypeScript interfaces"
"Refactor this function into separate modules"
"Generate unit tests for this class"

Git Integration

// Git operations through MCP
"Show me recent commits affecting this file"
"Create a pull request for current changes"
"Check code review status"

Troubleshooting

Extension Not Loading

  1. Check VSCode version compatibility
  2. Restart VSCode after installation
  3. Check extension logs in Output panel

Server Connection Issues

  1. Verify server installation
  2. Check environment variables
  3. Review server logs

Related Guides

FAQ

Does VSCode support MCP servers natively?

VSCode relies on extensions or custom configuration to load MCP servers. Install an MCP controller extension and point it to your server manifest.

Can I use multiple MCP servers in VSCode simultaneously?

Yes. Configure each server in the MCP extension settings and enable them together for richer AI context.

Was this guide helpful?

Last updated: September 21, 2025

Edit this page: vscode-integration/page.mdx