Branch

Branch keeps every version of a reply after it is regenerated. The person can step back and forth with the arrows and read "2 / 3" to know where they are. Regenerate adds a new version instead of replacing the old one, so nothing is lost.

Installation

Branch is built with the Message, Bubble and Button components. The generating state uses the shimmer utility.

Usage

Keep the versions in a list and the visible one in an index. The code above is the whole pattern: copy it and swap regenerate for a call to your backend.

• Adding a version moves the index to it, so the new reply shows straight away.
• Disable the arrows at the ends of the list, and while a reply is generating.
• Put the counter in an aria-live="polite" region so a screen reader announces the new position.
• The regenerate button gives feedback while it works: it spins and the reply area shimmers.

AI SDK

With @ai-sdk/vue, call regenerate() on the Chat and keep the replaced assistant messages yourself. Before you regenerate, push the last assistant message into branches; when the new message finishes, push it too, and set index to the last branch.

const chat = new Chat({});

const branches = ref<UIMessage[]>([]);
const index = ref(0);

async function regenerate() {
  const last = chat.messages.at(-1);
  if (last?.role === "assistant" && !branches.value.includes(last)) branches.value.push(last);

  await chat.regenerate();

  branches.value.push(chat.messages.at(-1)!);
  index.value = branches.value.length - 1;
}

Accessibility

• The arrows and the regenerate button are real buttons with labels: "Previous response", "Next response" and "Regenerate response".
• The counter is announced politely when it changes.
• Disabled arrows keep their place so the layout does not jump.