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

# Cloud API Integration

> Integrate your Starter Kit application with the Dev Kit for AI Cloud API.

Your Starter Kit application connects to the hosted Cloud API at **[https://api.vibecoding.ad](https://api.vibecoding.ad)** for authentication, project data, and AI features. No backend development required.

## How it works

The Cloud API is fully managed and handles:

* **Authentication**: User registration, login, JWT token management
* **Project data**: Projects, API keys, user memberships
* **AI features**: Image generation, content processing
* **File storage**: Image uploads and management

## Configuration

Your application connects via environment variables in `.env.local`:

```bash .env.local theme={null}
DEVKIT4AI_MODE=project
NEXT_PUBLIC_API_URL=https://api.vibecoding.ad
DEVKIT4AI_DEVELOPER_KEY=dk_your_developer_key
DEVKIT4AI_PROJECT_ID=your-project-uuid
DEVKIT4AI_PROJECT_KEY=ak_your_project_api_key
```

<Tip>
  Get your credentials from [Cloud Admin](https://devkit4ai.com) after creating a project.
</Tip>

## Making API calls

### From Server Components

Use the deployment config helper:

```tsx app/dashboard/page.tsx theme={null}
import { hydrateDeploymentMode } from '@/lib/deployment-mode'
import { cookies } from 'next/headers'

export default async function DashboardPage() {
  const config = await hydrateDeploymentMode()
  const token = cookies().get('devkit4ai-token')?.value
  
  const response = await fetch(`${config.backendApiUrl}/api/v1/user/data`, {
    headers: {
      'Authorization': `Bearer ${token}`,
      ...config.headers // Includes X-Developer-Key, X-Project-ID, etc.
    }
  })
  
  const data = await response.json()
  // Use data in your component
}
```

### From Server Actions

Create reusable server actions:

```tsx app/actions.ts theme={null}
'use server'

import { hydrateDeploymentMode } from '@/lib/deployment-mode'
import { cookies } from 'next/headers'

export async function fetchUserProjects() {
  const config = await hydrateDeploymentMode()
  const token = cookies().get('devkit4ai-token')?.value
  
  const response = await fetch(`${config.backendApiUrl}/api/v1/projects`, {
    headers: {
      'Authorization': `Bearer ${token}`,
      ...config.headers
    }
  })
  
  if (!response.ok) {
    return { error: 'Failed to fetch projects' }
  }
  
  return response.json()
}
```

### From Client Components

Use hooks to access configuration:

```tsx components/data-fetcher.tsx theme={null}
'use client'

import { useDeploymentMode } from '@/lib/auth-context'
import { useEffect, useState } from 'react'

export function DataFetcher() {
  const config = useDeploymentMode()
  const [data, setData] = useState(null)
  
  useEffect(() => {
    fetch(`${config.backendApiUrl}/api/v1/public/stats`, {
      headers: config.headers
    })
      .then(res => res.json())
      .then(setData)
  }, [config])
  
  return <div>{/* Render data */}</div>
}
```

## Available endpoints

Common Cloud API endpoints you'll use:

**Authentication:**

* `POST /api/v1/auth/register` - Register end users
* `POST /api/v1/auth/login` - User login
* `GET /api/v1/auth/me` - Get current user

**Projects:**

* `GET /api/v1/projects` - List projects (developer only)
* `GET /api/v1/projects/{id}` - Get project details

**AI Features:**

* `POST /api/v1/generation/generate-v2` - Generate AI images
* `GET /api/v1/generation/list` - List user generations

<Info>
  See the [Cloud API Reference](/cloud-api/introduction) for complete endpoint documentation.
</Info>

## Error handling

Always handle API errors gracefully:

```tsx theme={null}
try {
  const response = await fetch(apiUrl, options)
  
  if (!response.ok) {
    const error = await response.json()
    console.error('API Error:', error)
    return { error: error.detail || 'Request failed' }
  }
  
  return await response.json()
} catch (error) {
  console.error('Network error:', error)
  return { error: 'Unable to connect to server' }
}
```

## Rate limits

The Cloud API enforces rate limits per project:

* **Authentication**: 10 requests per minute
* **Data endpoints**: 100 requests per minute
* **AI generation**: 10 requests per minute

<Warning>
  Implement retry logic with exponential backoff for production applications.
</Warning>

## Next steps

<CardGroup cols={2}>
  <Card title="API Reference" icon="book" href="/cloud-api/introduction">
    Complete endpoint documentation
  </Card>

  <Card title="Authentication" icon="key" href="/starter-kit/auth/registration-login">
    Implement user authentication
  </Card>
</CardGroup>