Cloud API Integration - Dev Kit for AI

Your Starter Kit application connects to the hosted Cloud API at 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:

.env.local

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

Get your credentials from Cloud Admin after creating a project.

Making API calls

From Server Components

Use the deployment config helper:

app/dashboard/page.tsx

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:

app/actions.ts

'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:

components/data-fetcher.tsx

'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

See the Cloud API Reference for complete endpoint documentation.

Error handling

Always handle API errors gracefully:

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

Implement retry logic with exponential backoff for production applications.

Next steps

API Reference

Complete endpoint documentation

Authentication

Implement user authentication

​How it works

​Configuration

​Making API calls

​From Server Components

​From Server Actions

​From Client Components

​Available endpoints

​Error handling

​Rate limits

​Next steps

API Reference

Authentication

How it works

Configuration

Making API calls

From Server Components

From Server Actions

From Client Components

Available endpoints

Error handling

Rate limits

Next steps