Image

PreviousNext

AI-powered image component.

Docs
ai-elementscomponent

Preview

Loading preview…
registry/default/ai-elements/image.tsx
/** biome-ignore-all lint/nursery/useImageSize: "size will be handled by props" */

import { cn } from "@/lib/utils";
import type { Experimental_GeneratedImage } from "ai";

export type ImageProps = Experimental_GeneratedImage & {
  className?: string;
  alt?: string;
};

export const Image = ({
  base64,
  uint8Array,
  mediaType,
  ...props
}: ImageProps) => (
  <img
    {...props}
    alt={props.alt}
    className={cn(
      "h-auto max-w-full overflow-hidden rounded-md",
      props.className
    )}
    src={`data:${mediaType};base64,${base64}`}
  />
);

Installation

npx shadcn@latest add @ai-elements/image

Usage

import { Image } from "@/components/image"
<Image />