Skip to content
GrowthVector.io

How to Start Vibe Coding: Setup, Scope and Your First Project

How to start vibe coding: the setup, the concepts and the first-project rule

Updated

How to start vibe coding comes down to three choices: a tool class, a setup that works on your machine, and a first project small enough to finish. This page is Step 1 of 12 in the Vibe Coding guide. You leave it with a working local setup, a clear view of what coding agents do well and badly, and a scope rule for Bookly, the booking app for a small hair salon that this guide follows from idea to launch.

Vibe coding means you describe what you want to an AI tool in plain language, then review and test what it builds. Andrej Karpathy, who coined the term, introduced it in early February 2025. Collins Dictionary named it Word of the Year 2025 and defined it as 'the use of artificial intelligence prompted by natural language to write computer code.'

Read the map below for the other 11 steps. Every page builds on the same project, so the steps add up instead of starting over.

Related guides: choosing vibe coding tools, PRD and planning, vibe coding workflow.

The Guide at a Glance

A vibe coding guide in 12 steps: what each page covers

Read the steps in order. Each page picks up where the last one stopped, and each one links to the page that owns its topic.

  1. 1Getting started: You are here. Setup, the core concepts and the first-project scope rule.
  2. 2Tools: Choose an AI app builder, AI IDE or terminal agent, with plans and limits compared.
  3. 3Planning: Write the PRD, the data model and the acceptance checks, then split the PRD into tasks.
  4. 4Workflow: Run the daily loop: git, one branch per task, small commits, context files and rollback.
  5. 5TDD: Write the failing test first, and stop the agent from editing tests to make them pass.
  6. 6Security: Protect secrets, authorization, Supabase row level security and payments.
  7. 7Architecture: Choose the stack and the backend layer, and spot the decisions that are hard to undo.
  8. 8Deployment: Ship to a host, then set up monitoring, cost caps, incident playbooks and app store rules.
  9. 9Legal: Cover privacy, cookie consent, accessibility, subscriptions, licenses and AI-generated code copyright.
  10. 10Claude Code: Deep dive on the terminal agent: CLAUDE.md, skills, hooks, subagents, plan mode and pricing.
  11. 11Claude Cowork: Deep dive on non-code work, and how to route work between Cowork and Claude Code.
  12. 12Codex: Deep dive on OpenAI Codex: the CLI, cloud, AGENTS.md, pricing and Codex vs Claude Code.

What Vibe Coding Is

What vibe coding means now

Andrej Karpathy, who coined the term, introduced it in early February 2025. Collins Dictionary named "vibe coding" its Word of the Year for 2025 and defined it as the use of artificial intelligence prompted by natural language to write computer code.

On February 4, 2026, one year after the original post, Karpathy wrote on X: "my current favorite is agentic engineering." Builders now mostly orchestrate agents and oversee them, so readers hear both terms.

Coding agents changed a lot during late 2025. Reports of failures from 2025 describe older models, so treat them as a snapshot, not a permanent limit.

Jared Friedman of Y Combinator said a quarter of the Winter 2025 batch had codebases that were 95% AI-generated. He added that the figure leaves out routine items such as library imports, and that each founder is "highly technical."

Simon Willison draws the line at review. If an LLM wrote the code and you reviewed and tested it thoroughly, "that's not vibe coding, it's software development."

The Three-Layer Spectrum

The tiers differ by how much the human reads, decides and owns. The first tier carries the most risk, because nobody reads the output.

Vibe Coding

You accept AI output without reading it, and you paste errors back without comment. The AI is a black box to you.

High Risk

Assisted Coding

The AI generates the code. You review it at a high level, test by hand and make the judgment calls that the agent cannot make.

Middle Tier

Agentic Engineering

You set the goals, the constraints and the quality bar. Agents implement the work, and you own the architecture and the correctness of the result.

Lowest Risk

Three tool classes

Every tool you will meet falls into one of three classes. Pick one class for your first project, then learn one tool in it.

AI app builder

A browser tool that builds the whole app for you. Lovable, Bolt and Replit are examples.

AI IDE

An editor with a built-in agent that edits the files in your project. Cursor and Windsurf are examples.

Terminal agent

A command-line agent that reads and edits your project folder. Claude Code and Codex CLI are examples.

Claude Code also runs as a desktop app, in VS Code and JetBrains, and on the web. It needs a Pro, Max, Team, Enterprise or Console account, and the free plan does not include it. Codex CLI installs on macOS, Linux and Windows and signs in with ChatGPT. Step 10 and Step 12 cover each agent in depth.

Step 2 compares the three classes on plans, limits and lock-in, and picks a tool for Bookly.

What You Can Build

What You Can Build vs. What Needs Expert Review

Scope by risk, not by app type. Money, login and concurrency need a line-by-line review, whatever tool built them.

Works Well

  • Landing pages with static content, forms, and basic animations
  • CRUD apps (create, read, update, delete) with standard database operations
  • Personal tools like fridge content analyzers, podcast transcribers, habit trackers
  • Data dashboards pulling from APIs or databases to display charts and tables
  • Browser games with simple mechanics
  • Admin panels for managing users, content, or internal data
  • SaaS MVPs with basic authentication, payments, and 3-5 core features

Needs Expert Review

  • Payments and money movement: deposits, refunds, taxes, and fee logic. For Bookly, the deposit and refund rules fall here.
  • Authentication and authorization: who can log in, and who can see or change each record
  • Concurrency: two clients booking the same slot at the same moment, or live updates shared between users
  • Large codebases where the AI loses track of earlier decisions and creates contradictions and duplicate components

In 2025, 170+ apps built with Lovable on Supabase exposed data because Row Level Security was missing or wrong. Step 6 covers the RLS checks.

How to start vibe coding: a 5-step path for your first project

Top-ranking guides on this topic use a five-step loop: plan the project, pick a tool, write a detailed prompt, generate and preview, then refine and publish. The loop is a fair start. It says little about the local setup, the scope limit or the stop rule. This guide covers those.

  1. 1.Plan the project. Write a short scope with one acceptance check. For Bookly, that is one booked slot with a test-mode deposit. Step 3 turns the scope into a PRD.
  2. 2.Pick a tool class. Choose one tool and learn it. Step 2 compares the options.
  3. 3.Prompt one task at a time. Ask for one change and name the files it may touch. Step 4 covers the daily loop.
  4. 4.Run it and read the change. Run the app locally, read the diff, and test the feature by hand before the next prompt.
  5. 5.Ship only after the checks. Run the security checks, then deploy with the steps in Step 8.

Stop rule: when a fix creates a new bug three times in a row, stop, roll back to the last commit that worked, and cut scope.

Bookly: scope the first project

Bookly is the booking app for a small hair salon that this guide builds from idea to launch. Clients book a time slot and pay a deposit. The owner sees the day's bookings and can cancel or refund a booking.

Bookly is an illustration for this guide. It has no users, revenue or measured results.

A first project should be small enough to finish and risky enough to teach you something. Bookly has that size: a handful of tables (clients, staff, services, bookings and payments), one payment flow and one admin view. You can finish it in a few tasks, and each task gets its own acceptance check.

Version one

  • Book a time slot.
  • Take a deposit in the payment provider's test mode.
  • Show the owner's day view.
  • Cancel or refund a booking.

Not in version one

  • Several locations.
  • Staff rotas.
  • Marketing email.
  • Loyalty points.

Acceptance check for Bookly: a client can book one slot, the deposit shows as paid in test mode, and the owner sees the booking on the day view.

Bookly takes deposits, so keep it in test mode until the security checks pass. In July 2025, an agent deleted a live production database during a declared code freeze. The platform had used one database for preview, test and production, and says it now separates them. Keep test and live data apart, and never let an agent touch the production database.

Step 2 picks the tool for Bookly.

The Spiral of Death

Once your project enters this pattern, more prompting makes it worse. Recognize the warning signs early and either roll back to a working commit or restructure your approach. This list is practitioner advice. No study measures it.

  • Same bug, different face: You fix one issue and it reappears as a new variant. Each fix introduces a fresh regression.
  • Whole-project modifications: Simple changes (like updating a button color) require edits across multiple files because the code structure has become tangled.
  • AI rewrites its own code: The AI suggests completely rewriting logic it generated an hour ago, indicating it lost context or the architecture was never sound.
  • Debugging exceeds building: You spend more time pasting error messages and chasing fixes than actually adding features.

Pair these signs with a rollback rule: return to the last commit that worked before you send the next prompt. Step 4 covers the rollback steps.

What the Published Data Says

Published outcome data

The success stories online are self-reported, so they describe the few builders who shipped. These published figures describe the wider group.

Security tests

Veracode's 2026 GenAI Code Security Report (July 28, 2026) tracked more than 100 models. The average security pass rate was about 56%, virtually unchanged from the year before, so about 44% of tasks introduced a risky vulnerability. Python passed 63% of the time and Java 30%. Newer models write code that runs, not code that is safer. The security page covers the checks.

~44% failed

AI-attributed CVEs

Georgia Tech's Vibe Security Radar counted AI-attributed CVEs: 6 in January 2026, 15 in February and 35 in March. The total is 74 confirmed. Researchers call that a floor, not a ceiling, and estimate 5 to 10 times more. Tool-by-tool counts are not comparable, because Claude Code leaves signatures in commit messages.

74 confirmed

Retirement forecast

Gartner's report dated June 29, 2026 says: 'by 2028, 60% of vibe-coded applications will be retired as they fail to deliver the predictable business value.' This is a forecast, not a measured rate.

60% by 2028

Developer speed

METR's early 2025 trial had 16 developers and 246 tasks. Tasks took 19% longer with AI (interval +2% to +39%). The late-2025 rerun found returning developers about 18% faster (interval 38% faster to 9% slower) and new developers about 4% faster (interval 15% faster to 9% slower). METR calls it 'very weak evidence', because many developers refused to work without AI and skipped tasks. It thinks the true speedup is larger.

Very weak evidence

Trust in AI output

Stack Overflow's 2026 survey drew 30,000+ responses from 169 countries. Only 6.6% would trust AI with an important decision. The 2025 survey found 46% distrust versus 33% trust in AI accuracy.

6.6% would trust AI

Survivorship Bias

The success stories that circulate online come from the few builders who shipped and got attention. The published data describes the wider group. Gartner forecasts that 60% of vibe-coded applications will be retired by 2028. METR's late-2025 ranges include no effect. Veracode found that 45% of generated samples failed its security tests. The CVE count rose each month from January to March 2026. Treat stories as possibility, not probability.

Literacy & Terminal

Vibe coding for beginners: what you must understand before you ship

You don't need to write code to build with AI, but you do need these six concepts. Without them, you can't describe what you want or debug what goes wrong.

Client vs. Server

The client is what runs in the user's browser (the "frontend"). The server is a separate computer that runs your backend code, processes business logic, and communicates with databases. When someone visits your site, their browser (client) sends requests to the server for data.

Frontend vs. Backend vs. Database

Frontend is what users see and interact with: buttons, pages, and forms. Backend is the logic that runs behind the scenes: processing payments, verifying passwords, sending emails. The database is where all persistent data lives: user accounts, bookings, products, and orders.

APIs

APIs are messengers between systems. Your frontend asks the API "give me this user's bookings," the API talks to the backend and database, then returns the result. When you integrate Stripe or Supabase into your app, you are communicating through their APIs.

Authentication vs. Authorization

Authentication verifies who you are (login with email and password). Authorization determines what you can do (admin vs. regular user permissions). Name both in your prompts. "Users must log in" is authentication. "Only the owner can refund a booking" is authorization.

State Management

State is how your app remembers things while a user interacts with it: items in a shopping cart, which tab is selected, data typed into a form. For Bookly, the chosen time slot is state until the client pays.

Environment Variables

Secret settings (API keys, database URLs) stored outside your code in .env files. They keep secrets out of your codebase and let you use different configurations for development vs. production. Never commit these files to Git. Step 6 covers how to keep secrets safe.

Essential Terminal Commands

Navigation
pwdPrint your current directory (where am I?)
lsList files in current folder. Use ls -la to show hidden files.
cdChange directory. cd .. goes up one level.
mkdirCreate a new folder.
touchCreate an empty file.
rmDelete a file. rm -rf foldername deletes folders. No undo.
cpCopy files or folders.
mvMove or rename files.
Package Management
npm installDownload all packages listed in package.json.
npm run devStart the development server at http://localhost:3000.
npm run buildCreate a production-ready build of your project. Since Next.js 16, the build does not run the linter, so run your linter separately.
npxRun a package without installing it globally, for example npx create-next-app@latest my-app --yes.
Git (Install Check)
git --versionCheck that Git is installed and see its version.
git initStart tracking a project with Git.
git statusSee which files have been changed.

Step 4 covers add, commit, branches and rollback.

Process and Environment
Ctrl+CStop a running process (like a dev server).
catDisplay the contents of a file in the terminal.
echoPrint text or variable values to the terminal.
whichFind where a program is installed on your system.
clearClean the terminal screen.

Pro Tips: Press Tab to auto-complete file and folder names. Press Up Arrow to cycle through previous commands. Never type the $ you see in tutorials, it just means "type this in the terminal."

Environment, Files & Errors

Setting Up Your Dev Environment

Why nvm (Not a Direct Node Install)

Different projects require different Node.js versions. Without nvm, switching means uninstalling and reinstalling. Direct installs also cause the "EACCES permission denied" error because they write to system directories.

nvm installs everything in your home directory, so there are no permission issues. You can switch versions with nvm use 26 and lock a project's version with an .nvmrc file.

# Install nvm (macOS, Linux, WSL or Git Bash)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.8/install.sh | bash
# Restart terminal, then:
nvm install --lts

On Windows, nvm runs in WSL, Git Bash or Cygwin. The separate nvm-windows project is not covered here.

From Node 27, Node.js ships one major release a year, and the first of those releases is due in April 2027. Check the version at the start of each project.

Install Claude Code

The native installer does not need Node.js. It needs macOS 13 or later, Windows 10 1809 or later, or Ubuntu 20.04 or later or Debian 10 or later, with 4 GB of RAM.

# macOS, Linux or WSL
curl -fsSL https://claude.ai/install.sh | bash
# Windows PowerShell
irm https://claude.ai/install.ps1 | iex
# Then check the install
claude --version

Other routes: brew install --cask claude-code on macOS, and winget install Anthropic.ClaudeCode on Windows. Claude Code needs a paid plan, and the free plan does not include it.

macOS Setup

Install Homebrew first. It's the standard package manager for macOS and a prerequisite for most development tools. The built-in Terminal.app works fine. iTerm2 is nicer but optional.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Linux Setup (Debian and Ubuntu)

Use apt as your package manager. Run sudo apt update first to refresh package lists, then install the essentials.

sudo apt update
sudo apt install git curl build-essential

Windows Setup: Two Paths

Path A: native Windows (PowerShell)

Claude Code runs natively on Windows 10 1809 or later, with no Administrator rights needed. Install Git for Windows, which Step 4 needs, with the command below. Git for Windows 2.56.0(4) was released on 26 October 2026. Claude Code uses Git Bash when Git for Windows is installed, and PowerShell otherwise. Install Node 26 from nodejs.org/en/download.

winget install --id Git.Git -e --source winget
Path B: WSL 2

Choose WSL 2 when your project needs Linux tools or sandboxed command execution, which native Windows does not support. Run this in Administrator PowerShell on Windows 10 build 19041 or later, or Windows 11, then restart. It installs Ubuntu by default.

wsl --install

Keep project files inside the Linux file system, for example in ~/projects/. Run the nvm steps above inside Ubuntu.

Check Your Setup

Run each command below in a new terminal. Each one should print a version number. If one fails, fix that tool before you start a project.

node -vPrint the Node.js version. Node 26 is the current LTS line.
npm -vPrint the npm version that came with your Node.js install.
git --versionPrint the installed Git version.
claude --versionPrint the installed Claude Code version.

Vibe coding tutorial: from an empty folder to a running Bookly page

This tutorial stops at a running page and one prompt. Step 4 builds the first Bookly feature on a branch, with small commits.

  1. 1. Create the project. Run this in the folder where Bookly will live.
    npx create-next-app@latest bookly --yes
    The project uses TypeScript, Tailwind CSS, ESLint, the App Router and Turbopack. It also writes an AGENTS.md file that guides coding agents.
  2. 2. Start the dev server.
    cd bookly
npm run dev
    Open http://localhost:3000 in your browser. You should see the starter page.
  3. 3. Save the starting point.
    git init
git add .
git commit -m "Starter project"
    Do this before the first agent prompt, so you can roll back. Step 4 explains commits and branches.
  4. 4. Give the agent one small prompt.
    Change the homepage heading to "Bookly" and add a "Book a slot" button that does nothing yet. Change only the homepage file.
  5. 5. Read the change before you accept it.
    git diff
    If the agent edited more files than you named, reject the change and ask again. Then check the page in the browser.
  6. 6. Stop the server. Press Ctrl+C in the terminal when you finish.

What Every File Means

When you open an AI-generated project for the first time, you'll see files and folders you didn't create. Here's what each one does and whether you should touch it.

package.json

Your project's ID card. Lists all dependencies (libraries your app uses), scripts (shortcuts like npm run dev), and project metadata. This is the first file to check when joining any project.

node_modules/

Contains all downloaded packages. Never edit it, never commit it to Git. If something breaks, delete this entire folder and run npm install to regenerate it from scratch.

package-lock.json

Records the exact version of every installed package. npm's documentation says it is intended to be committed into source repositories, so commit it. Everyone working on the project then gets identical dependencies.

.gitignore

Tells Git which files to skip when committing. Typically includes node_modules/, .env.local, .next/, and .DS_Store. Anything auto-generated or secret belongs here.

.env / .env.local

Stores secret API keys and database URLs. Never commit these to Git. Bots scan public repositories for exposed keys, so add these files to .gitignore before your first commit.

tsconfig.json

Configures TypeScript compiler settings: strict mode, path aliases, module resolution. Rarely needs manual editing for new projects. AI tools generate sensible defaults.

next.config (.ts or .js)

Configures Next.js: image domains, redirects, environment variable exposure, and build settings. You may need to edit this when adding external image sources or custom headers.

app/ Directory

Each folder under app/ (or src/app/ if the project uses a src folder) becomes a URL route. app/page.tsx is your homepage. app/about/page.tsx maps to /about. The app/api/ folder contains server-side API endpoints.

components/ and public/

components/ holds reusable UI pieces (buttons, headers, modals) shared across pages. public/ stores static files (images, fonts, favicon) accessible directly at root URLs like /logo.png.

AGENTS.md

Written by create-next-app. It holds instructions for coding agents about this project. Edit it when your project rules change. The workflow page explains how context files fit into the daily loop.

Common Error Messages

Each of these errors has a common fix. Start with the message that matches yours.

command not found: node

Meaning: Node.js isn't installed, or your terminal can't locate it.

Fix: If using nvm, run nvm install --lts then restart your terminal. If nvm itself isn't found, re-run the nvm install script.

EACCES: permission denied

Meaning: You're trying to write to a system-level directory that requires admin access.

Fix: Install Node.js through nvm instead of directly. nvm installs to your home directory, avoiding permission conflicts entirely.

Module not found: Can't resolve 'xxx'

Meaning: A package isn't installed, or the import path contains a typo. Paths are case-sensitive.

Fix: Run npm install. Verify the import path spelling and casing. If still broken, delete node_modules/ and reinstall.

EADDRINUSE :::3000

Meaning: Another process is already using port 3000. Usually a dev server from a previous session.

Fix: Check other terminal tabs and press Ctrl+C to stop old servers. On macOS/Linux, run lsof -i :3000 then kill -9 PID.

ERESOLVE could not resolve

Meaning: Two or more packages require conflicting versions of a shared dependency.

Fix: Upgrade or remove the package that causes the conflict first. Use npm install --legacy-peer-deps only as a last resort: it turns off peer-dependency checks, so the mismatch can show up later as a runtime error.

.env file not found

Meaning: Your app expects secret configuration that hasn't been set up yet.

Fix: Look for a .env.example file. Copy it with cp .env.example .env.local, fill in your actual API keys, and restart the dev server.

CORS error

Meaning: Your frontend is being blocked from calling an API on a different domain. This is a browser security feature.

Fix: This must be fixed on the server side, not the client. Use Next.js API routes as a proxy, or configure CORS headers on your backend server to allow requests from your frontend domain.

git push rejected

Meaning: The remote repository has commits that your local branch doesn't have yet.

Fix: Run git pull origin main first to download remote changes. Resolve any merge conflicts if prompted, then push again.

Courses and Next Step

Vibe coding course: free options and what they leave out

A course gives you a guided first build. This guide gives you the decisions around that build.

DeepLearning.AI offers a free short course, Vibe Coding 101 with Replit. It runs 1 hour 34 minutes, with seven video lessons and a graded quiz, and it builds an SEO analyzer and a voting app. Replit's President and Head of Developer Relations teach it. The quiz is a PRO feature, and enrollment is free for a limited time during the platform beta.

A course like this teaches one platform through its own examples. Check the syllabus of any course for git, environment variables and security before you rely on it for those topics. Steps 4 and 6 cover them in this guide.

Next step

Step 2 of 12 covers choosing tools: AI app builders, AI IDEs and terminal agents, with plans and limits compared. That is where Bookly gets its tool. Continue with choosing vibe coding tools.

Common Questions

Is vibe coding bad?

Not for prototypes, internal tools or a first small app, where it saves real time. It is risky for anything that holds payments or personal data. Veracode's July 2026 report found about 44% of AI coding tasks introduced a risky vulnerability, and Gartner forecasts that 60% of vibe-coded apps will be retired by 2028. The fix is the method in this guide: a PRD, tests, review and a security pass before launch.

Vibe coding vs agentic engineering: what is the difference?

Vibe coding means accepting what the AI writes without reading it closely. Agentic engineering keeps the agent doing the typing but puts a person in charge of the plan, the tests and the review. Andrej Karpathy, who coined vibe coding, wrote on February 4, 2026 that his current favorite term is agentic engineering. For anything you will run in production, aim for the agentic end.

How do I start vibe coding with no coding experience?

Pick one tool class first: an AI app builder in the browser, an AI IDE, or a terminal agent. Install Git and a current Node.js LTS release, make a first commit, and scope one small app, such as Bookly's booking page. Prompt one task at a time, read every change before you accept it, and commit each working step so you can roll back.

Is vibe coding free?

You can start for free, but serious use costs money. Lovable's Free plan gives 5 credits a day, Bolt's Free plan includes 1M tokens a month, and Codex is included on the ChatGPT Free plan subject to rollout. Claude Code is not on Claude's free plan; it needs Pro or higher. Most people building a real app end up on a $20 to $30 a month plan.

Does vibe coding actually work for real apps?

It works for small, well-scoped apps when a person keeps control of the plan, the tests and the review. The evidence on speed is mixed: METR's study of experienced developers found they were slower with AI tools, although they felt faster. Security results are worse than most people expect, so a review and a security pass are part of the job, not an extra.

Which Node.js version should I use for vibe coding?

Install Node 26, the current LTS line, which is supported until April 2029. Node 24 and 22 still get security fixes, but Node 20 stopped getting them on 30 April 2026. Tutorials that say 'nvm use 20' leave you on an unpatched runtime. After you set up nvm, run 'node -v' to check the version and 'nvm install --lts' to install the current LTS release.