How to Use Lovable AI: A Step-by-Step Guide

To use Lovable AI, go to lovable.dev, describe the web app you want in the prompt box, and Lovable builds a working version with a live preview in a few minutes. From there you refine it by chatting, connect Supabase for a real backend, and click Publish to get a live URL — no separate coding step required.

Short answer: Sign up free at lovable.dev, type what you want to build into the "Ask Lovable to create…" box, and review the live preview that appears a few minutes later. Refine it by chatting in Default Mode, connect Supabase for auth or a database, then click Publish for a free lovable.app URL. The free plan gives 5 build credits a day (up to 30/month); Pro starts at $25/month for 100 credits.

ChatGPT homepage — screenshot of chatgpt.com
ChatGPT homepage — screenshot of chatgpt.com

I spent a few sessions building the kind of thing most first-time users try first — a small internal tool with a login screen, a data table, and a form backed by a real database — to see how far the free plan's credits actually stretch and which features are worth learning first. Below is the setup, the steps in the order I'd learn them, prompts that worked, and the mistakes that burned credits before I understood why.

What you'll need

Nothing beyond a browser and an email address, or you can sign in with Google, GitHub, or Apple — no card required to start. The free plan grants 5 build credits a day (up to 30 a month) plus 20 monthly Cloud credits, and that's enough to work through every step in this guide without paying anything. If you want a real database, authentication, or file storage, you'll eventually connect a Supabase project — Lovable creates one for you automatically the first time you ask for a feature that needs it, so you don't have to set this up in advance. If you want the generated code in version control, you'll also want a GitHub account, though this isn't required to build or preview anything.

Step-by-step: How to use Lovable AI

1. Sign up and start your first prompt

Go to lovable.dev and create an account with email, Google, GitHub, or Apple. You land on a dashboard with one prominent box: "Ask Lovable to create…" There's no separate "new project" screen — typing a description and hitting enter starts the build immediately.

2. Describe what you want in plain language

Write your first prompt the way you'd brief a person, not a search engine. Lovable's own docs suggest keeping a first version free of logins and databases to reduce complexity, and in my testing that's good advice — a plain layout-and-content prompt built cleanly in one pass, while a first prompt that asked for auth, a database, and three pages at once needed several follow-up rounds to untangle.

3. Watch it build, then review the live preview

Lovable generates your project over one to a few minutes. You land in an editor with a chat panel on the left and a live, clickable preview on the right — everything you see is a real running app, not a mockup. In my testing, simple layout requests rendered correctly on the first pass almost every time; the gaps showed up in details like missing empty states, not broken pages.

4. Refine in Default Mode, one change at a time

Reply in the same chat thread rather than starting over. Default Mode is where actual building happens, and credit cost scales with how complex the request is — Lovable's own pricing examples put "make the button gray" at 0.50 credits and "remove the footer" at 0.90, which matched what I saw for similarly small asks.

5. Switch to Plan Mode before a big change

For anything structural — a new data model, a rework of how pages relate to each other — switch to Plan Mode first. It costs a flat 1 credit per message and lets Lovable lay out an approach in writing before touching code; when you're happy with it, clicking "Implement the plan" switches you back to Default Mode and turns the plan into a real diff. I used this before adding authentication and it caught a routing conflict I hadn't thought through, for a fraction of what a botched Default Mode attempt would have cost.

6. Use the preview toolbar for visual, not written, edits

The toolbar over the live preview has four modes: Select Elements (click a component, then describe the change — hold Cmd/Ctrl to select several at once), Edit Text Inline (type directly over a label or heading — your first 100 edits a day are free), Draw Annotation (sketch a layout change and Lovable cleans up the shape), and Add Comment (pin a note for later, free until you submit it). I reached for Edit Text Inline constantly for copy tweaks that would have wasted a whole chat message otherwise.

7. Connect Supabase when you need real data or auth

Open More → Cloud in the editor, then "Already have a Supabase project? Connect it here" — or just ask for a feature that needs one, like sign-up, and Lovable provisions it automatically. This unlocks email/password and social auth, a real Postgres database with migrations Lovable proposes and you approve, file storage, and Edge Functions for things like payments or emails.

8. Connect GitHub, then publish

If you want the code outside Lovable, open the project menu and link a GitHub repository — Lovable creates a private repo and syncs changes to it automatically in both directions, though only one branch at a time. When you're ready to ship, click Publish for a free lovable.app URL; further edits don't go live until you publish again.

Example prompts you can copy

These map to Lovable's own published credit costs, which is useful for gauging what a request will actually run you before you send it:

  1. Small styling fix: "Make the primary button gray instead of blue." (~0.50 credits per Lovable's pricing page)
  2. Removing something: "Remove the footer component from every page." (~0.90 credits)
  3. A feature with logic: "Add authentication with sign-up and login, and protect the /dashboard route." (~1.20 credits)
  4. A full section, with assets: "Build me a landing page with a hero, three feature sections, and generated images for each." (~1.70 credits)
  5. Plan Mode, before a big change: "I want to add a comments feature under each post — walk me through the data model and routes before you build anything."

Name the exact element or behavior instead of a vague goal — "make it better" gets a generic pass, while naming the button, the route, or the table gets something you can ship after one more look.

Common mistakes to avoid

The mistake that cost me the most credits early on was staying in Default Mode for a change that touched several files, instead of routing it through Plan Mode first — a five-file Default Mode guess that goes sideways is expensive to unwind, while the same request in Plan Mode costs 1 credit and you can correct the plan before anything gets built. Second, ignoring Edit Text Inline and describing pure copy changes in chat, which spends real credits on something the toolbar handles for free 100 times a day. Third, packing a first prompt with login, database, and multiple pages at once instead of starting plain, which is exactly what Lovable's own docs warn against and what slowed me down most in testing. Fourth, forgetting that daily build credit grants expire at midnight and don't roll over, so hoarding them across days doesn't work the way monthly credits do. Fifth, publishing straight from a first-draft chat without checking the Supabase dashboard when a feature touches real user data — the preview looking right and the underlying table being right aren't always the same thing.

Lovable plans compared

Plan Price Credits Best for
Free $0 5/day (up to 30/month), plus 20 monthly Cloud credits Trying Lovable, tiny one-off projects
Pro From $25/mo ($21/mo billed annually) From 100/month, scales with usage Solo builders shipping real apps
Business From $50/mo ($42/mo billed annually) From 100/month, scales with usage Teams needing SSO and data opt-out
Enterprise Custom Volume-based Orgs needing SCIM, audit logs, dedicated support

Business costs roughly double Pro at the same credit count — per Lovable’s own pricing FAQ, checked here on August 4, 2026, that premium pays for team features like SSO and training opt-out, not extra usage. All plans share credits across an unlimited number of workspace members; Lovable doesn't charge per seat.

Tools that make this easier

Lovable sits in a crowded field of AI app builders, and where it fits depends on what you're making. If you want a chat-to-app builder closer to a traditional dev stack (Next.js, Tailwind, shadcn/ui) rather than Lovable's React setup, my how to use v0 guide covers the closest direct alternative. For a no-code-leaning option with its own take on AI-assisted building, Ycode AI agents is worth reading before you commit to one platform. If you'd rather work inside a full codebase with an AI layer than generate one from scratch, how to use Cursor AI is the editor-native alternative, and Cursor vs Copilot tests two of those editor-based tools head to head. For the broader picture across chat-based coding assistants, ChatGPT alternative for code generation and best AI tool for code round up the field with real prices. And since Lovable, like most of these tools, runs on a mix of frontier models under the hood, how to use Claude AI is useful background on one of the models doing the actual generating.

My take

Lovable is genuinely fast for getting from an idea to a working, deployable app without touching an IDE — the Plan Mode and Default Mode split is a real feature, not a gimmick, because it lets you catch a bad approach for 1 credit instead of paying for a botched multi-file build. The free plan's 30 monthly credits are enough to seriously evaluate it, but not enough for daily use once you're building anything with auth or a database attached. Pro at $25/month is where this turns into a tool you'd actually build on, and Business only makes sense once SSO or data opt-out are things your team actually needs, not a default upgrade. If your starting point is usually "I need something real and deployed fast," Lovable earns a place in the rotation.

Frequently Asked Questions

Is Lovable AI free to use?

Yes, to start. The free plan gives you 5 build credits a day (up to 30 a month) plus 20 Cloud credits monthly, enough to build and preview a small app with no card required. Regular use with a database or auth attached runs into that cap quickly, and Pro starts at $25 a month.

How long does it take to learn how to use Lovable AI?

A first working preview takes one prompt and a couple of minutes. Getting to something you'd actually publish takes several rounds of chat refinement plus, if your app needs one, a Supabase connection — in my testing, a small tool with a login and a database table took about 30-40 minutes from first prompt to something I'd deploy.

What is the easiest way to get started with Lovable AI?

Write your first prompt without a login or database attached, the way Lovable's own docs recommend, and add those pieces once the basic layout is right. Use Plan Mode before any change that touches more than one part of the app, and fix one thing at a time in Default Mode rather than restating the whole build.

Do I need to know how to code to use Lovable AI?

No, for a first pass — you can build, preview, and publish through chat and the preview toolbar alone. But once a feature touches real data through Supabase, understanding roughly what a database table or an auth route does helps you sanity-check what Lovable built before you ship it.

Can I export the code Lovable generates?

Yes. Connect a GitHub repository from the project menu and Lovable pushes a real, private repo that syncs in both directions as you keep building. The output is standard React and Supabase code, so nothing locks you into Lovable once you've generated it.