React AI Branch

Ever regenerate an AI response and want to flip between versions? That's what Branch does. When users hit "regenerate," you don't have to throw away the old response—store both and let them navigate with Previous/Next buttons. Shows "1 of 3" so they know how many versions exist. The selector only appears when there's more than one branch, so it stays hidden for normal single-response messages. Wraps around your existing Message components without changing their structure. Great for chat apps where users might want to compare different AI responses or go back to an earlier version.

Branch preview

Installation

npx shadcn@latest add https://www.shadcn.io/registry/branch.json

npx shadcn@latest add https://www.shadcn.io/registry/branch.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/branch.json

bunx shadcn@latest add https://www.shadcn.io/registry/branch.json

Related Components

FAQ