Artifact

AI chats

About

A structured container for displaying AI-generated content like code, documents, or other outputs, with a header, title, description, and a row of tooltip-labeled action buttons.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Artifact to your project and fits it to your theme.

Code

How Artifact is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

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

export default function ArtifactDemo() {
  return (
    <div className="w-full max-w-xl">
      <Artifact>
        <ArtifactHeader>
          <div>
            <ArtifactTitle>Dijkstra's Algorithm Implementation</ArtifactTitle>
            <ArtifactDescription>Updated 1 minute ago</ArtifactDescription>
          </div>
          <ArtifactActions>
            <ArtifactAction
              icon={CopyIcon}
              label="Copy"
              tooltip="Copy to clipboard"
            />
            <ArtifactAction
              icon={RefreshCwIcon}
              label="Regenerate"
              tooltip="Regenerate content"
            />
            <ArtifactAction
              icon={DownloadIcon}
              label="Download"
              tooltip="Download file"
            />
          </ArtifactActions>
        </ArtifactHeader>
        <ArtifactContent>
          <p className="text-muted-foreground text-sm">
            Generated content, such as code, documents, or other outputs,
            appears here.
          </p>
        </ArtifactContent>
      </Artifact>
    </div>
  );
}