Lovable Fundamentals
Understand what Lovable is, navigate the interface, learn Plan vs Agent mode, choose the right pricing tier, and build your first app from a single prompt.
What You'll Learn
- Understand what Lovable is and how "vibe coding" works for building apps without code
- Navigate the Lovable interface including chat, preview, code editor, and settings
- Know the difference between Plan Mode (reasoning) and Agent Mode (execution)
- Choose the right pricing tier: Free, Starter ($20/mo), or Launch ($50/mo)
- Build and publish your first app from a single prompt
What Lovable Is (and Is Not)
Lovable is an AI-powered app builder that turns natural language prompts into full-stack web applications. Founded in 2024 (originally called GPT Engineer), it lets you build websites, SaaS products, internal tools, and web apps by simply describing what you want in plain English. Unlike traditional development that requires months of coding, Lovable can generate a working prototype in minutes.
But Lovable is NOT a page builder like Wix or Squarespace. It generates real React code with TypeScript, Tailwind CSS, and shadcn/ui components. The code is yours, exportable to GitHub, and fully customizable.
Lovable sits in the emerging "vibe coding" category alongside tools like Bolt.new, v0 by Vercel, and Cursor. What makes it unique is its collaborative conversational approach (it asks clarifying questions), native Supabase integration for backends, and the ability to build genuinely complex applications.
Quick Test: Build Your First Lovable Site
Open lovable.dev and create a free account.
1. Type a prompt: "Build me a personal portfolio website with a dark theme, about section, projects gallery, and contact form."
2. Watch how Lovable asks clarifying questions and generates a plan.
3. Let it build the entire site and review the output.
Note how the final result compares to what you would expect from a vague vs. a specific prompt.
Plan Mode vs Agent Mode
Lovable has two distinct modes. Plan Mode is for thinking, reasoning, and exploring ideas before any code is written. Agent Mode is for execution.
In Plan Mode, you brainstorm architecture, compare approaches, investigate bugs, and design database schemas. It costs one credit per message but writes no code. Plans are saved to .lovable/plan.md.
In Agent Mode, Lovable writes and modifies code, creates files, and builds your application. Each message uses credits based on complexity.
The key workflow: Use Plan Mode first to think through what you want. Then approve the plan and let Agent Mode execute it. You can toggle between modes anytime. Use @ mentions to reference files in your chat. Cross-project referencing lets you adapt code from other projects.
Credit-Saving Strategy
Always start complex features in Plan Mode. Describe what you want, let Lovable propose an architecture, then review before executing. This saves credits and prevents having to undo bad implementations.
Pricing and Credits
Lovable offers three tiers. Free gives you 5 credits per day to experiment. Starter at $20/month provides a base monthly credit allotment and removes the "Edit with Lovable" badge. Launch at $50/month gives 2.5x the credits, priority support, and VIP events access.
Credits are consumed per message. Plan Mode costs one credit per message. Agent Mode costs vary by complexity. A simple site might cost 5-10 credits total. A complex SaaS app could use 50-100+ credits.
To conserve credits, use Plan Mode for brainstorming (cheaper), be specific in prompts (fewer iterations needed), use the remix feature to duplicate working designs, and leverage templates as starting points.
Try This Yourself
Check your credit balance in the bottom-left of the Lovable interface. Build something simple with your free daily credits to understand the credit consumption rate before committing to a paid plan.
The Lovable Interface Tour
The Lovable workspace has several key areas. The chat panel on the left is where you prompt and iterate. The preview panel on the right shows your live app. The code editor lets you inspect and manually edit the generated code. The file tree shows all project files. Publishing settings control your domain and deployment. The settings panel manages integrations (Supabase, GitHub).
Key interface features include the mobile preview toggle (check responsiveness), undo/redo through version history, the Plan/Agent mode toggle, file references with @ mentions, and the publish button for deploying live.
The preview updates in real time as Lovable writes code, so you can see changes happening instantly.
Try This Yourself
Toggle the mobile preview in Lovable to check how your app looks on smaller screens. Click the code editor tab to see the actual React/TypeScript code Lovable generated. Even if you do not code, understanding the file structure helps you communicate better with Lovable.
Core Insights
- Lovable generates real React/TypeScript code from natural language, not drag-and-drop widgets
- Plan Mode is for thinking and architecture; Agent Mode is for building. Use Plan first.
- Free tier gives 5 credits/day; Starter at $20/mo is sufficient for most individual projects
- The conversational approach means Lovable asks clarifying questions, making it more collaborative than competitors
- Your code is exportable to GitHub and fully customizable outside Lovable