Set up your vibe coding environment
Go from zero to a live, auto-deploying app: install Claude Code, connect GitHub, add a Supabase database, and deploy with Vercel.
Last updated Aug 17, 2026
"Vibe coding" — describing what you want in plain language and letting an AI write the code — only works if the plumbing behind it is set up right. Skip the setup and you get a folder of AI-generated files with no version control, no database, and no way to put it online; one bad change and there's no undo. This workflow lays the four rails that make the whole approach safe and fast: an AI pair programmer in your terminal, version control, a real database, and automatic deploys. Thirty minutes, and every change you make from then on is backed up and live.
The order matters. Install the assistant, put it under version control immediately (so nothing is unrecoverable), give it a database, and connect deploys last so shipping becomes a git push.
What you'll walk away with
- Claude Code running as an AI pair programmer in your terminal
- Your project versioned and backed up on GitHub
- A live Postgres database via Supabase
- Auto-deploys on every push, so shipping is one command
Step by step, with the judgment that matters
1. Install Claude Code. npm install -g @anthropic-ai/claude-code, then cd into your project and run claude. From there you describe features in plain language — no separate editor needed. It reads and edits real files in your project, so treat it like a fast junior developer: clear instructions, and review what it changes.
2. Put it under version control immediately. git init, commit, and push to GitHub (gh repo create ... --push, or create the repo on github.com and push). Do this *before* you build much — version control is your undo button. When the AI makes a change that breaks things, you revert to the last good commit instead of untangling it by hand.
3. Add a database with Supabase. New Project on supabase.com, copy the Project URL and keys into your .env, and ask Claude Code to "connect this project to my Supabase database." You get Postgres, auth, and storage without running anything locally.
4. Connect deploys with Vercel. Import your GitHub repo at vercel.com/new, add your Supabase env vars, and deploy. From now on every git push to main redeploys automatically — shipping becomes a side effect of committing.
A real run
Starting an empty folder, you install Claude Code and ask it to scaffold a simple app. You immediately git init and push to GitHub. You spin up a Supabase project, drop the keys in .env, and tell Claude Code to wire it up. You import the repo into Vercel with the same env vars, and it's live. Thirty minutes later you have a real, deployable, version-controlled app — and every future change is one git push from production.
Where it goes wrong
- "Do I need to code?" Basic familiarity helps for reviewing Claude Code's changes, but you drive it in plain language. The review is the skill, not the typing.
- An install error stops you. Paste the exact error back into Claude Code — it can usually diagnose and fix its own setup problems.
- The app works locally but 500s on Vercel. Almost always a missing env var. Add your Supabase keys in the Vercel project settings and redeploy.
The honest cost
Free to set up. GitHub (private repos), Supabase (free Postgres), and Vercel (Hobby) all have real free tiers. Claude Code runs on a Claude subscription or pay-as-you-go API credits — that's the one piece with a cost, and it's what's doing the actual coding work.
FAQ
Do I need to know how to code to start?
Basic familiarity helps for reviewing what Claude Code changes, but you can describe features in plain language and let it write the code.
What if I get stuck installing something?
Paste the exact error message back into Claude Code — it can usually diagnose and fix installation issues on its own.