Morpha UI

Checkpoint

An interactive restore point in a conversation stream.

Overview

Checkpoint marks a point in the thread the user can rewind to — an icon, a pressable Restore checkpoint trigger and a trailing hairline that closes the row, in the style of VS Code's Copilot checkpoints. Where Marker is the thread's passive meta line (dates, system events), Checkpoint is a control: wire its trigger to your restore logic. Both speak the same type-caption voice, so they sit naturally in one transcript.

Scaffold the settings page.
Done — tabs, cards and form controls are in place.
Now try a sidebar layout instead.
Switched to a sidebar — though the tabs version felt tighter.
$ npx morpha-ui add checkpoint

Usage with the AI SDK

Restore by slicing the useChat messages back to the checkpoint's index:

const { messages, setMessages } = useChat();

<Checkpoint>
  <CheckpointIcon />
  <CheckpointTrigger
    tooltip="Rewind the conversation to this point"
    onClick={() => setMessages(messages.slice(0, checkpoint.messageIndex + 1))}
  >
    Restore checkpoint
  </CheckpointTrigger>
</Checkpoint>

Installation

Distributed via the Morpha CLI: npx morpha-ui add checkpoint. Ported from AI Elements onto the kit's Button, Separator and Tooltip.

npx morpha-ui add checkpoint

API Reference

Prop

Type

Conversation

The AI Elements conversation surface on the kit's scroll engine.

Response

The assistant's streamed markdown surface, on the kit's type scale.

On this page

OverviewUsage with the AI SDKInstallationAPI Reference