Orbeez kit
Agents & tools

Artifact

<Artifact />
The thing an agent is making, like a file or a page, in a panel of its own beside the conversation, with a card in the conversation that opens it.
I put every colour in one theme file, with a dark value for each.
theme.tsWriting…
theme.tsWriting…

Install

bash
npx shadcn@latest add https://orbeez-kit.vercel.app/r/artifact.json

Usage

tsx
<ArtifactCard title="theme.ts" hue={338} detail="v2 · 22 lines" streaming={writing} onOpen={open} />

<Artifact>
  <ArtifactHeader title="theme.ts" hue={338} streaming={writing} detail="v2 · 22 lines">
    <ArtifactTabs value={tab} onChange={setTab} tabs={[{ value: 'code', label: 'Code' }, { value: 'preview', label: 'Preview' }]} />
    <CopyButton text={source} />
  </ArtifactHeader>
  <ArtifactContent>
    {tab === 'code' ? <ArtifactCode code={source} language="ts" streaming={writing} /> : <Preview />}
  </ArtifactContent>
</Artifact>

Good to know

  • Moods. The bead of the agent writing it works until it is done.
  • The panel keeps its size; what is inside scrolls, so an artifact growing line by line moves nothing round it.
  • ArtifactCode colours and numbers the code, with a block caret on the last line while it is being written.
PreviousPlanNextTool