e30e75b5d4
Changesets / Create Version PR (push) Waiting to run
Code Quality / Oxlint + Oxfmt (push) Waiting to run
Code Quality / Template Sync (push) Waiting to run
Code Quality / Build Changed Packages (push) Waiting to run
Code Quality / Test Changed Packages (push) Waiting to run
Deploy Expo Example / Deploy Production (push) Waiting to run
Deploy Ink Example / Deploy Production (push) Waiting to run
Python Tests / pytest (assistant-stream, 3.10) (push) Waiting to run
Python Tests / pytest (assistant-stream, 3.12) (push) Waiting to run
Python Tests / pytest (assistant-ui-sync-server-api, 3.10) (push) Waiting to run
Python Tests / pytest (assistant-ui-sync-server-api, 3.12) (push) Waiting to run
Deploy Shadcn Registry / Deploy Production (push) Waiting to run
Template Metrics / LOC + Bundle Size (push) Waiting to run
with-image-generation
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.tsexposes a server endpoint that calls AI SDK'sgenerateImagewithopenai.image("gpt-image-1")and returns anImageMessagePart-shaped payload. WithoutOPENAI_API_KEYit returns a mock image so the example still runs.app/page.tsxPOSTs the prompt to that endpoint, stores the result as anImageMessagePart, and renders it with the@assistant-ui/uiImagecomponent.Image.Actionsprovides download and copy buttons plus a regenerate button wired through itsonRegeneratecallback.