Announcing MCP Connect - Build and debug Model Context Protocol integrations directly in your browser
technology
October 20, 20259 min read
Dan StarnsTobias Meixner
by 2 authors

How to MCP Connect to Supabase

Step-by-step guide to connecting the Supabase MCP server to MCP clients like Claude Desktop and MCP Connect. Learn to configure Supabase authentication, manage databases with AI, and develop with visual protocol inspection.

How to MCP Connect to Supabase

Learn how to integrate Supabase's powerful backend platform with MCP Connect for seamless AI-powered database management

Keen to learn more about MCP from in-person experts? Check out our upcoming MCP Bangkok (16th October 2025) and MCP Singapore (23rd October 2025) meetups.

What is Supabase?

Supabase is an open-source Firebase alternative providing a complete backend-as-a-service platform. Built on PostgreSQL, it offers authentication, real-time subscriptions, storage, and serverless functions all with developer-friendly SQL capabilities.

Screenshot of Supabase homepage

Key Benefits:

  • PostgreSQL Foundation: Full SQL power with built-in extensions
  • Real-time Subscriptions: Instant updates across clients
  • Built-in Authentication: Ready-to-use auth with multiple providers
  • Row Level Security: Database-level security policies
  • Auto-generated APIs: REST and GraphQL endpoints from your schema

Understanding Model Context Protocol (MCP)

Model Context Protocol (MCP) is an open standard by Anthropic enabling seamless integration between AI applications and external data sources. It allows AI models like Claude to securely access and interact with your databases, APIs, and tools.

Model Context Protocol diagram from Anthropic

Why MCP Matters:

  • Standardized Integration: One protocol for all data sources
  • Secure Access: Controlled, auditable data access
  • Real-time Context: AI works with live information
  • Tool Capabilities: Extend AI with custom functionality

Prerequisites

Before starting, you'll need:

  1. Node.js installed (for running the MCP gateway)
  2. A Supabase account (we'll create this together)
  3. NPX available in your terminal

Setting Up Your Supabase Project

Step 1: Create Your Account

  1. Go to supabase.com
  2. Click "Start your project" or "Sign up"
  3. Sign up using GitHub, Google, or email
Supabase sign up page

Step 2: Create an Organization

  1. Click "New organization"
  2. Enter an organization name
  3. Choose a plan (Free tier works great)
  4. Click "Create organization"
Creating a Supabase organization

Step 3: Create Your Project

  1. Click "New project"
  2. Enter a Project name
  3. Generate a strong Database Password (save securely!)
  4. Select your Region
  5. Click "Create new project"
Creating a Supabase project Supabase project dashboard

Step 4: Generate Your Access Token

  1. Click your profile icon (top right)
  2. Select "Access Tokens"
  3. Click "Generate new token"
Supabase access tokens page
  1. Enter a Token name (e.g., "MCP Token")
  2. Set expiration (or no expiration for development)
  3. Click "Generate token"
Creating a Supabase access token
  1. Copy your token immediately you won't see it again!
Supabase token successfully generated

Starting the Supabase MCP Server

Supabase MCP Server github

Step 1: Export Your Access Token

bash
export SUPABASE_ACCESS_TOKEN=sbp_your_token_here

Verify it's set:

bash
echo $SUPABASE_ACCESS_TOKEN

Step 2: Start the MCP Gateway

For Claude Desktop:

bash
npx -y supergateway \
  --stdio "npx -y @supabase/mcp-server-supabase@latest --access-token $SUPABASE_ACCESS_TOKEN" \
  --port 8000 \
  --baseUrl http://localhost:8000 \
  --ssePath /sse \
  --messagePath /message

For MCP Connect (with CORS):

bash
npx -y supergateway \
  --stdio "npx -y @supabase/mcp-server-supabase@latest --access-token $SUPABASE_ACCESS_TOKEN" \
  --port 8000 \
  --baseUrl http://localhost:8000 \
  --ssePath /sse \
  --messagePath /message \
  --cors

Important: The --cors flag is required for MCP Connect (browser-based) but should be omitted for Claude Desktop.

Keep this terminal running!

Expected output:

[supergateway] Starting...
[supergateway]   - outputTransport: sse
[supergateway]   - port: 8000
[supergateway]   - CORS: enabled ("*")
[supergateway] Listening on port 8000
[supergateway] SSE endpoint: http://localhost:8000/sse
[supergateway] Child stderr: Supabase MCP Server running on stdio

Connecting to Claude Desktop

Step 1: Configure Claude Desktop

Find your configuration file:

  • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
  • Windows: %APPDATA%/Claude/claude_desktop_config.json

Add this configuration:

json
{
  "mcpServers": {
    "supabase-mcp-local": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote@latest",
        "http://localhost:8000/sse",
        "--transport",
        "sse",
        "--allow-http"
      ]
    }
  }
}
Claude Desktop configuration file

Step 2: Restart and Test

  1. Quit Claude Desktop completely
  2. Relaunch the application
  3. Look for the tools indicator
Claude Desktop with Supabase MCP connected Claude Desktop showing Supabase tools

Step 3: Build a Movies Database

Let's create a sample schema, populate it, and query it all through natural language!

Prompt 1: Create the Schema (Migration Only)

Create a migration for a simple movies table with these columns:
id (primary key, uuid, auto-generated),
title (text, required),
release_year (integer),
director (text),
rating (decimal between 0 and 10)
Claude Desktop creating movies schema

Prompt 2: Insert Sample Data

Insert 5 movies into the movies table:
The Shawshank Redemption (1994, Frank Darabont, 9.3),
The Godfather (1972, Francis Ford Coppola, 9.2),
The Dark Knight (2008, Christopher Nolan, 9.0),
Pulp Fiction (1994, Quentin Tarantino, 8.9),
Forrest Gump (1994, Robert Zemeckis, 8.8)
Claude Desktop populating movies data

Prompt 3: Read the Data

Show me all movies from the movies table, ordered by rating from highest to lowest
Claude Desktop querying movies data

Connecting to MCP Connect

Step 1: Access MCP Connect

Visit mcp.rconnect.tech or run locally:

bash
npx @mcpconnect/cli
MCP Connect home interface

Step 2: Create Connection

  1. Click "+ New Connection"
  2. Fill in details:
Name: Supabase MCP Server
URL: http://localhost:8000/sse
Connection Type: SSE
Timeout: 60000ms
Retry Attempts: 3
  1. Click "Test Connection"
  2. Click "Create Connection"
MCP Connect create connection modal MCP Connect successfully connected

Step 3: Configure AI Provider

  1. Click Settings
  2. Select Anthropic
  3. Enter your API key from console.anthropic.com
  4. Choose Claude 3.5 Sonnet
  5. Click Test then Save
MCP Connect LLM configuration

Step 4: Test Your Connection

Try these prompts to verify everything works:

List all my Supabase projects
MCP Connect querying movies data
Show me all movies released after 1990 with their actors and the characters they played,
ordered by rating
MCP Connect querying movies data

Why MCP Connect for Development?

MCP Connect is purpose-built for development workflows with powerful capabilities:

Smart Tool Management

MCP Connect tool management sidebar
  • Visual Control: See all 29+ Supabase tools organized
  • One-click Toggle: Enable/disable individual tools
  • Token Savings: Reduce API costs by only enabling needed tools
  • Real-time Counters: Track enabled vs. disabled status

The Token Challenge

With 30+ tools, each consuming ~200-400 tokens:

  • ~8,000+ tokens per request just for tool definitions
  • In 10 messages: 80,000+ tokens wasted
  • MCP Connect lets you disable unused tools to save costs

Development Features

Protocol Inspection

MCP Connect protocol inspector
  • Raw MCP requests/responses in real-time
  • Execution timing for performance optimization
  • Debug API interactions before production

Conversation Management

Conversation management tools
  • Multiple chat sessions with different configs
  • Export in JSON, Markdown, or Plain Text
  • Share debugging sessions with your team

Development Warnings

Token usage warnings
  • Long conversation alerts
  • Many tools warnings (5+ enabled)
  • Real-time token estimates

Understanding Supabase Tools

The MCP server organizes 30+ tools into feature groups:

Account Tools: list_projects, get_project, create_project, list_organizations

Database Tools: list_tables, execute_sql, apply_migration, list_extensions

Development Tools: get_project_url, get_anon_key, generate_typescript_types

Edge Functions: list_edge_functions, get_edge_function, deploy_edge_function

Debugging Tools: get_logs, get_advisors

Knowledge Base: search_docs

Branching (paid): create_branch, merge_branch, delete_branch

Storage (disabled by default): list_storage_buckets, get_storage_config

Enable specific groups with ?features=database,docs or read-only mode with ?read_only=true.

Essential Resources

Tools & Platforms

Documentation

Connect with Us

We're passionate about connecting people through open source and building developer tools.

Get Involved:

Ready to collaborate? Contact us and let's build together!

TAGS

Supabase MCP ServerMCP Client SetupModel Context ProtocolClaude Desktop MCPMCP ConnectDatabase Management MCPSupabase AI IntegrationPostgreSQL AISupabase Access TokenSSE Transport

Connect with us now!