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

# AI image generation

> Generate photos and illustrations for an app's UI and drop them into JSX as editable images.

Describe an image while building and the agent writes the returned CDN URL straight into an `<img>` tag. These are **scenes and backgrounds** (heroes, cards, tiles), not runtime user-triggered generation.

## Placing a generated image

Write each URL into its own `<img>` as a string literal so the visual editor's image picker can find (and let the user replace) it:

```tsx theme={null}
<img src="https://images.zite.com/abc123.jpg" className="w-full rounded-lg object-cover" />
```

Don't hoist URLs into `const`s or a `.map()` data array — `<img src={heroUrl} />` is invisible to the picker. For a grid, write each tile as its own literal `<img>`.

## Models & prompting

* **`fast`** (default, \~5s) — everywhere. Keep prompts plain; subjective adjectives don't help and rendered text on signs/menus is unreliable.
* **`quality`** (\~45s) — only the page's single large hero, when render quality materially matters. It rewards richer, art-direction language ("cinematic", "shallow depth of field").
* Fire a page's image calls in one parallel step — eight fast images is \~5s wall-clock.
* Each prompt is self-contained: brief it like a photographer — **subject + scene + mood + medium + lighting**. Headlines and chrome go in JSX, never the prompt. Repeat lighting/medium adjectives across a multi-image page for coherence.
* **Aspect ratio** — `16:9` / `3:2` heroes and banners, `4:3` / `1:1` cards and portraits, `9:16` / `3:4` phone mockups.

## Hero with overlaid text

A dark bottom gradient with white text works for almost any hero:

```tsx theme={null}
<section className="relative w-full h-[60vh] min-h-[480px]">
  <img src="https://images.zite.com/abc123.jpg" className="absolute inset-0 w-full h-full object-cover" />
  <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/40 to-transparent" />
  <div className="relative h-full flex flex-col justify-end px-8 md:px-12 py-12 max-w-7xl mx-auto">
    <h1 className="text-4xl md:text-6xl font-serif text-white">Headline</h1>
    <p className="mt-4 text-lg text-white/90 max-w-xl">Subhead.</p>
    <div className="mt-8 flex gap-4"><Button>Primary CTA</Button><Button variant="outline">Secondary</Button></div>
  </div>
</section>
```

For the above-the-fold hero, inspect the image first: put the headline on the *calm* side, fade the gradient over the busy edge (`bg-gradient-to-r` / `-to-l`), and switch to dark text on pale shots. The default JSX above is the safe fallback.

## Gotchas

* **Every generated image must be a literal `<img>`** to stay editable in the visual editor.
* **Reserve `quality` for the primary hero** — \~9× slower and several times more expensive.
* **Edit vs regenerate:** edit to change one thing ("make it sunset") keeping the composition (aspect ratio is preserved); regenerate when subject/scene changes fundamentally; adjust JSX when only *layout* is off.
* On a generation failure, drop a labeled placeholder `<div>` matching the aspect ratio, not a broken `<img>`.
* For runtime user uploads instead, see [File uploads](/framework/utilities#file-uploads).