MCP Servers: How to Connect Claude Code to External Tools

Your AI coding assistant is smart, but blind. It can write code, refactor functions, and explain complex logic. It just can’t see your project files outside the editor, check your GitHub PRs, read library docs, or run a Lighthouse audit. Every time you need it to work with external data, you copy-paste.

MCP (Model Context Protocol) fixes that. It’s an open standard that lets AI assistants connect to external tools and data sources through MCP servers. Each server adds a capability: file access, API integration, browser control, live documentation.

Think of MCP like a USB-C port for AI applications. Just as USB-C provides a standardized way to connect electronic devices, MCP provides a standardized way to connect AI applications to external systems.

– modelcontextprotocol.io

This guide walks you through connecting 4 MCP servers to Claude Code. By the end, your AI assistant will be able to read files across your system, pull live docs for any library, interact with GitHub, and run Lighthouse audits, all from a single chat interface. Cursor and VS Code both support MCP directly, and the same concepts carry over even though the config format differs.

Prerequisites

Before you start, make sure you have these installed:

• Claude Code installed and authenticated
• Node.js 18+ (for npx-based servers)
• A GitHub account with a personal access token (for the GitHub server)
• Chrome browser (for the DevTools server)

MCP server configs live in ~/.claude.json under the mcpServers key. You can also add them per-project using claude mcp add. Every config in this guide uses the global file so the servers are available in all your projects.

Before and After

Here’s what changes once you connect MCP servers:

Four servers. Four capabilities your assistant didn’t have before. Let’s set them up, starting with the simplest.

Server 1: Filesystem

The Filesystem MCP server gives your AI assistant access to read and write files outside the current project directory. Claude Code can already access files within the project it’s running in. This server extends that reach to other directories you specify, such as server configs, logs, other repos, and shared assets.

Add this to your ~/.claude.json file:

{
  "mcpServers": {
    "filesystem": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "/etc/nginx",
        "/var/log"
      ]
    }
  }
}

The last arguments are the directories the server is allowed to access. It will refuse to read or write anything outside those paths. Add as many as you need. Just list them as additional arguments.

You can also add it via the CLI:

claude mcp add --scope user filesystem -- npx -y @modelcontextprotocol/server-filesystem /etc/nginx /var/log

Practical example

You’re debugging a WordPress site that returns 502 errors. The theme code lives in your project, but the nginx config and PHP-FPM logs live elsewhere. With the Filesystem server pointed at those paths, you can ask Claude Code:

“Check the nginx config at /etc/nginx/sites-available/default and cross-reference it with the PHP-FPM error log. What’s causing the 502?”

Claude Code reads both files directly and correlates the errors. No more copy-pasting log snippets into chat.

Server 2: Context7

Context7 pulls live, up-to-date documentation for any library or framework. When you ask Claude Code about a library’s API, it fetches the current docs instead of relying on training data that might be outdated.

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

That’s it. No API key required for basic usage. For higher rate limits, grab a free key at context7.com and add --api-key and your key to the args array.

Practical example

You’re integrating a WooCommerce payment gateway and need to know the current hook signature for woocommerce_payment_complete. The WooCommerce docs are sprawling, and you’re not sure if the hook changed in a recent version.

Ask Claude Code: “What’s the current signature for the woocommerce_payment_complete action hook? Use context7 to check.”

Context7 pulls the live WooCommerce documentation, and Claude gives you the exact signature with parameters. Current as of today, not whenever the model was last trained.

Server 3: GitHub

The GitHub MCP server connects your AI assistant to the GitHub API. It can read and create issues, review pull requests, check CI status, browse repository contents, and manage branches.

This server is maintained by GitHub and connects as a remote HTTP server. No Docker or npx needed:

claude mcp add --transport http github https://api.githubcopilot.com/mcp/ --header "Authorization: Bearer YOUR_GITHUB_PAT"

Replace YOUR_GITHUB_PAT with your actual token (or better, reference an environment variable). You can also add it to your ~/.claude.json directly:

{
  "mcpServers": {
    "github": {
      "type": "http",
      "url": "https://api.githubcopilot.com/mcp/",
      "headers": {
        "Authorization": "Bearer YOUR_GITHUB_PAT"
      }
    }
  }
}

If you prefer running the server locally, GitHub also provides a Docker image (ghcr.io/github/github-mcp-server) as a fallback.

Practical example

It’s Monday morning. You want a summary of all open PRs on your repo, who’s assigned, and which ones have failing CI. One prompt:

“List all open PRs on my-org/my-repo. Show the author, CI status, and how old each one is.”

Claude Code queries the GitHub API through the MCP server and returns a formatted summary. No browser tab switching, no manual checking of each PR.

Server 4: Chrome DevTools

The Chrome DevTools MCP server connects your AI assistant to a live Chrome browser. It can navigate pages, run Lighthouse audits, capture screenshots, execute JavaScript, inspect the DOM, and monitor network requests.

{
  "mcpServers": {
    "chrome-devtools": {
      "type": "stdio",
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest", "--headless", "--isolated"]
    }
  }
}

The default config (without flags) opens a visible Chrome window. Adding --headless runs Chrome without a window, and --isolated uses a temporary profile that’s cleaned up automatically. This is the recommended setup for most workflows.

Practical example

Your client says the site feels slow. You point Claude Code at the staging URL:

“Run a Lighthouse performance audit on https://staging.example.com and give me the top 3 things to fix.”

Claude Code launches a headless Chrome instance, runs the full Lighthouse audit, and returns the performance score with actionable recommendations. You never opened a browser.

For a deeper look at everything Chrome DevTools MCP can do, including performance traces, network monitoring, and all 29 available tools, see the full guide: Chrome DevTools MCP Server: Run Lighthouse Audits via Your AI Assistant.

Tips for Managing MCP Servers

Once you have a few servers connected, here are some things worth knowing.

Global vs project-level config

Configs in ~/.claude.json are available in every project. For servers you only need in specific repos, use claude mcp add --scope project instead. The config gets saved to .mcp.json in the project root.

Verify your servers are connected

Run /mcp inside Claude Code to see all connected MCP servers and their status. If a server shows as disconnected, the most common causes are:

• The npx package isn’t installed or cached yet (first run is slower)
• Docker isn’t running (for the GitHub server)
• A required environment variable is missing or invalid
• The server binary crashed on startup (check the error message in the /mcp output)

Be selective about third-party servers

Only install MCP servers from sources you trust. Third-party servers can expose sensitive data or fetch untrusted content, which increases prompt-injection risk. Stick to official repositories and well-maintained open-source projects. Review what a server does before connecting it, especially in projects with client data.

Adding more servers

The four servers in this guide are a starting point. The MCP ecosystem is growing fast. Browse the official registry at github.com/modelcontextprotocol/servers for more options: databases, Slack, Puppeteer, and dozens of others. The config pattern is always the same: a command, arguments, and optional environment variables.

What’s Next: Build Your Own MCP Server

You now know how to connect existing MCP servers to your AI assistant. But what if the server you need doesn’t exist?

In the next post, I’ll walk through building a custom MCP server from scratch. A WordPress MCP server that connects Claude Code directly to your site’s database. Query posts, check option values, inspect user meta, all through natural language.

If connecting servers was about making your assistant see the world, building one is about making it see your world.

FAQs

Common questions about MCP servers and how they work with AI assistants.

Summary

You connected four MCP servers that give Claude Code access to your filesystem, live library documentation, GitHub, and a Chrome browser. Each one removes a manual copy-paste step from your workflow and lets your AI assistant work with real data instead of guessing.

The config pattern is always the same: a command, arguments, and optional environment variables in a JSON file. Once you understand it for one server, you can connect any of the dozens available in the MCP ecosystem.

Next up: building your own MCP server. A WordPress-specific one that gives Claude Code direct access to your site’s data.