Result Receipt

When to useCopy Anchor Link

• The agent just completed an action in an external system (paused ads, updated a record, sent an invoice), and the user should see exactly what changed.
• The system lets the action be reversed for a while, and the user should be able to undo it.

It's the counterpart of Change Preview: the preview asks before acting, the receipt reports after.

When not to useCopy Anchor Link

• The action hasn't run yet. Use a Change Preview to ask first.
• The action failed. Say what went wrong in text, or use a Callout.
• Nothing changed. Say so in a sentence.

How the agent should use itCopy Anchor Link

• Only show it after the action's tool returned success, and fill items from that result.
• Write the title in the past tense, with the count: "Paused 3 ads".
• Only set undo when the system can really reverse the action, and set until to the system's real deadline.
• On undo, reverse the action with the system's own undo, then confirm in text.

UndoCopy Anchor Link

With undo.until, the Undo button shows the time left ("Undo 4:59"), updating every second. At zero the button is disabled and the footer says "Undo expired". Without until, Undo stays available. After a press, the footer shows "Undo requested" until the host reports back.

The countdown isn't announced every second: screen readers hear it as the Undo button's description, and only "Undo expired" and "Undo requested" are announced.

InstallationCopy Anchor Link

npx shadcn@latest add https://your-site.com/r/result-receipt.json

UsageCopy Anchor Link

import { tool } from "ai"
import { resultReceiptTool } from "@/components/genui/result-receipt.schema"

const tools = {
  // Without undo, add `execute: async () => ({ shown: true })`.
  [resultReceiptTool.name]: tool({
    description: resultReceiptTool.description,
    inputSchema: resultReceiptTool.inputSchema,
  }),
}

<ResultReceipt
  {...part.input}
  status={part.state === "input-streaming" ? "streaming" : undefined}
  result={part.state === "output-available" ? part.output : undefined}
  onResult={(result) =>
    addToolResult({ tool: "show_receipt", toolCallId: part.toolCallId, output: result })
  }
/>

When the user presses Undo, the agent receives:

{ action: "undo" }

With LangGraphCopy Anchor Link

Push it from a graph node with ui.push({ name: "show_receipt", props: { toolCallId, ...args } }, { message }), and render the thread's UI messages with the Renderer.

Restoring from historyCopy Anchor Link

Pass the stored result back as result. The receipt shows "Undo requested" and never calls onResult again. A receipt reloaded after its until deadline, without an undo, shows "Undo expired".

<ResultReceipt
  {...part.input}
  result={part.state === "output-available" ? part.output : undefined}
/>

SchemaCopy Anchor Link

Host props: status (streaming, ready, undone), onResult, result and className.

SourceCopy Anchor Link