> ## 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.

# Bolt Integration

> Build full-stack apps with Bolt and Backdrift.

[Bolt](https://bolt.new) by StackBlitz is an AI-powered development environment that can build and run code directly in the browser. Combined with Backdrift, you can create complete applications.

## The Workflow

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

1. Build your backend with Backdrift
2. Export the Design Doc
3. Paste into Bolt with your requirements
4. Get a running application in the browser

## Step-by-Step

### 1. Build Your Backend

Create and deploy your backend in Backdrift.

### 2. Get the Design Doc

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

* Click **Design Doc**
* Copy to clipboard

### 3. Open Bolt

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

### 4. Paste and Prompt

```
I have a backend API deployed. Here's the documentation:

[DESIGN DOC CONTENT]

---

Build a React app that:
- Shows a login page
- After login, displays a dashboard with a list of tasks
- Allows creating, editing, and deleting tasks
- Uses Tailwind CSS for styling
```

### 5. Watch It Build

Bolt will:

* Create React components
* Set up API client with your URL
* Configure authentication
* Run the app in the browser

### 6. Iterate

```
"Add a sidebar with project navigation"
"Add drag-and-drop to reorder tasks"
"Add dark mode toggle"
```

## Bolt Advantages

<CardGroup cols={2}>
  <Card title="Instant Preview" icon="eye">
    See your app running immediately—no deployment needed.
  </Card>

  <Card title="Full IDE" icon="code">
    Edit code directly in the browser with full IDE features.
  </Card>

  <Card title="Terminal Access" icon="terminal">
    Run npm commands, install packages, run tests.
  </Card>

  <Card title="GitHub Sync" icon="github">
    Push to GitHub when ready for production.
  </Card>
</CardGroup>

## Example Prompt

```
[DESIGN DOC]

---

Build a project management app with:

1. Landing page with hero section and features list
2. Login/Signup with the auth endpoints documented above
3. Dashboard showing:
   - Sidebar with project list
   - Main area with task board (Kanban style)
   - Header with user menu and notifications

4. Project settings page where admins can:
   - Rename the project
   - Invite team members
   - Delete the project

Use React, Tailwind CSS, and shadcn/ui components.
Include loading states and error handling.
```

## Working with the Generated Code

Bolt generates standard React code. You can:

### Edit Directly

Click any file in the sidebar to edit. Changes are applied instantly.

### Install Packages

```bash theme={null}
# In Bolt's terminal
npm install @tanstack/react-query
npm install date-fns
```

### Run Commands

```bash theme={null}
npm run build
npm run test
```

## Handling Authentication

Bolt can implement the full auth flow:

```
"Implement authentication:
- Login page with email and password
- Signup page with email, password, and name
- Store the JWT in localStorage
- Add an axios interceptor to attach the token
- Redirect to login if token is expired
- Show user email in the navbar with logout button"
```

## Connecting to Your API

The Design Doc includes your API URL. Bolt will use it directly:

```typescript theme={null}
// Generated by Bolt
const API_URL = 'https://abc123.execute-api.us-east-2.amazonaws.com';

export async function fetchTasks() {
  const response = await fetch(`${API_URL}/v1/tasks`, {
    headers: {
      'Authorization': `Bearer ${getToken()}`
    }
  });
  return response.json();
}
```

## Exporting Your App

When ready for production:

1. Click **Export** in Bolt
2. Choose GitHub repository
3. Push the code
4. Deploy to Vercel, Netlify, or Cloudflare Pages

## Tips for Bolt

<AccordionGroup>
  <Accordion title="Start Simple">
    Begin with core features. Add complexity later.
  </Accordion>

  <Accordion title="Use React Query">
    Ask Bolt to use React Query for data fetching—it handles caching and refetching.
  </Accordion>

  <Accordion title="Request Error Handling">
    "Add proper error handling with toast notifications for API errors."
  </Accordion>

  <Accordion title="Request Loading States">
    "Add skeleton loaders while data is fetching."
  </Accordion>
</AccordionGroup>

<Card title="v0 Integration" icon="wand-magic-sparkles" href="/integrations/v0">
  Generate UI components with v0.
</Card>