React AI Image

When your AI generates images—DALL-E, Stable Diffusion, Midjourney API, whatever—you get back base64 data. This component takes that data and renders it properly. It's designed to work directly with Vercel AI SDK's Experimental_GeneratedImage type, so you can just spread the props and it handles the data URL construction, media type, all of it. Nothing fancy, just a clean way to display generated images in your chat without messing around with blob URLs or manual base64 encoding. Responsive by default, rounded corners, ready to drop into any message.

Image preview

Installation

npx shadcn@latest add https://www.shadcn.io/registry/image.json

npx shadcn@latest add https://www.shadcn.io/registry/image.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/image.json

bunx shadcn@latest add https://www.shadcn.io/registry/image.json

Related Components

FAQ