Generated Image

Usage

GeneratedImage draws an AI-generated picture from a URL or from base64 data. It composes Image inside a frame that shrinks to the picture, caps at its container, and rounds the corners. It is named GeneratedImage, as in ui-ai-elements, because Image is the design system's own component for trusted static pictures.

When to use

A picture an assistant produced, as the content of a Message or an Artifact.
A file part of an AI SDK message: base64 and mediaType map to its fields.

When not to use

A trusted static asset, a logo, or a themed pair: use Image.
A picture the user attached: use Attachment, which shows a thumbnail with the file name.
A picture that fills a fixed frame or a ratio: put Image in Box or Grid, with aspectRatio.

Source

A non-empty url wins. An empty url falls through to base64.
With neither, the component renders nothing, so a streaming placeholder never asks the browser to load the current page as an image.
mediaType defaults to image/png, and is also the fallback for an empty one. It is trimmed, lower-cased and cut at the first ; before it is put in the data URL (GI-7), so a file part's Image/PNG; charset=utf-8 works as is. Image rejects any other data: URL in development, so pass an image/* type.
Remote http(s) URLs are allowed (Image's allowRemoteSource), because a generated picture is usually hosted elsewhere. blob: URLs are rejected by Image in development.

Layout

The frame is fit-content wide, capped at its container, with a medium radius, a subtle 1px edge, and overflow: hidden. A small picture keeps its natural size; a wide one shrinks and keeps its ratio. The picture is drawn with object-fit: contain.

Name

A meaningful picture needs alt, typed LocalizedMessage. A decorative one passes decorative instead and gets an empty alt and aria-hidden. The type allows exactly one of the two.

Form / Accessibility

Generated Image / API and Development

On this page

Generated Image

Usage

When to use

A picture an assistant produced, as the content of a Message or an Artifact.
A file part of an AI SDK message: base64 and mediaType map to its fields.

When not to use

A trusted static asset, a logo, or a themed pair: use Image.
A picture the user attached: use Attachment, which shows a thumbnail with the file name.
A picture that fills a fixed frame or a ratio: put Image in Box or Grid, with aspectRatio.

Source

A non-empty url wins. An empty url falls through to base64.
With neither, the component renders nothing, so a streaming placeholder never asks the browser to load the current page as an image.
mediaType defaults to image/png, and is also the fallback for an empty one. It is trimmed, lower-cased and cut at the first ; before it is put in the data URL (GI-7), so a file part's Image/PNG; charset=utf-8 works as is. Image rejects any other data: URL in development, so pass an image/* type.
Remote http(s) URLs are allowed (Image's allowRemoteSource), because a generated picture is usually hosted elsewhere. blob: URLs are rejected by Image in development.

Layout

Name

A meaningful picture needs alt, typed LocalizedMessage. A decorative one passes decorative instead and gets an empty alt and aria-hidden. The type allows exactly one of the two.

Form / Accessibility

Generated Image / API and Development

On this page