Image artifact

kai-image-artifact

Bare base64 cannot say what it is, so the media type is required.

• Shadow DOM
• Base64 or Uint8Array
• Skeleton while it resolves
• Media type required

Preview

When to use

When the image arrives as data: a generated chart, a screenshot a tool returned, a frame from an image API. If you already have a URL, Image is the shorter road.

Usage

<kai-image-artifact media-type="image/png" alt="A generated chart"></kai-image-artifact>

<script type="module">
  import '@kitn.ai/ui/web-components';

  const el = document.querySelector('kai-image-artifact');

  // a base64 payload (a string attribute or property):
  el.data = '<...base64 encoded image data...>';

  // or raw bytes, as a property:
  // el.data = new Uint8Array([...]);
</script>

• data is the payload: a string (BARE base64, the shape the providers hand back) or a Uint8Array (set as a property). It is never a URL: for a data: URI or an https address, use Image’s src.
• media-type is required: a base64 payload does not describe itself, so a guessed image/png labels a JPEG wrong. Everything downstream that trusts the label (your API, a file written to disk, the wire) is told the wrong type.
• alt describes the image. Pass a real sentence; it is what a screen reader announces in place of the picture.

Missing media type

With data set and no media-type, the component reports once in the console and renders the placeholder rather than an image. That is deliberate: a picture labelled wrong is worse than a visible gap.

The AI SDK shape

The SDK hands generated images back as one object that carries both representations (GeneratedFile):

const { image } = await generateImage({ model, prompt });
// image: { base64, uint8Array, mediaType } — pick the one you have

el.data = image.base64;      // or image.uint8Array
el.mediaType = image.mediaType;

One line each, and deliberately not the SDK’s object: data plus mediaType describes the thing, so a change in how the SDK packages it never reaches your markup.

Examples

A generated chart

Code

A second artifact

Swap data and media-type per artifact; nothing else changes.

Code

With descriptive alt text

Every artifact needs its own sentence, not a shared “generated image”.

Code

Props

Property	Type	Default	Notes
theme	"light" | "dark" | "auto"	'auto'	Color mode (`auto` follows prefers-color-scheme).
data	string | Uint8Array<ArrayBufferLike>	—	The image PAYLOAD: BARE base64 (never a URI) or raw bytes. Attribute `data` for base64; JS property for `Uint8Array`.
mediaType	string	—	The payload's MIME type, e.g. `image/png`. Attribute `media-type`. REQUIRED.
alt	string	''	Alt text. Attribute `alt`. Always give meaningful text: an empty alt marks the image as decorative.
class	string	—	Extra classes for the `<img>` (and for the skeleton while nothing resolves).

Composed from

This element wraps these SolidJS components — reach for them directly when you need finer control than the props expose.

ImageArtifact

---

Need a hand? Report a bug Ask for help