Checkpoint

Checkpoint is a point in the conversation you can return to. It is a Marker after a turn, with a Restore button. Restore keeps that turn and drops every message after it.

Installation

Checkpoint is built with the Marker and Button components.

Usage

Render a marker after the turn, with a button that restores it.

<template>
  <UiMarker variant="separator">
    <UiMarkerContent class="inline-flex items-center gap-2">
      {{ label }}
      <UiButton size="xs" variant="outline" @click="restore"> Restore </UiButton>
    </UiMarkerContent>
  </UiMarker>
</template>

See Marker.

AI SDK

Restore replaces the thread with the messages up to and including that turn. Every later turn is removed. Send a new message to continue from there.

const index = chat.messages.findIndex((message) => message.id === messageId);
chat.messages = chat.messages.slice(0, index + 1);

Stream the checkpoint as a data part on the agent's turn. Send the same id again only when you mean to update that checkpoint.

const stream = createUIMessageStream({
  execute: async ({ writer }) => {
    writer.write({
      type: "data-checkpoint",
      id: "rename",
      data: { label: "Button renamed" },
    });
  },
});

const checkpoint = message.parts.find((part) => part.type === "data-checkpoint");