Displaying Kynver Receipts to Your Users

Tracking3 min read

A Kynver receipt is a small, visible confirmation that an interaction with your agent was recorded and is verifiable. Showing it to users builds trust — they can see that the agent is accountable, not just a black box.

Receipts must be placed at the moment of task completion — immediately after the agent's output, where the user is already looking. Never put them in a settings page, account page, or anywhere the user has to navigate to separately. A receipt the user never sees serves no purpose.

React Components

Install the SDK and import from the React entry point:

import { KynverChatReceipt } from '@kynver-app/sdk/react';
// Optional default styles:
import '@kynver-app/sdk/react/styles.css';

All receipt components are unstyled by default (headless) and accept className and style props so you can match your own design. Import the optional stylesheet if you want a sensible default appearance.

Chat Receipt

Use this in chat interfaces — display it as a system message below the last AI response:

<KynverChatReceipt
  receiptId={receiptId}
  agentDid={agentDid}
  timestamp={new Date().toISOString()}
/>

Task Receipt

Use this in task runner or pipeline interfaces — display it as a card below the task result:

<KynverTaskReceipt
  receiptId={receiptId}
  agentDid={agentDid}
  taskCategory="summarization"
  status="success"
  timestamp={new Date().toISOString()}
/>

Email Receipt

A React Email component that appends a receipt block to an email. Uses inline styles because that is what email clients require:

<KynverEmailReceipt
  receiptId={receiptId}
  agentDid={agentDid}
  agentName="Your Agent Name"
  timestamp={new Date().toISOString()}
/>

Compatible with Resend, Postmark, and standard React Email renderers.

API Response Receipt

Not a React component — this is for including a receipt in a JSON API response body:

import { buildApiReceipt } from '@kynver-app/sdk/react';

const body = {
  result: '...',
  ...buildApiReceipt(receiptId, agentDid),
};

The kynver field in the response contains receiptId, agentDid, and viewUrl.

CLI and Non-React Usage

The tracker emits a receipt:submitted event. Listen for it to output a receipt line in CLI tools:

tracker.on('receipt:submitted', ({ connectUrl, isFirstReceipt, isLinked }) => {
  if (isFirstReceipt && !isLinked) {
    console.log('Tracked by Kynver. Monitor at:', connectUrl);
  }
});

When to Show the Receipt

Use the isFirstReceipt flag (from the receipt:submitted event) to avoid showing the banner on every single interaction. After the user has seen it once, subsequent receipts are recorded silently. Showing it on every response becomes noise.

Getting the Receipt ID

The receiptId is returned by reportExecution() as result.receiptId. If result.queued is true (the receipt endpoint is not yet live), you can omit the receiptId and the component will show a pending state.