# AI image generator

> Prompt to images with style and ratio, shimmer placeholders, likes and a lightbox.

Block · Pro · https://lodeui.com/blocks/ai-image-generator

## When to use

- Image generation tools and creative assistants.

## When not to use

- Stock photo search: use a search grid.

## Installation

```bash
npx shadcn@latest add @lode/ai-image-generator
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { AiImageGenerator } from "@/components/blocks/ai-image-generator";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <AiImageGenerator />
    </main>
  );
}
```

Built from: Lightbox, Segmented control

## API reference

### AiImageGenerator

Prompt to images with style and aspect controls, suggestion chips, shimmering placeholders, a lightbox gallery, likes and download. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter | Generate |
| Shift+Enter | New line |
| Tab | Reach styles, ratios and results |

## Accessibility

- Generation progress is announced; results open in an accessible lightbox with the prompt as alt text.

## Motion

- The wand spins while generating; placeholders shimmer; results grow into the lightbox.

## Responsive behavior

- Two result columns on phones, four from 640px.

## Performance

- Sample results are drawn as SVG, so no image files load.

## Notes for AI

- Replace the timeout with your image API and pass returned URLs as src.

## Related

- [Lightbox](https://lodeui.com/components/lightbox) — Thumbnail grid that opens a full-screen viewer with swipe, arrows and captions.
- [Prompt input](https://lodeui.com/components/prompt-input) — Chat composer that grows, takes files by picker, paste or drop, and turns into Stop while generating.
- [AI playground](https://lodeui.com/blocks/ai-playground) — Compare two models on one prompt with parameters, reasoning, streaming, tokens and cost.