What you’ll be able to do

By the end of this you’ll have a real website built entirely through chat. Not a mockup, not a template with your name slapped on it, an actual working site with real code behind it, hosted somewhere you control. You’ll type what you want in plain English, Lovable builds it, you look at it, you ask for changes. That’s the whole loop.

Maybe you’re not starting from scratch, though. If someone’s just handed you the company website and you’ve no idea where it lives or who has the logins, the same chat approach still works, you just need to find the keys first. That’s what updating or rebuilding a company website covers: tracking down the logins and getting AI to do the changes, without you turning into the IT department.

I’m not going to pretend this replaces knowing how to code. It doesn’t. But for a lot of what people actually want, a landing page, a small business site, a portfolio, a simple app with a login and a database, it gets you there without touching a single line of code yourself.

Before you start

Lovable is a chat-driven website builder. You describe what you want, it writes the actual code behind the scenes (React, Tailwind, shadcn/ui if you want to know the ingredients), and shows you a live preview after every message you send. It’s not generating a picture of a website. It’s generating a working one, each time you chat.

Here’s what’s worth having ready before you open it up:

A rough idea of what the site is for. Not a full spec, just: who’s it for, what’s the main thing someone should be able to do on it. “A one-page site for my dog walking business with a contact form” is plenty.

Some idea of what “done” looks like to you. Colours, tone, any pages you know you need. You don’t need a brand guide, just enough that you’re not starting from a totally blank page in your head.

A GitHub account, if you want the code to genuinely be yours (more on that in a minute). Free to make, takes two minutes.

Now, the limits. Lovable is genuinely good, but it’s not magic. Big changes described vaguely tend to go sideways. It works best with one clear instruction at a time, described as an outcome (“add a pricing page with three tiers”) rather than as code (“add a PricingTiers component”). It also doesn’t automatically apply database changes or backend functions just because it wrote the code. Those get applied separately, from the Lovable or Supabase side, and I’ll come back to that because it trips people up.

Get set up

Go to lovable.dev and sign up. You’ll land in a chat interface that looks a bit like any AI chat you’ve used, except there’s a preview pane next to it that updates as you go.

The first thing I’d do, before building anything, is connect GitHub. There’s a two-way sync built in, meaning the code Lovable writes gets pushed to a repository you own, and changes flow both ways. Do this early rather than after you’ve built ten pages. It costs nothing, takes a couple of clicks, and means the code is genuinely yours, not stuck inside someone else’s platform.

If you’ve already got the design sorted in Figma, there’s a different route that skips the prompting-a-site-from-scratch step, and it still ends with the code sitting in a repository you own. It goes from Figma to Claude Code, then GitHub, then Cloudflare, and you never have to become a developer along the way. The guide on building a website as a designer walks through it.

The interface itself has three things you need to know: the chat, where you type instructions; the preview, which shows the live site updating after each message; and a way to view the underlying code if you ever want to poke around (you don’t have to, but it’s there).

If you want a database, user logins, or anything that needs to store data, Lovable uses Supabase for that. You connect it when you need it, not before. Don’t worry about this yet if you’re building something simple.

Usage is credit-based, with a free tier to get started. I’m not going to quote numbers here because they change: go to lovable.dev/pricing and check what’s current before you commit to anything.

Try it yourself

Right, let’s build something. Three prompts, each doing a different job: the first sets up the site, the second adds a feature, the third asks for an explanation before anything gets touched.

Start with this, adjusted to your actual business or idea:

Build a one-page website for a small dog walking business called
Tail End Walks. It should have a hero section with a headline and
a short description, a section listing three services (dog walking,
puppy visits, weekend boarding), a simple contact form, and a
footer with a phone number and email. Keep the design clean and
friendly, use a warm colour palette, nothing too corporate.

Look at the preview. Read it properly, don’t just glance. Then add a feature with a second, separate message, not folded into the first one:

Add a testimonials section between the services and the contact
form, with three short quotes from happy customers. Use placeholder
names and quotes for now, I'll swap in real ones later.

One change per message, every time. If you ask for five things at once it’s harder to tell what broke if something does. Small, single steps, checked in the preview each time.

For anything bigger, ask it to explain first. This one’s for when you’re about to do something you don’t fully understand the consequences of, like adding user accounts:

Before you build anything, explain what would be involved in adding
user login to this site, including whether it needs a database,
what Supabase would be used for, and what I'd need to set up on
my end. Don't write any code yet, just explain the plan.

That last one matters more than it looks. Big changes described vaguely go wrong. Asking it to explain first, especially anything touching a database or backend logic, gives you a chance to understand what’s about to happen before it happens.

Check the result

Once you’ve got something built, don’t just trust the preview and walk away. Actually test it.

Click every button. Every one. If there’s a contact form, fill it in and submit it, see what happens. If there’s navigation, click through each link and check it goes where you expect.

Resize your browser window, or open the site on your phone. A lot of first drafts look great on a laptop screen and fall apart on mobile. If it does, just say so in chat: “the pricing section overlaps on mobile, can you fix that.”

If you’ve added a database or login, test the actual flow: sign up with a test email, log out, log back in. Don’t assume it works because the code looks right in the preview. Here’s the bit that catches people out: pushing code to GitHub does not automatically apply database migrations or deploy edge functions. Those get applied from the Lovable or Supabase side of things. If a feature that touches the backend isn’t working, that’s often why.

Check the actual content too, not just the mechanics. Read every sentence Lovable wrote. AI-generated placeholder text has a habit of sounding slightly off, generic, a bit too pleased with itself.

If the copy needs a proper pass, that’s a separate job from building the site, and honestly a tool built specifically for writing (something like ScriptGrain, which is ours, for what it’s worth) will do a better job on the words than asking the site builder to also be a copywriter.

When you’re happy, publish it. Lovable gives you a lovable.app address by default, or you can point a custom domain at it if you own one.

If it doesn’t work

First, the privacy bit, because this matters more than people think. Never put real customer data, passwords, API keys, or anything genuinely sensitive into the chat. Not because Lovable is untrustworthy, but because chat history isn’t the place for secrets, full stop. If you’re testing a login system, use a fake email and a throwaway password. If you need real API keys for something, those get added through Supabase’s proper settings, not typed into the conversation.

If something’s not working, here’s the order I’d go through it in:

Look at the preview error, if there is one. Lovable often shows what broke.

Undo. If a change made things worse, say so and ask it to revert, rather than trying to layer a fix on top of a fix.

Break the ask down smaller. If “add a booking system” isn’t working, ask what specifically it needs first, then build it in stages.

Check whether it’s a deployment issue rather than a code issue. As above, database and edge function changes need applying separately, they don’t just happen because code was pushed.

If you’re properly stuck, describe the actual behaviour you’re seeing, not what you think is wrong. “The form submits but nothing happens” is more useful to Lovable than “the form is broken.”

Questions people ask

Is Lovable free to use for building a website?

Usage is credit-based, with a free tier to get started. Numbers change, so check lovable.dev/pricing for what's current before you commit to anything. Connecting GitHub costs nothing and takes a couple of clicks.

Do I need to know how to code to build a site with Lovable?

No. You type what you want in plain English, Lovable builds it, you look at it and ask for changes. It won't replace knowing how to code, but for a landing page, small business site, portfolio or simple app with a login it gets you there without touching a line of code.

How should I word prompts so Lovable doesn't go off the rails?

One clear instruction at a time, described as an outcome ("add a pricing page with three tiers") rather than as code. If you ask for five things at once it's harder to tell what broke. For anything big, ask it to explain the plan first before writing any code.

What should I never type into the Lovable chat?

Never put real customer data, passwords, API keys, or anything genuinely sensitive into the chat. Use a fake email and throwaway password when testing a login, and add real API keys through Supabase's proper settings instead.

Why isn't my database or login feature working in Lovable?

Pushing code to GitHub does not automatically apply database migrations or deploy edge functions. Those get applied separately from the Lovable or Supabase side, and that's often why a backend feature isn't working.

Keep exploring

If you want the wider picture of building websites with AI beyond just Lovable, there’s a guide on this site called “How to get AI to build me a website” that covers other tools and approaches. And if you end up wanting something more custom on the visual side, like 3D elements or interactive graphics, “How to get AI to build Three.js assets” is worth a look too.

Sources and review notes

Review date: 15 September 2026 — every source above was opened and checked against the text on that date.

Disclosure: ScriptGrain is one of our products — this site is made by the same studio, Adapt Progress Evolve. We have tried to compare fairly, and the alternatives named are real and worth a look.