Image
Display images with metadata and attribution.
<Image id="image-preview-source" assetId="image-source" src="https://images.unsplash.com/photo-1504548840739-580b10ae7715?w=1200&auto=format&fit=crop" alt="Vintage mainframe with blinking lights" title="From mainframes to microchips" description="A snapshot of when rooms were computers — not just what ran inside them." domain="unsplash.com" ratio="4:3" fileSizeBytes={2457600} createdAt="2025-02-10T15:30:00.000Z" source={{ "label": "Computing archives", "iconUrl": "https://api.dicebear.com/7.x/shapes/svg?seed=archives", "url": "https://assistant-ui.com/tools/alignment" }}/>When a tool returns an image URL, a bare <img> 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 for how component roles work.
Getting Started
Run this once from your project root.
npx shadcn@latest add @tool-ui/imageRender Image in your UI with tool-compatible props.
import { Image } from "@/components/tool-ui/image";export function Example() { return ( <Image id="image-example" assetId="vintage-mainframe" src="https://images.unsplash.com/photo-1504548840739-580b10ae7715" alt="Vintage mainframe with blinking lights" title="From mainframes to microchips" description="A snapshot of when rooms were computers." ratio="4:3" domain="unsplash.com" /> );}Registration tells assistant-ui which component to render when a tool returns image data. Without it, tool results appear as raw JSON.
import { type Toolkit } from "@assistant-ui/react";import { Image } from "@/components/tool-ui/image";import { createResultToolRenderer } from "@/components/tool-ui/shared";export const toolkit: Toolkit = { showImage: { type: "backend", render: createResultToolRenderer({ render: (parsedResult) => <Image {...parsedResult} />, }), },};Key Features
Hover overlay
Title and source appear on hover, stay hidden otherwise
Source attribution
Links back to the original source with favicon and domain
Aspect ratios
Constrain to 1:1, 4:3, 16:9, 9:16, or let the image decide with auto
Props
Prop
Type
Use ToolUI.LocalActions to compose external actions next to Image.
Related
- Image Gallery: for displaying multiple images in a masonry grid with a lightbox
- Video: the same inline media pattern for video content
- Link Preview: for when the image is part of a richer link card with Open Graph metadata