npx tool-agent "integrate the image gallery component with masonry grid and lightbox viewer"npx shadcn@latest add @tool-ui/image-galleryFive images stacked vertically push the rest of the conversation off-screen. ImageGallery arranges multiple images in a masonry grid that respects each photo's aspect ratio, with a fullscreen lightbox for inspecting detail. Captions, source attribution, and keyboard navigation come built in.
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 gallery component with masonry grid and lightbox viewer"npx shadcn@latest add @tool-ui/image-galleryRender ImageGallery in your UI with tool-compatible props.
import { ImageGallery } from "@/components/tool-ui/image-gallery";export function Example() { return ( <ImageGallery id="image-gallery-example" title="Mountain landscapes" description="Here are some images matching your search" images={[ { id: "img-1", src: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=600&fit=crop", alt: "Dramatic mountain peaks at sunrise", width: 800, height: 600, title: "Alpine Sunrise", caption: "Dolomites, Italy", }, { id: "img-2", src: "https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=800&h=1200&fit=crop", alt: "Misty mountain valley", width: 800, height: 1200, title: "Misty Valley", }, // ... more images ]} onImageClick={(id, image) => console.log("Clicked:", id, image)} /> );}Registration tells assistant-ui which component to render when a tool returns a set of images. Without it, tool results appear as raw JSON.
import { type Toolkit } from "@assistant-ui/react";import { ImageGallery } from "@/components/tool-ui/image-gallery";import { safeParseSerializableImageGallery } from "@/components/tool-ui/image-gallery/schema";export const toolkit: Toolkit = { showImageGallery: { type: "backend", render: ({ result }) => { const parsed = safeParseSerializableImageGallery(result); if (!parsed) { return null; } return <ImageGallery {...parsed} />; }, },};Tiles images by aspect ratio so tall and wide shots sit together naturally
Click any image to open it full-screen with title and caption
Animated layout shift from grid thumbnail to lightbox view
Prop
Type
Prop
Type