Artifact

A generated document or file in its own panel beside the chat, opened from a card in the message.

Draft the pricing announcement.

Here's a first draft. I led with what stays the same.

Q3 pricing update

Document · v1

Q3 pricing update

We're moving the Team plan from €12 to €14 per seat per month, starting 1 October.

What stays the same

Annual customers keep their current price until renewal
Free and Enterprise plans are unchanged

Why

Usage of agent features tripled this year. The new price funds more capacity.

Installation

pnpm dlx shadcn@latest add @jds/artifact

Usage

import {
  Artifact,
  ArtifactAction,
  ArtifactActions,
  ArtifactCard,
  ArtifactContent,
  ArtifactHeader,
} from "@/components/ai/artifact"

<ArtifactCard title="Q3 pricing update" description="Document · v1" onOpen={() => setOpen(true)} />

<Artifact>
  <ArtifactHeader title="Q3 pricing update" description="Document · v1">
    <ArtifactActions>
      <ArtifactAction label="Copy"><CopyIcon /></ArtifactAction>
    </ArtifactActions>
  </ArtifactHeader>
  <ArtifactContent>…</ArtifactContent>
</Artifact>

API Reference

ArtifactCard

Prop	Type	Default
`title`	string	–
`description` Kind and version.	string	–
`kind` Sets the icon.	"document" \| "code"	"document"
`active` Highlights the card while its panel is open.	boolean	–
`onOpen`	() => void	–

Approval Branch