Image

PreviousNext

Display AI-generated images from base64 data.

Docs

Generated image placeholder:

AI Generated Placeholder
import { Image } from "@/components/ai-elements/image"

export function ImageDemo() {
  // Example base64 image (1x1 transparent PNG)
  const base64Data =
    "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=="

  return (
    <div className="w-full max-w-md space-y-4">
      <div className="flex flex-col gap-2">
        <p className="text-muted-foreground text-sm">
          Generated image placeholder:
        </p>
        <Image
          alt="AI Generated Placeholder"
          base64={base64Data}
          mediaType="image/png"
          className="bg-muted h-40 w-40"
        />
      </div>
    </div>
  )
}

Installation

pnpm dlx shadcn@latest add image

Usage

import { Image } from "@/components/ai-elements/image"
<Image
  base64={imageData}
  mediaType="image/png"
  alt="AI Generated Image"
/>

Examples

Default

Generated image placeholder:

AI Generated Placeholder
import { Image } from "@/components/ai-elements/image"

export function ImageDemo() {
  // Example base64 image (1x1 transparent PNG)
  const base64Data =
    "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=="

  return (
    <div className="w-full max-w-md space-y-4">
      <div className="flex flex-col gap-2">
        <p className="text-muted-foreground text-sm">
          Generated image placeholder:
        </p>
        <Image
          alt="AI Generated Placeholder"
          base64={base64Data}
          mediaType="image/png"
          className="bg-muted h-40 w-40"
        />
      </div>
    </div>
  )
}

// From AI SDK
const { image } = await generateImage({
  model: openai.image("dall-e-3"),
  prompt: "A serene mountain landscape",
})
 
// Display the image
<Image
  base64={image.base64}
  mediaType={image.mediaType}
  alt="Generated mountain landscape"
/>

With Custom Styling

<Image
  base64={imageData}
  mediaType="image/png"
  alt="AI Generated Image"
  className="w-full rounded-xl shadow-lg"
/>

API Reference

Image

Display AI-generated images.

PropTypeDefaultDescription
base64string-Base64 encoded image data
mediaTypestring-Image MIME type (e.g., "image/png")
altstring-Alt text for accessibility
classNamestring-Custom CSS classes

Extends all props from the HTML img element.