Artifact Panel

Artifact panel next to the chat. Pro · AI chat and agents › Answers and artifacts

Side panel for a generated document or code file, beside a chat: preview, source, versions.

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add artifact-panel

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { ArtifactPanel } from 'valyro-ui-pro';

Props

Prop	Type	Default
`title` *	`ReactNode`		Artifact name in the header; also labels the panel for screen readers.
`kind`	`'document' \| 'code'`	`'document'`	`document` previews as Markdown; `code` shows highlighted source. Default `document`.
`language`	`string`		Highlighting and the type badge for code artifacts, e.g. `tsx`.
`versions` *	`ArtifactVersion[]`		Every version, oldest first. The latest is shown unless `version` picks another.
`version`	`number`		0-based index of the shown version. Uncontrolled, the panel follows the latest one.
`defaultVersion`	`number`		Initial `version` when uncontrolled.
`onVersionChange`	`(index: number) => void`		Called with the new `version` when it changes.
`onRestore`	`(index: number) => void`		Adds "Restore this version" while an older version is shown.
`view`	`'preview' \| 'code'`		Controlled `view`; use with `onViewChange`.
`defaultView`	`'preview' \| 'code'`	`'preview'`	Initial `view` when uncontrolled.
`onViewChange`	`(view: ArtifactView) => void`		Called with the new `view` when it changes.
`renderPreview`	`(content: string) => ReactNode`		Preview for code artifacts, e.g. a sandboxed iframe. Without it a code artifact shows only its source.
`streaming`	`boolean`	`false`	The latest version is still being written.
`onDownload`	`(version: ArtifactVersion, index: number) => void`		Adds a Download button.
`fullscreen`	`boolean`		Controlled `fullscreen`; use with `onFullscreenChange`.
`defaultFullscreen`	`boolean`	`false`	Initial `fullscreen` when uncontrolled.
`onFullscreenChange`	`(fullscreen: boolean) => void`		Called with the new `fullscreen` when it changes.
`onClose`	`() => void`		Adds a Close button.
`sheetBreakpoint`	`number`	`768`	With `onClose`, viewports narrower than this (px) show the panel as a full-screen sheet. Default 768; 0 turns it off.
`locale`	`string`		BCP 47 locale for version dates; defaults to the ThemeProvider's.
`labels`	`Partial<ArtifactPanelLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Related components

Sources — Sources and citations in an answer
Answer Card — Perplexity-style answer with sources
Diff Review — Review AI edits hunk by hunk
AI Chat Window — AI chat window
Chat Message — Messages with streaming output
Message Branches — Message versions and a conversation branch tree
Streaming Text — Smooth token streaming
Markdown Preview — Rendered Markdown
Response Feedback — Answer rating and a rubric for reviewers
Prompt Composer — Prompt field with attachments
Inline Suggestion — Inline autocomplete suggestion
Model Selector — AI model picker

Previous: Answer Card · Next: Diff Review · All AI chat and agents