Goooooood morning!! It’s 11:33am, the baby is napping with her dad, and I’ve just downed a 16oz iced white mocha with oat milk and a ham+cheese croissant so I can bang out this post for you.

If you’re just getting started with “vibe coding” - actually, I suppose I should cover what THAT is first just in case you’re not familiar.

Vibe coding is building software by describing what you want in plain language (ie., “can u build me a database pls”) and letting an AI write, run, and iterate on the code, with you steering by feel and outcome rather than by hand-writing every line yourself.

Basically

It’s inputting what you want

Providing feedback to adjust the output

And letting Claude (or Chat) code the entire thing for you.

It’s incredible. It’s FUN. And it might be the most I’ve enjoyed being online in the past several years.

So. now that you know what vibe coding is, you’ll need to know a couple things about actually DOING the vibing.

You really need:

• a coding environment to write and run the code (like Claude Code or an in-browser tool)
• a place to deploy and host it live (I’ll do another tutorial on this one! I use Netlify AND Vercel for different sites, so choose the one that feels best to you)
• a backend like Supabase to store and manage data
• and connections to whatever specialty tools your project needs, like Higgsfield for AI media generation, all wired together so Claude can actually ACT on what you’re asking for

if it sounds overwhelming, I promise it’s really simple. once you get eveyrthing set up for the first time, you never have to do it again.

So before we can really do any sort of database, task management, etc - we have to have a backend to store and manage your data. Think of it like having an Airtable or a spreadsheet where all the important data is being stored every time you ask for something that requires a password, or email input, or a magic link login, etc.

In this post below we go over:

• why supabase, specifically (ie., what can it do, why is it important?)
• what supabase offers on their free tier (& why you shouldn’t pay for it)
• connecting claude to supabase (the regular chat)
• connecting claude CODE to supabase using supabase mcp
• and screenshots to help you understand the flow!

why Supabase, specifically

Doesn’t matter if it’s a quiz funnel, a membership app, a tracker, whatever: you need a backend. The second you want to save something (a user, a form response, a login) you need somewhere for that data to live. That’s what Supabase is. It’s your database, your login system, your file storage, and your “run this code automatically” system, all bundled into one dashboard. Convenient af.

It’s built on Postgres, which is the real, grown-up, industry-standard database that actual engineers use. Sooooo you’re not building on some flimsy toy version of a database that you’ll outgrow in a month- you’re building on the same stuff powering really big companies, you’re just accessing it through an interface that doesn’t make you want to throw your laptop out the window. (We’ve all been there amiright)

And bc we don’t believe in making extra work for ourselves, we can connect Supabase DIRECTLY to Claude Code. That means instead of clicking through a dashboard trying to remember what a “foreign key” is, you just tell Claude what you want in plain English and it does the database work for you. “Create a table for quiz results with name, email, and archetype” and it magically works. ;)

& on the Supabase free tier…

• 500 MB database storage — this holds a couple million rows of typical app data. For a quiz funnel, a membership tracker, or an early-stage product, you are nowhere near this ceiling.
• 1 GB file storage: enough for images, PDFs, whatever assets your app needs to hold onto.
• 5 GB bandwidth (egress): this is the data moving in and out every time someone uses your app.
• 50,000 monthly active users: yes, fifty thousand. On the free plan. For authentication.
• 500,000 edge function invocations: this is your “run this bit of code automatically” allowance, and it’s a LOT.
• 200 concurrent realtime connections: for anything live-updating, like a leaderboard or a chat feature.
• Up to 2 active projects: so one for your actual build, one for testing, without paying a cent.

It’s a fuck ton. So you really don’t need to pay for it, mmk? Don’t let it talk you into subscribing until you actually have to.

THE ONLY DRAWBACK: free projects pause after a week of no activity, and there are no automatic backups. So this is perfect for building, testing, prototyping, and even running early-stage products with light traffic. It is NOT the place to keep your only copy of mission-critical client data with zero backup plan. Build here, but back up your important stuff, and graduate to the $25/month Pro plan when you've got real users depending on uptime.

I have yet to run into this being an issue as I’m pretty active with the databases I’m using.

connecting Claude to Supabase, step by step (in regular claude)

Step 1: Get a Supabase account. Head to supabase.com and sign up. It’s free, no card required. (I recommend creating a Github account FIRST, and then signing in with that. Below, you can see that I sign in with my GitHub, which I will go into more detail on later!)

Step 2: Create a project. Give it a name, set a database password (save this somewhere, you’ll want it later), and pick a region close to you or your users.

Step 3: Open Claude and find the connectors menu. In Claude.ai or Claude Desktop, look for the connectors option in your settings. Supabase is now an official, built-in connector, so you don’t need to mess with any manual setup or copy-pasting API keys into config files.

SETTINGS > CONNECTORS (it’s under Customize)

As you can see, I don’t have Supabase connected. That’s because I recently DISconnected it for a specific unrelated reason and need to reconnect it.

Step 4: Select Supabase and authorize it. Claude will ask permission to access your Supabase organization. Say yes, log in through the popup, and you’re connected.

Boom.

Step 5: Talk to your database like a normal human. That’s genuinely it. Ez Pz. Once it’s connected, you can ask Claude to build tables, write queries, check for security issues, generate types for your code, deploy edge functions, manage storage buckets, all in plain language. No dashboard-clicking, no remembering SQL syntax you learned once and forgot immediately. Sounds like something you’ll never do, but I promise you, half the stuff you want to code will likely involve a table or edge functions. ;)

Heads up: this connector currently works on paid Claude plans (Pro, Team, Enterprise, or Max), not the free Claude tier.

Since Claude Code is terminal/IDE-based, the setup’s a little different from the claude.ai connector — here’s the quick version:

connecting Supabase to claude code:

1. Add the Supabase MCP server to your project. In your terminal, run a config command (or manually add it) pointing Claude Code to https://mcp.supabase.com/mcp as an HTTP-type MCP server.
2. Authenticate. Run the auth flow in your terminal (not the IDE extension); it’ll open a browser window, you log into Supabase, and authorize the connection.
3. Scope it to a project. When prompted, pick the specific Supabase project you want Claude Code to have access to (or leave it open to all your projects, though scoping down is the smarter move).
4. Verify it’s actually connected. Ask Claude Code something simple like “list all tables in my database”, if it responds with real schema info, you’re wired up.

Now I know you have questions after reading that haha bc I did too. So here’s the breakdown:

What's the “terminal”?​
​
It's that plain black (or white) text-only window on your computer where you type commands instead of clicking buttons. On a Mac it's an app literally called "Terminal" (search for it in Spotlight, cmd+space and type "terminal"). On Windows it's "Command Prompt" or "PowerShell." If you already have Claude Code installed, you've already opened this at least once to install it, so you've technically been here before. (If you don’t have Claude code installed ON your computer, you should do that.)

What’s a “config command”?​
​
It just means typing a specific line of text into that terminal window and hitting enter. That’s it.

The actual command to add Supabase:
​
​Open your terminal, navigate to your project folder (or just open it wherever), and paste this in:

claude mcp add --transport http supabase https://mcp.supabase.com/mcp

Okay. Now. Just ping the chat if you have questions about that, because it was a LOT. And the chat is there for a reason - to ACTUALLY support you through all the questions you have. I believe I’ve enabled the upload of files and all that jazz so you should be able to provide screenshots etc.