Generated image

Displays a supplied generated-image result with alt text and responsive 4px corners.

Preview

A monochrome diagram of three connected workflow steps

In action

Display a generated result

A monochrome diagram of three connected workflow steps

When to use

Use it for

  • Adapt a provider result containing base64 image bytes and a supported image media type.
  • Use native width and height to reserve space. Image generation and fetching remain application-owned.

Avoid

  • Omitting meaningful alt text for informative results.

Install

React package

npm install @noorddev/vlak-react

Load the stylesheet once at your app root, then import the components you use.

import "@noorddev/vlak-react/css";
import { GeneratedImage, type GeneratedImageData } from "@noorddev/vlak-react";

Per-component imports are available at @noorddev/vlak-react/components/generated-image.

Copy the source

npx @noorddev/vlak-cli add generated-image

Adds the component to components/vlak/. Follow the StyleX setup to compile the source in your application.

shadcn registry

npx shadcn add https://vlak.dev/r/generated-image.json

Installs the same source through the shadcn CLI.

React

import { GeneratedImage, type GeneratedImageData } from "@noorddev/vlak-react";

export function WorkflowImage({ image }: { image: GeneratedImageData }) {
  return <GeneratedImage image={image} alt="Project workflow diagram" />;
}

See the integration example to compose these components with your application's model and data.

Props

GeneratedImage

Displays supplied image bytes; image generation remains application-owned.

PropTypeDefaultDescription
imagerequiredGeneratedImageData
altrequiredstring

Also accepts Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "alt">.

The ref reaches HTMLImageElement.

Accessibility

  • Native attributes, className, style, and the forwarded ref reach the outer element.
  • Interactive content requires accessible names; progress text is not announced for every streamed token.

Markup

The same styles are available as CSS. Native HTML provides the static presentation; React or application code supplies state updates and actions.

npm install @noorddev/vlak
import "@noorddev/vlak/css";
<img class="rs-generated-image" src="/example.png" alt="Generated project diagram" />

Classes

.rs-generated-image

Use elsewhere

Markdown referenceRegistry JSONSourceAI integration guide
ChatConversationResponseResponse markdownMessage composerResponse actionsResponse branchResponse editorConversation exportAttachmentsSuggestionsModel selectorContext usageCheckpointReasoningThought stepsPlanTaskWork queueTool callConfirmationInline citationSourcesShimmerWidgetOpen in chatWidget patternsHighlighted codeAgentFile treeArtifactSnippetCommitEnvironment variablesPackage infoSchema displayTest resultsStack traceTerminalSandboxWeb previewJsx previewAudio playerMic selectorSpeech inputTranscriptionVoice selectorPersonaWorkflow canvas