> ## Documentation Index
> Fetch the complete documentation index at: https://backdrift.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Lovable Integration

> Build beautiful frontends that connect to your Backdrift backend.

[Lovable](https://lovable.dev) is an AI-powered frontend builder. Combined with Backdrift, you can create complete applications—frontend and backend—entirely with AI.

## The Workflow

```mermaid theme={null}
graph LR
    A[Backdrift] --> B[Design Doc]
    B --> C[Lovable]
    C --> D[Complete App]
```

1. Build your backend with Backdrift
2. Export the Design Doc
3. Paste into Lovable with your UI requirements
4. Get a working, connected application

## Step-by-Step

### 1. Build Your Backend

Create a project in Backdrift and deploy it:

```
"A task management app with projects, tasks, and team members.
Each organization has isolated data."
```

### 2. Get the Design Doc

From your project's **Artifacts** tab:

* Click **Design Doc**
* Copy to clipboard or download

### 3. Open Lovable

Go to [lovable.dev](https://lovable.dev) and start a new project.

### 4. Paste and Prompt

In Lovable's chat, paste:

```
[DESIGN DOC CONTENT]

---

Build a task management dashboard with:
- A sidebar showing projects
- A main area listing tasks for the selected project
- Ability to create, edit, and delete tasks
- Filter tasks by status and priority
- Assign tasks to team members

Use a modern, minimal design with a dark mode option.
```

### 5. Iterate

Lovable generates a React app. Continue prompting:

```
"Add a calendar view for tasks with due dates"
"Add drag-and-drop to change task status"
"Add user avatars next to assigned tasks"
```

## What Lovable Gets

The Design Doc tells Lovable:

| Information          | How Lovable Uses It         |
| -------------------- | --------------------------- |
| API URL              | Configures fetch calls      |
| Auth headers         | Sets up authorization       |
| TypeScript types     | Types all API responses     |
| Endpoints            | Knows what to call and when |
| Entity relationships | Understands data structure  |

## Example: E-commerce Dashboard

### Backend Prompt (Backdrift)

```
"An e-commerce platform with products, categories, orders, and customers.
Admins can manage inventory and view analytics."
```

### Frontend Prompt (Lovable)

```
[DESIGN DOC]

---

Build an admin dashboard for e-commerce:
- Sidebar with navigation: Dashboard, Products, Orders, Customers
- Dashboard page with revenue chart, order count, low stock alerts
- Products page with table, search, filters, and inline editing
- Orders page with status filters and order details modal
- Customers page with search and order history

Use shadcn/ui components. Include dark mode.
```

## Authentication

The Design Doc includes auth flow documentation. Lovable can generate:

* Login and signup pages
* Protected routes
* Token storage and refresh
* User profile display

```
"Add login and signup pages. Redirect to login if not authenticated.
Show the user's email in the header with a logout button."
```

## File Uploads

If your backend supports file storage:

```
"Add a profile picture upload to the user settings page.
Use drag-and-drop with preview before uploading."
```

Lovable will:

1. Request a signed upload URL from your API
2. Upload directly to storage
3. Save the file reference

## Tips for Better Results

<AccordionGroup>
  <Accordion title="Be Specific About Layout">
    ❌ "Add a products page"
    ✅ "Add a products page with a grid of cards showing image, name, price. Include search, category filter, and sort by price."
  </Accordion>

  <Accordion title="Reference the Design Doc">
    "Using the Task entity from the API, build a Kanban board grouped by status."
  </Accordion>

  <Accordion title="Iterate in Steps">
    Build one feature at a time. Test, then add more.
  </Accordion>

  <Accordion title="Specify Components">
    "Use a shadcn/ui DataTable for the orders list with sorting and pagination."
  </Accordion>
</AccordionGroup>

## Deployment

After building in Lovable:

1. Export the code to GitHub
2. Deploy to Vercel, Netlify, or any static host
3. Set environment variables for your API URL

Or use Lovable's built-in hosting.

<Card title="Bolt Integration" icon="bolt" href="/integrations/bolt">
  Build with Bolt instead.
</Card>