🤝 Supabase MCP in Firebase Studio – Full Setup Guide That Actually Works

General
1

How to Connect Supabase MCP to Firebase Studio (Prototype + IDE)

After a long time using Firebase Studio and waiting for answers from the devs that never clearly explained how to properly connect Supabase MCP, I decided to create this step-by-step guide that actually works :white_check_mark:.

With this setup, you’ll be able to:

  • :bar_chart: Read your Supabase database

  • :brick: Create and edit tables

  • :pencil: Modify schemas

  • :robot: Let the chat interact directly with your DB

Works for Prototype and IDE mode :rocket:

:green_circle: STEP 1 — Create an Access Token in Supabase

First, we need to generate an Access Token in Supabase.

:small_blue_diamond: 1. Open Supabase

:right_arrow: In the top-right corner, click on your profile picture
:right_arrow: Select Account Preferences

Print1
Print1963Ă—1185 27.2 KB

:small_blue_diamond: 2. Open Access Tokens

:right_arrow: In Account Preferences, look at the left sidebar
:right_arrow: Click on Access Tokens

:small_blue_diamond: 3. Generate a New Token

:right_arrow: Click Generate new token

print 3
print 31071Ă—382 22 KB

:small_blue_diamond: 4. Configure the Token

:right_arrow: Choose a name for the token
:right_arrow: Select the expiration time
:right_arrow: Click Generate token

print 4
print 41153Ă—829 37.7 KB

:small_blue_diamond: 5. Copy the Token

:right_arrow: The token will appear at the top in a box
:right_arrow: Click Copy

print 5
print 5982Ă—607 36 KB

:warning: Important:
Save this token somewhere safe. You’ll need it in the next steps.

:green_circle: STEP 2 — Open Firebase Studio in IDE Mode

Now let’s connect Supabase to Firebase Studio.

:small_blue_diamond: 6. Open Firebase Studio (IDE mode)

  • Open Firebase Studio

  • Switch to IDE mode

:right_arrow: On the left chat panel, click Add MCP

print 6
print 62559Ă—1314 268 KB

:green_circle: STEP 3 — Configure the MCP (mcp.json)

After clicking Add MCP, Firebase Studio will automatically open a file called mcp.json on the left side.
:right_arrow: You should now see the mcp.json file open

:small_blue_diamond: 7. Paste This EXACT Code

Replace the content of mcp.json with exactly this :backhand_index_pointing_down:

{
  "mcpServers": {
    "supabase": {
      "command": "npx",
      "args": [
        "-y",
        "@supabase/mcp-server-supabase@latest",
        "--access-token",
        "YOUR_ACCESS_TOKEN_HERE"
      ]
    }
  }
}

:stop_sign: Important:
Replace

YOUR_ACCESS_TOKEN_HERE

with the token you copied from Supabase.

:small_blue_diamond: 8. Save & Reload

  • :floppy_disk: Save the file

  • :counterclockwise_arrows_button: Press F5 or reload the page

:green_circle: STEP 4 — Verify the Connection

After reloading:

  • Open IDE mode again

  • Check the MCP tools panel

  • :white_check_mark: Supabase should now appear as connected

:tada: Done!

:robot: What You Can Do Now

You can now ask the chat things like:

  • “Read my database schema”

  • “Create a new table”

  • “Add columns to an existing table”

  • “Generate SQL migrations”

  • “Analyze my Supabase data”

All directly from Firebase Studio :rocket:

:heart: Final Note

If this tutorial helped you:

  • :+1: Leave a LIKE

  • :pushpin: Save or share it

  • :speech_balloon: It may help many other developers who are stuck

By: Micrograms :heart:

4 Likes