How to Add an MCP Server to Claude in VS Code

If you’re using Claude with Visual Studio Code and want to connect external tools like GitHub, databases, Notion, Slack, or your local filesystem, MCP (Model Context Protocol) is the feature you need.

This guide walks through how to add an MCP server to Claude inside VS Code step by step.

What is MCP?

MCP (Model Context Protocol) allows Claude to connect with external tools and services.

With MCP servers, Claude can:

- Read and edit files

- Access GitHub repositories

- Query databases

- Interact with APIs

- Connect to productivity tools

- Automate browser tasks

Prerequisites:

Before starting, make sure you have:

- Node.js installed

- Visual Studio Code installed

- Claude Code CLI access

Step 1: Install Claude Code

Open your terminal and install Claude Code globally:

npm install -g @anthropic-ai/claude-code

After installation, launch Claude once with following command:

claude

Step 2: Add an MCP Server

To add a Local Filesystem MCP Server, run:

claude mcp add filesystem npx @modelcontextprotocol/server-filesystem .

To add an HTTP MCP Server, run:

claude mcp add --transport http myserver https://example.com/mcp

Step 3: Verify MCP Servers

To see all configured MCP servers, run following:

claude mcp list

Inside Claude Code, you can also type:

/mcp

Step 4: Open VS Code

Navigate to your project:

code .

Inside the VS Code terminal, launch Claude:

claude

Step 5: Create a Shared .mcp.json Configuration

Create a file named .mcp.json with the following:

{

  "mcpServers": {

    "filesystem": {

      "command": "npx",

      "args": [

        "@modelcontextprotocol/server-filesystem",

        "."

      ]

    }

  }

}

Popular MCP Servers Developers Use

- Filesystem

- GitHub

- PostgreSQL

- Notion

- Slack

- Puppeteer

- Docker

- Jira

Example: Add GitHub MCP Server

claude mcp add github npx @modelcontextprotocol/server-github

Troubleshooting

If MCP servers are not showing, restart Claude:

exit

claude

Then verify again:

claude mcp list

Final Thoughts

MCP transforms Claude from a standalone AI assistant into a fully integrated development companion. Once connected, Claude can work directly with your files, repositories, databases, and developer tools — all from inside VS Code.

Cheers,

Kapil