VS Code and Copilot MCP Setup

Introduction

Visual Studio Code has built-in support for MCP servers through GitHub Copilot's agent mode. This means you can connect any MCP server to your editor and use AI-powered tools directly in your development workflow, from querying databases to managing files to running custom operations.

This tutorial walks you through configuring MCP servers in VS Code, using them with Copilot Chat, and building productive AI-assisted workflows. For background on MCP, see our What is MCP tutorial.

Prerequisites

Before starting, ensure you have:

• VS Code 1.99 or later (MCP support was added in this version)
• GitHub Copilot extension installed and signed in
• An MCP server ready to connect (see building your first MCP server or Python MCP server)

Configuring MCP Servers in VS Code

Method 1: Workspace Settings (Recommended)

Create a .vscode/mcp.json file in your project root:

{
  "servers": {
    "my-file-server": {
      "command": "node",
      "args": ["./mcp-servers/file-server.js"],
      "env": {
        "WORKSPACE_DIR": "${workspaceFolder}"
      }
    },
    "python-tools": {
      "command": "python",
      "args": ["./mcp-servers/tools_server.py"],
      "env": {
        "DATA_PATH": "${workspaceFolder}/data"
      }
    }
  }
}

This approach keeps MCP configuration scoped to your project, making it easy to share with team members.

Method 2: User Settings

For servers you want available across all projects, add them to your VS Code user settings (settings.json):

{
  "mcp": {
    "servers": {
      "global-utils": {
        "command": "npx",
        "args": ["@modelcontextprotocol/server-filesystem", "/home/user/documents"]
      }
    }
  }
}

Method 3: Command Palette

1. Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
2. Search for "MCP: Add Server"
3. Follow the prompts to configure your server

Connecting to Different Server Types

Local stdio Servers

Most MCP servers use stdio transport for local communication:

{
  "servers": {
    "filesystem": {
      "command": "npx",
      "args": ["@modelcontextprotocol/server-filesystem", "/path/to/directory"]
    },
    "database": {
      "command": "python",
      "args": ["/path/to/db_server.py"],
      "env": {
        "DATABASE_URL": "postgresql://localhost/mydb"
      }
    }
  }
}

Remote Streamable HTTP Servers

For remote MCP servers deployed with Streamable HTTP transport:

{
  "servers": {
    "remote-tools": {
      "url": "https://your-mcp-server.example.com/mcp",
      "headers": {
        "Authorization": "Bearer your-token-here"
      }
    }
  }
}

Docker-Based Servers

Run MCP servers in Docker containers:

{
  "servers": {
    "docker-server": {
      "command": "docker",
      "args": ["run", "-i", "--rm", "my-mcp-server:latest"]
    }
  }
}

Using MCP Tools with Copilot Chat

Agent Mode

Once configured, MCP tools are available in Copilot Chat's Agent mode:

1. Open Copilot Chat (Ctrl+Shift+I / Cmd+Shift+I)
2. Switch to Agent mode using the dropdown at the top
3. Ask questions that involve your MCP tools

For example, if you have a database MCP server connected:

User: Query the users table and show me the top 10 most active users
Copilot: [Uses the database MCP tool to run the query and display results]

Tool Approval

By default, VS Code asks for approval before executing MCP tools. You can:

• Approve once for the current session
• Always allow for trusted tools
• Deny if the operation looks wrong

This aligns with MCP security best practices.

Viewing Available Tools

To see what MCP tools are available:

1. Open the Command Palette
2. Search for "MCP: List Servers"
3. View connected servers and their available tools

Practical Workflows

Workflow 1: Database-Assisted Development

{
  "servers": {
    "postgres": {
      "command": "npx",
      "args": ["@modelcontextprotocol/server-postgres", "postgresql://localhost/devdb"]
    }
  }
}

Now you can ask Copilot:

• "Show me the schema of the orders table"
• "Write a migration to add an email column to users"
• "Find all orders placed in the last 24 hours"

Workflow 2: File System Operations

{
  "servers": {
    "files": {
      "command": "npx",
      "args": ["@modelcontextprotocol/server-filesystem", "${workspaceFolder}"]
    }
  }
}

Ask Copilot:

• "Find all TODO comments in the project"
• "List all TypeScript files that import React"
• "Show me the project structure"

Workflow 3: Custom Project Tools

Build a project-specific MCP server with tools tailored to your workflow:

from mcp.server.fastmcp import FastMCP

mcp = FastMCP("project-tools")

@mcp.tool()
def run_tests(test_path: str = "") -> str:
    """Run project tests.

    Args:
        test_path: Specific test file or directory to run
    """
    import subprocess
    cmd = ["pytest", test_path] if test_path else ["pytest"]
    result = subprocess.run(cmd, capture_output=True, text=True)
    return result.stdout + result.stderr

@mcp.tool()
def check_lint(file_path: str = "") -> str:
    """Run linter on project files.

    Args:
        file_path: Specific file to lint
    """
    import subprocess
    cmd = ["ruff", "check", file_path] if file_path else ["ruff", "check", "."]
    result = subprocess.run(cmd, capture_output=True, text=True)
    return result.stdout + result.stderr

if __name__ == "__main__":
    mcp.run()

Then configure in .vscode/mcp.json:

{
  "servers": {
    "project-tools": {
      "command": "python",
      "args": ["${workspaceFolder}/tools/project_server.py"]
    }
  }
}

Managing Multiple Servers

Server Lifecycle

VS Code manages MCP server lifecycle automatically:

• Starts servers when needed (on first tool request or at workspace open)
• Restarts servers if they crash
• Stops servers when you close the workspace

Monitoring Servers

Check server status in the Output panel:

1. Open Output panel (Ctrl+Shift+U)
2. Select "MCP" from the dropdown
3. View connection logs and errors

Disabling Servers Temporarily

To disable a server without removing its configuration:

{
  "servers": {
    "my-server": {
      "command": "node",
      "args": ["./server.js"],
      "disabled": true
    }
  }
}

Team Collaboration

Sharing MCP Configurations

Since .vscode/mcp.json is a workspace file, you can commit it to your repository:

git add .vscode/mcp.json
git commit -m "Add MCP server configuration for team"

Use VS Code variables for portability:

• ${workspaceFolder} for project-relative paths
• Environment variables for secrets (never commit tokens)

Environment-Specific Configuration

Use .env files for secrets and environment-specific values:

{
  "servers": {
    "api-server": {
      "command": "node",
      "args": ["./api-server.js"],
      "env": {
        "API_KEY": "${env:MY_API_KEY}"
      }
    }
  }
}

Troubleshooting VS Code MCP

Server Not Starting

1. Check the Output panel for error messages
2. Verify the command exists and is in your PATH
3. Test the server manually in a terminal first
4. Ensure all environment variables are set

Tools Not Appearing in Copilot

1. Confirm you are in Agent mode in Copilot Chat
2. Check that the server is running (MCP: List Servers)
3. Restart the MCP server from the Command Palette
4. Verify your VS Code version is 1.99+

Performance Issues

If MCP tools are slow:

• Check the server for performance bottlenecks
• Consider using async tools for long operations
• Review performance optimization strategies

Conclusion

VS Code's native MCP support through GitHub Copilot makes it easy to enhance your editor with AI-powered tools. By configuring MCP servers in your workspace, you can create powerful development workflows that combine Copilot's intelligence with custom tools tailored to your project.

For more on building MCP servers to use with VS Code, check out our first MCP server tutorial or explore the full clients directory for detailed VS Code integration documentation.