Build with Lovable, Base44 & More

Build a creative AI studio web app using the Kolbo API. The app should have a clean, modern UI with a sidebar for navigation between tools.

## API Configuration

- Base URL: `https://api.kolbo.ai/api`
- Auth: All requests need header `X-API-Key: YOUR_API_KEY`
- All generation endpoints are async: you POST to create, get back a `poll_url`, then poll until `state` is `"completed"` or `"failed"`
- NEVER hardcode or guess model names. Always fetch available models from the API first.

## Core API Helpers (use these everywhere)

```javascript
const API_KEY = "YOUR_API_KEY";
const BASE = "https://api.kolbo.ai/api";
const HEADERS = { "X-API-Key": API_KEY, "Content-Type": "application/json" };

// Step 1: On app startup, fetch available models for each type and cache them.
// The API uses SDK-friendly type names: image, image_edit, video, video_from_image, music, speech, sound, chat
let cachedModels = {};

async function fetchModels(type) {
  const res = await fetch(`${BASE}/v1/models?type=${type}`, {
    headers: { "X-API-Key": API_KEY },
  });
  const data = await res.json();
  cachedModels[type] = data.models || [];
  return cachedModels[type];
}

// Call this on app init to populate model lists for dropdowns
async function initModels() {
  await Promise.all([
    fetchModels("image"),
    fetchModels("video"),
    fetchModels("video_from_image"),
    fetchModels("music"),
    fetchModels("chat"),
  ]);
}

// Step 2: Generate and poll helper
async function generate(endpoint, body) {
  const res = await fetch(`${BASE}${endpoint}`, {
    method: "POST",
    headers: HEADERS,
    body: JSON.stringify(body),
  });
  const data = await res.json();
  if (!data.success) throw new Error(data.error);

  while (true) {
    await new Promise((r) => setTimeout(r, 2000));
    const poll = await fetch(`${BASE}${data.poll_url}`, {
      headers: { "X-API-Key": API_KEY },
    });
    const status = await poll.json();
    if (status.state === "completed") return status.result;
    if (status.state === "failed") throw new Error("Generation failed");
  }
}

// Step 3: Get credit balance
async function getCredits() {
  const res = await fetch(`${BASE}/v1/account/credits`, {
    headers: { "X-API-Key": API_KEY },
  });
  return (await res.json()).credits.total;
}
```

## Tools to Build

### 1. Image Generator
- Endpoint: `POST /v1/generate/image`
- Body: `{ "prompt": "user input", "aspect_ratio": "1:1" }`
- Optional: add `"model": "identifier"` from `cachedModels.image` — if omitted, Smart Select picks the best model
- Show a model dropdown populated from `cachedModels.image` with an "Auto (Smart Select)" option as default
- Response result has `urls` array of image URLs — display them in a grid
- NEVER hardcode aspect ratios. Build the selector from the chosen model's `supported_aspect_ratios` (or `supported_aspect_ratios_by_type` when present), defaulting to `default_aspect_ratio`. On "Auto" leave `aspect_ratio` out.

### 2. Text-to-Video Generator
- Endpoint: `POST /v1/generate/video`
- Body: `{ "prompt": "user input", "duration": 5, "aspect_ratio": "16:9" }`
- Optional: add `"model": "identifier"` from `cachedModels.video` — if omitted, Smart Select picks the best model
- Show a model dropdown populated from `cachedModels.video` with an "Auto" default
- Response result has `urls` array — render as `<video>` elements
- NEVER hardcode durations or aspect ratios. Build both selectors from the chosen model's `supported_durations` / `supported_aspect_ratios`, defaulting to `default_duration` / `default_aspect_ratio`
- Polling takes longer (30-120 seconds) — show a progress indicator

### 3. Image-to-Video Generator
- Endpoint: `POST /v1/generate/video/from-image`
- Body: `{ "prompt": "describe the motion", "image_url": "https://...", "duration": 5, "aspect_ratio": "16:9" }`
- The `image_url` is a publicly accessible URL of the source image
- Optional: add `"model": "identifier"` from `cachedModels.video_from_image` — if omitted, Smart Select picks the best model
- Show a model dropdown populated from `cachedModels.video_from_image` with an "Auto" default
- Let users upload an image or paste a URL as the source frame
- `prompt` is optional on this endpoint; `image_url` is required (a missing one returns `400 image_url is required`)
- Response result has `urls` array — render as `<video>` elements
- Same rule as above: durations and aspect ratios come from the model's `supported_durations` / `supported_aspect_ratios`

### 4. Music Generator
- Endpoint: `POST /v1/generate/music`
- Body: `{ "prompt": "user input", "duration": 30 }`
- Optional: add `"model": "identifier"` from `cachedModels.music`
- Show a model dropdown populated from `cachedModels.music` with an "Auto" default
- Response result has `urls` array of audio URLs — render as `<audio>` players, plus a `tracks` array with `title` / `duration` / `thumbnail_url` per track
- Duration bounds are per model — read `min_output_duration` / `max_output_duration` (and `default_duration`) from the model entry

### 5. AI Chat
- Endpoint: `POST /v1/chat`
- Body: `{ "message": "user input" }`
- Optional: add `"model": "identifier"` from `cachedModels.chat` — if omitted, Smart Select picks the best model
- Show a model dropdown populated from `cachedModels.chat` with an "Auto (Smart Select)" option as default
- For follow-up messages, include `"session_id"` from the first response
- Response result has `content` (the AI text reply)
- Show conversation history in a chat bubble UI

### 6. Credit Balance
- Endpoint: `GET /v1/account/credits`
- Show in the header/sidebar: `credits.total` from the response

## Model Selection UI
- Each tool should have a dropdown showing available models fetched from the API
- Default selection is "Auto (Smart Select)" which omits the `model` field
- When user picks a specific model, send its `identifier` as the `model` field
- Show each model's `name` and its `credit` field in the dropdown, e.g. `` `${m.name} — ${m.credit} credits` `` — never a price you typed yourself
- NEVER hardcode model names, identifiers or prices — always render them from `cachedModels`

## UI Requirements
- Responsive layout — works on mobile and desktop
- Each tool gets its own page/tab in the sidebar
- Show loading spinners while polling
- Display errors clearly if generation fails
- Show credit balance in the top bar
- Call `initModels()` on app startup before rendering tools

Build an AI image generator web app using the Kolbo API.

## API Details

- Base URL: `https://api.kolbo.ai/api`
- Auth header on every request: `X-API-Key: YOUR_API_KEY`
- NEVER hardcode or guess model names. Fetch them from the API.

## Complete API Helper

```javascript
const API_KEY = "YOUR_API_KEY";
const BASE = "https://api.kolbo.ai/api";
const HEADERS = { "X-API-Key": API_KEY, "Content-Type": "application/json" };

// Fetch available image models on startup — populate a dropdown from these
let imageModels = [];

async function initModels() {
  const res = await fetch(`${BASE}/v1/models?type=image`, { headers: { "X-API-Key": API_KEY } });
  const data = await res.json();
  imageModels = data.models || [];
}

async function generateImage(prompt, aspectRatio = "1:1", model = null) {
  const body = { prompt, aspect_ratio: aspectRatio };
  if (model) body.model = model; // omit for Smart Select (auto)
  const res = await fetch(`${BASE}/v1/generate/image`, {
    method: "POST",
    headers: HEADERS,
    body: JSON.stringify(body),
  });
  const data = await res.json();
  if (!data.success) throw new Error(data.error);

  while (true) {
    await new Promise((r) => setTimeout(r, 2000));
    const poll = await fetch(`${BASE}${data.poll_url}`, { headers: { "X-API-Key": API_KEY } });
    const status = await poll.json();
    if (status.state === "completed") return status.result.urls;
    if (status.state === "failed") throw new Error("Generation failed");
  }
}
```

## App Features

1. **Prompt input** — text area with a "Generate" button
2. **Model selector** — dropdown populated from `imageModels`, default "Auto (Smart Select)". Label each option with the model's own `name` and `credit` fields (`` `${m.name} — ${m.credit} credits` ``) — never a hardcoded name or price. When "Auto" is selected, don't send a `model` field.
3. **Aspect ratio selector** — buttons built from the selected model's `supported_aspect_ratios`, defaulting to its `default_aspect_ratio`. On "Auto", omit `aspect_ratio` entirely.
4. **Loading state** — show spinner and "Generating..." text while polling
5. **Image display** — show generated images in a grid, click to view full size
6. **Gallery** — save previously generated images with their prompts (local storage)
7. **Download button** — download any generated image
8. **Error handling** — show error messages if generation fails
9. **Credits display** — fetch from `GET /v1/account/credits` and show `credits.total` in the header
10. Call `initModels()` on app startup

## UI Style
- Clean, minimal design with dark mode
- Responsive — works on mobile
- Use a card-based layout for the gallery

Build an AI video generator web app using the Kolbo API. Support both text-to-video and image-to-video generation.

## API Details

- Base URL: `https://api.kolbo.ai/api`
- Auth header: `X-API-Key: YOUR_API_KEY`
- NEVER hardcode or guess model names. Fetch them from the API.

## Complete API Helper

```javascript
const API_KEY = "YOUR_API_KEY";
const BASE = "https://api.kolbo.ai/api";
const HEADERS = { "X-API-Key": API_KEY, "Content-Type": "application/json" };

// Fetch available models on startup — populate dropdowns from these
let textToVideoModels = [];
let imageToVideoModels = [];

async function initModels() {
  const [t2v, i2v] = await Promise.all([
    fetch(`${BASE}/v1/models?type=video`, { headers: { "X-API-Key": API_KEY } }).then(r => r.json()),
    fetch(`${BASE}/v1/models?type=video_from_image`, { headers: { "X-API-Key": API_KEY } }).then(r => r.json()),
  ]);
  textToVideoModels = t2v.models || [];
  imageToVideoModels = i2v.models || [];
}

// Text-to-Video
async function generateVideo(prompt, duration = 5, aspectRatio = "16:9", model = null) {
  const body = { prompt, duration, aspect_ratio: aspectRatio };
  if (model) body.model = model; // omit for Smart Select (auto)
  const res = await fetch(`${BASE}/v1/generate/video`, { method: "POST", headers: HEADERS, body: JSON.stringify(body) });
  const data = await res.json();
  if (!data.success) throw new Error(data.error);
  return pollResult(data.poll_url);
}

// Image-to-Video
async function generateVideoFromImage(prompt, imageUrl, duration = 5, aspectRatio = "16:9", model = null) {
  const body = { prompt, image_url: imageUrl, duration, aspect_ratio: aspectRatio };
  if (model) body.model = model; // omit for Smart Select (auto)
  const res = await fetch(`${BASE}/v1/generate/video/from-image`, { method: "POST", headers: HEADERS, body: JSON.stringify(body) });
  const data = await res.json();
  if (!data.success) throw new Error(data.error);
  return pollResult(data.poll_url);
}

// Shared polling helper
async function pollResult(pollUrl) {
  while (true) {
    await new Promise((r) => setTimeout(r, 3000));
    const poll = await fetch(`${BASE}${pollUrl}`, { headers: { "X-API-Key": API_KEY } });
    const status = await poll.json();
    if (status.state === "completed") return status.result;
    if (status.state === "failed") throw new Error("Generation failed");
  }
}
```

## App Features

1. **Two tabs**: "Text to Video" and "Image to Video"
2. **Text-to-Video tab**: prompt text area, plus duration and aspect-ratio selectors built from the selected model's `supported_durations` and `supported_aspect_ratios` (defaults `default_duration` / `default_aspect_ratio`). Never hardcode those lists.
3. **Image-to-Video tab**: same as above PLUS an image upload/URL input for the source frame (`image_url` is required here; `prompt` is optional)
4. **Model selector** on both tabs — dropdown populated from `textToVideoModels` / `imageToVideoModels`, default "Auto (Smart Select)". Label each option from the model's own `name` and `credit` fields — never a hardcoded name or price. When "Auto" is selected, don't send a `model` field.
5. **Progress indicator** — show elapsed time while generating (videos take 30-120 seconds)
6. **Video player** — render result as `<video>` with controls, autoplay, and loop
7. **Thumbnail preview** — show `result.thumbnail_url` while video loads
8. **Download button** — download the video file
9. **History** — show previously generated videos with thumbnails (local storage)
10. **Credits display** — fetch from `GET /v1/account/credits` and show `credits.total` in the header
11. Call `initModels()` on app startup

## UI Style
- Modern dark UI
- Big centered video player for results
- Responsive layout

Build an AI music generator web app using the Kolbo API.

## API Details

- Base URL: `https://api.kolbo.ai/api`
- Auth header: `X-API-Key: YOUR_API_KEY`
- NEVER hardcode or guess model names. Fetch them from the API.

## Complete API Helper

```javascript
const API_KEY = "YOUR_API_KEY";
const BASE = "https://api.kolbo.ai/api";
const HEADERS = { "X-API-Key": API_KEY, "Content-Type": "application/json" };

// Fetch available music models on startup — populate a dropdown from these
let musicModels = [];

async function initModels() {
  const res = await fetch(`${BASE}/v1/models?type=music`, { headers: { "X-API-Key": API_KEY } });
  const data = await res.json();
  musicModels = data.models || [];
}

async function generateMusic(prompt, duration = 30, model = null) {
  const body = { prompt, duration };
  if (model) body.model = model; // omit for server default
  const res = await fetch(`${BASE}/v1/generate/music`, {
    method: "POST",
    headers: HEADERS,
    body: JSON.stringify(body),
  });
  const data = await res.json();
  if (!data.success) throw new Error(data.error);

  while (true) {
    await new Promise((r) => setTimeout(r, 5000));
    const poll = await fetch(`${BASE}${data.poll_url}`, { headers: { "X-API-Key": API_KEY } });
    const status = await poll.json();
    if (status.state === "completed") return status.result;
    if (status.state === "failed") throw new Error("Generation failed");
  }
}
```

## App Features

1. **Prompt input** — describe the music style, mood, instruments
2. **Model selector** — dropdown populated from `musicModels`, default "Auto". Label each option from the model's own `name` and `credit` fields — never a hardcoded name or price.
3. **Duration slider** — bounds come from the selected model's `min_output_duration` / `max_output_duration`, starting at `default_duration`
4. **Audio player** — `<audio>` element with waveform visualization if possible
5. **Download button** — download the generated audio
6. **History** — list of previously generated tracks with play buttons
7. **Credits display** — fetch from `GET /v1/account/credits` and show `credits.total` in the header
8. Call `initModels()` on app startup

## UI Style
- Music app aesthetic — dark background, accent colors
- Waveform or audio visualizer animation during playback

Build an AI chatbot web app using the Kolbo API.

## API Details

- Base URL: `https://api.kolbo.ai/api`
- Auth header: `X-API-Key: YOUR_API_KEY`
- NEVER hardcode or guess model names. Fetch them from the API.

## Complete API Helper

```javascript
const API_KEY = "YOUR_API_KEY";
const BASE = "https://api.kolbo.ai/api";
const HEADERS = { "X-API-Key": API_KEY, "Content-Type": "application/json" };

// Fetch available chat models on startup — populate a dropdown from these
let chatModels = [];

async function initModels() {
  const res = await fetch(`${BASE}/v1/models?type=chat`, { headers: { "X-API-Key": API_KEY } });
  const data = await res.json();
  chatModels = data.models || [];
}

async function sendMessage(message, sessionId = null, model = null) {
  const body = { message };
  if (sessionId) body.session_id = sessionId;
  if (model) body.model = model; // omit for Smart Select (auto)

  const res = await fetch(`${BASE}/v1/chat`, { method: "POST", headers: HEADERS, body: JSON.stringify(body) });
  const data = await res.json();
  if (!data.success) throw new Error(data.error);

  while (true) {
    await new Promise((r) => setTimeout(r, 2000));
    const poll = await fetch(`${BASE}${data.poll_url}`, { headers: { "X-API-Key": API_KEY } });
    const status = await poll.json();
    if (status.state === "completed") return {
      content: status.result.content,
      session_id: data.session_id,
    };
    if (status.state === "failed") throw new Error("Chat failed");
  }
}

async function getConversations() {
  const res = await fetch(`${BASE}/v1/chat/conversations`, { headers: { "X-API-Key": API_KEY } });
  return (await res.json()).conversations;
}

async function getMessages(sessionId) {
  const res = await fetch(`${BASE}/v1/chat/conversations/${sessionId}/messages`, { headers: { "X-API-Key": API_KEY } });
  return (await res.json()).messages;
}
```

## App Features

1. **Chat interface** — message bubbles for user and AI, auto-scroll to bottom
2. **Model selector** — dropdown populated from `chatModels`, default "Auto (Smart Select)". Label each option from the model's own `name` and `credit` fields — never a hardcoded name or price. When "Auto" is selected, don't send a `model` field.
3. **Input bar** — text input at the bottom with send button, submit on Enter
4. **Conversation list** — sidebar showing past conversations, fetch from `getConversations()`
5. **New conversation** — button to start fresh (omit session_id)
6. **Loading indicator** — typing dots animation while polling
7. **Markdown rendering** — AI responses may contain markdown, render it properly
8. **System prompt** — optional settings panel to set a custom `system_prompt`. It is only applied when the request has NO `session_id` (i.e. on the first message of a new conversation) and is silently ignored afterwards, so start a new conversation to change it.
9. **Credits display** — fetch from `GET /v1/account/credits` and show `credits.total` in the header
10. Call `initModels()` on app startup

## UI Style
- ChatGPT-style layout: sidebar + main chat area
- Dark mode
- Responsive — full screen chat on mobile