Vibe Coding
The Vibe Coding Toolkit
A comprehensive guide to every major AI coding tool — full-app generators, IDE-integrated assistants, and terminal agents — with clear guidance on what each does, when to use it, and how to get the most out of it.
Three Categories of AI Coding Tools
AI coding tools fall into three distinct categories, each with a different level of abstraction and a different relationship with your existing codebase.
---
Full-App Generators (Highest Vibe Level)
These tools take a description and produce a complete application. You don't need a local development environment, existing codebase, or technical setup.
Bolt.new
Browser-based AI development environment. Describe what you want, Bolt generates a complete full-stack application (React, Next.js, Vue, and more) with live preview. Can install npm packages, write to the filesystem, and deploy directly.
Best for: Rapid prototyping, landing pages, CRUD apps, full-stack MVPs.
Strength: Instant full-project generation with no local setup. The ability to see a running application 60 seconds after describing it is genuinely transformative.
Limitation: Context window limits on large projects. After many iterations, Bolt can lose track of earlier decisions and start making inconsistent changes. The solution: write a spec before you hit this limit.
Price: Free tier available; paid plans for higher usage.
Lovable (formerly GPT Engineer)
Describe your app in natural language, Lovable generates it with a Supabase backend, authentication, and deployment built in. More opinionated than Bolt — it always uses Supabase and a specific stack.
Best for: SaaS MVPs that need authentication and a database out of the box.
Strength: Backend integration is built in. You get auth, a database, and deployment without configuring any of them.
Limitation: Less flexible on technology choices. If you don't want Supabase, Lovable isn't the right tool.
v0.dev (Vercel)
Generates React components from text descriptions. Outputs clean, Tailwind-styled, shadcn/ui-based components you can paste directly into an existing project.
Best for: UI components, landing pages, dashboards, component prototypes.
Strength: Very clean output using modern React patterns. The components integrate seamlessly into Next.js and Tailwind projects.
Limitation: Components only — not full applications. No backend, no routing, no state management beyond the component.
Replit Agent
AI agent inside Replit that can plan, build, and deploy applications. Operates inside Replit's cloud IDE.
Best for: Quick experiments, education, deployment without local tooling.
Strength: Runs entirely in the browser with integrated hosting. No local setup of any kind.
Limitation: Replit ecosystem dependencies. Less suitable for projects that will leave the Replit environment.
---
IDE-Integrated AI Coding (Medium Vibe Level)
These tools work inside your existing codebase. You're still writing some code — but the AI generates, explains, and modifies large portions.
Cursor
AI-powered IDE (a VS Code fork) with inline chat, code generation, and codebase-aware context. You work in your existing project; Cursor understands the whole codebase.
Best for: Developers who want AI assistance within a traditional workflow. The right tool when you have an existing codebase to work in.
Strength: Codebase context awareness — you can reference specific files (@file), the entire codebase (@codebase), or web documentation (@web). Multi-file edits from a single instruction.
Limitation: You still need to understand and review the generated code. More like a very capable pair programmer than a vibe machine.
Windsurf (Codeium)
AI IDE with "Cascade" — an agentic workflow that can plan multi-step changes across files. More autonomously agentic than Cursor.
Best for: Complex refactors, multi-file changes, situations where you want the AI to execute a multi-step plan.
Strength: Cascade can execute a sequence of changes that span many files and explain what it's doing at each step.
Limitation: Newer than Cursor with a smaller community. Less battle-tested for large-scale production use.
GitHub Copilot
AI pair programmer integrated into VS Code, JetBrains, and other editors. Inline suggestions as you type, plus a chat panel.
Best for: Code completion, boilerplate generation, learning how to use APIs.
Strength: Massive training data, integrates with almost every editor, and works seamlessly with the tools developers already use.
Limitation: Less capable for full-feature generation than Cursor or Windsurf. Optimized for line-by-line and function-by-function assistance rather than whole-feature generation.
---
Terminal-Based AI Agents (Developer-Level, Spec-Friendly)
These tools operate in your terminal, reading your codebase and writing files directly. They pair naturally with specifications.
Claude Code
Anthropic's CLI tool for agentic coding. Operates in your terminal, reads your codebase, writes and edits files, runs commands. Combined with SDD workflows, it becomes spec-driven rather than vibe-driven.
Best for: Developers comfortable with the terminal who want deep codebase integration and spec-driven development.
Strength: Deep codebase understanding, agentic file operations, and natural integration with SDD pipelines covered in Module 4.
Limitation: CLI interface requires comfort with the terminal. Steeper learning curve than browser-based tools.
Codex CLI (OpenAI) and Gemini CLI (Google)
Terminal-based agents similar to Claude Code. Gemini's long context window is particularly useful for large codebase analysis.
Best for: Users in the OpenAI or Google ecosystem who prefer terminal-based workflows.
---
Decision Framework: Which Tool for Which Situation
| Need | Tool |
|---|---|
| Full app with no setup | Bolt.new |
| Full app with auth + database | Lovable |
| React UI component | v0.dev |
| Quick browser-based experiment | Replit Agent |
| Working in an existing codebase | Cursor or Windsurf |
| Inline code completion | GitHub Copilot |
| Agentic terminal coding + SDD | Claude Code |
The right tool depends on: project scope (prototype vs production), your technical level (non-developer vs senior developer), team size (solo vs team), and quality requirements (MVP vs production-grade).
Key Takeaways
- Full-app generators (Bolt.new, Lovable, v0.dev) create entire apps or components from descriptions — highest vibe level, no existing codebase needed
- IDE-integrated tools (Cursor, Windsurf, Copilot) work inside your existing codebase — medium vibe level, you still review code
- Terminal agents (Claude Code) pair with specifications for production-grade work — lowest vibe level, highest output quality
- The right tool depends on project scope, technical level, team size, and quality requirements
- No single tool is best for all situations — learn the landscape and pick the right tool for each job
Example
# AI Coding Tool Quick Reference
FULL-APP GENERATORS (no codebase needed)
─────────────────────────────────────────
Bolt.new → Full-stack apps from description
Lovable → SaaS apps with Supabase + auth
v0.dev → React components (shadcn + Tailwind)
Replit Agent → Apps in browser (no local setup)
IDE-INTEGRATED (works in your codebase)
────────────────────────────────────────
Cursor → VS Code fork, codebase-aware AI
Windsurf → Agentic multi-file changes
GitHub Copilot → Inline suggestions + chat
TERMINAL AGENTS (CLI, spec-friendly)
──────────────────────────────────────
Claude Code → Agentic + SDD integration
Codex CLI → OpenAI terminal agent
Gemini CLI → Long context, large codebases
DECISION TREE
─────────────
Need full app from scratch? → Bolt.new / Lovable
Need a UI component? → v0.dev
Working in existing codebase? → Cursor / Windsurf
Want spec-driven production code? → Claude Code + SDD