MCP Servers

What MCP is

The Model Context Protocol is a universal plug standard that gives Claude tools beyond your filesystem: browsing your GitHub, querying your database, driving a real browser. Each connected server adds a set of tools Claude can call mid-task — which is both the superpower and the reason for the discipline rules at the end.

The general install commands

claude mcp add <name> --scope user -- <command to run the server>   ← local (stdio) servers
claude mcp add <name> --scope user --transport http <server-url>   ← hosted (HTTP) servers
claude mcp list                                                     ← see what's connected
  • --scope user — available in all your projects; --scope project — shared with the team via a .mcp.json in the repo; the default (local) — just you, just this project.
  • Inside a session, /mcp shows connection status and handles OAuth logins.
  • Many first-party services (GitHub, Supabase, Sentry, Figma…) are also one-click installable as plugins from the official marketplace — for a beginner, prefer the plugin route when it exists; it handles configuration for you.

The four worth knowing early

1. GitHub — repo, PR and issue superpowers

claude mcp add github --scope user --transport http https://api.githubcopilot.com/mcp/

Beyond plain git: "open a PR for this branch with a summary of the changes", "list open issues and fix #12", "what changed in the last 5 PRs?". Authenticate via /mcp (OAuth) or a GitHub Personal Access Token — and create that token with least privilege: repo read/write only, no admin or delete scopes.

2. Playwright — eyes and hands in a real browser

claude mcp add playwright --scope user -- npx -y @playwright/mcp@latest

Claude opens your local site, clicks, fills forms, reads console errors, takes screenshots — and verifies its own UI work. For anyone building websites, this is honestly the highest-value server of the four. The prompt pattern that changes everything:

The self-verification pattern (needs Playwright MCP) 
Start the dev server, open http://localhost:4321/ in the browser, test the [feature] with [a real input], check the console for errors, and screenshot the result.

Claude stops coding blind. Your VERIFY steps stop being "looks right to me".

3. Your host's servers (e.g. Cloudflare)

Hosting providers ship official MCP servers too — Cloudflare has a family of hosted ones (documentation search, build/deploy status, logs), so "did my last deploy succeed? show me the build error" works without opening a dashboard. Server URLs evolve; get the current list from your host's documentation (for Cloudflare, search "MCP servers" on developers.cloudflare.com).

4. A database (Supabase / Postgres) — for your full-stack future

Lets Claude inspect schema, write migrations, and query data in plain English ("show me the 10 newest users"). Install via the official marketplace plugin or the vendor's documented claude mcp add command. Two iron rules: connect with a read-only role until you fully trust the loop, and never point an agent at a production database for write operations — use a branch or staging database.

Others that earn a slot eventually

Context7 (live library docs — the plugin form from the previous chapter is fine), Sentry (production error reports → fixes, once you have real traffic), Figma (design-to-code, if you design first), Brave Search (web search from the terminal). Skip "filesystem" MCP servers — Claude Code already has built-in file tools.

The discipline rules

  1. 3–6 connected servers, maximum. Every server's tools sit in Claude's context on every turn; a bloated tool list makes the agent measurably slower and dumber.
  2. Official and vendor servers over community forks. First-party servers from GitHub, Supabase, Cloudflare and Sentry have made most forks obsolete.
  3. Least-privilege tokens, read-only first, never production writes. Treat every MCP server like an npm package from a stranger: trust the source before you hand it keys.
  4. Start with GitHub + Playwright only. Add the rest when a real task demands them — not before.

Up next: everything so far, compressed into one repeatable ritual and ten rules — plus where the road leads after static sites.

FAQ

Frequently Asked Questions

What is an MCP server?
A connector built on the Model Context Protocol that gives Claude tools beyond your files — browsing your GitHub, driving a real browser, querying a database. Where a skill is knowledge, an MCP server is a capability.
Which MCP servers should a beginner install first?
Just two: GitHub (PRs, issues, repo questions) and Playwright (Claude tests its own UI work in a real browser). Add a database or host server only when a real task demands it — 3–6 connected servers is the ceiling.
Is it safe to connect Claude to my database?
With discipline, yes: connect a read-only role until you fully trust the loop, and never point an agent at a production database for writes — use a branch or staging database. Treat every MCP server like an npm package from a stranger: trust the source.
Why not connect lots of MCP servers?
Every server's tools sit in Claude's context on every turn, so a bloated tool list makes the agent measurably slower and dumber — and pricier. It's a menu, not a shopping spree: 3–6 maximum.