Skip to main content
← Back to Blog

How to Use MCP Servers with Claude Code in VS Code

I've been using Claude Code in VS Code for a few months now, and the single biggest upgrade to my workflow has been setting up MCP servers. If you're not using them yet, you're missing out on what makes Claude genuinely useful for real development work.

Let me show you how to set this up, with a practical example that'll make an immediate difference.

The Problem MCP Solves

Here's a scenario you've probably encountered: You ask Claude about setting up authentication in Next.js 15, and it gives you an answer using patterns from Next.js 13. Or you ask about a library's API, and the response references methods that were deprecated six months ago.

This happens because Claude's knowledge has a cutoff date. It doesn't know about the bug fix released last week or the new API added in the latest version.

MCP (Model Context Protocol) fixes this by letting Claude talk to external services in real-time. Instead of relying solely on training data, Claude can query live documentation, check your actual database schema, or read files from your project.

How MCP Actually Works

The architecture is straightforward:

  1. You configure MCP servers in a JSON file
  2. Claude Code connects to those servers when it starts up
  3. When relevant, Claude calls tools provided by those servers
  4. The server fetches live data and returns it to Claude

Each MCP server exposes specific "tools" that Claude can use. For example, a documentation server might expose query-docs and search-library. A database server might expose run-query and list-tables.

The key insight: MCP servers run locally on your machine. Your data doesn't go to some third-party service—the server makes the external API calls and returns the results to Claude.

Setting Up Your First MCP Server

Let's start with something immediately useful: Context7, an MCP server that gives Claude access to up-to-date documentation for any programming library.

Step 1: Create the Config File

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

{
  "mcpServers": {
    "context7": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@upstash/context7-mcp",
        "--api-key",
        "YOUR_CONTEXT7_API_KEY"
      ]
    }
  }
}

You'll need to get an API key from Context7 first. Replace YOUR_CONTEXT7_API_KEY with your actual key.

Step 2: Restart Claude Code

After saving the file, restart Claude Code in VS Code. You should see the MCP server connect in the output.

Step 3: Verify It's Working

Type /mcp in Claude Code. You should see something like:

MCP Servers:
✓ context7 - Connected (Select context7 -> View tools)
  - resolve-library-id
  - query-docs

If you see that checkmark, you're good to go.

Context7 in Action

Now when you ask Claude about a library, it automatically queries the current documentation. Here's what that looks like in practice:

Me: "How do I use the useActionState hook in React 19?"

What Claude does behind the scenes:

  1. Calls resolve-library-id to find React's documentation
  2. Calls query-docs with my specific question
  3. Gets back the actual React 19 docs (not the training data from months ago)
  4. Answers using current information

The result: I get an accurate answer about a hook that was renamed from useFormState to useActionState—something Claude's training data might not reflect.

Adding More MCP Servers

Once you see how useful Context7 is, you'll want to add more servers. Here's my current setup:

{
  "mcpServers": {
    "context7": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@upstash/context7-mcp",
        "--api-key",
        "YOUR_CONTEXT7_API_KEY"
      ]
    },
    "filesystem": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "/Users/shoaib/projects"
      ]
    },
    "github": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_TOKEN": "${GITHUB_TOKEN}"
      }
    }
  }
}

What Each Server Does

Filesystem server: Lets Claude read files outside your current workspace. Useful when you need to reference code from another project or check a config file in a different directory.

GitHub server: Claude can create issues, read PR comments, and interact with repositories. I use this for things like "Create an issue for this bug I just found" without leaving my editor.

PostgreSQL server (not shown): If you work with databases, this is invaluable. Claude can check your actual schema, run queries to understand your data, and generate migrations that match your existing structure.

Troubleshooting Common Issues

"Command not found" errors

This usually means npm/npx isn't in your PATH. Try running the npx command manually in your terminal to see the actual error:

npx -y @upstash/context7-mcp --api-key YOUR_CONTEXT7_API_KEY

Server connects but tools don't work

Check the VS Code Output panel (select "Claude Code" from the dropdown). MCP server errors show up there. Most often it's a permissions issue or missing environment variable.

Server doesn't appear in /mcp output

Make sure your .mcp.json is in the project root (the folder you opened in VS Code). Also check the JSON syntax—a missing comma will silently fail.

Security Considerations

A few things to keep in mind:

Scope your access narrowly. Don't give the filesystem server access to your entire home directory. Point it at specific project folders.

// Good
"/Users/me/projects/my-app"

// Bad
"/Users/me"

Use environment variables for secrets. Never hardcode API tokens or database passwords in your .mcp.json:

{
  "env": {
    "DATABASE_URL": "${DATABASE_URL}",
    "GITHUB_TOKEN": "${GITHUB_TOKEN}"
  }
}

Review what you're installing. MCP servers are npm packages. Before adding a new one, check its GitHub repo and see who maintains it.

My Honest Take

MCP isn't magic. It won't suddenly make Claude write perfect code. But it removes a significant friction point: the constant need to copy-paste context from documentation, database schemas, and other files.

The Context7 integration alone has saved me from countless "why doesn't this work?" moments where Claude gave me outdated syntax. Worth the five minutes of setup.

If you try one thing from this post, make it Context7. Then expand from there based on what you actually need.

Resources