Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Chat Branching AI Block for Radix UI

A chat that keeps every version of an answer: a pager over the versions, Regenerate adding up to three, editing your message to fork the thread, and a Branch button that switches between branches.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Keep every answer worth keeping, with this branching AI chat for React with Radix UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Forkwright, a thinking partner. Each answer has a pager under it, "1 of 2" between a previous and a next button, over the versions made so far; Regenerate adds the next typed version (three at most, then it says there are no more in this demo) and plays it in. Edit under any of your messages opens its words in a Textarea: Fork from here starts a new branch with that message and its own answer, and leaves the old branch as it was. The Branch button in the top bar is a Popover of radios, "Branch 2 of 2", that switches between them. The Shine Button, the only colored control, sends into the branch you are on and turns into Stop while an answer arrives. It's built from Message, Bubble, Popover, Textarea, Copy Button, Button and Guides, with CSS only.

FAQ

What stays local, and how do I make it real?

Everything. Four typed questions have three versions each, and anything else answers with one. Nothing is sent and no model runs, as the line under the composer says. To wire it for real, send the message in post, store each version your model returns on the exchange (count and at say how many exist and which one is shown) and call it again from regen for the next one.

What exactly does a fork do?

A branch is a list of exchanges. Forking copies the exchanges before the one you edited, adds the edited message with its own answer, and keeps the old list untouched, so switching back shows the original thread with every version. A forked message says "Edited, forked" under it. The demo allows three branches and says so when you reach the limit.

How does the pager behave?

Previous and next move through the versions of that one answer without replaying them, and each says "Version 2 of 3" in the polite status line. At either end the button stays focusable and says "This is the first version" or "This is the newest version" instead of doing nothing. While a version is arriving the pager is hidden but keeps its room, so nothing moves.

How do I switch branches from the keyboard?

The Branch button opens a small popover with one radio per branch, named by the message that forked it. Arrow keys move between radios, a pointer press picks and closes, and the thread changes at once. Switching is held back while an answer is arriving, with a line that says so.

Is it usable with a keyboard and a screen reader?

The log is a focusable region announced as a log. Edit is a button named "Edit your message", the edit field has a hidden label, Enter forks and Escape cancels with focus back on Edit. Previous and next have names, and one polite line says what changed.

How does it look on a phone?

The same single column. The Branch button keeps its place in the top bar, the pager and actions stay in one row under each answer, and the edit field takes the full width of the log. The window keeps its height and only the log scrolls.