Lovable AI Quickstart: From First Prompt to Full-Stack App

Welcome to this step-by-step guide on how to create a full-stack application using Lovable AI. This guide will walk you through creating your first project, understanding the platform, editing and enhancing your app, and finally deploying it.

**Ready to transform your ideas into production-ready applications?** Create your First Project

---

The Lovable AI Platform Overview

Understanding the core components of your Lovable AI workspace will accelerate your development journey.

Your First Project with Lovable AI

To get started, go to lovable.dev, create an account, and create your first project. Simply enter an initial prompt to kick things off. This is the starting block for any project in Lovable AI.

Lovable AI Dashboard

Your central hub to kickstart projects with a single prompt. The Lovable AI dashboard allows you to:

**Explore Projects:** View all your projects including latest and featured ones

**Start from Templates:** Choose from pre-built Lovable AI templates

**Profile Management:** View and edit your profile, manage account settings and credits

**Labs Features:** Toggle advanced Lovable AI features like Chat mode

**Subscription:** Manage your Lovable AI subscription plan

Project Overview in Lovable AI

Every Lovable AI project follows a structured workflow:

**Chat-Based Editing:** Use Lovable AI's intelligent chat interface for natural development

**Image Integration:** Attach images to prompts for precision in your Lovable AI projects

**Visual Component Editor:** Select and edit components visually within Lovable AI

**Mode Switching:** Toggle between edit and chat modes seamlessly

**Version History:** Track all changes in your Lovable AI project

**Page Navigation:** Navigate between different pages in your app

**Remixing:** Enable remixing for community collaboration

**Integrations:** Connect with Supabase and GitHub through Lovable AI

**Deployment:** Publish or deploy with Lovable AI's one-click deployment

**Preview:** Toggle between web/mobile views and refresh preview

Lovable AI Project Settings

Manage key project details in your Lovable AI workspace:

**Project Details:** View creation date and total edits in Lovable AI

**Custom Knowledge:** Set up project-specific context for better AI assistance

**GitHub Integration:** Connect your Lovable AI project to GitHub repositories

**Visibility Control:** Set project as public or private in Lovable AI

**Badge Management:** Control display badges (paid Lovable AI plans)

**Project Management:** Rename or delete your Lovable AI project

---

Building Your Application: A Step-by-Step Lovable AI Guide

Lovable AI provides multiple pathways to create, refine, and launch your application. From idea to launch, here's how to leverage the full power of Lovable AI.

1. Start Your Lovable AI Project

Choose from several methods to begin building with Lovable AI:

#### From a Prompt with Lovable AI

Describe what you want to build in the Lovable AI prompt box. The more specific you are, the better the results.

**Example Lovable AI prompt:** *"Create a dashboard with user login, monthly sales in a line chart, and customer demographics in a pie chart."*

#### From a Lovable AI Template

Use pre-built Lovable AI templates for popular project types like dashboards or e-commerce sites for quick setup. Once loaded, use prompts to adjust features and fine-tune the design with Lovable AI.

#### Remix an Existing Lovable AI Project

Reuse any public Lovable AI project or one of your own as a starting point. This preserves the original while you iterate on a new version in Lovable AI. Note: remixing is not possible when Supabase is connected to your Lovable AI project.

#### From Figma to Lovable AI

Use a screenshot of your design or the Builder.io plugin. With the plugin, structure your design with Auto-Layout, select it, and click "Open in Lovable" to generate a functional app with Lovable AI.

#### From a Sketch to Lovable AI

Use tools like Excalidraw to sketch your UI, take a screenshot, and paste or drag it into Lovable AI to transform it into working code.

#### Clone Websites with Lovable AI

Take a full-page screenshot of an existing webpage (using `Cmd+Shift+4` on Mac or the GoFullPage Chrome Extension) and paste it into Lovable AI to recreate its structure.

2. Edit Your Lovable AI Project

Refine and enhance your application with these Lovable AI tools:

#### Add Custom Knowledge to Lovable AI

Use the Lovable AI Knowledge Base to define your project's blueprint (objectives, key features, design guidelines). Keep it updated to ensure development stays on track with Lovable AI.

#### Visual Editing in Lovable AI

Use Lovable AI's AI-driven, Tailwind-native visual controls for easy and precise design refinement.

#### Version Control in Lovable AI

The Lovable AI version history panel works like Google Docs. You can instantly restore past versions, bookmark key edits to find them easily, and track all changes in your Lovable AI project.

#### Enhanced Prompts with Lovable AI

Attach images directly to the Lovable AI chat to provide visual context for your ideas and get more accurate results.

#### Project Management with Lovable AI

Add new pages, refactor code, and connect to GitHub repositories to iterate on your Lovable AI application seamlessly while keeping everything in sync.

3. Add Full-stack Capabilities with Lovable AI

Integrate backend services to create powerful applications using Lovable AI:

#### Connect a Backend to Lovable AI

Link a Supabase project in your Lovable AI settings to add backend capabilities. Set up tables, manage user data, and configure email notifications through your Lovable AI integration.

#### Streamline Authentication with Lovable AI

Use Lovable AI's AI form builder with Supabase to create robust login/sign-up forms. Integrate your Supabase project URL and API keys, design forms with Lovable AI, implement workflows with Edge Functions for token validation, and enable email verification.

#### Supabase Edge Functions in Lovable AI

Enhance your Lovable AI app by adding:

**AI Capabilities:** OpenAI, Gemini, Groq integration through Lovable AI

**Payment Processing:** Stripe integration with Lovable AI

**Email Integration:** Resend email services in your Lovable AI project

#### Payment Integration with Lovable AI

Integrate Stripe using their built-in payment links directly in your Lovable AI application.

#### Email Capabilities in Lovable AI

Connect email capabilities using Resend to enhance your Lovable AI project's communication features.

4. Deploy & Publish Your Lovable AI Project

Get your Lovable AI application ready for the world:

#### SEO Optimization for Lovable AI

Configure SEO settings in your Lovable AI project to ensure proper search engine optimization for your deployed application.

#### Custom Domain for Lovable AI

Connect a custom domain to your Lovable AI project using:

**Entri (native):** Built-in domain management in Lovable AI

**Netlify:** External hosting with Lovable AI integration

**Vercel:** Seamless deployment from Lovable AI

**Namecheap:** Domain registration with Lovable AI connection

#### Publish Your Lovable AI Project

When your Lovable AI project is ready, publish it to generate a shareable URL. Remember to re-publish after making changes to ensure they are live on your Lovable AI application.

---

Next Steps with Lovable AI

Continue your Lovable AI journey:

**Explore Advanced Features:** [Lovable AI Feature Guide](/guides/ui-and-design/visual-editor)

**Master Best Practices:** [Lovable AI Best Practices](/guides/getting-started/best-practices)

**Join the Community:** [Lovable AI Community](/community)

**Get Support:** Access Lovable AI documentation and support resources

Start building your next breakthrough application with Lovable AI today!

Lovable AI Quickstart Guide