Image generation

npx shadcn@latest add "@assistant-ui/elements-image-generation"

npx assistant-ui@latest init

import { AssistantRuntimeProvider } from "@assistant-ui/react";
import { useChatRuntime, AssistantChatTransport } from "@assistant-ui/ai-sdk";

export default function App() {
  const runtime = useChatRuntime({
    transport: new AssistantChatTransport({ api: "/api/chat" }),
  });

  return (
    <AssistantRuntimeProvider runtime={runtime}>
      {/* your components */}
    </AssistantRuntimeProvider>
  );
}

npx shadcn@latest add "@assistant-ui/elements-image-generation"

Image generation holds the frame for an image that has not arrived yet: a pulsing dot grid over a blurred gradient while generating, settling into a sharp gradient once done. With a runtime it tracks a tool call's status; standalone you drive prompt and generating yourself.

Getting started

"use generative";

import { defineToolkit, externalTool } from "@assistant-ui/react";
import { ImageGeneration } from "@/components/assistant-ui/elements/image-generation";

export default defineToolkit({
  generate_image: {
    execute: externalTool(),
    render: ({ args, status }) => (
      <ImageGeneration
        prompt={args.prompt ?? ""}
        generating={status.type === "running"}
      />
    ),
  },
});

"use client";

import { AssistantRuntimeProvider, AuiConfig, Tools } from "@assistant-ui/react";
import { useChatRuntime } from "@assistant-ui/ai-sdk";
import { Thread } from "@/components/assistant-ui/elements/thread.aui";
import toolkit from "./toolkit";

export function App() {
  const runtime = useChatRuntime();
  const config = AuiConfig({ tools: Tools({ toolkit }) });

  return (
    <AssistantRuntimeProvider runtime={runtime} config={config}>
      <Thread />
    </AssistantRuntimeProvider>
  );
}

"use client";

import { useCallback, useEffect, useState } from "react";
import { ImageGeneration } from "@/components/assistant-ui/elements/image-generation";

export function Generation() {
  const prompt = "A calm mountain lake at dawn";
  const [generating, setGenerating] = useState(true);

  return (
    <ImageGeneration prompt={prompt} generating={generating} />
  );
}

const [imageUrl, setImageUrl] = useState<string | null>(null);

const regenerate = useCallback(async () => {
  setGenerating(true);

  try {
    const url = await generateImage(prompt);
    setImageUrl(url);
  } finally {
    setGenerating(false);
  }
}, [prompt]);

useEffect(() => {
  void regenerate();
}, [regenerate]);

return imageUrl && !generating ? (
  <figure>
    <img src={imageUrl} alt={prompt} />
    <figcaption>
      <span>{prompt}</span>
      <button type="button" onClick={() => void regenerate()}>
        Regenerate image
      </button>
    </figcaption>
  </figure>
) : (
  <ImageGeneration prompt={prompt} generating={generating} />
);

Anatomy

<div data-slot="image-generation">
  <div>
    {/* the frame: an 8x8 pulsing dot grid, over a fixed decorative gradient */}
    <span>{/* "1024 × 1024" */}</span>
  </div>
  <div>
    <p>{/* prompt, or a shimmering "Generating" label while generating */}</p>
    {onRegenerate && (
      <button aria-label="Regenerate image" disabled={generating} />
    )}
  </div>
</div>

The frame never renders an actual generated image: the gradient behind the dot grid is a fixed decorative graphic in the source, present in both states and only changing its blur and opacity as generating flips. Nothing in this element accepts an image URL. Once a tool call resolves with a real one, hand it to a renderer that does; see the Image element. The dot grid's 64 dots pulse with a staggered delay while generating is true and fade to fully transparent once it is false. The regenerate button renders only when onRegenerate is provided. While generating, it fades out, is disabled, and is hidden from assistive technology until it can run again.

Examples

Handle regeneration

Pass onRegenerate to show the button and restart your generation flow:

<ImageGeneration
  prompt={prompt}
  generating={generating}
  onRegenerate={() => void regenerate()}
/>

Restyle the frame

Both lanes take className on the root. The "1024 × 1024" label and the prompt row use mono and ShimmerLabel from surfaces.tsx.

<ImageGeneration className="w-64" /* ... */ />

API reference