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.

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.

Servers we use with this boilerplate

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 libs/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"

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 →