Svelte AI Elements

Image

The Image component displays AI-generated images from base64 encoded data. It's designed to work seamlessly with the AI SDK's Experimental_GeneratedImage type and provides automatic styling with proper accessibility features.

Example generated image

Installation

pnpm dlx shadcn-svelte@latest add https://svelte-ai-elements.vercel.app/r/image.json

If you prefer using jsrepo, please install via the command below:

pnpm dlx jsrepo add @ai/elements/ai-elements/image

Usage

image-usage.svelte

Usage with AI SDK

Build a simple app allowing users to generate images given a prompt using the AI SDK's image generation capabilities.

Add the following component to your frontend:

+page.svelte

Add the following route to your backend:

api/chat/+server.ts

API Reference

Props

base64 string required

The base64 encoded image data. This is the actual image content encoded as a base64 string.

mediaType string optional

The MIME type of the image (e.g., "image/png", "image/jpeg", "image/webp"). Used to construct the data URL.

uint8Array Uint8Array optional

The raw binary data as a Uint8Array. This is typically provided by the AI SDK but not directly used by the component (uses base64 instead).

alt string optional

Alternative text description for the image. Important for accessibility.

class string optional

Additional CSS classes to apply to the image element. Merged with default classes using cn() utility.

ref HTMLImageElement | null optional

A reference to the underlying img element. Can be used with bind:ref for direct DOM access.

...rest HTMLImgAttributes

All other standard HTML image attributes are supported (width, height, loading, etc.).

Features

  • Accepts Experimental_GeneratedImage objects directly from the AI SDK
  • Automatically creates proper data URLs from base64-encoded image data
  • Supports all standard HTML image attributes
  • Responsive by default with max-w-full h-auto styling
  • Customizable with additional CSS classes
  • Includes proper TypeScript types for AI SDK compatibility

Default Styling

The Image component comes with sensible default styles that can be overridden:

  • h-auto - Height adjusts automatically to maintain aspect ratio
  • max-w-full - Prevents overflow from parent container
  • overflow-hidden - Clips any content that overflows
  • rounded-md - Applies medium border radius for a polished look

Integration with AI SDK

The Image component is designed to work seamlessly with the AI SDK's experimental image generation features. Here's a complete example:

image-with-ai-sdk.svelte

Examples

Custom Styling

You can easily customize the appearance of images using Tailwind classes:

custom-styling.svelte

Responsive Gallery

Create a responsive image gallery with generated images:

responsive-gallery.svelte

Accessibility

Always provide meaningful alt text for images to ensure your application is accessible to all users:

accessibility-example.svelte

Notes

  • The component constructs a data URL using the format: data:{mediaType};base64,{base64}
  • Base64 encoded images are embedded directly in the HTML, which may increase page size for large images
  • Consider using lazy loading for multiple images: loading="lazy"
  • The component supports all standard HTML image attributes through the spread operator
  • Use proper mediaType values for best browser compatibility: "image/png", "image/jpeg", "image/webp", "image/gif", etc.