Artifact Card

Install

npx ax-depute@latest add artifact-card

pnpm dlx ax-depute@latest add artifact-card

yarn dlx ax-depute@latest add artifact-card

bunx ax-depute@latest add artifact-card

Overview

The agent's "receipt" of work completed. It renders the final output alongside crucial provenance data: precisely which plan step and tool calls generated it. It also provides integrated export options.

Basic usage

<Artifact Card
  artifact={myArtifactData}
/>

With mock data

Because Artifact Card requires a full artifact object to render, here is an example of what that object looks like:

import { Artifact Card } from '@/components/Artifact Card';
import type { Artifact } from '@/types/ax-common';

const mockArtifact: Artifact = {
  id: 'art_123',
  type: 'code',
  title: 'Database Schema Migration',
  createdAt: new Date(),
  content: 'CREATE TABLE users (id SERIAL PRIMARY KEY, name VARCHAR(50));',
  sourceStepId: 'step_2',
  toolCallIds: ['call_456']
};

export function App() {
  return (
    <Artifact Card 
      artifact={mockArtifact} 
      exportFormats={['markdown', 'sql']} 
      onExport={(format) => console.log(`Exporting as ${format}`)}
      showPreview={true}
    />
  );
}

Streaming state

When content is still arriving from a live backend, pass isStreaming. Adds data-streaming="true" to the root — no built-in animation; the host product styles it:

<ArtifactCard
  artifact={partialArtifact}
  showPreview
  isStreaming={agent.isStreaming}
/>

Props

When to use

• The agent has completed a workflow and produced a discrete, shareable output (document, code, report, data) that the user needs to review, export, or act on
• Provenance matters — the user should be able to trace the output back to the specific plan step and tool calls that produced it
• The output type varies across runs (markdown, JSON, code, SQL) and you need a single component that handles all of them

When not to use

• The agent's output is a direct action that has already been executed (e.g., an email sent, a file deployed) — use Transaction Receipt or Decision Record instead
• The output is a streaming partial — wait for completion or use isStreaming only as a transitional state, not a permanent one
• You only need to display a success/failure confirmation with no shareable content — a simple status notification is less heavyweight

Accessibility

• The artifact content area is a <section> with aria-label derived from the artifact title (e.g., "Artifact: Database Schema Migration")
• Export buttons have explicit aria-label values that include the format (e.g., "Export as Markdown")
• Streaming content is announced via aria-live="polite" so screen readers track new content arriving without interruption
• Code content is rendered inside <pre><code> with appropriate role="region" and aria-label="Code output" for keyboard traversal
• Provenance metadata (step ID, tool calls) is rendered as readable text, not hidden behind hover states

Solution Patterns

Artifact Card is the grand finale of a single-agent execution sequence:

Plan Card → Approval Gate → Run Controls → Tool Trace → [Artifact Card]

Once the agent finishes its work, the trace concludes and this component is rendered to display the final, tangible output.

Design rationale

Why the "Receipt" Pattern? In traditional SaaS, the UI is the application. In agentic software, the UI is often just the exhaust of the application. The Artifact Card treats the final output as a primary, shareable asset.

Why verifiable provenance? Trust requires auditability. The sourceStepId and toolCallIds metadata fields visually connect the final artifact back to the exact operations that produced it, preventing "hallucinated outputs" from passing without scrutiny.

Why focus on actionability? Agents excel at generation, but humans excel at distribution. Integrated exportFormats acknowledge that the artifact's lifecycle doesn't end in the chat UI—it needs to be pulled into PRs, Slack messages, or Google Docs.