MCP servers with Claude Code

Custom commands let you automate prompts you already know how to write. MCP servers do something different — they extend Claude Code with new tools it did not have before. Tools to drive a browser, query a database, call a third-party API, whatever the server exposes. This is the mechanism behind the Playwright styling demo from the opening module.

An MCP server (Model Context Protocol server) is an external process that exposes a set of tools to Claude Code over a standard protocol. Once installed, Claude can call those tools exactly like its built-in ones. The server can run locally on your machine or remotely.

Step 1 — Install an MCP server

Installation uses the claude mcp add command, run in your regular terminal — not inside Claude Code. For example, to install the Playwright MCP server:

claude mcp add playwright npx @playwright/mcp@latest

Breaking that down: playwright is the name you give this server locally, and npx @playwright/mcp@latest is the command Claude Code will run to launch it when needed.

Step 2 — Verify the install

claude mcp list

You should see playwright in the list of configured servers. If not, re-run the add command.

Step 3 — Approve tools on first use

The first time Claude Code tries to use a Playwright tool — opening a browser, taking a screenshot, evaluating page styles — it will prompt you to approve it. You can approve once or persist the approval.

Step 4 — Auto-approve trusted tools via settings.local.json

Answering permission prompts every session gets old fast. For tools you trust, add them to the allow list in .claude/settings.local.json:

{
  "permissions": {
    "allow": [
      "mcp__playwright"
    ]
  }
}

A few details that trip people up:

• The prefix is mcp__ with double underscores, not a single underscore.
• mcp__playwright auto-approves any tool from that server. You can scope more tightly by naming specific tools if you want finer control.
• settings.local.json is per-project and gitignored by default — permissions you grant here stay on your machine.

Step 5 — Use the server

With Playwright installed and approved, ask Claude Code to do something visual:

Open localhost:3000 in a browser, take a screenshot of the home page,
and check whether the header is vertically centred.

Under the hood, Claude picks the Playwright MCP tools for navigation, screenshots, and DOM evaluation, drives the browser, and feeds the results back. You get a visual feedback loop without ever writing browser automation code yourself — exactly the pattern you saw in the demo lesson.

Scoping: project versus global

MCP servers can be added per-project (the default shown above) or globally for all projects on your machine. Project scoping is usually what you want — different projects need different tools, and globally-installed servers can create unexpected auto-approvals.

Why this matters

MCP is how Claude Code grows without the Claude Code team having to ship new tools for every use case. Anyone can write an MCP server and plug it in. The Playwright example is one off-the-shelf server; there are many others for databases, APIs, cloud providers, and internal tooling. If you need Claude to do something its built-in tools cannot, an MCP server is usually the right answer.