import { Image } from "@/components/tool-ui/image"; When a tool returns an image URL, a bare `` tag has no context. No title, no attribution, no way for the assistant to reference it later. Image renders pictures inline in the conversation with title, description, source attribution, and configurable aspect ratios. The user sees the image in context instead of opening a raw link in a new tab. **Role:** Information. For displaying data without user input. See [Design Guidelines](/docs/design-guidelines) for how component roles work. ## Getting Started Run this once from your project root. Render `Image` in your UI with tool-compatible props.

```tsx import { Image } from "@/components/tool-ui/image"; export function Example() { return ( Vintage mainframe with blinking lights

); } ```

Registration tells assistant-ui which component to render when a tool returns image data. Without it, tool results appear as raw JSON. ```tsx import { type Toolkit } from "@assistant-ui/react"; import { Image } from "@/components/tool-ui/image"; import { safeParseSerializableImage } from "@/components/tool-ui/image/schema"; export const toolkit: Toolkit = { showImage: { type: "backend", render: ({ result }) => { const parsed = safeParseSerializableImage(result); if (!parsed) { return null; } return ; }, }, }; ``` ## Key Features Title and source appear on hover, stay hidden otherwise Links back to the original source with favicon and domain Constrain to 1:1, 4:3, 16:9, 9:16, or let the image decide with auto ## Props void", }, }} /> Use [`ToolUI.LocalActions`](/docs/actions) to compose external actions next to `Image`. ## Related - [Image Gallery](/docs/image-gallery): for displaying multiple images in a masonry grid with a lightbox - [Video](/docs/video): the same inline media pattern for video content - [Link Preview](/docs/link-preview): for when the image is part of a richer link card with Open Graph metadata

Tool UI