3.5 KiB
Branch
URL: /components/branch
title: Branch description: Manages multiple versions of AI messages, allowing users to navigate between different response branches. path: elements/components/branch
The Branch component manages multiple versions of AI messages, allowing users to navigate between different response branches. It provides a clean, modern interface with customizable themes and keyboard-accessible navigation buttons.
Installation
Usage
import { Branch, BranchMessages, BranchNext, BranchPage, BranchPrevious, BranchSelector } from "@/components/ai-elements/branch";
<Branch defaultBranch={0}>
<BranchMessages>
<Message from="user">
<MessageContent>Hello</MessageContent>
</Message>
<Message from="user">
<MessageContent>Hi!</MessageContent>
</Message>
</BranchMessages>
<BranchSelector from="user">
<BranchPrevious />
<BranchPage />
<BranchNext />
</BranchSelector>
</Branch>
Usage with AI SDK
Branching is an advanced use case that you can implement yourself to suit your application's needs. While the AI SDK does not provide built-in support for branching, you have full flexibility to design and manage multiple response paths as required.Features
- Context-based state management for multiple message branches
- Navigation controls for moving between branches (previous/next)
- Uses CSS to prevent re-rendering of branches when switching
- Branch counter showing current position (e.g., "1 of 3")
- Automatic branch tracking and synchronization
- Callbacks for branch change and navigation using
onBranchChange - Support for custom branch change callbacks
- Responsive design with mobile-friendly controls
- Clean, modern styling with customizable themes
- Keyboard-accessible navigation buttons
Props
<Branch />
<TypeTable type={{ defaultBranch: { description: 'The index of the branch to show by default.', type: 'number', default: '0', }, onBranchChange: { description: 'Callback fired when the branch changes.', type: '(branchIndex: number) => void', }, '...props': { description: 'Any other props are spread to the root div.', type: 'React.HTMLAttributes', }, }} />
<BranchMessages />
<TypeTable type={{ '...props': { description: 'Any other props are spread to the root div.', type: 'React.HTMLAttributes', }, }} />
<BranchSelector />
<TypeTable type={{ from: { description: 'Aligns the selector for user, assistant or system messages.', type: 'UIMessage["role"]', }, '...props': { description: 'Any other props are spread to the selector container.', type: 'React.HTMLAttributes', }, }} />
<BranchPrevious />
<TypeTable type={{ '...props': { description: 'Any other props are spread to the underlying shadcn/ui Button component.', type: 'React.ComponentProps', }, }} />
<BranchNext />
<TypeTable type={{ '...props': { description: 'Any other props are spread to the underlying shadcn/ui Button component.', type: 'React.ComponentProps', }, }} />
<BranchPage />
<TypeTable type={{ '...props': { description: 'Any other props are spread to the underlying span element.', type: 'React.HTMLAttributes', }, }} />