Claude Code MCP Servers: Connect AI to Your Tools

Most MCP guides read like protocol specs. Here's a JSON config, here's what the acronym stands for, good luck. That's not useful. What's useful: MCP turns Claude Code from a coding tool into a general-purpose automation platform that can talk to basically any service you already use.

I've taught over 100 people Claude Code at this point. The MCP moment is consistently where jaws drop. One student bolted Gmail, Google Calendar, and Slack onto Claude Code and built an automated outreach system in a single afternoon. That's work that would've taken a developer weeks to wire up the traditional way.

What MCP Actually Is

MCP stands for Model Context Protocol. Anthropic created it as an open standard that lets AI models connect to external tools through one unified interface. Think USB for AI. One standard, any tool, no custom integration code.

Before MCP, getting Claude Code to interact with your database meant copy-pasting query results into the chat. Checking GitHub issues meant describing them by hand. MCP kills all of that. With an MCP server running, Claude Code can query your database, read GitHub issues, pull Figma designs, fire off Slack messages, and more. All in the same conversation where it's writing your code.

The thing most people get wrong: MCP servers aren't plugins you install into Claude Code. They're small programs running on your machine (or remotely) that expose capabilities through a standardized protocol. Claude Code connects to them and figures out what tools are available. Anyone can build an MCP server for any service. The ecosystem is growing fast.

How MCP Works in Claude Code

The architecture is simple:

1. You configure MCP servers in a JSON file (project-level or global)
2. When Claude Code starts, it connects to those servers and discovers available tools
3. During your conversation, Claude Code calls those tools when they're relevant
4. The tools execute and return results that Claude folds into its responses

You don't need to say "use the database MCP." Claude already knows the tools exist. Ask it to "check what tables exist in our database" and it'll reach for the database MCP server on its own. Ask it to "look at the Figma design for the homepage" and it'll pull it through the Figma MCP. No hand-holding required.

The MCP Servers That Actually Matter

There are hundreds of MCP servers floating around. Most are experiments or toy demos. Here are the ones I've seen produce real value in my classes and my own work:

Playwright (Browser Automation)

Probably the single most useful MCP server. It gives Claude Code a real web browser it can control. Navigate pages, take screenshots, click buttons, fill forms, verify your UI actually looks right. I use this constantly. After Claude makes a frontend change, it takes a screenshot and checks its own work before telling me it's done. That feedback loop is gold.

Figma

The Figma MCP server lets Claude Code read your Figma designs directly. Instead of describing your mockup or pasting screenshots, you point Claude at a Figma file and say "build this." It reads the design tokens, spacing, colors, layout, then generates code that actually matches. One of my students sanded down his design-to-code time from days to hours using this.

GitHub

Claude Code already has solid git integration, but the GitHub MCP server bolts on the ability to read issues, create pull requests, review code, and interact with project management features. Particularly useful when you say something like "look at the open issues labeled 'bug' and fix the 3 simplest ones."

Database (PostgreSQL, Supabase, etc.)

Connect Claude Code directly to your database. It can run queries, inspect schemas, and use real data context when building features. Instead of guessing at your data model, Claude reads it. This kills an entire category of errors where Claude builds something that doesn't match your actual schema.

Google Calendar

Read events, create new ones, check availability. Useful for building scheduling tools or automating your own workflow. I've seen students build personal productivity dashboards that pull calendar data and combine it with task lists.

Slack

Send and read messages, search channels, post updates. Combined with other MCP servers, you can build notification systems and team automations. One student built a daily standup bot that pulls data from GitHub and posts a summary to Slack every morning.

Filesystem

Claude Code already reads and writes files, but the filesystem MCP server provides more granular control and works with files outside your project directory. Useful when you need Claude working with files scattered across your machine.

Setting Up Your First MCP Server

Let's set up the Playwright MCP server since it's the most universally useful. Two ways to configure MCP servers:

Project-level configuration

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

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

This config lives with your project, so anyone on your team using Claude Code gets the same MCP servers automatically.

Global configuration

For MCP servers you want available everywhere (like Google Calendar or Slack), add them to your global config:

claude mcp add playwright -- npx @anthropic-ai/mcp-playwright

Or use claude mcp add --scope user to add it to your global config file at ~/.claude.json.

Adding more servers

Same pattern for every MCP server. Find the package, add it to your config with the right command and arguments. Most are npm packages, so the command is usually npx followed by the package name. Some require environment variables for auth (API keys for Figma, database connection strings, etc.).

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@anthropic-ai/mcp-playwright"]
    },
    "figma": {
      "command": "npx",
      "args": ["figma-developer-mcp", "--figma-api-key=YOUR_KEY"]
    },
    "postgres": {
      "command": "npx",
      "args": ["@anthropic-ai/mcp-postgres", "postgresql://user:pass@localhost:5432/mydb"]
    }
  }
}

Real Examples From My Students

Two concrete examples of MCP servers changing what students could actually accomplish:

Automated outreach system

A marketing director in my class connected Gmail and Google Sheets MCP servers to Claude Code. She had a spreadsheet of 200 leads with names, companies, and notes. She told Claude: "For each row in this spreadsheet, draft a personalized cold email based on the company and notes, then send it through Gmail with a 30-second delay between sends."

Claude read the spreadsheet through the Google Sheets MCP, drafted each email with genuine personalization (not just mail merge variables), and sent them through the Gmail MCP. The whole thing took about 45 minutes to set up and run. She said the equivalent work would've taken her team 2 full days manually, or weeks if she'd tried to build a proper tool for it.

Visual regression testing

A developer in my class maintained a complex dashboard UI. Every time he made a change, he'd manually check 15 different pages to make sure nothing broke. He set up the Playwright MCP and told Claude: "After every change, navigate to each of these routes, take a screenshot, and compare them to the baseline screenshots in the /screenshots directory. Flag anything that looks different."

Claude automated the entire visual QA process. Now after every change, it runs a visual regression check and reports back: "Pages 1-14 look identical. Page 15 has a layout shift in the sidebar." Here's a screenshot showing the difference. Months of manual clicking, gone.

Why MCP Changes What's Possible

Without MCP, Claude Code is a very good coding assistant that lives in your terminal. With MCP, it becomes a general-purpose automation agent that happens to be excellent at coding.

The shift is subtle but real. You stop thinking "what code should I ask Claude to write?" and start thinking "what workflow should I ask Claude to automate?" The boundary between coding and automation dissolves. Building a web scraper, analyzing the results in a database, generating a report, and emailing it to your team: that's a single Claude Code session with the right MCP servers connected.

This is where I think most people underestimate Claude Code. They see it as a coding tool and compare it to other coding tools. But with MCP servers, it's competing with Zapier, Make, n8n, and custom integration platforms. Except you describe what you want in plain English instead of dragging boxes around a canvas. And unlike those platforms, Claude Code can write custom logic for the parts that don't fit neatly into pre-built connectors.

If you're using Claude Code without MCP servers, you're using maybe 60% of what it can do. Set up Playwright at minimum. Add your database if you have one. Then start thinking about what workflows you'd automate if connecting services together was trivially easy. Because with MCP, it is.

Want to understand how Claude Code works as an agent? Read the agents and subagents guide. For the fundamentals, check out what Claude Code is or best practices for using it.