How to Set Up VS Code MCP Server (2026)

How to Set Up VS Code MCP Server (2026)

Visual Studio Code now supports the Model Context Protocol (MCP), bringing the same extensibility that made Claude Code and Claude Desktop powerful into the world's most popular code editor. With MCP servers, you can connect AI assistants in VS Code to databases, APIs, file systems, and custom tools -- giving your AI coding assistant superpowers beyond simple code completion.

This guide walks you through setting up MCP servers in VS Code, configuring popular servers, and building your own.

What Is MCP in VS Code?

The Model Context Protocol (MCP) is an open standard for connecting AI models to external tools and data sources. VS Code adopted MCP support in early 2026, allowing extensions like GitHub Copilot, Continue.dev, and Cline to use MCP servers for enhanced capabilities.

Without MCP	With MCP
AI only sees open files	AI can query databases, APIs, docs
Manual copy-paste of context	Automatic context retrieval
Limited to code completion	Can run tools, fetch data, search repos
Static knowledge	Dynamic, real-time information

Prerequisites

• VS Code version 1.99 or later (MCP support was added in early 2026).
• Node.js 18+ for running JavaScript/TypeScript MCP servers.
• Python 3.10+ for running Python MCP servers (optional).
• An AI extension that supports MCP: GitHub Copilot, Continue.dev, Cline, or Roo Code.

Method 1: VS Code Native MCP Configuration

VS Code supports MCP servers natively through its settings. This works with GitHub Copilot and other extensions that integrate with VS Code's MCP API.

Step 1: Open MCP Settings

Open your VS Code settings (Cmd+, on Mac, Ctrl+, on Windows/Linux) and search for "mcp" or directly edit settings.json:

{
  "mcp.servers": {
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/path/to/your/project"]
    }
  }
}

Step 2: Verify the Server

Open the Command Palette (Cmd+Shift+P) and run:

MCP: List Servers

You should see your configured server listed with its status.

Project-Level Configuration

For project-specific MCP servers, create a .vscode/mcp.json file in your project root:

{
  "servers": {
    "project-db": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-sqlite", "--db-path", "./database.sqlite"]
    },
    "project-docs": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "./docs"]
    }
  }
}

This file can be committed to version control so your entire team gets the same MCP configuration.

Method 2: Using Continue.dev with MCP

Continue.dev is a popular open-source AI extension that has excellent MCP support.

Step 1: Install Continue

code --install-extension continue.continue

Or search "Continue" in the VS Code Extensions panel.

Step 2: Configure MCP Servers

Edit ~/.continue/config.yaml (or the project-level .continue/config.yaml):

mcpServers:
  - name: filesystem
    command: npx
    args:
      - "-y"
      - "@modelcontextprotocol/server-filesystem"
      - "/path/to/project"

  - name: github
    command: npx
    args:
      - "-y"
      - "@modelcontextprotocol/server-github"
    env:
      GITHUB_TOKEN: "ghp_your_token"

  - name: postgres
    command: npx
    args:
      - "-y"
      - "@modelcontextprotocol/server-postgres"
      - "postgresql://user:pass@localhost:5432/mydb"

Step 3: Use MCP Tools in Chat

Open Continue's chat panel (Cmd+L) and ask questions that leverage MCP tools:

Search the GitHub repository for all open issues labeled "bug"

Query the database for users who signed up in the last 7 days

Continue will automatically use the appropriate MCP tool to fulfill the request.

Method 3: Using Cline with MCP

Cline is another popular VS Code extension with deep MCP integration and agentic capabilities.

Step 1: Install Cline

code --install-extension saoudrizwan.claude-dev

Step 2: Configure MCP Servers

Cline reads its MCP configuration from the VS Code settings or its own settings file. Open Cline's settings panel and navigate to the MCP section, or add to your VS Code settings.json:

{
  "cline.mcpServers": {
    "brave-search": {
      "command": "npx",
      "args": ["-y", "@anthropic-ai/brave-search-mcp"],
      "env": {
        "BRAVE_API_KEY": "your-brave-api-key"
      }
    },
    "memory": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-memory"]
    }
  }
}

Popular MCP Servers for VS Code

Here are the most useful MCP servers for development workflows:

1. Filesystem Server

Gives AI access to read and write files in specified directories.

{
  "filesystem": {
    "command": "npx",
    "args": ["-y", "@modelcontextprotocol/server-filesystem", "/path/to/project"]
  }
}

Use case: Let AI read configuration files, documentation, or code in directories outside the workspace.

2. GitHub Server

Access GitHub repositories, issues, pull requests, and code search.

{
  "github": {
    "command": "npx",
    "args": ["-y", "@modelcontextprotocol/server-github"],
    "env": {
      "GITHUB_TOKEN": "ghp_your_token"
    }
  }
}

Use case: "Find all PRs that modified the auth module in the last month."

3. PostgreSQL / SQLite Server

Query your database directly from the AI chat.

{
  "postgres": {
    "command": "npx",
    "args": ["-y", "@modelcontextprotocol/server-postgres", "postgresql://localhost:5432/mydb"]
  }
}

Use case: "Show me the schema for the users table" or "How many orders were placed yesterday?"

4. Brave Search Server

Web search from within your AI assistant.

{
  "brave-search": {
    "command": "npx",
    "args": ["-y", "@anthropic-ai/brave-search-mcp"],
    "env": {
      "BRAVE_API_KEY": "your-key"
    }
  }
}

Use case: "Search for the latest React 19 migration guide."

5. Memory Server

Persistent memory that survives across sessions.

{
  "memory": {
    "command": "npx",
    "args": ["-y", "@modelcontextprotocol/server-memory"]
  }
}

Use case: "Remember that our API uses snake_case for all endpoints" -- the AI will recall this in future sessions.

6. Puppeteer / Browser Server

Control a headless browser for testing and scraping.

{
  "puppeteer": {
    "command": "npx",
    "args": ["-y", "@anthropic-ai/puppeteer-mcp"]
  }
}

Use case: "Open localhost:3000 and take a screenshot of the dashboard page."

Server Comparison Table

Server	Primary Use	Setup Difficulty	Free
Filesystem	File access	Easy	Yes
GitHub	Repo management	Easy	Yes
PostgreSQL	Database queries	Easy	Yes
SQLite	Local DB queries	Easy	Yes
Brave Search	Web search	Easy	Free tier
Memory	Persistent context	Easy	Yes
Puppeteer	Browser control	Medium	Yes
Slack	Team communication	Medium	Yes
Linear	Issue tracking	Medium	Yes

Building a Custom MCP Server for VS Code

Sometimes the existing servers do not cover your use case. Here is how to build a custom one.

Example: API Documentation Server

This server provides your AI with access to your project's API documentation:

// api-docs-mcp/index.js
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import { z } from "zod";
import fs from "fs";
import path from "path";

const server = new McpServer({
  name: "api-docs",
  version: "1.0.0",
});

const DOCS_DIR = process.env.DOCS_DIR || "./docs/api";

// Tool: Search API documentation
server.tool(
  "search_api_docs",
  "Search the API documentation for endpoints, parameters, or concepts",
  {
    query: z.string().describe("Search term or endpoint path"),
  },
  async ({ query }) => {
    const files = fs.readdirSync(DOCS_DIR).filter(f => f.endsWith(".md"));
    const results = [];

    for (const file of files) {
      const content = fs.readFileSync(path.join(DOCS_DIR, file), "utf-8");
      if (content.toLowerCase().includes(query.toLowerCase())) {
        results.push({ file, content: content.substring(0, 2000) });
      }
    }

    if (results.length === 0) {
      return { content: [{ type: "text", text: "No matching documentation found." }] };
    }

    const text = results.map(r => `## ${r.file}\n${r.content}`).join("\n\n---\n\n");
    return { content: [{ type: "text", text }] };
  }
);

// Tool: List all API endpoints
server.tool(
  "list_api_endpoints",
  "List all documented API endpoints",
  {},
  async () => {
    const files = fs.readdirSync(DOCS_DIR).filter(f => f.endsWith(".md"));
    const endpoints = [];

    for (const file of files) {
      const content = fs.readFileSync(path.join(DOCS_DIR, file), "utf-8");
      const matches = content.match(/^##\s+(GET|POST|PUT|DELETE|PATCH)\s+(.+)$/gm);
      if (matches) {
        endpoints.push(...matches.map(m => m.replace("## ", "")));
      }
    }

    return {
      content: [{ type: "text", text: endpoints.join("\n") || "No endpoints found." }],
    };
  }
);

// Resource: Full API documentation
server.resource(
  "docs://api/full",
  "Complete API documentation",
  async () => {
    const files = fs.readdirSync(DOCS_DIR).filter(f => f.endsWith(".md"));
    const fullDocs = files
      .map(f => fs.readFileSync(path.join(DOCS_DIR, f), "utf-8"))
      .join("\n\n---\n\n");

    return { content: [{ type: "text", text: fullDocs }] };
  }
);

const transport = new StdioServerTransport();
await server.connect(transport);

Initialize the project:

mkdir api-docs-mcp && cd api-docs-mcp
npm init -y
npm install @modelcontextprotocol/sdk zod

Add "type": "module" to package.json, then register in VS Code:

{
  "api-docs": {
    "command": "node",
    "args": ["/path/to/api-docs-mcp/index.js"],
    "env": {
      "DOCS_DIR": "/path/to/your/project/docs/api"
    }
  }
}

Troubleshooting

Issue	Solution
Server not appearing	Restart VS Code. Check for JSON syntax errors in config.
"Command not found"	Ensure Node.js is in your PATH. Try using full path to npx.
Server crashes on start	Run the server command manually in terminal to see error output.
Tools not available in chat	Verify your AI extension supports MCP. Check extension settings.
Slow server responses	Some servers (like database) depend on external services. Check connectivity.
Environment variables not set	Use the env field in the MCP config, not system env vars.

Best Practices

1. Use project-level config. Put .vscode/mcp.json in your repo so the team shares the same setup.
2. Limit file access. Only give the filesystem server access to directories it needs.
3. Secure credentials. Use environment variables for API keys, never hardcode them.
4. Start with official servers. The @modelcontextprotocol/server-* packages are well-tested.
5. Test in terminal first. Run MCP servers standalone before connecting to VS Code.

Wrapping Up

MCP support in VS Code transforms AI coding assistants from simple autocomplete tools into intelligent agents that can query databases, search documentation, manage repositories, and interact with your entire development stack. The setup takes minutes, and the productivity gains are substantial.

If your development workflow involves AI-generated media like images, video, or avatars, try Hypereal AI free -- 35 credits, no credit card required. Its REST API integrates easily with any MCP server or VS Code extension for media generation during development.