Artifact workbench

A React block (a whole screen) in Beamline's Blocks category.

Where the things an assistant makes are checked before they leave: every document, piece of code, small app and data result from a conversation, each version with what was asked for it, a live preview (the app runs in a sandbox, at desktop or phone width), the source, the changes from any earlier version, a failed version with Ask to fix, and Export in the format the work needs, with the file it made.

Use it for

An AI product whose answers become things: reports, code, small apps, structured results to inspect, compare and export.
Reviewing generated output version by version before it ships or is sent.

Not for

Generating images (image-studio).
The conversation itself (agent-workspace, conversation-history).
Reviewing a pull request across many files (file-diff on its own).

Anatomy

list: the conversation's artifacts with kind, version count and age; one being written shows a spinner, one that failed says so
header: title, kind and file name; Preview, Source or Changes; the versions (v1 v2 v3) with what was asked for the one shown
preview: a document on a page; an app running in a sandbox at desktop or phone width with Run again; data as a tree to search and copy; code has no preview and opens on its source
changes: the differences from the version before, or any earlier one
footer: which version this is (current or older), Make current for an older one, Export with its format, then the file made (name, size, Download) or why it failed

Variants

0: room: the list is a column from 48rem and a picker in the header below that

States

loading
nothing made yet
a version being written (spinner on its tab and in the list; source fills as it comes)
a version that failed to build or run (the reason, Ask to fix; Export off)
an older version shown (Make current)
the first version (Changes has nothing to compare)
data that isn't valid JSON
exporting, exported (the file), export failed (the reason; try again)

Keyboard

Tab: the artifacts, the views, the versions, the preview's controls, Make current and Export
Arrows move within the views and the versions (segmented controls); ↓ on Export's menu half opens the formats
The app preview is a frame: Tab enters it and leaves it

Motion

The open artifact's plate travels down the list; a new version's spinner swaps for its number when it is ready; the exported file rises in where the status was. Nothing moves at rest.

Props

Prop	Type	Default	Description
`artifacts` (required)	`Artifact[]`	—	{ id, title, kind: document · code · app · data, filename?, language?, versions: { id, createdAt, prompt?, content, status?: ready · writing · error, error? }[] } oldest version first.
`selected / defaultSelected / onSelectedChange`	`string \| null`	—
`view / defaultView / onViewChange`	`"preview" \| "source" \| "changes"`	—
`formats`	`Partial<Record<ArtifactKind, { value, label }[]>>`	—	Export formats per kind; ARTIFACT_FORMATS by default.
`onExport`	`(artifactId, versionId, format) => Promise<{ name, size?, url? }>`	—	Make the file; a rejection's message is shown.
`onRestore`	`(artifactId, versionId) => void`	—	Make an older version the current one.
`onFix`	`(artifactId, versionId) => void`	—	Ask the model to fix a failed version.
`loading`	`boolean`	—
`title`	`string`	`"Artifacts"`
`className / classNames / style / ref`	`string / ArtifactWorkbenchClassNames / CSSProperties / Ref<HTMLElement>`	—

Built from

segmented-control
select
response
code-block
file-diff
json-viewer
split-button
alert
badge
button
empty-state
skeleton
spinner
text-shimmer

Dependencies

lucide-react

Import

import { ArtifactWorkbench, ARTIFACT_FORMATS } from "@/blocks/artifact-workbench/artifact-workbench";

Get it

Artifact workbench is part of Beamline: 200+ components and 50+ complete screens for React that your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 launch price, one payment, no subscription, lifetime updates, one licence for your whole team. Get Beamline · Connect your agent