Files
wehub-resource-sync 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
chore: import upstream snapshot with attribution
2026-07-13 13:40:13 +08:00
..

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.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.