### Create Your First Lovable Project
Source: https://github.com/lovablelabs/docs/blob/main/introduction/getting-started.mdx
Learn how to start a new project on Lovable by creating an account, entering an initial prompt, and understanding the project creation process. This section includes a video tutorial and step-by-step instructions.
```Markdown
## Overview of Lovable
Welcome to this step-by-step guide on how to create a full-stack application using Lovable:
### The Lovable Platform Overview
To get started, head over to [lovable.dev](https://lovable.dev) and create an account.
Once registered, you'll be able to create your first project.
Simply enter an initial prompt to kick things off, and Lovable will do the rest! This is the **starting block** for any project in Lovable, where you can bring your ideas to life instantly.
```
--------------------------------
### Set up SEO for Lovable Project
Source: https://github.com/lovablelabs/docs/blob/main/introduction/getting-started.mdx
Guidance on ensuring all SEO capabilities are properly enabled for your Lovable project. Refer to the documentation for detailed instructions.
```markdown
You can check [this section of the documentation](https://docs.lovable.dev/features/seo) to ensure all SEO capabilities are properly enabled.
```
--------------------------------
### Connect Project to GitHub
Source: https://github.com/lovablelabs/docs/blob/main/introduction/getting-started.mdx
Integrate your Lovable project with GitHub for seamless iteration and synchronization between GitHub, your IDE, and Lovable.
```Markdown
Integrate your project with GitHub to iterate on your application seamlessly. You can make code changes in GitHub or your preferred IDE while keeping everything in sync with Lovable.
[More information here](https://docs.lovable.dev/integrations/git-integration).
```
--------------------------------
### Add a New Page to Project
Source: https://github.com/lovablelabs/docs/blob/main/introduction/getting-started.mdx
Instructions on how to add a new page to your Lovable project.
```Markdown
Add a New Page to your Project
```
--------------------------------
### Publish Lovable Project
Source: https://github.com/lovablelabs/docs/blob/main/introduction/getting-started.mdx
Steps to publish your project, generate a shareable URL, and make it easy to showcase your application or share it with collaborators and stakeholders. Refer to the documentation for more details.
```markdown
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.
You can refer to [this section of the documentation](https://docs.lovable.dev/features/deploy) for more information.
```
--------------------------------
### Namecheap + GitHub Pages Custom Domain Setup
Source: https://github.com/lovablelabs/docs/blob/main/features/custom-domain.mdx
Reference to a user-created guide for setting up a custom domain with Namecheap and GitHub Pages for a Lovable project.
```APIDOC
Namecheap + GitHub Pages:
Refer to the guide at: https://custom-domain.lovable.app/
This guide provides personalized, step-by-step instructions for setup.
```
--------------------------------
### Refactor Code
Source: https://github.com/lovablelabs/docs/blob/main/introduction/getting-started.mdx
Guidance on refactoring code within your Lovable project.
```Markdown
Refactor Code
```
--------------------------------
### Prompt-Based App Creation
Source: https://github.com/lovablelabs/docs/blob/main/introduction/getting-started.mdx
Describe your desired application in the prompt box. The more specific your prompt, the better Lovable can generate the app. Refine and adjust as needed.
```English
Example Prompt:
"Create a dashboard with user login, monthly sales in a line chart, and customer demographics in a pie chart."
```
--------------------------------
### Lovable Dashboard Features
Source: https://github.com/lovablelabs/docs/blob/main/introduction/getting-started.mdx
Explore the Lovable dashboard, which allows users to start projects with a prompt, view all projects, use templates, manage profiles, access account settings, experiment with features like Chat mode, and manage subscription plans.
```Markdown
At Lovable, simplicity is key:
- [**Here**](https://lovable.dev/) **you kickstart your project** with a single prompt.
- **Explore all projects**, including the latest and featured ones.
- **Jumpstart with a template** from our curated selection.
- **Personalize your experience** by viewing and editing your profile.
- [**Manage your account**](https://lovable.dev/settings) to check monthly credits and adjust settings.
- **Experiment with** [**Labs**](https://lovable.dev/settings/account) **features** like Chat mode—toggle them on or off.
- [**Upgrade or downgrade**](https://lovable.dev/settings/plans) **your plan** seamlessly.
```
--------------------------------
### Prompt Example: Starting a New AI Project
Source: https://github.com/lovablelabs/docs/blob/main/tips-tricks/prompting-library.mdx
This prompt helps the AI understand high-level requirements and build a project foundation. It's used to kick off a new application by specifying the app type, tech stack, and core features, acting as a project brief. Outline the application type, key technologies (frontend, backend, services), and primary features, then direct the AI on where to start (e.g., main page). This establishes project scope and initial focus.
```Prompt
I need a **task management** application with:
- **Tech Stack:** Next.js frontend, Tailwind CSS for styling, Supabase for auth and database.
- **Core Features:** Project and task creation, assigning tasks to users, due date reminders, and a dashboard overview.
Start by building the **main dashboard page**, containing:
- A header with navigation,
- A list of projects with their status,
- and a button to create a new project.
Provide dummy data for now, and ensure the design is clean and responsive.
```
--------------------------------
### Productized Development Agency Setup
Source: https://github.com/lovablelabs/docs/blob/main/use-case/video-tutorials.mdx
Guide to building a productized development agency app using Lovable, Supabase, and Stripe. Covers authentication, user management, and Stripe subscription integration for tiered access.
```APIDOC
Productized Agency Features:
Authentication & User Management:
Supabase integration for sign-ups, logins, and profile management.
Persistent user sessions.
Stripe Subscription Integration:
Enable users to subscribe to different pricing tiers.
Manage subscription status for premium feature access.
Dashboard & Task Management: (Details not provided in the input)
```
--------------------------------
### Vercel Deployment and Custom Domain Workflow
Source: https://github.com/lovablelabs/docs/blob/main/features/custom-domain.mdx
Guide for deploying a Lovable project on Vercel, managing custom domains, and implementing a staging/production workflow.
```APIDOC
Vercel Deployment Workflow:
1. Create a GitHub repository from your Lovable project.
2. Import the repository into Vercel and assign your custom domain.
3. Create a 'development' branch in GitHub for staging.
4. Configure Vercel to deploy exclusively from the 'main' branch (production).
5. In Lovable, switch to the 'development' branch for making changes.
6. Merge changes from 'development' to 'main' to deploy to production.
```
--------------------------------
### Stripe Integration Prompt Example
Source: https://github.com/lovablelabs/docs/blob/main/prompting/prompting-library.mdx
An example prompt to guide an AI in setting up Stripe payments. It specifies the mode, product details, redirect URLs, and security considerations for API keys.
```plaintext
I want to **add Stripe payments** to the app.
- Use **Stripe in test mode** for now.
- We have a product in Stripe with ID `prod_12345` and a price ID `price_67890` (one-time purchase).
- Implement a checkout button on the **Pricing page** that starts a Stripe checkout for that product.
- After successful payment, redirect the user to `/payment-success`. If the payment is canceled, redirect to `/payment-cancelled`.
Important:
- Assume API keys and webhook secrets are configured securely (do **not** hard-code them).
- Do **not** modify any other pages or features unrelated to payments.
Once done, provide any webhook endpoint setup instructions I need (e.g., URL to add in Stripe dashboard for post-payment events).
```
--------------------------------
### Netlify Deployment and Custom Domain
Source: https://github.com/lovablelabs/docs/blob/main/features/custom-domain.mdx
Steps to deploy a Lovable project on Netlify and connect a custom domain.
```APIDOC
Netlify Deployment:
1. Transfer your Lovable project to GitHub.
2. Import the project into Netlify and initiate deployment.
3. Navigate to Domain Management within Netlify.
4. Add your custom domain and follow Netlify's DNS instructions for connection.
5. Automatic redeployment is enabled for changes made in Lovable.
```
--------------------------------
### Lovable Project Creation and Building Guide
Source: https://github.com/lovablelabs/docs/blob/main/introduction/faq.mdx
This section provides guidance on how to start and build projects using Lovable. It includes instructions on creating a project by describing it, using templates, building efficiently, structuring prompts, and handling errors.
```English
To create a project, simply type a message into the message box on the dashboard. Just describe what you want to build and Lovable will take it from there and generate a starting point for your project. Remember to start small and build in increments! You can also use pre-built templates available at https://lovable.dev/templates. Building efficiently involves clear and specific prompts, focusing on one feature at a time, building incrementally, and using buzz-words for design. When encountering errors, use the 'Try-to-fix' button, ask the AI to investigate, or restore to a previous version.
```
--------------------------------
### Remixing Existing Projects
Source: https://github.com/lovablelabs/docs/blob/main/introduction/getting-started.mdx
Start a new project by remixing an existing public project or one of your own. This allows you to build upon a current state, explore ideas, and make adjustments while preserving the original. Note: Remixing is not possible when Supabase is connected.
```English
Note: Remixing projects is not supported when Supabase is connected.
```
--------------------------------
### Starting a New Project Prompt
Source: https://github.com/lovablelabs/docs/blob/main/prompting/prompting-library.mdx
A prompt template for initiating new projects, specifying the application type, tech stack, core features, and the starting point for development. It guides the AI to build a foundation with dummy data and a clean, responsive design.
```plaintext
I need a **task management** application with:
- **Tech Stack:** Next.js frontend, Tailwind CSS for styling, Supabase for auth and database.
- **Core Features:** Project and task creation, assigning tasks to users, due date reminders, and a dashboard overview.
Start by building the **main dashboard page**, containing:
- A header with navigation,
- A list of projects with their status,
- and a button to create a new project.
Provide dummy data for now, and ensure the design is clean and responsive.
```
--------------------------------
### Lovable Project Workflow
Source: https://github.com/lovablelabs/docs/blob/main/introduction/getting-started.mdx
Understand the project workflow in Lovable, including editing with a chat interface, attaching images, visual component editing, version history, page navigation, remixing, GitHub integration, publishing, and responsive design previews.
```Markdown
At Lovable, every project follows a structured workflow:
- **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.
```
--------------------------------
### Entri Domain Connection Process
Source: https://github.com/lovablelabs/docs/blob/main/features/custom-domain.mdx
This outlines the steps to connect a custom domain to a Lovable project using Entri, which may include automatic DNS setup.
```APIDOC
Project Settings:
Navigate to Project > Settings > Domains.
Click 'Connect Domain'.
Domain Entry:
Click 'Continue' and enter your domain name (e.g., yourdomain.com).
Provider Selection:
Choose your domain provider from the list.
If your provider is not listed, select a manual setup option.
Authorization:
Follow prompts to log in to your provider and authorize Entri to update DNS settings.
Completion:
Click 'Close Window', return to Lovable, and click 'Done'.
Note:
DNS changes may take up to 48 hours to propagate.
```
--------------------------------
### Deployment Pipeline Setup
Source: https://github.com/lovablelabs/docs/blob/main/prompting/prompting-library.mdx
This snippet outlines the setup of a deployment pipeline. It includes configurations for staging and production environments, automatic database migrations, environment-specific settings, and rollback capabilities.
```bash
Set up a deployment pipeline for this application that includes staging and production environments, automatic database migrations, environment-specific configurations, and rollback capabilities.
```
--------------------------------
### Utilize Supabase Edge Functions for Advanced Features
Source: https://github.com/lovablelabs/docs/blob/main/introduction/getting-started.mdx
Enhance your application with Supabase Edge Functions to implement AI features, payment processing, and email integration. This guide focuses on building full-stack applications on Lovable using Supabase.
```APIDOC
Supabase Edge Functions Capabilities:
- AI Features: Integrate with services like OpenAI, Gemini, and Groq.
- Payments: Handle payment processing.
- Email Integration: Manage email notifications and workflows.
```
--------------------------------
### Add Animation Component
Source: https://github.com/lovablelabs/docs/blob/main/introduction/getting-started.mdx
Integrate animation components into your project using the provided guidance.
```Markdown
Add Animation Component with 21st dev
```
--------------------------------
### Lovable Project Settings Management
Source: https://github.com/lovablelabs/docs/blob/main/introduction/getting-started.mdx
Details the various settings available for each Lovable project, including viewing project details, setting custom knowledge, connecting to GitHub, managing visibility, badges, renaming, and deleting projects.
```Markdown
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).
```
--------------------------------
### Example Planning Prompt for Feature Implementation
Source: https://github.com/lovablelabs/docs/blob/main/prompting/prompting-library.mdx
This prompt guides an AI to create a detailed, step-by-step plan for implementing a new feature, including considerations for frontend, backend, and stability. It explicitly requests a pause for review before any code changes are made.
```English
Before writing any code, **plan out the implementation** of the new Notifications feature.
- List each step required to add email notifications when a task is overdue.
- Consider both frontend (UI changes, if any) and backend (creating scheduled checks or triggers) aspects.
- Ensure the plan keeps the current functionality stable – we can’t break anything existing.
- Provide the plan as an ordered list (1, 2, 3, ...), with a brief explanation of each step.
Once you outline the plan, pause for review. **Do not make any code changes yet.**
```
--------------------------------
### Add Custom Knowledge to Project
Source: https://github.com/lovablelabs/docs/blob/main/introduction/getting-started.mdx
Learn how to add custom knowledge to your Lovable project, which serves as a blueprint for organizing functionality, design, and goals.
```Markdown
The [Custom knowledge](/features/knowledge) in Lovable acts as your project's **blueprint**, organizing functionality, design, and goals in one place.
```
--------------------------------
### Connect Supabase Backend to Lovable
Source: https://github.com/lovablelabs/docs/blob/main/introduction/getting-started.mdx
Integrate Supabase, a backend-as-a-service platform, with Lovable to add powerful backend capabilities. This involves setting up a Supabase account, linking it to Lovable, and managing data and user configurations.
```APIDOC
Steps to Connect Supabase:
1. Create a Supabase account and a new project.
2. In Lovable, navigate to Settings -> Connect Supabase.
3. Follow the on-screen instructions to link your Supabase project.
4. Manage tables, user data, and email notifications within Supabase.
```
--------------------------------
### Leveraging Examples and Context
Source: https://github.com/lovablelabs/docs/blob/main/prompting/prompting-one.mdx
Shows how providing context, examples, or references (like design styles or existing code) helps the AI emulate specific patterns and achieve desired outcomes.
```markdown
We are building a project management tool that helps teams track their tasks.
This tool should have features like:
- user authentication
- project creation
- task assignments
- reporting
Now, for the first task, create the UI for project creation.
I need a CRM app with Supabase integration and a secure auth flow. Start by setting up the backend.
We are developing an e-commerce platform focusing on eco-friendly products. Generate a product listing page with filters for category and price.
```
--------------------------------
### Cloning Websites with Screenshots
Source: https://github.com/lovablelabs/docs/blob/main/introduction/getting-started.mdx
Replicate existing webpages by taking screenshots. Use shortcuts like Cmd+Shift+4 on Mac or browser extensions like GoFullPage. Paste or drag the screenshot into Lovable to recreate the webpage structure.
```English
Step 1: Take a screenshot of the webpage (e.g., using Cmd+Shift+4 or GoFullPage Chrome Extension).
Step 2: Paste or drag the screenshot into Lovable.
Step 3: Lovable will recreate the webpage structure.
```
--------------------------------
### Prompt Example: Creating a New Component
Source: https://github.com/lovablelabs/docs/blob/main/tips-tricks/prompting-library.mdx
This prompt guides the AI to create a new UI component. It specifies the component's name, required features, responsiveness, accessibility, TypeScript typings for props, and styling framework (Tailwind CSS).
```Prompt
Create a new component called [ComponentName] with these features: [list features]. Make it responsive and accessible with proper keyboard navigation. Include proper TypeScript typings for props, and use Tailwind for styling.
```
--------------------------------
### Revert Changes and Version Control
Source: https://github.com/lovablelabs/docs/blob/main/introduction/getting-started.mdx
Manage project versions efficiently with an upgraded versioning system. Restore past versions instantly, bookmark key edits, and navigate an intuitive version history similar to Google Docs.
```Markdown
If you want to go back to a previous version of your app, click 'restore' on the version you want to revert to.
Keep your work organized by bookmarking important edits, making it easy to find and revisit them later.
The history panel now works like Google Docs, making tracking changes easier.
```
--------------------------------
### Add Images to Prompt for Context
Source: https://github.com/lovablelabs/docs/blob/main/introduction/getting-started.mdx
Enhance your prompts by attaching images directly to the chat, providing visual context for your ideas and concepts.
```Markdown
Attach images directly to the chat to add context to your prompts. This makes it easier to illustrate ideas or concepts that are better shown than described.
```
--------------------------------
### Authentication Prompt Example
Source: https://github.com/lovablelabs/docs/blob/main/use-case/saas.mdx
An example prompt for integrating user authentication (sign-up and login) into a SaaS application, including redirection logic.
```markdown
Add sign up and login. Redirect to sign-up on 'Get Started'.
```
--------------------------------
### Converting Sketches to Code
Source: https://github.com/lovablelabs/docs/blob/main/introduction/getting-started.mdx
Transform your UI sketches into functional code. Use tools like Excalidraw to create your sketch, take a screenshot, and then paste or drag-and-drop it into Lovable.
```English
Step 1: Sketch your UI using Excalidraw or a similar tool.
Step 2: Take a screenshot of your sketch.
Step 3: Paste or drag-and-drop the screenshot into Lovable for code conversion.
```
--------------------------------
### Build a Personal Website
Source: https://github.com/lovablelabs/docs/blob/main/use-case/video-tutorials.mdx
This tutorial guides you through building a personal website. It covers the essential steps and technologies needed for website creation.
```youtube
https://www.youtube.com/embed/sr2vJmZBZ4o?si=KluqHg-WwBBEn_Ve
```
--------------------------------
### Using Lovable Templates
Source: https://github.com/lovablelabs/docs/blob/main/introduction/getting-started.mdx
Utilize Lovable's templates for popular project types like dashboards, e-commerce sites, or social apps. After loading a template, use prompts to customize features, elements, and design.
```English
Step 1: Select a template from https://lovable.dev/templates.
Step 2: Use prompts to adjust features, add elements, or fine-tune the design.
```
--------------------------------
### Lovable 101 Video Tutorial
Source: https://github.com/lovablelabs/docs/blob/main/use-case/video-tutorials.mdx
This section provides a video tutorial covering the basics of Lovable, including getting started, understanding the interface, editing features, authentication, Supabase integration, GitHub integration, project sharing, and additional resources.
```HTML
```
--------------------------------
### Lovable Quick Access Menu
Source: https://github.com/lovablelabs/docs/blob/main/introduction/getting-started.mdx
Information on the quick access menu within Lovable, providing direct links to the Dashboard, Account Settings, Documentation, Feedback Portal, Support, and a secure logout option.
```Markdown
You can always quickly access:
- **Dashboard** for an overview of your projects.
- **Account settings** to manage your profile and preferences.
- **Documentation, Feedback Portal, and Support** for guidance and assistance.
- **Log out** securely from your Lovable account.
```
--------------------------------
### Example Prompts for Chat Mode
Source: https://github.com/lovablelabs/docs/blob/main/tips-tricks/from-idea-to-app.mdx
These examples demonstrate how to use Lovable's Chat Mode to break down ideas into actionable steps or identify the simplest version of a feature.
```markdown
I want to build a dog breeding management app. Here's what I need it to do: [list]. Can you break this down into steps or components to build?
I’m building a job coaching app. Here’s what I want it to do: [list]. What’s the simplest version to test?
```
--------------------------------
### Add Custom Domain to Lovable Project
Source: https://github.com/lovablelabs/docs/blob/main/introduction/getting-started.mdx
Instructions on adding a custom domain to your Lovable project using native Entri, Netlify, Vercel, or Namecheap. Consult the documentation for more information.
```markdown
You can add a custom domain using:
- Entri (native to Lovable)
- Netlify
- Vercel
- Namecheap
You can check [this section of the documentation](https://docs.lovable.dev/features/custom-domain) for more information.
```
--------------------------------
### Generate App with Prompt
Source: https://github.com/lovablelabs/docs/blob/main/user-guides/quickstart.mdx
An example of a detailed natural language prompt used to instruct the Lovable platform to create an application. This prompt specifies desired features such as user authentication, data visualization (line chart for sales, pie chart for demographics), and overall application type (dashboard).
```Prompt
"Create a dashboard with user login, monthly sales in a line chart, and customer demographics in a pie chart."
```
--------------------------------
### Visual Editing with AI Controls
Source: https://github.com/lovablelabs/docs/blob/main/introduction/getting-started.mdx
Utilize AI-driven development with Tailwind-native visual controls for easy refinement of your project's design. This feature allows for quick and intuitive visual edits.
```Markdown
[Visual Edits](https://docs.lovable.dev/features/precision-edit#visual-edits) allows AI-driven development with Tailwind-native visual controls for easy refinement.
```
--------------------------------
### Add Payment Capabilities with Stripe Payment Links
Source: https://github.com/lovablelabs/docs/blob/main/introduction/getting-started.mdx
Integrate Stripe into your Lovable project for payment processing using Stripe's built-in payment links. This is a straightforward method for adding e-commerce functionality.
```APIDOC
Stripe Integration using Payment Links:
- Utilize Stripe's payment links feature for a direct integration.
- Refer to the provided resource for detailed setup instructions: https://docs.lovable.dev/tips-tricks/setting-up-payments
```
--------------------------------
### GitHub Workflow Setup
Source: https://github.com/lovablelabs/docs/blob/main/prompting/prompting-library.mdx
This snippet details the setup of a GitHub workflow for a project. It includes configuring branch protection rules, PR templates, and CI/CD pipelines with automatic preview deployments.
```bash
Connect this Lovable project to GitHub and set up a good workflow for contributions. Include branch protection rules, PR templates, and CI/CD workflow configuration with automatic preview deployments.
```
--------------------------------
### Prompting Lovable for a Landing Page
Source: https://github.com/lovablelabs/docs/blob/main/faq.mdx
Example prompt demonstrating how to instruct Lovable's AI to generate a landing page for a specific target audience.
```Prompt
_"I want to build a landing page for an AI platform targeting psychologists."_
```
--------------------------------
### Examples of Specific Prompts (DO)
Source: https://github.com/lovablelabs/docs/blob/main/tips-tricks/prompting-one.mdx
Illustrates examples of clear and specific prompts that provide detailed instructions, leading to precise and desired AI outputs.
```Prompt
Refactor the app to clean up unused components and improve performance, without changing UI or functionality.
```
```Prompt
Create a user registration form with fields for username, email, and password and include a submit button.
```
--------------------------------
### Adaptive Prompting Example
Source: https://github.com/lovablelabs/docs/blob/main/prompting/prompting-one.mdx
Provides an example of adapting a prompt based on initial AI output, demonstrating iterative refinement for better results.
```text
“The solution you gave is missing the authentication step. Please include user auth in the code.”
```
--------------------------------
### Provide Context and Examples in Prompts
Source: https://github.com/lovablelabs/docs/blob/main/tips-tricks/prompting-one.mdx
If you have a target design, code style, or specific project context, mention it or provide an example. Concrete references help the AI emulate the desired outcome more accurately.
```Prompt
We are building a project management tool that helps teams track their tasks.
This tool should have features like:
- user authentication
- project creation
- task assignments
- reporting
Now, for the first task, create the UI for project creation.
```
```Prompt
I need a CRM app with Supabase integration and a secure auth flow. Start by setting up the backend.
```
```Prompt
We are developing an e-commerce platform focusing on eco-friendly products. Generate a product listing page with filters for category and price.
```
--------------------------------
### SSL Certificate Provisioning
Source: https://github.com/lovablelabs/docs/blob/main/features/custom-domain.mdx
Explains that Lovable Labs automatically generates and installs SSL certificates for custom domains upon connection. This ensures HTTPS is enabled for security and SEO benefits. It also provides a troubleshooting step if the certificate is not issued within 48 hours.
```APIDOC
SSL Certificate Handling:
- Automatic SSL certificate generation and installation for connected custom domains.
- Ensures HTTPS is enabled for secure connections.
- If certificate is not issued after 48 hours, contact support.
```
--------------------------------
### Importing Designs from Figma
Source: https://github.com/lovablelabs/docs/blob/main/introduction/getting-started.mdx
Integrate your Figma designs into Lovable. You can use screenshots pasted directly or dragged-and-dropped, or leverage the Builder.io integration for a more seamless conversion. Ensure your Figma design uses Auto-Layout and clear layer naming for the Builder.io integration.
```English
Method 1: Screenshots
1. Take a screenshot of your Figma design.
2. Paste or drag-and-drop the screenshot into Lovable.
3. Press Enter to convert the design to code.
Method 2: Builder.io Integration
1. Structure your Figma design with Auto-Layout and clear layer naming.
2. Use the Builder.io plugin in Figma.
3. Select your design and click "Open in Lovable".
```
--------------------------------
### Manual DNS Setup for Custom Domains
Source: https://github.com/lovablelabs/docs/blob/main/features/custom-domain.mdx
Instructions for manually configuring DNS records when your domain provider is not automatically supported by Entri.
```APIDOC
Manual DNS Configuration:
1. Access Project Settings > Domains and click 'Connect Domain'.
2. Enter your domain and proceed.
3. Select the manual setup option for unsupported providers.
4. Copy the provided DNS records (e.g., A, CNAME).
5. Input these records directly into your domain registrar's DNS settings.
```
--------------------------------
### Build SaaS Startup with Supabase Tutorial
Source: https://github.com/lovablelabs/docs/blob/main/use-case/video-tutorials.mdx
This tutorial guides you through building a SaaS startup using Supabase, presented via an embedded YouTube video.
```youtube
```
--------------------------------
### Zero-Shot vs. Few-Shot Prompting
Source: https://github.com/lovablelabs/docs/blob/main/prompting/prompting-one.mdx
Explains the difference between zero-shot prompting (no examples) and few-shot prompting (with examples) and provides usage scenarios.
```APIDOC
Zero-Shot Prompt Example:
Translate the following sentence to Spanish: 'I am learning to code.'
```
```APIDOC
Few-Shot Prompt Example:
Correct the grammar in these sentences:
Input: "the code not working good" -> Output: "The code is not working well."
Input: "API give error in login" -> Output: "The API gives an error during login."
Now Input: "user not found in database" -> Output:
```
--------------------------------
### Build a Chat-Based Interface Tutorial
Source: https://github.com/lovablelabs/docs/blob/main/use-case/video-tutorials.mdx
Follow this tutorial to build a chat-based interface. The guide is provided via an embedded YouTube video.
```youtube
```
--------------------------------
### Prompting with Purpose Example
Source: https://github.com/lovablelabs/docs/blob/main/tips-tricks/from-idea-to-app.mdx
A reminder to define the current building objective before prompting the AI.
```markdown
What am I trying to build right now?
```
--------------------------------
### Streamline Authentication with Supabase and Lovable
Source: https://github.com/lovablelabs/docs/blob/main/introduction/getting-started.mdx
Implement secure authentication forms for login and sign-up using Lovable's AI form builder and Supabase integration. This process includes setting up Supabase for authentication workflows, designing forms in Lovable, and enabling email verification.
```APIDOC
Authentication Integration Steps:
1. Create a Supabase account and project.
2. Integrate Supabase with Lovable by providing project URL and API keys in Lovable's integration settings.
3. Design login and sign-up forms using Lovable's AI form builder.
4. Implement authentication workflows using Supabase Edge Functions for token validation and session management.
5. Configure Supabase for email verification upon user registration.
6. Test and deploy the authentication system.
```
--------------------------------
### Supabase Setup and Configuration
Source: https://github.com/lovablelabs/docs/blob/main/use-case/prototype.mdx
Instructions for setting up a Supabase organization and project, including enabling email authentication and noting Supabase URL and API key.
```APIDOC
Supabase Setup:
1. Log into Supabase.
2. Create an organization.
3. Create a new project.
- Note Supabase URL and API key.
Supabase Authentication Configuration:
1. Navigate to Authentication > Sign In/Sign Up.
2. Enable Email authentication.
3. Disable Confirm Email.
```
--------------------------------
### Deploying App with Netlify
Source: https://github.com/lovablelabs/docs/blob/main/use-case/video-tutorials.mdx
Instructions for deploying an application using Netlify, including connecting GitHub repositories and configuring DNS settings for custom domains.
```APIDOC
Netlify Deployment:
Connect GitHub Repository: Link your project's GitHub repository to Netlify for automated builds and deployments.
Custom Domains:
Purchase Domain: Acquire a domain name from a registrar.
Configure DNS: Update DNS settings to point to Netlify's servers, enabling your custom domain.
Deployment Logs: Review Netlify build logs for any issues and share them for tailored fixes.
```
--------------------------------
### Build a Cryptocurrency Dashboard
Source: https://github.com/lovablelabs/docs/blob/main/use-case/video-tutorials.mdx
This tutorial guides you through building a cryptocurrency dashboard. Learn to display and analyze cryptocurrency data.
```youtube
https://www.youtube.com/embed/QZi9JvIKgJE?si=Pmjf5RVywZ28ErUC
```
--------------------------------
### Credit Rollover Examples
Source: https://github.com/lovablelabs/docs/blob/main/introduction/plans-and-credits.mdx
Provides practical examples to clarify how credit rollover limits are applied based on different monthly credit allowances and plan changes.
```text
### Examples:
- If you’re on a plan with 100 credits/month, your rollover cap is 100 credits.
- If you upgrade to a 200 credits/month plan, your new rollover cap is 200 credits.
- If you downgrade from 200 to 100, a cap of 100 credits will roll over, even if you have more unused
```
--------------------------------
### Stripe Integration Chat Setup
Source: https://github.com/lovablelabs/docs/blob/main/integrations/stripe.mdx
Guides users on setting up Stripe payments via chat. It requires Supabase connection and Stripe Secret Key configuration. Users describe their needs (e.g., subscription tiers, one-time checkouts), and Lovable generates necessary functions, tables, and UI elements.
```APIDOC
Chat-driven Stripe Setup:
Description: Configure Stripe payments and subscriptions entirely through chat.
Prerequisites:
- Supabase project connected.
- Stripe Secret Key configured via the in-chat 'Add API Key' form.
Usage:
- Describe desired payment setup in chat, e.g., 'Add three subscription tiers...' or 'Create a one-time checkout for my e-book at $29'.
Output:
- Lovable auto-generates checkout/portal edge functions, database tables with RLS, and UI buttons.
Notes:
- For subscriptions, ensure Supabase Auth is in place to link Stripe customers to user IDs.
- Webhooks are opt-in; Lovable uses edge-function polling by default.
- Debugging can be done via Browser Console, Supabase Edge Functions Logs, and Stripe Dashboard Logs.
- Always test in Stripe Test Mode before deploying.
- Test card details: 4242 4242 4242 4242, any 3-digit CVC, any future date.
Limitations:
- Stripe integration does not work in preview mode; deployment is required for testing.
```
--------------------------------
### More Videos Available
Source: https://github.com/lovablelabs/docs/blob/main/use-case/video-tutorials.mdx
Access a wider range of project tutorials and demonstrations by visiting the provided YouTube playlist.
```youtube
https://www.youtube.com/playlist?list=PLbVHz4urQBZkJ6WMXlIGc3NGsufrleogY
```
--------------------------------
### Building a $10K Landing Page in 1 Hour Tutorial
Source: https://github.com/lovablelabs/docs/blob/main/use-case/video-tutorials.mdx
This tutorial focuses on efficiently building a high-converting landing page within a tight timeframe using Lovable.
```APIDOC
LandingPage_Build:
optimize_hero_section(headline: str, subheadline: str, cta_text: str)
Optimizes the main hero section for maximum impact.
implement_sticky_scroll(sections: list[str], scroll_behavior: str)
Configures sticky scroll effects for different sections of the landing page.
add_hover_effects(elements: list[str], effect_type: str)
Applies interactive hover effects to specified elements.
```
--------------------------------
### Example Prompt to Limit Scope
Source: https://github.com/lovablelabs/docs/blob/main/prompting/prompting-library.mdx
This example demonstrates how to instruct an AI to focus its changes on specific files or components while explicitly forbidding modifications to others. It guides the AI's attention to the desired areas and reinforces boundaries.
```plaintext
Please **focus only on the Dashboard page** for this change.
- Do **not modify** the `LoginPage.tsx` or `AuthProvider.tsx` files at all (authentication is working well, and we want to keep it intact).
- Concentrate your code edits on `Dashboard.tsx` and related dashboard components **only**.
Task: Add a new section to the Dashboard that shows “Tasks due this week”. Make sure to fetch the relevant tasks from the database.
*(Again, no changes to login or auth files – those are off-limits.)*
```
--------------------------------
### AI-Generated Feature Implementation Plan Example
Source: https://github.com/lovablelabs/docs/blob/main/prompting/prompting-library.mdx
An example of an AI-generated plan for implementing an email notification feature for overdue tasks. The plan outlines key steps from database changes to testing, demonstrating the output of a successful planning prompt.
```English
1. **Add a timestamp field** to tasks for due date (if not already present).
2. **Create a server-side function** (or scheduled job) to check for overdue tasks periodically.
3. **Integrate email sending** using an email service (e.g., Resend or SMTP) when an overdue task is found.
4. **Update the UI** to allow users to toggle notifications on/off for a task (optional setting).
5. **Test the flow** with a task that just passed its due time to ensure an email is sent.
```
--------------------------------
### Mobile Responsiveness Prompt Example
Source: https://github.com/lovablelabs/docs/blob/main/prompting/prompting-library.mdx
An example prompt to instruct an AI on creating a fully responsive web application with a mobile-first strategy, utilizing modern UI/UX practices and specific framework guidelines (like Tailwind CSS). It details how elements should adapt, emphasizes readability, and specifies checking layouts at different screen dimensions.
```Prompt Engineering
Our app needs to be **fully responsive** across mobile, tablet, and desktop.
- Follow a **mobile-first** strategy: prioritize the layout for small screens, then adjust for larger screens.
- Use modern UI/UX best practices for responsive design. (For Tailwind CSS, use the standard breakpoints `sm, md, lg, xl` – no custom breakpoints unless necessary.)
- Ensure every page (especially the dashboard and project detail pages) reflows properly on a small screen: elements should stack or resize as needed, text should remain readable, and no content should overflow off-screen.
- **Do not change the core design or functionality**, just make sure it flexibly adapts to different screen sizes.
After making changes, please double-check the layout at iPhone 12 dimensions and a typical desktop width.
```
--------------------------------
### Example Prompt - Using the Knowledge Base
Source: https://github.com/lovablelabs/docs/blob/main/prompting/prompting-library.mdx
Demonstrates how to prompt the AI to review the Knowledge Base and confirm its understanding of the project requirements. This includes a sample user prompt and a likely AI response summarizing the project based on the provided context.
```English
User: Before you write any code, please review the Knowledge Base and share your understanding of my project.\nAI (likely response): \u201 Sure. Based on the Knowledge Base: You\u2019re building a task management app for teams. The app flow is Users sign up -> see a dashboard -> create projects and tasks. The tech stack is Next.js for frontend, Supabase for backend (authentication and database). Core features include project creation, task assignments, and a reporting dashboard. In-scope features: task CRUD, user roles, email notifications; Out-of-scope: real-time collaboration. The design should follow a clean corporate style with Tailwind CSS, and it needs to be responsive. Backend uses Supabase with row-level security for multi-tenant data separation...\u201 (and so on).
```
--------------------------------
### E-commerce Store Starter
Source: https://github.com/lovablelabs/docs/blob/main/prompting/prompting-library.mdx
Creates a starter e-commerce store with product listing, search, filtering, cart, and checkout. Includes user accounts, order history, and product management with a focus on a conversion-oriented UI.
```plaintext
Create a starter e-commerce store with product listing, search, filtering, cart functionality, and checkout process. Include user accounts, order history, and basic product management. Focus on a clean, conversion-oriented UI.
```
--------------------------------
### Concise Prompting Example
Source: https://github.com/lovablelabs/docs/blob/main/prompting/prompting-one.mdx
Demonstrates the difference between a vague and a concise prompt for better AI understanding. Conciseness helps the model focus on the core request.
```text
BAD: “Could you maybe write something about a science topic?”
GOOD: “**Write a 200-word summary of the effects of climate change on coastal cities**.”
```
--------------------------------
### Brainstorm Implementations in Chat Mode
Source: https://github.com/lovablelabs/docs/blob/main/user-guides/best-practice.mdx
An example of using Chat Mode to brainstorm and get suggestions for implementing a feature without immediately modifying code.
```Prompt
Suggest 3 ways to implement X
```
--------------------------------
### In-Prompt References Example
Source: https://github.com/lovablelabs/docs/blob/main/prompting/prompting-one.mdx
Include relevant documentation snippets or data, such as API response formats, directly within the prompt to ground the AI's understanding.
```English
Using the API response format given below, parse the user object…
[then include a small JSON example].
```
--------------------------------
### Building a Luma Copycat with Supabase
Source: https://github.com/lovablelabs/docs/blob/main/use-case/video-tutorials.mdx
Guide to building a Luma-style event platform using Lovable and Supabase. Covers Supabase integration, authentication, user management, database configuration, real-time comments, performance testing, and optimization.
```Supabase
How to integrate Supabase with Lovable
Setting up authentication & user management
Configuring databases & real-time comments
Testing performance & handling multiple users
Live debugging & performance optimization
```
--------------------------------
### Build a Student Discovery Platform
Source: https://github.com/lovablelabs/docs/blob/main/use-case/video-tutorials.mdx
Learn to build a student discovery platform. This tutorial covers creating a system for students to discover resources or opportunities.
```youtube
https://www.youtube.com/embed/BOpX2VYNofA?si=AJFhbN-G11Uo_1IS
```
--------------------------------
### Collaboration, Publishing, and Custom Domains
Source: https://github.com/lovablelabs/docs/blob/main/introduction/faq.mdx
Details on collaborating on projects, publishing projects, and adding custom domains. Links to specific guides are provided for each feature.
```English
Collaborate on projects within Lovable.
Publish projects by following the guide at /features/publish.
Add a custom domain by following the guide at /features/custom-domain.
```
--------------------------------
### Lovable Frontend API Reference
Source: https://github.com/lovablelabs/docs/blob/main/integrations/frontend-api.mdx
Details the Lovable Frontend API for creating applications via URL parameters. Includes base URL, required parameters (prompt, autosubmit), optional parameters (images), and usage examples.
```APIDOC
Base URL:
https://lovable.dev/
Parameters:
Required:
- prompt (string): Description of the application you want to build
- autosubmit (boolean): Must be set to `true` to automatically process the request
Optional:
- images (string): URL-encoded image URLs to include as references (can be specified multiple times)
Example Usage:
Basic App Generation:
https://lovable.dev/?prompt=todoapp+minimal+styling&autosubmit=true
With Reference Images:
https://lovable.dev/?prompt=todoapp+use+picture+for+style+reference&autosubmit=true&images=https://images.pexels.com/photos/1054655/pexels-photo-1054655.jpeg
Multiple Images:
https://lovable.dev/?prompt=todoapp&autosubmit=true&images=URL1&images=URL2
Limitations:
URL Length Constraints:
- Maximum prompt length: Approximately 2,000 characters
- Browsers may handle URL lengths differently
Image Requirements:
- Images must be publicly accessible URLs
- URLs should be properly encoded
- Supported formats: JPEG, PNG, WebP, etc.
Authentication:
- If user is logged in: Project creates immediately
- If user is not logged in: Redirected to signup, then autosubmit triggers after authentication.
Best Practices:
1. Keep prompts concise
2. Use descriptive language
3. Include reference images
4. Test URL encoding
Error Handling:
- Browser "URL too long" errors
- Incomplete parameter parsing
- Failed autosubmission
```
--------------------------------
### SaaS Application Starter
Source: https://github.com/lovablelabs/docs/blob/main/prompting/prompting-library.mdx
Builds a SaaS application starter with user authentication, subscription management, settings, and a dashboard. Includes role-based access control and account management for future expansion.
```plaintext
Build a SaaS application starter with user authentication, subscription management, a settings page, and a basic dashboard. Include role-based access control, account management, and a well-structured architecture for future expansion.
```