StackMCP

Next.js + Supabase Stack for VS Code

Beginner5 servers29.9K tokens

Configuration

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

Where to save

Paste the config above into:

.vscode/settings.json → mcp section

Environment Variables

Replace the YOUR_ placeholders with your actual values.

SUPABASE_ACCESS_TOKENrequired

Supabase personal access token

Used by: Supabase MCP

VERCEL_API_TOKENrequired

Vercel API token

Used by: Vercel MCP

TWENTY_FIRST_API_KEYrequired

21st.dev API key

Used by: Magic MCP (21st.dev)

STRIPE_SECRET_KEYrequired

Stripe secret API key

Used by: Stripe MCP

What’s in this stack

Supabase MCP25 tools

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

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

Vercel MCP12 tools

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

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

Context7 MCP2 tools

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

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)4 tools

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

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

Stripe MCP15 tools

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

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

Other editors

Claude CodeCursorWindsurfClaude DesktopContinue