║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

import ComponentCodePreview from "@/components/app/component-code-preview" import ImageBasic from "./image-basic"

export const metadata = { title: "Image", description: "Display AI-generated or user-provided images with base64 or Uint8Array data, with full accessibility and styling support. Compatible with AI SDK v5 architecture.", }

Image

The Image component displays images from base64 or Uint8Array data, supporting all standard HTML image attributes. It is ideal for showing AI-generated images or user uploads in chat and AI apps. Compatible with AI SDK v5 architecture

Examples

Basic Usage

<ComponentCodePreview component={<ImageBasic />} filePath="app/docs/image/image-basic.tsx" classNameComponentContainer="p-8" />

Installation

<Tabs defaultValue="cli"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli"> <CodeBlock code={`npx shadcn add \"https://prompt-kit.com/c/image.json\"`} language="bash" /> </TabsContent> <TabsContent value="manual"> <Steps> <Step>Copy and paste the following code into your project.</Step> <CodeBlock filePath="components/prompt-kit/image.tsx" language="tsx" /> <Step>Update the import paths to match your project setup.</Step> </Steps> </TabsContent> </Tabs>

Component API

Image

| Prop | Type | Default | Description | | :---------- | :----------- | :----------- | :----------------------------------------------- | | base64 | string | | Base64-encoded image data | | uint8Array | Uint8Array | | Raw image data as Uint8Array | | mediaType | string | 'image/png' | MIME type of the image (e.g., 'image/jpeg') | | alt | string | (required) | Alternative text for accessibility | | className | string | | Additional CSS classes | | ...props | img props | | All standard HTML <img> attributes |

Features

• Accepts base64 or Uint8Array image data
• Supports all standard HTML image attributes
• Responsive by default with max-w-full h-auto
• Customizable with Tailwind classes
• Fully accessible (alt required)

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║