Getting Started with Lovable AI

Edit with ease using a chat-based interface
Attach images for precision edits and inspiration
Select and visually edit components for a seamless design experience
Switch effortlessly between edit mode and chat mode
Track changes with version history and restore any previous version
Navigate through pages of your project with ease
Enable remixing or rename your project as needed
Integrate with Supabase for backend capabilities
Collaborate via GitHub to edit and manage your code
Publish, deploy, and share your project with a preview link (remember to re-publish after changes)
Toggle between web and mobile view for responsive design
Refresh the preview modal to see updates instantly
Open your project directly using the preview link

Project Settings

Every project's settings empower you to:

View key project details like total edits and creation date
Set up custom knowledge to tailor your project's context
Connect to a GitHub repository for seamless collaboration
Adjust project visibility from public to private
Manage the badge display (available for paid plans only)
Rename your project anytime
Delete your project (⚠️ Danger Zone)

Project Quick Access

You can always quickly access:

Dashboard

For an overview of your projects

Account Settings

To manage your profile and preferences

Documentation

For guidance and assistance

Support

Feedback Portal and Support

Start your Project

There are several ways to get started with Lovable AI, depending on your preferences and resources

Prompt

Setup time: 5 minutes

Lovable AI's prompt-based system makes app creation simple. Just describe what you want to build in the prompt box. The more specific you are, the better the results. Start with clear and detailed prompts. You can refine and adjust your project as you go.

The more specific you are, the better the results
Start with clear and detailed prompts
You can refine and adjust your project as you go

Example:

"Create a dashboard with user login, monthly sales in a line chart, and customer demographics in a pie chart."

Prompt

5 minutes

Templates

Setup time: 2 minutes

Lovable AI offers templates to help you get started quickly on popular project types, such as dashboards, e-commerce sites, or social apps, for a quick setup. Once the template loads, use prompts to adjust features, add new elements, or fine-tune the design to match your vision.

Browse our curated template selection
Choose a template that matches your vision
Use prompts to adjust features and customize design

Example:

"E-commerce template with product catalog, cart, and checkout flow"

Templates

2 minutes

Remix an Existing Project

Setup time: 1 minute

You can remix an existing public project or one of your own. Remixing allows you to reuse the current state of a project as a starting point and build upon it. It's a great way to explore new ideas, make adjustments, or iterate with different changes while preserving the original version. Note that it is not possible to remix projects when Supabase is connected.

Browse public projects in the community
Click remix on any project you like
Build upon it with your own modifications

Example:

"Remix a social media app and add your unique features"

Remix an Existing Project

1 minute

Import Your Designs

Bring existing designs and wireframes into Lovable AI

Using Figma

If you have a design in Figma, you can bring it directly into Lovable AI.

Using screenshots

Take a screenshot of any part of it. You can paste the screenshot directly into Lovable AI or drag-and-drop the image file. Once you press Enter, Lovable AI will convert your design into functional code.

Using Builder.io integration

First, structure your Figma design using Auto-Layout and clear layer naming. Then, open the Builder.io plugin in Figma, select your design, and click "Open in Lovable AI" to generate a fully functional app.

Using a Sketch

Transform hand-drawn sketches into working applications with Lovable AI.

Step 1

Use Excalidraw or any similar tool to sketch your UI.

Step 2

Take a screenshot of your drawing, then paste or drag-and-drop it into Lovable AI.

Step 3

The platform will transform your sketch into working code.

Cloning a Website or Application

If you want to replicate an existing webpage, Lovable AI can recreate the structure and styling.

Step 1

Take a screenshot using shortcuts like Cmd+Shift+4 on Mac or tools like the GoFullPage Chrome Extension.

Step 2

Paste or drag the screenshot into Lovable AI

Step 3

Lovable AI will recreate the structure of the webpage in your project.

Create your First Project

Get started with Lovable AI in three simple steps

Step 1

To get started, head over to lovable.dev and create an account.

Create account

Step 2

Once registered, you'll be able to create your first project.

Create project

Step 3

Simply enter an initial prompt to kick things off, and Lovable AI will do the rest! This is the starting block for any project in Lovable AI, where you can bring your ideas to life instantly.

Enter prompt

Edit your Project

Powerful tools to customize and refine your application

Add Custom Knowledge

The Custom knowledge in Lovable AI acts as your project's blueprint, organizing functionality, design, and goals in one place.

Project blueprint
Functionality organization
Design guidelines
Goal tracking

Select & Visual Edit

Visual Edits allows AI-driven development with Tailwind-native visual controls for easy refinement.

AI-driven development
Tailwind controls
Visual refinement
Component editing

Revert a Change

Speed matters when building AI-driven apps, but so do stability and control. That's why we've upgraded versioning to make tracking changes effortless.

Restore Past Versions Instantly - If you want to go back to a previous version of your app, click 'restore' on the version you want to revert to
Bookmark Key Edits - Keep your work organized by bookmarking important edits, making it easy to find and revisit them later
Intuitive Version History - The history panel now works like Google Docs, making tracking changes easier

Add Fullstack Capabilities to your Project

Transform your frontend into a complete application with backend services

Connect a Backend

Supabase is a backend-as-a-service platform that integrates smoothly with Lovable AI to add powerful backend capabilities to your application

Set Up Supabase

Create an account on Supabase and create a new project with your preferred configuration.

Link to Lovable AI

In Lovable AI, go to Settings -> Connect Supabase and follow the steps.

Manage Data

Set up tables, manage user data, and configure email notifications.

Getting Started with Supabase

After setting up your Supabase project, you'll need to connect it to your Lovable AI project. This connection enables Lovable AI to leverage Supabase's backend services seamlessly.

Streamline Your App's Authentication with Supabase

Implementing secure authentication is crucial for any application. With Lovable AI's AI form builder and Supabase integration, you can effortlessly create robust login and sign-up forms.

Setup Steps:

• Create a Supabase Account - Visit Supabase and sign up
• Integrate Supabase with Lovable AI - Input your project URL and API keys
• Design Authentication Forms - Use Lovable AI's AI form builder

Features:

User RegistrationEmail VerificationSession ManagementPassword Reset

Supabase Edge Functions

Enhance your app with Supabase Edge Functions, enabling AI features, payments, and email integration with ease. You can add AI capabilities to your application, for example: OpenAI, Gemini, Groq.

Advanced Capabilities

Take your applications to the next level with professional features

AI Integration

Add AI capabilities to your application with OpenAI, Gemini, or Groq integration through Supabase Edge Functions.

OpenAI GPT models
Google Gemini
Groq inference
Custom AI workflows

Add Payment Capabilities

There are many ways to connect Stripe to Lovable AI, but the most straight-forward way is to utilize Stripe's built in payment links.

Stripe integration
Payment links
Subscription billing
Transaction tracking

Add Email Capabilities with Resend

Add email functionality to your application using Resend for transactional and marketing emails.

Transactional emails
Email templates
Delivery tracking
Marketing campaigns

Set up SEO

You can check this section of the documentation to ensure all SEO capabilities are properly enabled.

Meta tag optimization
Sitemap generation
Schema markup
Performance optimization

Add a Custom Domain

You can add a custom domain using various providers for professional branding.

Entri (native to Lovable AI)
Netlify
Vercel
Namecheap

GitHub Integration

Integrate with GitHub to iterate on your application seamlessly while keeping everything in sync.

Code synchronization
Version control
Collaborative editing
Branch management

Deploy & Publish Your Project

Share your application with the world using Lovable AI's deployment features

Publish my Project

When your project is ready, publish it to generate a shareable URL. This makes it easy to showcase your application or share it with collaborators and stakeholders.

Publishing Features:

Instant deployment
Global CDN
HTTPS by default
Custom domains
SEO optimization

Sharing Options:

Shareable preview links
Embed capabilities
Social media previews
Mobile optimization
Analytics tracking

Ready to Start Building?

Join thousands of developers who are creating amazing applications with Lovable AI. Your journey from idea to deployed app starts with a single prompt.

Create Your First Project Follow Quick Start Guide