ProvenanceBundleView - ProvenanceKit

Renders all sections of a provenance bundle in a tabbed, structured layout. Entities, actions, resources, attributions, and an embedded graph are each available as toggleable sections.

Preview
Code

import { ProvenanceBundleView } from "@provenancekit/ui";

// Auto-fetch from CID
<ProvenanceBundleView cid="bafybei..." />

// Pre-fetched bundle — render all sections including graph
<ProvenanceBundleView
  bundle={myBundle}
  showEntities
  showActions
  showResources
  showAttributions
  showGraph
  graphHeight={400}
/>

// Minimal view — attribution-only sidebar widget
<ProvenanceBundleView
  cid="bafybei..."
  showActions={false}
  showResources={false}
  showGraph={false}
/>

What the preview shows

The bundle view contains “The Illustrated Article” — a real-world editorial workflow with four contributors and four distinct actions:

Tab	What you see
Entities	Sarah Kim (human creator), Illustrated Digest (publisher), Claude Opus 4.6 (AI writing assistant), Flux Schnell (AI image generator)
Actions	`write` → `generate image` (Flux) → `polish article` (Claude) → `editorial review & verify`
Resources	`article-draft.md`, `header-image.png`, `article-polished.md`, `illustrated-guide-final.md`
Attributions	Weighted contributions: Sarah 65% · Illustrated Digest 20% · Claude Opus 10% · Flux Schnell 5%
Graph	The full DAG tracing all inputs, outputs, and who performed each step

This example demonstrates that a single published piece of content can carry complete, verifiable provenance for every human and AI contributor, with licenses and verification status attached.

Props

Prop	Type	Default	Description
`cid`	`string`	—	Resource CID — auto-fetches bundle
`bundle`	`ProvenanceBundle`	—	Pre-fetched bundle
`showEntities`	`boolean`	`true`	Show entities section
`showActions`	`boolean`	`true`	Show actions section
`showResources`	`boolean`	`true`	Show resources section
`showAttributions`	`boolean`	`true`	Show attribution section
`showGraph`	`boolean`	`false`	Show embedded graph
`graphHeight`	`number`	`400`	Height of embedded graph
`className`	`string`	—	Additional CSS classes