The five-tool stack for building real apps you own: Claude Code writes it, VS Code shows it, GitHub keeps every version, Vercel puts it online, Supabase holds the data. Set up all five and give Claude the keys, safely.
Swipe or tap Next · checked on 2026-10-06
Two things first, by hand: get Claude Pro at claude.com/pricing and install Claude Code (one command, in Install the tools below). Then paste one prompt and Claude walks you through the rest, one step at a time. You do the clicks that need your accounts; Claude does the typing.
Make the folder and start Claude in it
mkdir -p ~/apps
cd ~/apps
claudeThe setup prompt (copy all of it) · lines 1-8 of 38. Copy all copies the whole prompt; read it in full on the page.
Hi Claude. Please be my patient setup helper. I don't code: one step at a time, tell me exactly what to type or click, and wait for me after each step.
Goal: set up my own app stack so I can build real apps with you:
- you (Claude Code) write the code
- VS Code is where I see it
- GitHub keeps the code and every version of it
- Vercel puts it online every time we push
- Supabase is the database (data, logins and file storage)This is the manual way: every account, command and file. Use it by hand, or keep it open to check what Claude is doing.
.env.local on your computer and in Vercel's settings.App builders like Lovable and Base44 are a fast way to get a first version on screen, and both let you get code out. The difference is who holds the pieces and how you pay. Here's what their own pages say, checked 2026-10-06:
From Lovable's and Base44's own docs and pricing pages, linked in the sources. Plans change: check before you choose.
The code is in your GitHub. The data is in your Supabase. The site runs in your Vercel account. Claude Code is the builder you hire for $20 a month; if you ever stop paying, the app keeps running and the code is still yours.
Pro is $20 a month, or $17 a month billed yearly ($204). The free plan doesn't include Claude Code.
The Free plan is enough: unlimited public and private repositories. Sign up with the email you'll use for everything else here.
Pick Hobby and Continue with GitHub, so Vercel can see your repositories.
Sign in with GitHub. The Free plan gives you 2 active projects.
Vercel's Hobby plan is for personal, non-commercial use. Their definition of commercial includes taking payments, advertising a product or service, getting paid to build or host the site, and running ads. A site for your business is commercial: that needs Pro, $20 a month per seat. Build and test on Hobby, then upgrade before it does business.
You'll install Node.js (runs the app on your computer), Git, VS Code, Claude Code, and two command-line tools: GitHub's gh and Vercel's vercel. Supabase's command-line tool installs inside the project later. Windows works natively; every command below has a Windows line where it differs.
Terminal, Return.PowerShell, Enter.Homebrew installs the rest with one word each. Skip this if brew --version already works.
Install Homebrew (Mac)
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"Next.js needs Node.js 20.9 or newer. On Windows, use the installers: the LTS from nodejs.org and Git for Windows (Claude Code uses its Git Bash too). Open a new terminal afterwards.
Mac
brew install node git
node --version # v20.9 or newer
git --versionDownload and install it. It's free for private or commercial use. On a Mac, open VS Code, press Command + Shift + P, and run Shell Command: Install 'code' command in PATH, so code . opens a folder from the terminal. (The Windows installer sets this up for you.)
Install it, open a new terminal, check the version, then run claude once and sign in with your Claude account in the browser.
Mac, Linux, WSL
curl -fsSL https://claude.ai/install.sh | bash
# open a NEW terminal window, then:
claude --version
claude doctor # read-only health checkWindows PowerShell
irm https://claude.ai/install.ps1 | iex
# open a NEW PowerShell window, then:
claude --versionIn VS Code press Command + Shift + X (Mac) or Ctrl + Shift + X (Windows), search Claude Code, and install the one from Anthropic. It adds a Claude panel that shows each change as a diff you can review before accepting. You can also just run claude in VS Code's own terminal (Terminal → New Terminal).
gh lets Claude create repos and pull requests; vercel lets it read deploy logs and settings. Linux: see cli.github.com for gh.
Mac
brew install gh
npm i -g vercel
gh --version
vercel --versionWindows PowerShell
winget install --id GitHub.cli --source winget
npm i -g vercel
# open a NEW PowerShell window, then:
gh --version
vercel --versionOne command makes a Next.js app that's already wired to Supabase, with sign-up, login and password reset pages built in. It also starts your Git history with a first commit.
Make the app and open it in VS Code
cd ~/apps
npx create-next-app@latest my-app -e with-supabase
cd my-app
code .Good: VS Code opens on a folder with app/, components/, lib/ and .env.example. Don't run it yet: it needs your Supabase keys first (two sections down).
Pick GitHub.com, HTTPS, yes to authenticating Git, and log in with a web browser. It shows a one-time code to paste on the page it opens.
Log in
gh auth login
gh auth statusRun this inside my-app. It makes the repo on GitHub, links it, and pushes your first commit.
Create and push
gh repo create my-app --private --source=. --push
gh repo view --webGood: your browser shows the repo with your files. .env.local is not there, and never will be: the starter's .gitignore already blocks .env*.local and .env.
Name it, generate a strong database password and save it in your password manager (the CLI asks for it later), and pick the region closest to your users.
Make .env.local from the example file, open it in VS Code, and paste the two values yourself. The publishable key is made to be public. The secret key (and the old service_role key) is not: it never goes in this file, in chat, or anywhere with NEXT_PUBLIC_ in front of it.
Make .env.local
cp .env.example .env.local
code .env.local.env.local
NEXT_PUBLIC_SUPABASE_URL=<your Project URL>
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=<your publishable key>Open localhost:3000, click Sign up, and use your email. Supabase sends a confirmation email; after you confirm, you're logged in to your own app. Stop it with Ctrl + C.
Run
npm run devNEXT_PUBLIC_SUPABASE_URLYour project's address. Fine to be public.
Supabase → your project → ConnectNEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEYThe browser-safe key. Row Level Security decides what it can reach.
Supabase → your project → Connect (older projects call it the anon key; it works here too)Every table you add should be a migration file in your repo, so GitHub has the history of your database too, and Claude can write the next one. The CLI installs inside the project, so it works the same on Mac and Windows.
Your project ref is the 20-letter code in your Supabase project's URL (supabase.com/dashboard/project/<ref>). link may ask for the database password from step 1. If init asks about VS Code settings for Deno, answer no.
In my-app
npm install supabase --save-dev
npx supabase login
npx supabase init
npx supabase link --project-ref <your project ref>Make a migration and paste this in. It creates a notes table where each logged-in user only ever sees their own rows. Supabase's rule: turn on RLS for every table, because without it the publishable key can read the table.
Make the file
npx supabase migration new create_notes
# opens nothing: find the new file in supabase/migrations/ and paste the SQL belowsupabase/migrations/<timestamp>_create_notes.sql · Part 1 of 2 · Copy copies all 16 lines
-- A notes table: each signed-in user sees and edits only their own notes.
create table public.notes (
id bigint generated always as identity primary key,
user_id uuid not null default auth.uid() references auth.users (id) on delete cascade,
body text not null,
created_at timestamptz not null default now()
);
alter table public.notes enable row level security;
create policy "Users manage their own notes"
on public.notes
for all
to authenticated
using ((select auth.uid()) = user_id)supabase/migrations/<timestamp>_create_notes.sql · Part 2 of 2 · Copy copies all 16 lines
with check ((select auth.uid()) = user_id);Good: the dry run lists your one migration; the real push applies it, and the table shows up in Supabase's Table Editor with RLS enabled.
Apply the migration
npx supabase db push --dry-run
npx supabase db push
git add -A && git commit -m "Add notes table"Pick my-app from your GitHub list. Vercel detects Next.js by itself. Open Environment Variables and add the same two lines from your .env.local (name and value). Click Deploy.
Set Site URL to your live address (the https://...vercel.app link Vercel gives you). Under Redirect URLs add http://localhost:3000/** and https://*-<your-vercel-account-slug>.vercel.app/** so sign-up emails work locally and on preview links.
So Claude can read build logs and settings. vercel link asks which project: pick my-app.
In my-app
vercel login
vercel link
vercel env lsFrom now on, a push is a deploy. Every push to main becomes a production deployment; every other branch gets its own preview link. Claude pushes only after you say yes (that's in the settings file below).
This is the part that makes it feel like having a developer. Claude Code can already run gh, vercel and npx supabase, because you logged them in. Two connectors (MCP servers) add direct access to Supabase and Vercel, and two files tell Claude how to behave.
All three should answer with your account
gh auth status
vercel whoami
npx supabase projects listSupabase's official MCP server lets Claude look at your tables, run queries, read logs and search Supabase's docs. Scope it to one project. Add &read_only=true to the URL if you want it look-only. Supabase recommends connecting a production project only when the task needs it.
In my-app
claude mcp add --scope project --transport http supabase "https://mcp.supabase.com/mcp?project_ref=<your project ref>"Vercel's official MCP server lets Claude search Vercel's docs, look at your projects and deployments, and read deploy logs. Vercel's own warning: it acts with the same access as your Vercel account.
In my-app
claude mcp add --transport http vercel https://mcp.vercel.comStart claude in my-app, type /mcp, and sign in to each one in the browser. Then check them.
Check
claude mcp listCreate .claude/settings.json. Builds, diffs and commits run freely; pushes, Vercel commands and the real database push ask you first; reading your .env files is blocked. Ask rules still prompt even in auto mode.
.claude/settings.json · Part 1 of 2 · Copy copies all 23 lines
{
"permissions": {
"allow": [
"Bash(npm run *)",
"Bash(git status)",
"Bash(git diff *)",
"Bash(git add *)",
"Bash(git commit *)",
"Bash(npx supabase migration new *)",
"Bash(npx supabase db push --dry-run)"
],
"ask": [
"Bash(git push *)",
"Bash(vercel *)",
"Bash(npx supabase db push)".claude/settings.json · Part 2 of 2 · Copy copies all 23 lines
],
"deny": [
"Read(./.env)",
"Read(./.env.local)",
"Read(./.env.*.local)"
]
}
}Save this as CLAUDE.md in my-app. Claude Code loads it at the start of every session. You can also run /init to have Claude draft one from your code, then add these rules.
CLAUDE.md · Part 1 of 2 · Copy copies all 24 lines
# My app
Built with: Next.js (App Router), Supabase (database, logins, file storage), deployed on Vercel from GitHub.
## Commands
- `npm run dev`: run it locally at http://localhost:3000
- `npm run build`: must pass before any push
- `npx supabase migration new <name>`: every database change is a migration file in supabase/migrations
- `npx supabase db push --dry-run`, then `npx supabase db push`: apply migrations (ask me first)
## How we work
- Plan first for anything bigger than a small fix. Show me the plan, then build.
- Small changes, one feature at a time. Run `npm run build` after each change.
- Commit with a clear message. Ask me before `git push`: a push to main goes live on Vercel.
- Turn on Row Level Security on every new table, with a policy, in the same migration.CLAUDE.md · Part 2 of 2 · Copy copies all 24 lines
## Secrets
- Keys live only in .env.local (on my machine) and in Vercel's environment variables. Never in code, chat, commits or screenshots.
- Only NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY may be used in browser code.
- Never use a Supabase secret or service_role key in anything with NEXT_PUBLIC_ in front of it.
- Never read or print .env.local.
## When something breaks
- Read the error first. For a failed deploy, check the Vercel build logs (vercel logs, or the Vercel MCP) before changing code.Commit both files (git add -A && git commit -m "Claude settings") so they travel with the project.
Start claude in my-app, press Shift + Tab until it says plan mode, and paste this. Claude plans first; you approve; it builds.
Prompt: a notes page
Add a /notes page for logged-in users: a box to write a note, a list of my notes, newest first, using the notes table we just made. Plan it first and wait for my yes. Then build it, run npm run build, and commit. Don't push.Then check it yourself: npm run dev, log in, add two notes. Look at the changes in VS Code's Source Control panel. When it's right, tell Claude to push. Vercel builds it, and the live link has your notes page a minute or two later.
Good: two different accounts never see each other's notes. That's Row Level Security doing its job.
Most of this work is describing what you want. Wispr Flow turns your voice into text in any app, including the terminal and VS Code, so you hold a key and talk your prompts instead of typing them.
Download it for Mac or Windows, open it, and sign in.
Default push-to-talk: hold Fn on a Mac, Ctrl + Win on Windows. Let go and the text appears where your cursor is. Hands-free mode: Fn + Space (Mac), Ctrl + Win + Space (Windows). You can change the keys in its settings.
The free plan covers 2,000 words a week on desktop. Pro is $15 a month, or $12 a month billed yearly, for unlimited dictation (checked 2026-10-06).
1. A new feature, the safe way
I want <describe the feature>. Plan it first: which pages, which tables, which migration. Wait for my yes. Build it in small steps, run npm run build after each, and commit. Ask me before pushing.2. A database change
Add <what you need> to the database as a new migration in supabase/migrations, with Row Level Security and a policy in the same file. Show me the SQL, run npx supabase db push --dry-run, and wait for my yes before the real push.3. A failed deploy
My last Vercel deploy failed. Read the build logs with the Vercel MCP or vercel logs, tell me the cause in one sentence, fix it, run npm run build, and commit. Ask before pushing.4. A safety check before launch
Read-only review: check every table has Row Level Security on, no secret or service_role key is used in browser code or committed anywhere, and .env files are gitignored. List anything wrong with the fix. Don't change anything yet.List prices checked 2026-10-06 on each tool's pricing page (sources below). Prices change: check before you buy.
To build and test: $20 a month. To run a business app on it: add Vercel Pro ($20 a month per seat), and Supabase Pro (from $25) once you outgrow the free tier or can't have the project pause. Claude Pro's usage resets every five hours, with weekly limits on top; bigger builds can hit them, and Max raises them.
.env.local and in Vercel's settings.NEXT_PUBLIC_ in front.npx supabase db push --dry-run first.claude, gh or vercel: command not foundOpen a new terminal window after installing. Still missing? For Claude Code, claude doctor and its troubleshooting page show the PATH fix for your shell.
.env.local is missing or a value is blank. Check both lines, then stop and restart npm run dev.
Set Site URL and Redirect URLs in Supabase → Authentication → URL Configuration, as in the Vercel section.
Usually a missing environment variable in Vercel. Add both, then redeploy. Ask Claude to read the build logs (prompt 3).
Row Level Security is on with no policy that matches, or you're not logged in. Check the table's policies in Supabase.
supabase link or db push fails on the passwordIt's the database password from when you created the project, not your Supabase login. Reset it in the project's Database settings if it's lost.
Free projects pause after a week of inactivity. Restore it from the dashboard; upgrade to Pro if it can't pause.
Hobby can't deploy private repos owned by an organization. Use a repo on your personal account, or Vercel Pro.
What each page backs up is listed at the end of the full guide.
Five tools, one monthly bill to start, and every piece in your name: the code in your GitHub, the data in your Supabase, the site in your Vercel. Claude Code does the typing; you do the deciding.
Build the first small thing this week. A notes page is boring on purpose: once it works end to end, everything after it is the same loop.
Want help setting this up? Receipts Group builds these systems.
Open the full guide as a page (every file in full, plus the table of contents).