Minimal Next.js example that generates an image through a server route and renders it with the @assistant-ui/ui Image component (loading, content-filter, zoom, and download / copy / regenerate actions). It runs without credentials by falling back to a mock image when OPENAI_API_KEY is unset.

Run locally

export OPENAI_API_KEY=sk-...
pnpm --filter with-image-generation dev

Then open http://localhost:3000.

How it works

app/api/image/route.ts exposes a server endpoint that calls AI SDK's generateImage with openai.image("gpt-image-1") and returns an ImageMessagePart-shaped payload. Without OPENAI_API_KEY it returns a mock image so the example still runs.
app/page.tsx POSTs the prompt to that endpoint, stores the result as an ImageMessagePart, and renders it with the @assistant-ui/ui Image component.
Image.Actions provides download and copy buttons plus a regenerate button wired through its onRegenerate callback.