Function Call Receipt React component
A clear record of one tool call by an AI agent: what went in, what came back, how long each part took, and what it cost, set out like a receipt.
About the Function Call Receipt component
Function Call Receipt makes a single tool call easy to check. It shows what the agent sent, what came back and where the time went, the way a receipt itemises a purchase.
Copy either side as JSON for debugging, or run the call again. It's useful anywhere people need to trust what an agent actually did.
When to use it
Use it in agent traces, audit views and developer tools.
Hide secrets before passing data in, since everything is shown as it arrives.
Installation
Add the Function Call Receipt component to your project with the shadcn CLI. It lands in components/function-call-receipt.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/function-call-receiptProps
<FunctionCallReceipt /> accepts 8 props, all optional. It also accepts the usual <section> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| name The function that was called. | string | "refund_order" |
| caller Who called it and when. | string | "Called by Tally at 13:20" |
| input | Record<string, unknown> | DEFAULT_INPUT |
| output | Record<string, unknown> | DEFAULT_OUTPUT |
| phases | { label: string; ms: number }[] | DEFAULT_PHASES |
| lines Totals for the foot of the receipt. | { label: string; value: string }[] | DEFAULT_LINES |
| onReplay | () => void | — |
- theme"dark" | "light"Default: "dark"
- name
The function that was called.
stringDefault: "refund_order" - caller
Who called it and when.
stringDefault: "Called by Tally at 13:20" - inputRecord<string, unknown>Default: DEFAULT_INPUT
- outputRecord<string, unknown>Default: DEFAULT_OUTPUT
- phases{ label: string; ms: number }[]Default: DEFAULT_PHASES
- lines
Totals for the foot of the receipt.
{ label: string; value: string }[]Default: DEFAULT_LINES - onReplay() => void
Function Call Receipt FAQ
- Does Run this call again call anything?
- No. onReplay tells you, and your app makes the real call.
- Are long values cut off?
- No. The code scrolls sideways inside its box.
- Can I change the rows at the bottom?
- Yes. Pass any labels and values in lines.
- Does switching tabs change the height?
- No. Both views share one grid cell.
