How to Use Lovable AI

Open lovable.dev in your browser. Like Bolt.new, Lovable runs entirely in the browser — nothing to install.

What sets Lovable apart from other browser-based builders is its deep integration with Supabase. While Bolt.new is great for frontend-heavy apps, Lovable is built for full-stack projects that need a real database, user accounts, and backend logic.

Create your Lovable account using GitHub or email. Signing in with GitHub is recommended because it makes it easy to export your project to a repository later.

Lovable offers a free tier with limited prompts per day. Paid plans start at $20/mo for more prompts and priority generation.

Click New Project and describe what you want to build. Lovable specializes in full-stack apps, so lean into that — mention databases, user accounts, and multi-page flows.

Here is a prompt that plays to Lovable's strengths:

Build a project management app with these features:

- User authentication with email sign-up and login
- A dashboard showing the user's projects as cards
- Each project has a name, description, and list of tasks
- Tasks can be created, marked complete, and deleted
- A settings page where users can update their name and avatar
- Use Supabase for the database and authentication
- Modern, clean UI with a sidebar navigation
- Responsive design that works on mobile

Notice how this prompt mentions the data model (projects, tasks), authentication, and specific pages. This gives Lovable enough structure to generate a complete, working application.

After Lovable generates your app, spend a few minutes exploring the code. You will see:

• React components — organized in a clean component hierarchy. Lovable generates readable, well-structured TypeScript code.
• Supabase integration — database queries, auth hooks, and real-time subscriptions are wired up with proper error handling.
• Routing — pages are set up with proper navigation, protected routes, and layouts.
• Styling — Tailwind CSS is used by default, with consistent design tokens across components.

This is the key step that makes Lovable a full-stack tool. Click the Supabase button in the Lovable interface to connect your Supabase project.

If you do not have a Supabase project yet:

1. Go to supabase.com and sign up (free)
2. Create a new project (pick a region close to your users)
3. Copy your project URL and anon key from the project settings
4. Paste them into Lovable's Supabase connection dialog

Once connected, Lovable can create database tables, set up Row Level Security (RLS) policies, and configure auth — all from your prompts.

With Supabase connected, adding authentication is simple. Tell Lovable:

Add user authentication with:
- Email/password sign-up and login
- A protected route middleware that redirects
  unauthenticated users to the login page
- A user menu in the header with avatar and sign out
- Password reset via email

Lovable creates the auth UI, configures Supabase Auth, and sets up route protection automatically. The generated code uses Supabase's auth hooks, so session management is handled for you.

Use the live preview to test your app end-to-end:

1. Sign up with a test email address
2. Log in and verify the dashboard loads
3. Create, update, and delete data
4. Check that auth protects the right routes
5. Test on mobile using the device toggle

When you find issues, describe them in a follow-up prompt:

The task creation form doesn't clear after submitting.
Fix it so the form resets and shows a success message.
Also, the task list should update in real-time when a
new task is added — use Supabase realtime subscriptions.

Click Deploy to publish your app to a live URL. Lovable handles hosting, SSL, and CDN configuration.

Your deployed app connects to the same Supabase project, so all your data, auth configuration, and real-time features work in production exactly as they do in preview.

You can also:

• Export to GitHub — push the full source code to a repository. Continue development in any editor.
• Deploy to Vercel or Netlify — once exported, deploy anywhere that supports React/Next.js applications.
• Custom domain — connect your own domain for a professional URL.