Image

Overview

Image renders a model-generated image from the AI SDK Experimental_GeneratedImage (base64 + media type) as a data URI, rounded on the kit's card radius so it sits in a conversation like any other surface.

DesktopTabletMobile

Reset previewLight

$ npx morpha-ui add imageCopy command

Usage with the AI SDK

Map file parts whose media type is an image:

{message.parts.map((part, i) =>
  part.type === "file" && part.mediaType?.startsWith("image/") ? (
    <Image key={i} base64={part.data} mediaType={part.mediaType} alt="" />
  ) : null,
)}

Installation

npx morpha-ui add image

API Reference