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

NeedTool
Full app with no setupBolt.new
Full app with auth + databaseLovable
React UI componentv0.dev
Quick browser-based experimentReplit Agent
Working in an existing codebaseCursor or Windsurf
Inline code completionGitHub Copilot
Agentic terminal coding + SDDClaude 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

markdown
# 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
Try it yourself — MARKDOWN