Image generation tool

The renderer for image generation tool calls. The prompt sits in the header, the frames reveal while the tool runs, and refusals read calmly.

Markdown

On this page

The model writes the prompt, two variations render inside the call, then it settles.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/tool-image-gen.json

Usage

tsx

import { renderToolPart } from "@/components/ui/chatcn/tool-fallback"
import { toolImageGenRenderers } from "@/components/ui/chatcn/tool-image-gen"
import { toolWebSearchRenderers } from "@/components/ui/chatcn/tool-web-search"

const renderers = { ...toolWebSearchRenderers, ...toolImageGenRenderers }

{message.parts.filter(isToolPart).map((part) => renderToolPart(part, renderers))}

It handles generate_image, image_generation, create_image, text_to_image and dall_e. Inputs are read from prompt, n, aspect_ratio or a size like 1024x1536. Outputs can be { images }, OpenAI's { data: [{ url | b64_json }] }, an array or a single { url }; base64 becomes a data URL and revised_prompt shows under the images. Errors that mention moderation or the content policy show as a refusal, not a failure.

Use ToolImageGen directly when you hold the props yourself, for example to add Upscale and Vary handlers.

Examples

Done, blocked and failed

A collapsed finished call, a policy refusal shown calmly, and a provider error with retry.

Props

Everything ToolCall takes for the lifecycle (state, errorText, onRetry, durationMs, open state), plus:

Prop	Type	Notes
`prompt`	`string`	Header detail and the images' alt text
`revisedPrompt`	`string`	Shown when it differs from the prompt
`images`	`GeneratedImage[]`
`count`	`number`	Variations requested
`aspectRatio`	`"W:H" \| number`
`progress`	`number`	When the provider streams it
`blocked`	`boolean`	Force the refusal copy
`onUpscale`, `onVary`, `onUseAsReference`	`(image, index) => void`
`defaultOpen`	`boolean`	Default on: the image is the point of the call

Keyboard

Key	Action
`Enter`, `Space` on the header	Open or close the call
Inside	Same as image generation

Accessibility

The header is the ToolCall disclosure button with the running time in a polite live region.
Images inside follow image generation: a single image opens the viewer, variations form a radio group.

Motion

The reveal and settle come from image generation. The header spinner swaps to the image icon with the usual 150 ms crossfade.