How to Use Lovable

Lovable is an AI-powered app builder that turns natural-language conversations into working software. You describe what you want in plain English, Lovable writes the code, and a live preview updates as you chat. This lesson takes you from zero to a published web app — no prior coding experience required.

Part 1 · What is Lovable

Lovable is a browser-based development environment where an AI agent is your pair-programmer. Instead of writing code line by line, you have a conversation: you describe features, the agent implements them, and you see the result in real time.

Who it's for

• Founders and PMs prototyping products before committing engineering time.
• Designers who want their mockups to become real, interactive apps.
• Researchers and educators building dashboards, portals, or teaching tools.
• Developers who want a much faster starting point than a blank editor.

What you can build

Full-stack web apps: landing pages, dashboards, CRMs, admin panels, marketplaces, internal tools, portfolios, and more. Lovable ships with authentication, a Postgres database, storage, and AI APIs built in — so you can add a login, save data, or call an LLM without wiring anything up yourself.

Part 2 · Create your first project

1. Go to lovable.dev and sign in with Google or GitHub.
2. From the dashboard, click New Project.
3. In the prompt box, describe what you want to build. Example: "A personal portfolio site for a university lecturer, with sections for About, Research, Publications, and Contact. Elegant serif typography, maroon accent color."
4. Press Enter. Lovable will scaffold the project and open the editor.

Part 3 · The Lovable interface

Every Lovable project has the same three-panel layout.

1. Chat (left)

Your conversation with the agent. Each message you send is a request; the agent responds by editing files and showing you what it did. This is where 90% of your work happens.

2. Preview (right)

A live, interactive preview of your app. It updates automatically after every change. You can click, type, and navigate exactly as your users will.

3. Files & Code (toggle)

The full project source. You can read every file the agent writes, and — if you want — edit code directly. Lovable projects are standard React + TypeScript, so nothing is hidden behind a black box.

Part 4 · Writing great prompts

The single biggest lever on quality is how you prompt. Here are the habits that separate slow, frustrating sessions from fast, confident ones.

Be specific about scope

Vague prompts produce vague apps. Instead of make it look better, say increase the hero heading to 5xl, add 60px vertical padding, and switch the background to a subtle gradient.

One goal per message

Ask for one thing at a time. When you bundle five unrelated changes into a single prompt, one small mistake can force a rollback that undoes the other four. Small steps let you review, keep, or revert each change independently.

Show, don't just tell

• Paste screenshots of the current state and circle what's wrong.
• Attach reference images from sites you admire.
• Quote exact error text when reporting a bug — not "it doesn't work".

Talk in outcomes, not implementations

Prefer users should be able to filter posts by tag over add a useState with a tag array and filter the map. The agent will pick a good implementation; your job is to be clear about the outcome.

A great prompt reads like a well-written Jira ticket: user, goal, constraints, and a definition of done.

Part 5 · Iterating with the preview

The preview is not just for looking — it's how you steer the agent. A tight loop looks like this:

1. Prompt — describe one focused change.
2. Watch — the agent edits files and the preview updates.
3. Test — click through the change yourself in the preview.
4. Refine — send a short follow-up prompt with what to adjust, or accept and move on.

When something breaks

• Open the console (in the preview) and paste any red errors back into chat. The agent can usually fix them in one turn.
• If a change made things worse, use the History panel to roll back to a working version — you never lose progress.
• Stuck in a loop after 3+ tries on the same bug? Ask the agent to step back and explain the root cause before fixing.

Part 6 · Using Lovable Cloud

Once your UI is in shape, you'll usually want to save data, log users in, or call an AI model. Lovable Cloud is a batteries-included backend that gives you all three without leaving the chat.

Authentication

Ask the agent something like add email/password login and protect the dashboard route. It will enable auth, create the sign-in page, and gate the routes you named. Google login can be added the same way.

Database

Describe the data, not the schema. Example: "Users can create projects with a title, description, and status (draft/active/done). Each project belongs to the user who created it, and nobody else can read or edit it." The agent will create the table, wire it to your UI, and set up row-level security so users can only see their own rows.

AI features

Lovable's AI Gateway lets your app call models like GPT-5 or Claude without managing API keys. Ask for it directly: add a "summarize" button that sends the note text to an LLM and shows the result.

// Example: calling the AI Gateway from a server function
export const summarize = createServerFn({ method: "POST" })
  .inputValidator((data) => z.object({ text: z.string() }).parse(data))
  .handler(async ({ data }) => {
    const res = await fetch("https://ai.gateway.lovable.dev/v1/chat/completions", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${process.env.LOVABLE_API_KEY}`,
      },
      body: JSON.stringify({
        model: "google/gemini-2.5-flash",
        messages: [
          { role: "system", content: "Summarize the user's note in one sentence." },
          { role: "user", content: data.text },
        ],
      }),
    });
    const json = await res.json();
    return json.choices[0].message.content;
  });

Part 7 · Publishing your app

Publishing is one click. In the top-right of the editor, hit Publish. Your app goes live on a .lovable.app subdomain in seconds.

Custom domain

1. Open project Settings → Domains.
2. Add your domain (for example, ahmadnajmi.com).
3. Copy the DNS records Lovable gives you and paste them into your registrar (Cloudflare, GoDaddy, Namecheap, etc.).
4. Wait a few minutes for DNS to propagate — then your app is live on your own domain.

Re-publishing

Every time you hit Publish, Lovable creates a new deployment. Your preview environment keeps updating with every chat message, but the published version only changes when you explicitly publish — so you can iterate freely without breaking what's live.

Part 8 · Tips, pitfalls, and next steps

Common pitfalls

• Mega-prompts. Asking for ten features in one message almost always leads to compounding mistakes. Split them up.
• Ignoring the console. Red errors won't fix themselves. Paste them into chat.
• Skipping tests. After every change, click through the affected flow yourself — the agent can't feel a broken button.
• Storing secrets in code. Use Lovable's secrets manager for API keys — never paste them into prompts or commit them to files.

Habits of effective users

• Keep a scratch note of "what I want next" so each prompt stays focused.
• Commit visually — publish milestones so you always have a working URL to share.
• When in doubt, ask the agent to explain what it's about to change before it changes it.

Where to go next

• Lovable Docs — reference for every feature, integration, and setting.
• Lovable Blog — case studies, prompting techniques, and product updates.
• Remix a template from the dashboard to see a real project's structure.