Supabase: API & CLI — Overview

You've set up Supabase, created tables, and turned on RLS. Your database exists. Now you need to connect your React app to it, manage changes to it from your terminal, and make sure your code editor catches mistakes before they reach real users.

Three tools make that happen. This section covers all three — plus one bonus that changes how Claude Code works with your project.

---

The Four Things You'll Set Up

1. API Keys — The Passcode to Your Database

Your Supabase project is a building. Your React app needs a passcode to get in.

That passcode is an API key. Supabase gives you two:

• The public key (safe to use in your app's frontend code — like a lobby door code anyone can use, but RLS controls what they can actually do once inside)
• The secret key (bypasses all security — like a master key that should never leave your hands or your server)

Without the right key in your app's configuration, your app cannot read or write a single row of data. Setting this up correctly is the first step to a working app.

2. The CLI — Controlling Supabase From Your Terminal

The Supabase CLI is a command-line tool you install once. It lets you:

• Generate TypeScript types from your database schema (more on this below)
• Apply database migrations — changes you've written as SQL files
• Deploy edge functions
• Pull your remote schema down to local files

Excel analogy: Imagine being able to type excel refresh-all-pivots in a command prompt and having every pivot in every file update itself — without opening Excel at all. The CLI gives you that level of control over your database and backend.

3. TypeScript Types — The Spell-Checker for Your Database

You have a table called fee_records. It has a column called paid_at. At some point while coding, you'll type fee.paidAt (camelCase) instead of fee.paid_at (snake_case). Without TypeScript types, this mistake only shows up at runtime — your app crashes or returns empty data, and you spend 20 minutes figuring out why.

With TypeScript types generated from your database, VS Code underlines fee.paidAt in red the moment you type it. It knows the column is paid_at because the types file describes every table and every column in your schema.

Excel analogy: When you type a formula that references a named range that doesn't exist — =SUMIF(ClientsTable[Clint_Name], ...) — Excel shows #NAME? immediately. TypeScript does the same thing for your database column names, but catches it before the code ever runs.

4. The MCP Server — Claude Code Talks Directly to Your Database

Normally, checking what's in your database means opening a browser, going to the Supabase dashboard, navigating to the table, and looking. That's a 30-second context switch every time.

The Supabase MCP (Model Context Protocol) server is a bridge that connects Claude Code directly to your Supabase account. Once set up, you can ask Claude Code things like:

• "Show me the last 10 rows in the fee_records table"
• "Apply this migration to my project"
• "What tables exist in my Supabase project?"

Claude queries your actual database and returns the results — without you leaving VS Code.

---

How These Pieces Connect

---

What You'll Have After This Section