Artifact for Radix UI

What the model made sits in its own panel: a header with the title, a line under it and a row of icon actions, then the content, which scrolls.

Use it when the answer is a thing to keep rather than a reply: a file of code, a plan, a draft. The chat says what it did in one line, and the artifact holds the result where the reader can copy it, download it or close it. For a snippet inside a message, use Code Block alone. In React, the actions are Buttons in a Tooltip from Radix UI, and the content is whatever you put in it.

Installation

Anatomy

Artifact
├── ArtifactHeader
│   ├── ArtifactTitle
│   ├── ArtifactDescription
│   └── ArtifactActions
│       ├── ArtifactAction   an icon button with a tooltip
│       └── ArtifactClose
└── ArtifactContent          scrolls

Usage

import { CopyIcon } from "lucide-react";
import {
  Artifact, ArtifactAction, ArtifactActions, ArtifactContent,
  ArtifactDescription, ArtifactHeader, ArtifactTitle,
} from "@/components/ui/artifact";

<Artifact className="max-w-md">
  <ArtifactHeader>
    <div>
      <ArtifactTitle>Launch plan</ArtifactTitle>
      <ArtifactDescription>Updated 1 minute ago</ArtifactDescription>
    </div>
    <ArtifactActions>
      <ArtifactAction icon={CopyIcon} tooltip="Copy to clipboard" />
    </ArtifactActions>
  </ArtifactHeader>
  <ArtifactContent>
    The beta opens to the waitlist on Monday, in three waves a day apart.
  </ArtifactContent>
</Artifact>

Demos

Document

A plan written as a document, with two actions that work: copy puts the Markdown on the clipboard and turns into a check for two seconds, download saves it as a .md file. The tooltip changes with the icon, so the name a screen reader hears changes too. Put prose in ArtifactContent with your own spacing; it has none of its own beyond the padding.

Streaming

The file writes itself a few characters at a time, as tokens arrive, through a Code Block that highlights each pass. While it writes, the description says so and the actions are disabled, since there's nothing whole to copy yet. Press Replay to watch it again. ArtifactContent takes p-0 here, so the code runs to the panel's edges.

Close

The artifact opens beside the chat, and ArtifactClose hides it. The close button is yours to wire: it hides nothing by itself, so keep the open state where the chat can reach it. Here a button under the reply opens the notes again, and closing sends focus back to it, so a keyboard user isn't left at the top of the page.

AI SDK

A model writes an artifact through a tool, writeDocument in this example, whose input is the title and the content. The input streams in as the model writes it, so render the last call as it is and say it's writing while its state is input-streaming.

const { messages } = useChat();

const document = messages
  .flatMap((message) => message.parts)
  .filter((part) => part.type === "tool-writeDocument")
  .at(-1);

if (!document?.input) {
  return null;
}

return (
  <Artifact className="h-96">
    <ArtifactHeader>
      <div>
        <ArtifactTitle>{document.input.title}</ArtifactTitle>
        <ArtifactDescription>
          {document.state === "input-streaming" ? "Writing…" : "Document"}
        </ArtifactDescription>
      </div>
    </ArtifactHeader>
    <ArtifactContent>{document.input.content}</ArtifactContent>
  </Artifact>
);

Code goes in a Code Block inside ArtifactContent, as in the Streaming demo, and Markdown through your Markdown renderer.

Migrating from AI SDK Elements

If you added Artifact from AI SDK Elements (opens in a new tab), your project has a components/ai-elements/artifact.tsx. Install this one, import from @/components/ui/artifact instead, and delete the old file. Every part keeps its name, and tooltip, label and icon on ArtifactAction work as before. What differs:

• ArtifactAction and ArtifactClose are icon-sm Buttons by default, not sm Buttons sized down with classes.
• Their name is an aria-label (label, else tooltip; Close for an ArtifactClose without children), not a hidden span.
• On Radix each ArtifactAction brings its own TooltipProvider, as AI SDK Elements' does; on the other libraries a Tooltip needs none.
• ArtifactContent fills the panel's height and scrolls when the Artifact has a height.

FAQ

API Reference