AI Components / Reasoning Tree
Reasoning Tree
Collapsible chain-of-thought. Two variants: minimal (Claude-style border) and contained (DeepSeek-style card).
ai-workflowv0.4.0
Playground
Examples
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
import { AiReasoningTree } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/ai-reasoning-tree';Per-component imports ship only that component (~8 kB gzip).
API Reference
| 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 |
Events
| Event | Detail | Description |
|---|---|---|
ai-reasoning-node-click | {id, type, content} | Node clicked |