MCPs: expanding what Claude Code can do

Module: 5 — Technical tools | Time: ~25 min theory + 30 min practice

The gist

If Claude Code is a smartphone, MCPs are the apps from the App Store. A bare smartphone is already useful, but with the right apps it turns into your personal command center. MCPs expand what Claude Code can do, from scraping websites to working with files and repositories.

Key concepts

• MCP (Model Context Protocol) is an open industry standard for connecting tools to LLMs (governed by the Linux Foundation since December 2025)
• MCP adds new capabilities without changing Claude Code itself
• You connect one with the claude mcp add command or through a .mcp.json file in the project
• The MCP ecosystem is large: thousands of ready-made integrations

Theory

What MCP is and why it matters

Anthropic created an open standard, the Model Context Protocol. It's a specification that describes how outside services can offer their tools to an LLM. Any developer can build an MCP for their service.

December 2025 update: MCP was handed over to the Linux Foundation (the Agentic AI Foundation, AAIF), so it's now an open industry standard, not just an Anthropic tool. Co-founders: Anthropic, OpenAI, Block. Microsoft, Google, and Amazon announced support. What this means: MCP will outlive a switch of LLM provider. An agent system built on MCP isn't tied to Claude; it can switch to GPT or Gemini without changing its architecture.

🎨 Picture this: MCP is a USB hub for agents. One port, but you can plug in a keyboard, a mouse, a monitor, a drive, anything. Without the hub, every device needs its own separate connection.

Without MCP: Claude Code can work with files on your computer, run code, and use its built-in tools. Powerful, but limited.

With MCPs: Claude Code can scrape websites (Firecrawl), work with GitHub repositories (GitHub MCP), pull up-to-date documentation for any library (Context7), control a browser (Playwright), and work with databases, Slack, Notion, Linear, and thousands of other services.

How it works: an MCP server runs locally or remotely and "tells" Claude Code: "here are the operations I can do, and here's a description of each." Claude sees these operations as its own native tools and uses them when needed.

MCP registries: where to find them

Official MCP site: the protocol specification, documentation, and guides for building MCP servers.

MCP on GitHub: the MCP project's organization with the protocol's source code and tools.

MCP servers repository: the official repository of reference implementations for popular services. Over time some of them get replaced by the companies' own official servers, so check that what you pick is still current.

Anthropic directory: vetted connectors. According to the Claude Code documentation, there's no single official registry. Connectors you add on claude.ai (claude.ai/customize/connectors) show up in Claude Code automatically if you're signed in with the same account.

Claude Code plugins: these can bundle MCP servers, skills, and hooks. The /plugin command opens the plugins menu, and the /mcp command manages MCP connections.

How to connect an MCP to a project

The shortest route is a terminal command, for example claude mcp add --transport http <name> <server address> (for a local server, use --transport stdio, followed by -- and the launch command). The --scope project option writes the server into the project's file. All of a project's MCPs that the team shares are described in the .mcp.json file at the project root:

{
  "mcpServers": {
    "firecrawl": {
      "command": "npx",
      "args": ["-y", "firecrawl-mcp"],
      "env": {
        "FIRECRAWL_API_KEY": "${FIRECRAWL_API_KEY}"
      }
    },
    "context7": {
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp"]
    },
    "github": {
      "type": "http",
      "url": "https://api.githubcopilot.com/mcp/",
      "headers": {
        "Authorization": "Bearer ${GITHUB_TOKEN}"
      }
    }
  }
}

Once you save the file, the new tools get connected: restart Claude Code in the project folder, or open /mcp and reconnect the server (newer versions don't require a restart). Check the GitHub server's address and settings against the current Claude Code documentation (the MCP section): they change.

Key MCPs, one by one

Firecrawl: powerful web scraping

What it does: downloads the content of any website in a clean format. Not just HTML: clean text, structured data, Markdown. It can render JavaScript-heavy sites, crawl an entire site, and scale to thousands of pages. Respect each site's rules (robots.txt, terms of use) and privacy laws on personal data.

Without Firecrawl: Claude Code's basic scraping works for simple static sites. Many modern sites are rendered with JavaScript, and Claude can't see their content.

With Firecrawl:

• "Scrape all the reviews from this site and save them as JSON"
• "Find all the competitor prices on this page"
• "Download every article from this blog and write a summary"
• "Monitor this page for changes"

Cost: there's a free tier with a monthly credit allowance (roughly one page per credit) and paid plans. Current terms are on firecrawl.dev.

🎨 Picture this: Firecrawl is the head waiter in a restaurant with a hidden kitchen. You say "bring me the data from this site," and he goes, deals with the hard parts (JavaScript and so on), and comes back with a clean dish in the format you want. Plain scraping is trying to climb into the kitchen yourself.

Real scenario: a competitor-monitoring agent. Once a week it scrapes 5 competitors' sites, spots new products and price changes, and sends a summary.

GitHub MCP: working with repositories

What it does: creates and manages repositories, reads and creates files, works with issues and pull requests, browses commit history, manages branches. The recommended option now is GitHub's own official server (the old @modelcontextprotocol/server-github package is deprecated).

Without GitHub MCP: Claude Code works with local files through git commands in the terminal.

With GitHub MCP:

• "Create an issue in the repository describing the bug we found"
• "Look at the open pull requests and give me a short summary of each"
• "Find the files in the repository that use the deprecated API"
• "Create a new branch, make the changes, open a pull request"

Especially useful when you work on a team or manage client projects.

Context7: up-to-date documentation

The problem it solves: Claude is trained up to a certain date. If a library ships a new version with a different API, Claude may give outdated advice.

What Context7 does: whenever you ask about a specific library or framework, it automatically pulls the current documentation and hands it to Claude.

What it looks like: you ask "how do I create a Stripe Checkout Session in the new version," Context7 finds the current Stripe documentation, and Claude answers from it, not from its training data.

🎨 Picture this: Context7 is a living encyclopedia instead of an old textbook. Without it, Claude is like a doctor trained on a 2022 handbook that's already out of date. Context7 slips a fresh page of documentation in front of it right before it answers.

Especially important for: fast-moving ecosystems (React, Next.js, LangChain, the Anthropic SDK: anything that changes every few months).

Cost: there's a free plan with a monthly cap on API calls, and paid plans for larger volumes. Current terms are on the service's site.

Chrome DevTools MCP: debugging browser apps

What it does: connects to the Chrome browser and can read the console, take screenshots, check performance, and analyze network requests.

Scenarios:

• "Open the page, look at the console errors, and fix them"
• "Check the load speed and find what's slowing it down"
• "Take a screenshot of how the page looks on mobile"

Filesystem MCP: extended file work

What it does: extends the standard file operations: recursive search, working with archives, watching for changes, managing permissions.

Note: Claude Code already has built-in file tools, so not everyone needs this MCP. Some people keep it connected by default in all their projects.

Playwright MCP: browser automation

What it does: controls a browser programmatically: clicks buttons, fills out forms, navigates between pages. It's built for automated testing and automation.

Scenarios:

• "Log in and download the report (there's no API)"
• "Fill out this form with data from the spreadsheet"
• "Automatically test every page of the site"

🎨 Picture this: Playwright MCP is a remote control for a browser. You're sitting at home, the browser runs on a server, yet buttons get pressed, forms get filled, screenshots get taken. It's as if you had an invisible assistant sitting at the computer.

More on this in the lesson Browser automation.

Building a custom MCP

If there's no ready-made MCP for your service, you can build your own. This is especially valuable if:

• You work with a company system that has no public API
• You want to wrap an internal company tool
• You need a specialized integration

Claude Code can build MCPs: just describe what the tool should do. Or use the anthropic-skills:mcp-builder skill for a structured build process.

How a tool is described in a simple MCP (a simplified schema to show the idea):

{
  "name": "my-company-crm",
  "version": "1.0.0",
  "tools": [
    {
      "name": "get_client",
      "description": "Get a client's data by ID",
      "inputSchema": {
        "type": "object",
        "properties": {
          "client_id": {"type": "string"}
        }
      }
    }
  ]
}

MCPs and tokens: what you need to know

Every connected MCP adds its tool descriptions to the context window. Roughly: Firecrawl takes about 3,000 tokens, GitHub MCP about 5,000. Connect 10 MCPs and load their descriptions in full, and they'll eat 20,000–50,000 tokens. In newer versions of Claude Code, tool search is on by default: only the tool names sit in the context, and the full descriptions load when a task needs them. So extra servers cost less than they used to, but you still need to keep things tidy and lean.

🎨 Picture this: MCPs in your context are like employees in an office. Each one takes a desk and draws on the budget. Five people you actually need: productive. Twenty "just in case": the office is packed, everything slows down, and the money runs out.

Rule of thumb: connect only the MCPs a specific project really needs. Not "just in case."

Use /context to see how many tokens the MCP descriptions take up.

Popular MCP servers: reference table

Rule: 3–5 MCPs per project is the sweet spot. More than 7? Check whether you really need all of them.

Common mistakes with MCPs

1. Connecting too many MCPs at once. Every MCP adds its tool descriptions to the context (roughly 2,000–5,000 tokens if they're loaded in full). 10 MCPs = 30,000–50,000 tokens on descriptions alone. Tool search softens the problem but doesn't remove it: more servers means more confusion for the model when it picks a tool. Connect 3–5, no more.

2. Not checking the token cost per MCP call. Some MCPs (Firecrawl on large pages, for example) can return 10,000+ tokens in a single call. Check with /context how much you're actually spending.

3. Not reconnecting the MCP after changing .mcp.json. Changed the config? Open /mcp and reconnect the server (or restart Claude Code). Otherwise the session keeps working with the old list.

4. Storing MCP API keys directly in .mcp.json. Use the ${VARIABLE_NAME} syntax and keep the keys in a .env file.

Practice

Task: connect Firecrawl and scrape some data

1. Sign up at firecrawl.dev and get an API key (there's a free tier; current terms are on the service's site)

2. Create a .mcp.json file in the project:

{
  "mcpServers": {
    "firecrawl": {
      "command": "npx",
      "args": ["-y", "firecrawl-mcp"],
      "env": {
        "FIRECRAWL_API_KEY": "${FIRECRAWL_API_KEY}"
      }
    }
  }
}

3. Add the key to .env: FIRECRAWL_API_KEY=fc-your_key

4. Restart Claude Code in the project folder (or reconnect the server through /mcp)

5. Ask the agent: "Use Firecrawl to scrape the home page of [pick a public site, for example Hacker News: news.ycombinator.com] and show me the first 10 article headlines as a numbered list"

6. Check the result: the agent should return real headlines from the site

7. Bonus: "Save the results to the file scraped-news.json"

A real .mcp.json example with several servers

{
  "mcpServers": {
    "firecrawl": {
      "command": "npx",
      "args": ["-y", "firecrawl-mcp"],
      "env": {
        "FIRECRAWL_API_KEY": "${FIRECRAWL_API_KEY}"
      }
    },
    "context7": {
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp"]
    },
    "github": {
      "type": "http",
      "url": "https://api.githubcopilot.com/mcp/",
      "headers": {
        "Authorization": "Bearer ${GITHUB_TOKEN}"
      }
    }
  }
}

Heads up: this file goes in the project root. After saving it, reconnect the servers through /mcp or restart Claude Code. The ${...} variable values are filled in from the environment, and the keys live in a .env file next to it (with .env listed in .gitignore). If Claude Code doesn't pick up .env on its own, export the variables in the terminal before launching it.

Tools and resources

• MCP official site: specification, documentation, guides
• MCP on GitHub: the protocol's source code
• MCP servers registry: official implementations
• Anthropic directory: vetted connectors
• Claude Code docs: MCP: connecting servers, scopes, tool search
• Firecrawl (firecrawl.dev): web scraping, has a free tier
• Context7: up-to-date documentation, has a free plan
• GitHub MCP: repository management (GitHub's official server)
• anthropic-skills:mcp-builder: a skill for building custom MCPs
• The /context command: monitor the tokens used by MCP descriptions
• The /mcp command: list servers, reconnect, sign in

Current prices and versions: What's current.

Key takeaways

MCPs are an ecosystem, not a single tool. New MCPs appear all the time. Keeping an eye on the directories = expanding what you can do without writing code.

Don't connect MCPs "just in case": they cost tokens. Connect only what a specific project needs.

Knowing how to build a custom MCP for a company system is a useful skill of its own, and it comes in handy when working with clients' systems.

Related lessons

• ← APIs and integrations: MCPs are an automated wrapper around APIs. If you understand how an API works, MCPs will be crystal clear
• → Subagents: subagents use MCPs as their tools
• → MCP Builder: building a custom MCP from scratch with anthropic-skills:mcp-builder

Next lesson

→ MCP Pricing & Token Economics: what MCPs really cost. After that, 24/7 deployment: Cloudflare Workers: how a workflow keeps running while you sleep.