Lovable Fundamentals

01What 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.

02Plan 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.

03Pricing 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.

04The 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.