MCP Servers

The Model Context Protocol (MCP) lets Claude Code talk to external tools and data sources through a standard interface. Instead of pasting database schemas or docs into the chat, you connect an MCP server once and Claude can query it directly.

Two lists, split by phase

The boilerplate ships MCP guidance in two places, and neither is the whole story on its own. ai_rules/mcp.md is the build-time set: the servers that help an agent write the site. MCP-SETUP.md is the deploy and ops set, each server paired with its check in RELEASE-PREFLIGHT.md. Each file names the other. They overlap on Vercel and Supabase on purpose, because those two serve both phases.

How MCP works

An MCP server exposes tools (actions Claude can call) and resources (data Claude can read) over a defined protocol. Claude Code connects to servers listed in your config and can then call them mid-task.

Adding an MCP server to Claude Code

You can add a server with the CLI:

Terminal

claude mcp add <name> -- <command to start the server>

Or declare servers in a .mcp.json file at the project root so they ship with the repo:

.mcp.json

{
  "mcpServers": {
    "supabase": {
      "command": "npx",
      "args": ["-y", "@supabase/mcp-server-supabase@latest"],
      "env": {
        "SUPABASE_ACCESS_TOKEN": "your-token"
      }
    }
  }
}

Keep secrets out of git

.mcp.json is committed with the repo. Reference secrets via environment variables rather than hardcoding tokens, or keep token-bearing servers in your personal config.

The build-time set

Supabase MCP

Lets Claude inspect your database schema, run read queries, and reason about your tables, invaluable when wiring the lead-capture API or building data-driven pages. Pairs directly with the Supabase integration in src/services/supabase/. Source: supabase-community/supabase-mcp.

Terminal

claude mcp add supabase -- npx -y @supabase/mcp-server-supabase@latest

Context7

Pulls up-to-date, version-accurate documentation for libraries (Next.js, Tailwind, Supabase, Resend) straight into context. Stops Claude from hallucinating APIs from old training data. Source: upstash/context7.

Terminal

claude mcp add context7 -- npx -y @upstash/context7-mcp@latest

Playwright

Drives a real browser so Claude can navigate your site, fill forms, take screenshots, and verify a page actually renders and works. Use it for end-to-end checks and visual QA after a design change. Source: microsoft/playwright-mcp.

Terminal

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

21st.dev Magic

AI component generation for web UI. Describe a component and Magic returns a styled, on-stack React component you can drop straight into the codebase, so the agent builds sections faster instead of writing every element from scratch. Needs a free API key from 21st.dev. Source: 21st-dev/magic-mcp.

Terminal

claude mcp add magic -- npx -y @21st-dev/magic@latest API_KEY="your-21st-dev-key"

Add per step, not all upfront

Every connected server injects its tool definitions into the model's context on every turn, so a long server list costs you context before the model reads a line of your code. Add the server the current step needs, then remove it when that step is done. Claude Code already has filesystem and memory built in, so adding MCP servers for those is pure waste. The full reasoning ships as ai_rules/mcp.md.

Verifying a connection

List configured servers and confirm they connect:

Terminal

claude mcp list

Pair MCP with skills

MCP gives Claude access; skills give Claude method. Context7 + the frontend-design skill, or Supabase MCP + a data-modeling task, is where the boilerplate gets fast.

← Claude Code Skills Spec Harness →