Day 2 of 28 · Vibe Coding Challenge
The AI Coding Toolkit
⏱ 6 min
📊 Beginner
Not all AI coding tools are the same. Some are full IDEs. Some run in your browser. Some build entire apps from a single prompt. Some work inside your existing editor.
Today you'll learn the landscape — what each tool does best, and how to pick the right one for the job.
The two types of AI coding tools
Every AI coding tool falls into one of two categories:
In-editor assistants — these live inside your code editor. You write prompts, they generate code right where you're working. Think: Cursor, GitHub Copilot, Claude Code.
App builders — these generate entire projects from a prompt. You describe what you want, and they build the whole thing — frontend, backend, database, deployment. Think: Bolt, v0, Lovable, Replit Agent.
Both are powerful. They're just different tools for different jobs.
Editors for control, builders for speed. Learn both.
Knowledge Check
What's the main difference between an in-editor assistant and an app builder?
A
They use different AI models
B
In-editor assistants work inside your code editor; app builders generate entire projects from a prompt
C
App builders are only for beginners
D
In-editor assistants are better quality
In-editor assistants help you write code file-by-file inside an editor. App builders generate complete projects — all the files, structure, and configuration — from a high-level description. Many vibe coders use both.
In-editor assistants
Cursor — The most popular AI code editor. It's a fork of VS Code with AI built in. You can chat with it, ask it to edit code, and it understands your entire project. Best for: building complex projects where you want control over every file.
Claude Code — Anthropic's command-line coding agent. It reads your codebase, makes changes across multiple files, and runs commands. Best for: developers who prefer the terminal and want deep codebase understanding.
GitHub Copilot — The original AI coding assistant. Lives inside VS Code, JetBrains, and other editors. Autocompletes code as you type. Best for: inline suggestions and quick completions while you're already coding.
Windsurf — Another AI-powered editor similar to Cursor. Offers "Flows" — multi-step automated coding sequences. Best for: people who want an alternative to Cursor with a different UI approach.
I need a React component that shows a pricing table with three tiers — Free, Pro, and Enterprise.
I've created `PricingTable.tsx` with:
💰 **Free tier** — $0/mo, 3 features listed
⭐ **Pro tier** — $29/mo, highlighted as "Most Popular", 6 features
🏢 **Enterprise** — $99/mo, 10 features + "Contact Sales" button
Each card has:
- Hover animations
- Responsive grid layout
- Call-to-action buttons
- Feature checkmark lists
The component is ready to drop into your app. Want me to adjust pricing, features, or styling?
↻ Replay conversation
Knowledge Check
Which tool would you choose if you want to build a complex project with full control over every file?
B
ChatGPT — a general-purpose chatbot
C
Cursor — an AI code editor that understands your whole project
D
v0 — a browser-based app generator
Cursor is designed for project-level work. It indexes your entire codebase, understands how files relate to each other, and lets you make targeted changes. It's the power tool for complex vibe coding.
App builders
Bolt (by StackBlitz) — Describe an app, get a full working project in your browser. It sets up the framework, writes the code, and lets you preview and deploy instantly. Best for: rapid prototyping and MVPs.
v0 (by Vercel) — Generates UI components and full pages from text or image prompts. Produces clean React/Next.js code. Best for: frontend components, landing pages, and design-to-code workflows.
Lovable — An AI app builder focused on creating beautiful, production-ready apps. Handles frontend, backend, database, and auth. Best for: non-technical founders who want polished results fast.
Replit Agent — Builds and deploys full-stack apps inside Replit's cloud IDE. Handles everything from database setup to deployment. Best for: people who want everything in one place — code, run, deploy.
Build a habit tracker app where users can add daily habits, check them off, and see a streak counter.
Building your habit tracker...
Done ✓ Here's what I created:
📱 **Frontend** — Clean UI with habit cards, checkboxes, and streak counters
🗄️ **Backend** — API routes for CRUD operations
💾 **Database** — SQLite with habits and completions tables
📊 **Streak logic** — Automatically calculates consecutive days
Features:
- Add/remove habits
- Daily check-off with satisfying animation
- Streak counter with fire emoji at 7+ days 🔥
- Weekly summary view
Preview is live in your browser. Want to deploy it?
↻ Replay conversation
Knowledge Check
When would you use an app builder like Bolt instead of an editor like Cursor?
A
When you want to go from idea to working prototype as fast as possible
B
When you're building a mobile app
C
When you need better code quality
D
When you're an experienced developer
App builders excel at speed. You describe what you want and get a working prototype in minutes. You trade some control for velocity. When you need a quick MVP or prototype, they're unbeatable.
Which tool should you start with?
Here's the simple decision tree:
"I want to build something fast and don't care about the code details" → Use an app builder (Bolt, v0, or Lovable)
"I want to understand and control the code" → Use an in-editor assistant (Cursor or Claude Code)
"I'm not sure yet" → Start with an app builder. It's the fastest way to see results and build confidence. You can always switch to an editor later.
In this challenge, we'll use both types. You'll learn to pick the right tool for each job.
Final Check
What's the best first tool for someone brand new to vibe coding?
A
A terminal-based tool for maximum control
B
An app builder — it's the fastest way to see results and build confidence
C
A traditional code editor with no AI
D
All tools simultaneously
Start where the friction is lowest. App builders let you go from idea to working project in minutes. Once you're comfortable and want more control, you can graduate to an in-editor assistant. There's no wrong order — just start.
🧰
Day 2 Complete
"The right tool depends on the job. App builders for speed, editors for control. Learn both."
Tomorrow — Day 3
How AI Understands Code
You'll learn how AI models actually generate code — and why understanding this makes you a better vibe coder.