Artifact Viewer

An AI-generated artifact shown inline — header (type tile + title + status), a type-specific preview, metadata, the originating prompt, and an Open / Copy / Download / Regenerate action bar.

Loading demo: artifact-viewer-real-world

Installation

npx sdaia-ui@latest add artifact-viewer

Usage

import { ArtifactViewer } from "sdaia-ui"

1<ArtifactViewer
2  type="code"
3  title="ai-message.tsx"
4  subtitle="TypeScript · 1.2 KB"
5  code={code}
6  version="v3"
7  status="Ready"
8  prompt="Prompt: Generate the AI message status helper."
9  onOpen={() => openArtifact()}
10  onCopy={() => copy(code)}
11  onExpand={() => setFullscreen(true)}
12/>

Examples

Code

An AI-generated code snippet rendered in the dark code preview.

Loading demo: artifact-viewer-code

File

A downloadable file with a type tile, name and size.

Loading demo: artifact-viewer-file

Document

A drafted document with a formatted heading and body preview.

Loading demo: artifact-viewer-document

Image

A generated image shown in the image preview.

Loading demo: artifact-viewer-image

Fullscreen

The expanded two-pane viewer — a Canvas preview plus a Details sidebar.

Loading demo: artifact-viewer-fullscreen-code

Brand

Brand style — a high-emphasis, brand-coloured card surface.

Loading demo: artifact-viewer-brand

Outline

Outline style — a bordered, transparent card surface.

Loading demo: artifact-viewer-outline

API Reference

Prop	Type	Default	Required
mode	'inline' \| 'fullscreen'	'inline'	optional
type	'code' \| 'file' \| 'document' \| 'image'	'code'	optional
variant	'neutral' \| 'brand' \| 'outline'	'neutral'	optional
dir	'ltr' \| 'rtl'	'ltr'	optional
title	ReactNode	—	required
subtitle	ReactNode	—	optional
status	ReactNode	'Ready'	optional
statusState	'success' \| 'warning' \| 'danger' \| 'info' \| 'neutral'	'success'	optional
version	ReactNode	—	optional
code	string	—	optional
imageSrc	string	—	optional
imageCaption	ReactNode	—	optional
documentHeading	ReactNode	—	optional
documentBody	ReactNode	—	optional
preview	ReactNode	—	optional
meta	ArtifactViewerMetaRow[]	—	optional
prompt	ReactNode	—	optional
onOpen / onCopy / onDownload / onRegenerate / onMore	() => void	—	optional
onExpand	() => void	—	optional
onClose	() => void	—	optional