Reasoning Tree

Collapsible chain-of-thought. Two variants: minimal (Claude-style border) and contained (DeepSeek-style card).

ai-workflow v0.4.0

Playground

Minimal (Claude-style)

<ai-reasoning-tree style="max-width:500px;"></ai-reasoning-tree>

Contained (DeepSeek-style)

<ai-reasoning-tree variant="contained" style="max-width:500px;"></ai-reasoning-tree>

Collapsed

<ai-reasoning-tree style="max-width:500px;"></ai-reasoning-tree>

import { AiReasoningTree } from '@cognivo/components';

// Or tree-shake: import '@cognivo/components/ai-reasoning-tree';

Per-component imports ship only that component (~8 kB gzip).

Prop	Type	Default	Description
`nodes`	ReasoningNode[]	—	Steps — {id, type, content, confidence?, children?}
`variant`	"minimal" \| "contained"	"minimal"	Minimal = left border, Contained = card
`label`	string	"Thinking"	Toggle label
`collapsed`	boolean	true	Start collapsed
`highlightPath`	string[]	[]	Node IDs to highlight

Event	Detail	Description
`ai-reasoning-node-click`	{id, type, content}	Node clicked