Artifact Card

Render the final output of an agentic workflow with export and provenance tracing.

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

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.

# Analysis Report ## Executive Summary The analysis identified **3 key themes** across the source documents: 1. **Performance optimization** — 40% of issues are latency-related 2. **Error handling** — 25% of bugs stem from unhandled edge cases 3. **Documentation gaps** — Missing API specs for 12 endpoints ## Recommendations - Prioritize P0 latency issues in the next sprint - Add error boundaries to all async flows - Schedule API documentation review for Q2

Word count	248
Generated	3/9/2026, 1:13:11 AM
Model	gemini-2.0-flash

Export:

Step: step-ivyuntzTools: call-6yhwihb, call-rq2psq8

Interactive StorybookView all states, toggle props, and test edge cases.

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}
    />
  );
}

Props

Prop	Type	Default	Description
`artifact`	`Artifact`	Required	The artifact object to display (contains `title`, `type`, `content`, etc.).
`exportFormats`	`ExportFormat[]`	`undefined`	Array of available export formats to show as action buttons (e.g., `'markdown'`, `'json'`).
`onExport`	`(format: ExportFormat) => void`	`undefined`	Callback fired when an export button is clicked.
`showPreview`	`boolean`	`true`	Whether to render a preview of the artifact's `content` inside the card.
`maxPreviewHeight`	`string`	`'24rem'`	Maximum height of the content preview area before an internal scrollbar appears.

Composition flow

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.