Checkpoints

npx shadcn@latest add "@assistant-ui/elements-checkpoint-history"

npx assistant-ui@latest init

import { AssistantRuntimeProvider } from "@assistant-ui/react";
import { useChatRuntime, AssistantChatTransport } from "@assistant-ui/ai-sdk";

export default function App() {
  const runtime = useChatRuntime({
    transport: new AssistantChatTransport({ api: "/api/chat" }),
  });

  return (
    <AssistantRuntimeProvider runtime={runtime}>
      {/* your components */}
    </AssistantRuntimeProvider>
  );
}

npx shadcn@latest add "@assistant-ui/elements-checkpoint-history"

A checkpoint list shows the points you could restore to: a label, when it was taken, and how much it touched. It is a plain list with one entry marked current; restoring is a callback you wire up yourself.

Getting started

"use client";

import { CheckpointHistory, type Checkpoint } from "@/components/assistant-ui/elements/checkpoint-history";

const checkpoints: Checkpoint[] = [
  { id: "1", label: "Initial scaffold", at: "10:02", files: 4 },
  { id: "2", label: "Added auth", at: "10:19", files: 7 },
  { id: "3", label: "Fixed layout bug", at: "10:41", files: 2 },
];

export function History() {
  return <CheckpointHistory checkpoints={checkpoints} currentId="3" />;
}

"use client";

import { useState } from "react";

export function History() {
  const [currentId, setCurrentId] = useState("3");

  return (
    <CheckpointHistory
      checkpoints={checkpoints}
      currentId={currentId}
      onRestore={(id) => {
        rollBackTo(id);
        setCurrentId(id);
      }}
    />
  );
}

Anatomy

<div data-slot="checkpoint-history">
  <span>Checkpoints</span>
  <div>
    {/* one row per checkpoint */}
    <span>{/* dot: solid blue = current, hollow ring = ahead, solid gray = behind */}</span>
    <span>{label}</span>
    <span>{/* at · N files */}</span>
    <span>{/* "current" label, or a Restore button */}</span>
  </div>
</div>

The current row is found by matching currentId against checkpoints. Rows that come after it in the array are "ahead": they render at reduced opacity with a hollow dot, since they are only reachable by moving forward again. Rows at or before it are "behind": full opacity, solid gray dot. The current row itself gets a highlighted background and shows the word "current" instead of a button; every other row, ahead or behind, shows a Restore button that only appears on hover or focus. If currentId matches nothing in checkpoints, no row is current: every row reads as behind and every row shows a Restore button. An empty checkpoints array renders only the "Checkpoints" label.

Examples

Checkpoints ahead of the current one

Passing a currentId earlier in the array than the list's end leaves the later entries visible but dimmed, showing what moving forward would give back:

<CheckpointHistory checkpoints={checkpoints} currentId="2" onRestore={onRestore} />

An unrecognized current id

Useful right after a checkpoint is deleted server-side, before the caller has picked a new current one:

<CheckpointHistory checkpoints={checkpoints} currentId="" onRestore={onRestore} />

Restyle the list

The root uses the shared paper surface; the timestamp and file count use mono.

<CheckpointHistory className="max-w-md rounded-3xl" {...rest} />

API reference