Image

Visão geral

Image é a superfície para imagens geradas por modelo. Aceita uma Experimental_GeneratedImage do pacote ai da Vercel (string base64 + media type) e a renderiza como um único <img> com um src data URI, uma borda rounded-md padrão e max-w-full para manter os layouts seguros.

Não há fetch, nem fluxo de signed URL, nem lógica de decode no cliente - quando o AI SDK te entrega a part, o base64 já está pronto. O único trabalho deste primitivo é renderizá-lo de forma consistente em artifacts, mensagens de chat e dashboards.

Use-o dentro de Artifact para artifacts só de imagem, dentro de MessageContent para respostas inline, ou standalone onde quer que uma imagem gerada apareça na sua UI.

Preview

PreviewCode

'use client';import { Image } from '@gremorie/rx-ai';// A small solid PNG (indigo), base64-encoded — stands in for an AI-generated// image returned by the SDK as an Experimental_GeneratedImage.const SAMPLE_IMAGE_BASE64 =  'iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKklEQVR4nGNITvtIU8QwasGoBaMWjFowasGoBaMWjFowasGoBaMWjFowasGoBaMWDBULAMgi6FsP9QbPAAAAAElFTkSuQmCC';export function ImagePreview() {  return (    <div className="flex justify-center">      <Image        alt="AI-generated swatch"        base64={SAMPLE_IMAGE_BASE64}        className="w-48"        mediaType="image/png"        uint8Array={new Uint8Array()}      />    </div>  );}

Anatomia

Image   renderiza uma part de imagem base64 — primitivo folha (sem subcomponentes)

Instalação

Traz os tipos do pacote ai como peer dependency.

Uso

import { Image } from "@gremorie/rx-ai";

export function Example({ image }) {
  return (
    <Image
      base64={image.base64}
      mediaType={image.mediaType}
      alt="Bar chart of weekly conversions"
    />
  );
}

API

<Image>

Estende Experimental_GeneratedImage do pacote ai.

Todos os demais atributos de <img> fluem através (ex.: width, height, loading, decoding, style).

Composição

1. Renderize com a part do AI SDK. O formato Experimental_GeneratedImage é o que o SDK te entrega em mensagens image-part.
2. Dentro de Artifact quando a imagem é o próprio artifact.
3. Dentro de MessageContent quando a imagem é conteúdo inline em uma resposta de chat.
4. Com dimensionamento via className (size-32, max-w-md) ou props width / height explícitas para estabilidade de layout.

Variações

Chart gerado inline dentro de uma mensagem

Insira a imagem dentro de MessageContent ao lado de texto e citações.

<Message from="assistant">
  <MessageContent>
    <MessageResponse>Here is the weekly conversion trend:</MessageResponse>
    <Image
      base64={chart.base64}
      mediaType={chart.mediaType}
      alt="Weekly conversion bar chart, 23% up vs. previous week"
    />
  </MessageContent>
</Message>

Artifact só de imagem com ação de download

<Artifact>
  <ArtifactHeader>
    <ArtifactTitle>logo.png</ArtifactTitle>
    <ArtifactActions>
      <ArtifactAction
        tooltip="Download"
        icon={DownloadIcon}
        onClick={download}
      />
      <ArtifactClose />
    </ArtifactActions>
  </ArtifactHeader>
  <ArtifactContent>
    <Image
      base64={logo.base64}
      mediaType={logo.mediaType}
      alt="Generated logo"
    />
  </ArtifactContent>
</Artifact>

Dimensões restritas

Quando o layout precisa de um tamanho fixo de imagem, passe dimensões explícitas.

<Image
  base64={image.base64}
  mediaType={image.mediaType}
  alt="Thumbnail preview"
  width={120}
  height={120}
  className="size-30 object-cover"
/>

Lazy load abaixo da dobra

<Image
  base64={image.base64}
  mediaType={image.mediaType}
  alt="..."
  loading="lazy"
  decoding="async"
/>

Acessibilidade

• Sempre forneça alt: não há fallback embutido. Passe uma descrição factual do que a imagem contém - para um chart, resuma a tendência em palavras; para um logo, nomeie a marca.
• Imagens decorativas: se a imagem for puramente decorativa, passe alt="" (não omita) para que os leitores de tela a pulem de forma limpa.
• Sem estado de loading por padrão: imagens base64 renderizam de forma síncrona, então o padrão típico de "loading shimmer" não se aplica. Se você fizer streaming da imagem (raro para output do AI SDK), renderize um Skeleton ao lado de um Image deferido.
• Reduced motion: não há animação. Respeite as preferências do usuário apenas se você envolver a imagem na sua própria transição.
• Contraste de cor: quando a imagem carrega texto (ex.: um chart gerado), verifique de forma independente que o texto renderizado passa no contraste para conteúdo embutido - o primitivo não consegue inspecionar os bytes.

Relacionados

• Artifact - o chrome de card ao redor de artifacts de imagem
• Message - o turno de chat que pode incluir uma imagem inline
• Open in Chat - envia uma imagem gerada de volta para a conversa