npx tool-agent "integrate the image component to display images with metadata and attribution"npx shadcn@latest add @tool-ui/imageWhen 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.
Run this once from your project root.
npx tool-agent "integrate the image component to display images with metadata and attribution"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 { 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 <Image {...parsed} />; }, },};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
Prop
Type
Use ToolUI.LocalActions to compose external actions next to Image.