Overview
Branches
Fork conversations into parallel paths and switch context between branches
branchingthreadscomparison
Props
| Prop | Type | Default | Description |
|---|---|---|---|
branches | BranchItem[] | required | Array of branch nodes with id, optional parentId, label, optional preview, optional depth, and optional createdAt |
activeBranchId | string | undefined | ID of the currently active branch |
onSelectBranch | (branchId: string) => void | required | Callback fired when a branch is selected |
onCreateBranch | (fromBranchId: string) => void | required | Callback fired to fork from an existing branch |
title | string | "Branches" | Optional heading for the branch explorer |
variant | "tree" | "list" | "tree" | Visual presentation style for branch navigation |
Docs
Branches let users fork a conversation at any point and explore alternative paths without losing the original context. This pattern is useful when multiple valid directions exist and teams need to compare outcomes before deciding what to keep as the main thread.
Variants
- Tree view — Indented thread hierarchy showing parent-child branch relationships.
- Flat list — Single-level list with active branch highlighting for simpler workflows.
- Timeline branches — Branch points shown inline within chronological conversation history.
Use Cases
- Comparing alternate solutions from the same prompt context
- Preserving a stable main thread while testing risky paths
- Collaborative workflows where teammates pursue separate approaches
- Debugging agent behavior by replaying diverging branch histories
- Editorial review where multiple rewrites are explored in parallel
Best Practices
- Make the active branch visually explicit at all times.
- Show concise preview text so users can scan branches quickly.
- Allow branching from any node without losing source context.
- Support quick switching between sibling branches for comparison.
- Pair branching with merge/commit flows when convergence is needed.