Beginner

Next.js + Supabase Stack

The modern full-stack combo. Supabase for backend, Vercel for deployment, plus UI generation and up-to-date docs.

5 servers29.9K tokens15% of context

Token Budget

29.9K used (14.9%)170.1K remaining

Supabase MCP12.9K (6.4%)

Stripe MCP7.7K (3.9%)

Vercel MCP6.2K (3.1%)

Magic MCP (21st.dev)2.1K (1.0%)

Context7 MCP1.0K (0.5%)

Moderate token usage. You will have good room for prompts but watch if adding more servers.

Config

Paste in ~/.claude.json

json

{
  "mcpServers": {
    "supabase-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@supabase/mcp-server-supabase"
      ],
      "env": {
        "SUPABASE_ACCESS_TOKEN": "YOUR_SUPABASE_ACCESS_TOKEN"
      }
    },
    "stripe-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@stripe/mcp",
        "--tools=all"
      ],
      "env": {
        "STRIPE_SECRET_KEY": "YOUR_STRIPE_SECRET_KEY"
      }
    },
    "vercel-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "vercel-mcp"
      ],
      "env": {
        "VERCEL_API_TOKEN": "YOUR_VERCEL_API_TOKEN"
      }
    },
    "magic-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@21st-dev/magic"
      ],
      "env": {
        "TWENTY_FIRST_API_KEY": "YOUR_TWENTY_FIRST_API_KEY"
      }
    },
    "context7-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@upstash/context7-mcp"
      ]
    }
  }
}

Included Servers

Supabase MCP

Supabase

database

Query your Supabase database, manage tables, run migrations, deploy edge functions, and manage branches directly from your AI editor.

2.5k36.5k/wk12.9K tokens(6%)Official2d ago

Your entire backend — database, auth, storage, and edge functions. The perfect companion to Next.js's frontend-first model.

Vercel MCP

Community

deployment

Connect to the Vercel API to manage deployments, projects, domains, and environment variables from your AI editor.

800605/wk6.2K tokens(3%)2mo ago

Next.js was built for Vercel. Zero-config deployments, preview URLs, and environment variable management — all from your editor.

Context7 MCP

Upstash

documentation

Pull up-to-date documentation and code examples for any library directly into your prompt context using the Context7 API.

46.5k213.3k/wk1.0K tokens(0.5%)Official2d ago

Next.js App Router and Supabase both iterate rapidly. Current docs prevent your AI from mixing up Pages Router and App Router patterns.

Magic MCP (21st.dev)

21st.dev

ui-design

Generate professional React and Tailwind UI components using 21st.dev's component library and AI builder from your editor.

4.3k2.3k/wk2.1K tokens(1%)Official5d ago

Generate polished UI components that pair with your Supabase data layer. Speeds up the 'data to UI' loop dramatically.

Stripe MCP

Stripe

payments

Integrate Stripe APIs for payments, subscriptions, customers, and invoices directly from your AI editor using the official Stripe agent toolkit.

1.3k36.5k/wk7.7K tokens(4%)Official2d ago

The most common Next.js + Supabase project is a SaaS. Stripe completes the monetization story with minimal extra config.