Leveraging AI · Setup
How it all fits together

Every tool in your setup, and the one job it does.

You're not learning ten hard things. You're learning a few simple tools that each do one job. Here's the whole map.

First, two words that trip everyone up

Terminal vs. CLI.

The terminal is just the window where you type commands. A CLI is a tool you operate by typing instead of clicking. git, gh, and claude are each a separate CLI, three different tools that all run inside the same terminal window.

That's why "not recognized" happens: installing a CLI means putting that tool on your computer so the terminal knows its command. If it says claude is not recognized (Windows) or command not found: claude (Mac), the terminal just can't see that tool yet. It's a find-it problem, not a broken-computer problem. The one-time fix for each is on drerinjacques.com/stuck.
Reading the screen

How to spot a CLI command.

"CLI" is a category, not a word that shows up in the command. A CLI command is just an instruction you type into the terminal to make a program do something. Here's how to recognize one at a glance.

The tells
1 · Starts with a tool name
The first word is the program you're bossing around: claude, git, npm, curl, ls, cd. A line that begins with a lowercase tool name like that is almost always a CLI command.
2 · It has flags
Little options starting with -- or -, like --scope, --transport, -s. Plain English never has those. A dead giveaway.
3 · It's terse
No "please," no filler, just keywords, values, and paths. It reads like an instruction, not a sentence.
4 · It's typed at the prompt
You type it at the terminal's % prompt, not into Claude's chat.
One command, decoded
claude mcp add --scope project --transport http stripe https://mcp.stripe.com/
claudethe program you're commanding
mcp addthe action (add an MCP)
--scope projecta flag + its value (an option)
--transport httpanother flag + value
stripean argument (the name for this server)
https://mcp.stripe.com/an argument (the URL)
The three things you type, and where each goes
TypeLooks likeGoes where
CLI commandclaude mcp add --scope … (tool name + flags)the terminal (%)
A prompt to Claude"Using the Stripe MCP, create a coupon…" (full English sentences)inside Claude (>)
Codeconst x = ...; (symbols, brackets, semicolons)inside a file
Quickest gut-check: starts with a lowercase tool name and has --flags? → it's a CLI command, goes in the terminal. Reads like a sentence? → that's a prompt for Claude.
Who does what

One line per tool.

Your workspace
VS Code
The workspace where your project lives and gets edited on your computer.
Claude Code extensionClaude in the chat panel
Claude living inside VS Code, the sunburst chat panel you click.
Claude CLIClaude in the terminal
The same Claude, run in the terminal. Needed for steps like /mcp that only work there.
Saving & shipping
gita CLI
The engine that saves versions of your code and pushes them. Mac has it built in; Windows installs it (Git for Windows).
ghGitHub's CLI
Logs your computer into your GitHub account so your pushes are allowed.
GitHub Desktop
The friendly app that clones your repo down to your computer and syncs changes.
GitHub
The cloud copy and full history of your project, the source of truth online.
Vercel
Hosting. Deploying on Vercel is what puts your site live on the internet.
Your database
Supabase project
Your actual database, logins, and users, created in Supabase.
.mcp.jsona config file
A small file that tells Claude which Supabase project to connect to. Must exist before /mcp works.
Supabase MCP
Claude's hands inside your database, build tables, run the database. Connected via /mcp in the terminal.
Supabase keysURL + anon key
Your site's connection to Supabase, so login works in the browser. Live in your page and in Vercel.
The one people always mix up

There are TWO Supabase connections.

1. The MCP

Claude ↔ Supabase. Lets Claude build your tables and database. Set up in the terminal with /mcp.

2. The keys

Site ↔ Supabase. The URL + anon key in your page and Vercel. This is what makes login work for real people.

Both are needed. One being done does not mean the other is. If Claude can build tables but login doesn't work, the keys aren't in place. If login works but Claude can't see your database, the MCP isn't connected.
Two files that keep your secrets safe

.env and .gitignore.

These two show up constantly and work as a pair. One holds your secrets; the other makes sure those secrets never leave your computer.

.env.localyour secrets
A plain text file that holds your private settings and keys, like your Supabase URL and keys. One KEY=value per line. It lives on your computer and is meant to stay private, so your keys aren't sitting inside your actual code where they could leak.
SUPABASE_URL=https://yourproject.supabase.co SUPABASE_ANON_KEY=eyJhbGciOi...
.gitignorethe bouncer
A list of files Git should ignore, never save, never upload to GitHub. It keeps two kinds of things out of your repo: your secrets (.env.local) and bulky auto-generated folders (node_modules, the downloaded code libraries).
.env.local node_modules
How they work together: .env.local holds your keys, and .gitignore is the bouncer that keeps that file from ever being uploaded to GitHub. That's exactly why your Supabase keys are safe on your computer but Vercel doesn't automatically have them, they were (correctly) kept off GitHub, so you add them to Vercel separately.
When Claude asks you to approve creating or editing these, say yes. It's normal and it's protecting you, .gitignore is what stops your keys from leaking, and .env.local is where they live.
Why order matters here

Why .mcp.json comes before /mcp.

/mcp basically says "connect to Supabase." But it needs to know which project. That answer lives in .mcp.json (your project's reference ID).

Think of /mcp as "call Supabase," and .mcp.json as the phone number it dials. No file, nothing to connect to, and "supabase" won't even appear in the list to authorize.

Create Supabase project → Claude writes .mcp.json → /mcp authorizes it → Connected