What Is MCP? Connecting External Tools to Claude Code

By the previous post, you’ve installed Claude Code, given it context with CLAUDE.md, and built your first screen. Up to this point, the AI only works within “your project files.” In this post, we widen that scope and introduce MCP (Model Context Protocol), which lets the AI reach external tools too.

If you’ve never heard of it before, don’t worry — setting it up takes just one command in the terminal.

What Is MCP

MCP is a standard way for AI to use external tools. Anthropic released it in late 2024, and it’s now supported not just by Claude Code but by a wide range of AI tools.

Here’s an easy way to think about it. Normally, when you talk to an AI, it only knows what’s inside the conversation and your open files. Once you connect MCP, the AI can directly pull information from external services (documentation sites, browsers, databases, collaboration tools, and more) or even perform actions on them.

	Without MCP	With MCP
What the AI can know	The conversation, open files	External service data too
How it works	Writes code only	Can look up and modify external services
Example	”Fix this function"	"Find the latest docs for this library and apply them exactly”

In other words, MCP is like an expansion slot that gives the AI extra hands and eyes.

What Kinds of MCP Can You Connect?

There are many kinds of MCP servers. Here are some go-to examples that are especially useful when you’re just getting started with vibe coding.

MCP Server	What It Does
Context7	Pulls up-to-date official docs for libraries/frameworks so code is written with the correct API
Playwright	Opens a real browser to click through and test the screens you’ve built
Filesystem	Reads and writes files in a folder you specify
GitHub	Looks up issues/PRs and repository information

Beyond these, there are MCPs for databases, design tools, project-structure tracking services (like Umtri), and more. You don’t need to connect them all upfront — just add them one at a time as the need comes up.

Connecting an MCP to Claude Code

You connect them in the terminal with the claude mcp add command. Each server connects a little differently (running locally, or reaching a remote URL), and the exact command is spelled out in the official docs or that service’s own instructions.

For example, connecting a remote server (over HTTP) looks like this. The YOUR_TOKEN part is a token issued by services that require a login.

claude mcp add <name> \
  --transport http \
  --url https://example.com/mcp \
  --header "Authorization: Bearer YOUR_TOKEN"

For a server that runs locally, it looks like this.

claude mcp add <name> -- npx -y <server-package>

Running the command registers that MCP server with Claude Code, and from then on the connection activates automatically every time you run Claude Code.

Verifying the connection

Start Claude Code and type /mcp to see the list of currently connected MCP servers and their status.

Keep Your Auth Tokens Safe

Some MCP servers require a login and ask for an API token. Since this token grants access to your account, putting it directly in a code file risks exposing it publicly on places like GitHub.

The safe way to manage a token is with an environment variable.

# Create a .env file
echo "SERVICE_TOKEN=your_token_here" > .env

# Add it to .gitignore so it doesn't get pushed to git
echo ".env" >> .gitignore

Then, in the MCP registration command, reference the environment variable instead of pasting the token value directly.

When Is a Good Time to Add an MCP?

You don’t need to connect several MCPs from the start. Basic development gets going just fine with Claude Code and CLAUDE.md alone. A good approach is to add “one MCP that removes a pain point” whenever a pain point actually shows up.

The AI keeps getting a library’s API wrong → connect Context7 for up-to-date docs
Checking your screens by hand every time is tedious → use Playwright for browser testing
Your project has grown and you want to track structure/history automatically → look into a dedicated-service MCP

Starting with the next post, we head back into development and cover how to stack features one at a time on top of the screen you’ve built.