Artifact

Surface dedicada pra código / documento gerado — header com title + actions, content scrollável.

Overview

Artifact é a surface dedicada pra um output gerado pelo modelo — código, markdown, dados estruturados. Consiste em header (title, description, actions toolbar, close) + content scrollável.

Padrão Claude / GPT artifacts: o output sai do flow do chat e vai pra um painel lateral persistente que o user pode editar, baixar, re-gerar.

Preview

Artifact de código com header + actions toolbar.

landing-page.tsx

React component · 124 linhas

export function LandingPage() {
  return (
    <main className="min-h-dvh">
      <Hero />
      <Features />
      <CTA />
    </main>
  );
}

Anatomy

<Artifact>
  ├─ <ArtifactHeader>
  │    ├─ <ArtifactTitle />
  │    ├─ <ArtifactDescription />
  │    ├─ <ArtifactActions>
  │    │    └─ <ArtifactAction tooltip>...</ArtifactAction>
  │    └─ <ArtifactClose />
  └─ <ArtifactContent>
       [code, markdown, JSON, etc]
</Artifact>

Usage

<Artifact>
  <ArtifactHeader>
    <ArtifactTitle>landing-page.tsx</ArtifactTitle>
    <ArtifactDescription>React component · 124 linhas</ArtifactDescription>
    <ArtifactActions>
      <ArtifactAction tooltip="Copiar"><Copy /></ArtifactAction>
      <ArtifactAction tooltip="Re-gerar"><RefreshCw /></ArtifactAction>
      <ArtifactAction tooltip="Baixar"><Download /></ArtifactAction>
      <ArtifactClose />
    </ArtifactActions>
  </ArtifactHeader>
  <ArtifactContent>
    <CodeBlock code={code} language="tsx" />
  </ArtifactContent>
</Artifact>

Props

Artifact (Root)

Aceita HTMLAttributes<HTMLDivElement>. Container neutro com border, rounded.

ArtifactHeader

Aceita HTMLAttributes<HTMLDivElement>. Wrapper flex com layout title-left / actions-right.

ArtifactTitle / ArtifactDescription

Componente	Aceita
`ArtifactTitle`	`HTMLAttributes<HTMLParagraphElement>`.
`ArtifactDescription`	`HTMLAttributes<HTMLParagraphElement>`.

Title é semibold; Description é muted text-sm.

ArtifactActions · ArtifactAction · ArtifactClose

Componente	Função
`ArtifactActions`	Wrapper flex (gap-1).
`ArtifactAction`	Botão da toolbar. Aceita `tooltip` opcional. Herda Button props.
`ArtifactClose`	Botão X — fecha/dismiss o artifact. Herda Button props.

ArtifactContent

Aceita HTMLAttributes<HTMLDivElement>. Container scrollável do corpo do artifact.

Subcomponents

Artifact — root container.
ArtifactHeader — slot superior.
ArtifactTitle — nome do artifact (filename, título).
ArtifactDescription — meta (linguagem, tamanho, etc).
ArtifactActions — wrapper de actions.
ArtifactAction — botão individual com tooltip.
ArtifactClose — botão X com aria-label="Close".
ArtifactContent — corpo scrollável.

Composition

Code artifact (caso comum)

<Artifact>
  <ArtifactHeader>
    <ArtifactTitle>Component.tsx</ArtifactTitle>
    <ArtifactDescription>React · 84 linhas</ArtifactDescription>
    <ArtifactActions>
      <ArtifactAction tooltip="Copy"><Copy /></ArtifactAction>
      <ArtifactAction tooltip="Download"><Download /></ArtifactAction>
      <ArtifactClose />
    </ArtifactActions>
  </ArtifactHeader>
  <ArtifactContent>
    <CodeBlock code={code} language="tsx" />
  </ArtifactContent>
</Artifact>

Markdown document

<Artifact>
  <ArtifactHeader>
    <ArtifactTitle>requirements.md</ArtifactTitle>
    <ArtifactDescription>Markdown · 2 páginas</ArtifactDescription>
    <ArtifactActions>
      <ArtifactClose />
    </ArtifactActions>
  </ArtifactHeader>
  <ArtifactContent>
    <Streamdown>{markdown}</Streamdown>
  </ArtifactContent>
</Artifact>

Layout em painel lateral

<div className="grid grid-cols-[1fr_400px]">
  <Conversation>...</Conversation>
  {currentArtifact && (
    <Artifact>...</Artifact>
  )}
</div>

When to use

Output longo que merece surface dedicada — código, doc, JSON.
Artifacts editáveis — user pode iterar fora do chat.
Outputs visualizáveis (preview) que precisam de mais espaço.

When not to use

Snippets curtos — embed no chat com CodeBlock.
Tool outputs efêmeros — use Tool com ToolOutput; artifact é pra "saída final".

Best practices

Title = filename quando possível. "Component.tsx" > "Generated".
Always include Close. User precisa dispensar.
Actions ordenadas por uso. Copy primeiro, depois Download, depois destructive/regenerate.

Accessibility

Concern	Comportamento
Heading	ArtifactTitle é `<p>` por padrão. Para a11y melhor, embrulhe em `<h2>` quando o artifact ocupar surface dedicada.
Close	`aria-label="Close artifact"`.
Actions	`tooltip` injeta `aria-label` automático.

CodeBlock — usado dentro do ArtifactContent.
WebPreview — preview de site renderizado.
Tool — alternativa pra outputs efêmeros.

Artifact

On this page