StackMCP
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

83
database

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

2.6k36.5k/wk12.9K tokens(6%)Official1w ago

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

Vercel MCP

Community

43
deployment

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

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

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

Context7 MCP

Upstash

94
documentation

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

51.7k605.8k/wk1.0K tokens(0.5%)Official3d 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

75
ui-design

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

4.6k10.5k/wk2.1K tokens(1%)Official1mo ago

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

Stripe MCP

Stripe

85
payments

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

1.4k36.5k/wk7.7K tokens(4%)Officialyesterday

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

Recommended Skills

Skills that pair with the servers in this stack. Learn more

For Supabase MCP

Supabase Postgres Best PracticesOfficialbest-practices

Official Supabase skill covering PostgreSQL optimization, query performance, RLS policies, schema design, and connection management.

npx skillsadd supabase/agent-skills/supabase-postgres-best-practices
Next.js + Supabase Authworkflow

Supabase Auth integration patterns with Next.js App Router. Covers SSR auth, middleware, and protected routes.

npx skillsadd sickn33/antigravity-awesome-skills/nextjs-supabase-auth

For Vercel MCP

React Best PracticesOfficialbest-practices

Official Vercel skill for React and Next.js performance optimization, based on Vercel Engineering guidelines.

npx skillsadd vercel-labs/agent-skills/vercel-react-best-practices
Web Design GuidelinesOfficialbest-practices

Official Vercel skill covering Web Interface Guidelines, accessibility audits, and responsive design standards.

npx skillsadd vercel-labs/agent-skills/web-design-guidelines
Deploy to VercelOfficialworkflow

Deploy applications to Vercel with preview URLs and production environments via Vercel CLI.

npx skillsadd vercel-labs/agent-skills/vercel-deploy

For Stripe MCP

Stripe Best PracticesOfficialbest-practices

Official Stripe skill covering payment API patterns, Checkout Sessions, PaymentIntents, PCI compliance, and idempotency.

npx skillsadd stripe/ai/stripe-best-practices
Upgrade StripeOfficialworkflow

Official Stripe skill for upgrading API versions, SDKs, Stripe.js, and mobile SDKs safely.

npx skillsadd stripe/ai/upgrade-stripe