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.
branch-default
What are the key strategies for optimizing React performance?
How can I improve the performance of my React application?
What performance optimization techniques should I use in React?
Here's the first response to your question. This approach focuses on performance optimization.
Here's an alternative response. This approach emphasizes code readability and maintainability over pure performance.
And here's a third option. This balanced approach considers both performance and maintainability, making it suitable for most use cases.
"use client"
import {
Branch,
BranchMessages,
BranchNext,
BranchPage,
BranchPrevious,
BranchSelector,
} from "@/components/ui/ai/branch"
import { Message, MessageContent } from "@/components/ui/ai/message"
export function BranchDemo() {
return (
<div className="flex h-full items-center justify-center">
<div className="mx-auto w-full max-w-xl">
<Branch defaultBranch={0}>
<BranchMessages>
<Message from="user">
<MessageContent>
What are the key strategies for optimizing React performance?
</MessageContent>
</Message>
<Message from="user">
<MessageContent>
How can I improve the performance of my React application?
</MessageContent>
</Message>
<Message from="user">
<MessageContent>
What performance optimization techniques should I use in React?
</MessageContent>
</Message>
</BranchMessages>
<BranchSelector from="user" className="p-0">
<BranchPrevious />
<BranchPage />
<BranchNext />
</BranchSelector>
</Branch>
<Branch defaultBranch={0}>
<BranchMessages>
<Message from="assistant">
<MessageContent>
Here's the first response to your question. This approach
focuses on performance optimization.
</MessageContent>
</Message>
<Message from="assistant">
<MessageContent>
Here's an alternative response. This approach emphasizes
code readability and maintainability over pure performance.
</MessageContent>
</Message>
<Message from="assistant">
<MessageContent>
And here's a third option. This balanced approach considers
both performance and maintainability, making it suitable for
most use cases.
</MessageContent>
</Message>
</BranchMessages>
<BranchSelector from="assistant" className="p-0">
<BranchPrevious />
<BranchPage />
<BranchNext />
</BranchSelector>
</Branch>
</div>
</div>
)
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/branch-default.json"Installation
pnpm dlx dlx shadcn@latest add https://ui.dalim.in/r/styles/default/branch.json
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
<Branch />
| Prop | Type | Description |
|---|---|---|
defaultBranch | number | The index of the branch to show by default (default: 0). |
onBranchChange | (branchIndex: number) => void | Callback fired when the branch changes. |
...props | React.HTMLAttributes<HTMLDivElement> | Any other props are spread to the root div. |
<BranchMessages />
| Prop | Type | Description |
|---|---|---|
...props | React.HTMLAttributes<HTMLDivElement> | Any other props are spread to the root div. |
<BranchSelector />
| Prop | Type | Description |
|---|---|---|
from | UIMessage["role"] | Aligns the selector for user, assistant or system messages. |
...props | React.HTMLAttributes<HTMLDivElement> | Any other props are spread to the selector container. |
<BranchPrevious />
| Prop | Type | Description |
|---|---|---|
...props | React.ComponentProps<typeof Button> | Any other props are spread to the underlying shadcn/ui Button component. |
<BranchNext />
| Prop | Type | Description |
|---|---|---|
...props | React.ComponentProps<typeof Button> | Any other props are spread to the underlying shadcn/ui Button component. |
<BranchPage />
| Prop | Type | Description |
|---|---|---|
...props | React.HTMLAttributes<HTMLSpanElement> | Any other props are spread to the underlying span element. |