Skip to content

Interactive Answers

Artifact Panel

A side canvas for what the agent made — live preview and source tabs, version history and download.

2 variantsMIT

Preview

Landing hero

React14:02

v1 of 3

pressd 3.1

Static sites that build in seconds

Cached image pipeline, instant previews, zero config.

v1, preview

Installation

Copies the component into components/ui and installs its dependencies and theme tokens.

pnpm dlx shadcn@latest add https://tuffui.com/r/artifact-panel.json

Usage

Pass your own data and wire the callbacks to your agent runtime.

import { ArtifactPanel } from "@/components/ui/artifact-panel";

// Render it beside the chat when the agent produces a document, page or component.
export function Canvas({ artifact }: { artifact: Artifact }) {
  return (
    <ArtifactPanel
      view="versions"
      data={{
        title: artifact.title,
        kind: artifact.kind, // "React", "Markdown", "SQL"…
        versions: artifact.versions.map((v) => ({
          id: v.id,
          label: `v${v.number}`,
          createdAt: v.time,
          note: v.summary,
          preview: <Sandbox code={v.code} />,
          source: v.code,
          filename: artifact.filename,
        })),
      }}
      onRestore={(v) => agent.restoreArtifact(artifact.id, v.id)}
      onOpen={(v) => window.open(`/artifacts/${artifact.id}/${v.id}`)}
    />
  );
}

Props

PropTypeDefaultDescription
data*{ title: string; kind: string; versions: ArtifactVersion[] }—Versions oldest first; the last one is current.
view"preview" | "versions""preview"The canvas alone, or with the version history beside it.
versionId / onVersionChangestring—The version on screen. The header stepper and ← → keys move through them.
tab / onTabChange"preview" | "source"—Rendered preview or the source with line numbers.
onRestore(version) => void—Shown under an older version in the versions view.
onCopy / onDownload / onOpen(…) => void—Toolbar actions. Copy writes the source to the clipboard; download defaults to a file named `filename`; open shows only when set.
iconIconFileCodePhosphor icon for the header.
classNamestring—Extra classes for the shell.
type ArtifactVersion = {
  id: string;
  label: string;     // "v3"
  createdAt: string;
  note: string;      // what changed
  preview: React.ReactNode;
  source: string;
  filename?: string;
};