ArtifactPanel

Opens a document, code file, table or image the answer produced next to the chat. ArtifactPanel is a region with the title, kind · vN, your actions and a close button over the children you load by artifact.id; put it in the inspector of ChatInspectorLayout, which turns it into a drawer on narrow screens. The panel moves the focus to its title when an artifact opens; useArtifactPanel keeps the open artifact, gives layoutProps to the layout and returns the focus to the card or link on close when nothing else took it. createArtifactPartRenderer({ onOpen }) renders { type: "artifact", id, title, kind, version, status } parts as ArtifactCard, one button with Writing… in place of the kind while status is streaming. A link such as [notes](artifact:notes) reaches the panel through MarkdownLinksProvider.

Getting Started
$pnpm add @sinups/ai-kit @mantine/core @mantine/hooks @tabler/icons-react
API reference
Prop
Type
Required
artifact
ArtifactRef | null
Yes
Artifact on screen; the panel renders nothing without one
children
React.ReactNode
No
Content of the artifact: `Markdown`, `CodeBlock`, `DiffReview` or your own viewer
actions
React.ReactNode
No
Buttons in the header before close, for example copy or download
onClose
() => void
Yes
Called by the close button
labels
Partial<ArtifactPanelLabels>
No
Overrides of the default English labels
className
string
No
Class name added to the root element
style
React.CSSProperties
No
Inline styles added to the root element