Branch

PreviousNext

Display and navigate between multiple AI response branches.

Docs
What are the key strategies for optimizing React performance?
Ha
Here's the first response to your question. This approach focuses on performance optimization.
AI
"use client"

import { nanoid } from "nanoid"

import {
  Branch,
  BranchMessages,
  BranchNext,
  BranchPage,
  BranchPrevious,
  BranchSelector,
} from "@/components/ai-elements/branch"
import {
  Message,
  MessageAvatar,
  MessageContent,
} from "@/components/ai-elements/message"

const userMessages = [
  {
    id: nanoid(),
    content: "What are the key strategies for optimizing React performance?",
  },
  {
    id: nanoid(),
    content: "How can I improve the performance of my React application?",
  },
  {
    id: nanoid(),
    content: "What performance optimization techniques should I use in React?",
  },
]

const assistantMessages = [
  {
    id: nanoid(),
    content:
      "Here's the first response to your question. This approach focuses on performance optimization.",
  },
  {
    id: nanoid(),
    content:
      "Here's an alternative response. This approach emphasizes code readability and maintainability over pure performance.",
  },
  {
    id: nanoid(),
    content:
      "And here's a third option. This balanced approach considers both performance and maintainability, making it suitable for most use cases.",
  },
]

export function BranchDemo() {
  const handleBranchChange = (branchIndex: number) => {
    console.log("Branch changed to:", branchIndex)
  }

  return (
    <div style={{ height: "300px" }}>
      <Branch defaultBranch={0} onBranchChange={handleBranchChange}>
        <BranchMessages>
          {userMessages.map((message) => (
            <Message from="user" key={message.id}>
              <MessageContent>{message.content}</MessageContent>
              <MessageAvatar
                name="Hayden Bleasel"
                src="https://github.com/haydenbleasel.png"
              />
            </Message>
          ))}
        </BranchMessages>
        <BranchSelector from="user">
          <BranchPrevious />
          <BranchPage />
          <BranchNext />
        </BranchSelector>
      </Branch>

      <Branch defaultBranch={0} onBranchChange={handleBranchChange}>
        <BranchMessages>
          {assistantMessages.map((message) => (
            <Message from="assistant" key={message.id}>
              <MessageContent>{message.content}</MessageContent>
              <MessageAvatar name="AI" src="https://github.com/openai.png" />
            </Message>
          ))}
        </BranchMessages>
        <BranchSelector from="assistant">
          <BranchPrevious />
          <BranchPage />
          <BranchNext />
        </BranchSelector>
      </Branch>
    </div>
  )
}

Installation

pnpm dlx shadcn@latest add branch

Usage

import {
  Branch,
  BranchMessages,
  BranchActions,
} from "@/components/ai-elements/branch"
<Branch defaultBranch={0} onBranchChange={handleBranchChange}>
  <BranchMessages>
    {branches.map((branch) => (
      <Message key={branch.id} from="assistant">
        <MessageContent>{branch.content}</MessageContent>
      </Message>
    ))}
  </BranchMessages>
  <BranchActions />
</Branch>

Examples

Default

What are the key strategies for optimizing React performance?
Ha
Here's the first response to your question. This approach focuses on performance optimization.
AI
"use client"

import { nanoid } from "nanoid"

import {
  Branch,
  BranchMessages,
  BranchNext,
  BranchPage,
  BranchPrevious,
  BranchSelector,
} from "@/components/ai-elements/branch"
import {
  Message,
  MessageAvatar,
  MessageContent,
} from "@/components/ai-elements/message"

const userMessages = [
  {
    id: nanoid(),
    content: "What are the key strategies for optimizing React performance?",
  },
  {
    id: nanoid(),
    content: "How can I improve the performance of my React application?",
  },
  {
    id: nanoid(),
    content: "What performance optimization techniques should I use in React?",
  },
]

const assistantMessages = [
  {
    id: nanoid(),
    content:
      "Here's the first response to your question. This approach focuses on performance optimization.",
  },
  {
    id: nanoid(),
    content:
      "Here's an alternative response. This approach emphasizes code readability and maintainability over pure performance.",
  },
  {
    id: nanoid(),
    content:
      "And here's a third option. This balanced approach considers both performance and maintainability, making it suitable for most use cases.",
  },
]

export function BranchDemo() {
  const handleBranchChange = (branchIndex: number) => {
    console.log("Branch changed to:", branchIndex)
  }

  return (
    <div style={{ height: "300px" }}>
      <Branch defaultBranch={0} onBranchChange={handleBranchChange}>
        <BranchMessages>
          {userMessages.map((message) => (
            <Message from="user" key={message.id}>
              <MessageContent>{message.content}</MessageContent>
              <MessageAvatar
                name="Hayden Bleasel"
                src="https://github.com/haydenbleasel.png"
              />
            </Message>
          ))}
        </BranchMessages>
        <BranchSelector from="user">
          <BranchPrevious />
          <BranchPage />
          <BranchNext />
        </BranchSelector>
      </Branch>

      <Branch defaultBranch={0} onBranchChange={handleBranchChange}>
        <BranchMessages>
          {assistantMessages.map((message) => (
            <Message from="assistant" key={message.id}>
              <MessageContent>{message.content}</MessageContent>
              <MessageAvatar name="AI" src="https://github.com/openai.png" />
            </Message>
          ))}
        </BranchMessages>
        <BranchSelector from="assistant">
          <BranchPrevious />
          <BranchPage />
          <BranchNext />
        </BranchSelector>
      </Branch>
    </div>
  )
}

"use client"
 
import { useState } from "react"
import { Branch, BranchMessages, BranchActions } from "@/components/ai-elements/branch"
import { Message, MessageContent } from "@/components/ai-elements/message"
 
const branches = [
  { id: "1", content: "First response variation..." },
  { id: "2", content: "Second response variation..." },
  { id: "3", content: "Third response variation..." },
]
 
export default function Example() {
  const [currentBranch, setCurrentBranch] = useState(0)
 
  return (
    <Branch defaultBranch={0} onBranchChange={setCurrentBranch}>
      <BranchMessages>
        {branches.map((branch) => (
          <Message key={branch.id} from="assistant">
            <MessageContent>{branch.content}</MessageContent>
          </Message>
        ))}
      </BranchMessages>
      <BranchActions />
    </Branch>
  )
}

Features

  • Multiple Branches: Navigate between different AI responses
  • Navigation Controls: Previous/next buttons for branch switching
  • Branch Indicator: Shows current branch out of total
  • Keyboard Support: Arrow keys for navigation

API Reference

Branch

Container for managing multiple response branches.

PropTypeDefaultDescription
defaultBranchnumber0Initial branch index
onBranchChange(index: number) => void-Callback when branch changes
classNamestring-Custom CSS classes

BranchMessages

Container for branch content.

PropTypeDefaultDescription
childrenReactNode-Messages for each branch

BranchActions

Navigation controls for branches.

PropTypeDefaultDescription
classNamestring-Custom CSS classes