AI provenance
Pattern for showing where AI-generated content comes from.
Problem
In data products, people can't tell which values come from the source and which an AI produced. So they either trust everything or nothing.
Solution
Mark every AI-generated value with an AI label. Opening it shows why the value was produced and where it came from, with accept, reject and undo. See the risk alert table for a working example.
Components used
The AI label is built inside the risk alert table. It is not a design system component yet. It uses:
- Button: Accept, Reject and Undo
- IconButton: closes the popup
- The Base UI Popover for the popup, used directly
- The
color.aitokens for the label:color.ai.label-background,color.ai.label-contentandcolor.ai.border
Accessibility
- The AI label is a button. Its name starts with "AI", then says what it marks and whether it has been reviewed, for example "AI sentiment, not reviewed". After a decision it says "accepted" or "rejected".
- The popup is marked as a dialog and named by its title, for example "AI-rated sentiment".
- After Accept or Reject, focus moves to Undo. After Undo, focus moves back to Accept.
- Escape closes the popup and focus goes back to the label.
- Rejecting a value changes the cell: a summary shows the source's own title, and a sentiment shows "Not rated".
- Automated tests check all of the above, and run axe with the popup open in both themes and both densities.