ClaimCheck

Stable

A reply with the sentences no source backs up marked in place.

Also known as fact check, grounding check, hallucination check

Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.

2 claims have no source. Check them before you rely on them.

Orders slowed after Tuesday's update. The tax check adds about 0.5 s to every order, and most shoppers left before paying. Rolling back would restore last week's speed.

<ClaimCheck
  segments={[
    "Orders slowed after Tuesday's update. ",
    { id: "c1", text: "The tax check adds about 0.5 s to every order", status: "unsupported", note: "No source measures it." },
    ", and ",
    { id: "c2", text: "most shoppers left before paying", status: "disputed", note: "Order times shows checkouts went up." },
    ".",
  ]}
  onAskSource={askForSource}
  onRemove={removeClaim}
/>

Press a marked claim to see why it was flagged. Take it out or ask for a source.

Usage Code Design Accessibility

When to use it

Helps people see which parts of an AI reply they should check before relying on them, without making them read every source.

Made of: Summary line · Reply text · Marked claims · Note with actions

Use it for

Replies that make factual claims a check could not match to a source.
Claims that a source contradicts.
Reports and summaries people will act on or share.

Not for

Showing the sources that do back a reply up: use SourceList.
How sure the AI is about the whole reply: use ConfidenceIndicator.
A numbered link to one source: use CitationMarker.

Do and avoid

1 claim has no source. Check it before you rely on it.

Orders slowed after Tuesday's update. The tax check adds 0.5 s to every order.

Do. Only the claim no source backs up is marked, and a line above says so.

3 claims have no source. Check them before you rely on them.

Orders slowed after Tuesday's update. Tuesday's update added a tax check. Rolling back would help.

Avoid. Marking every sentence means nothing stands out, and people stop reading the marks.

Do

Flag only claims a check actually failed to match.
Say in the note why it was flagged.
Offer a way to fix it: ask for a source, or take it out.

Avoid

Do not mark every sentence. Then nothing stands out.
Do not use red for unsupported claims. Save it for claims a source contradicts.
Do not hide the summary line. People skim.

On a phone

Marked claims wrap with the text like ordinary words.
The note opens under the whole reply, full width, so it never covers the text.

Seen in products

Gemini Apps can show related sources for parts of a response, so people can check what the reply says.

Gemini Apps Help, view related sources (opens in a new tab)

Properties

Prop	Type	Default	Description
segmentsrequired	ClaimSegment[]	none	The reply as plain text and flagged claims, in reading order. A claim is { id, text, status: "unsupported" \| "disputed", note? }.
onAskSource	(id: string) => void	none	Asks the assistant to back the claim up. The button is hidden when omitted.
onRemove	(id: string) => void	none	Takes the claim out of the reply. The button is hidden when omitted.
labels	ClaimCheckLabels	none	Overrides summary(n), unsupported, disputed, askSource, remove and close.
className	string	none	Extra classes on the root.

"Show code under the preview gives the code for the example on the stage."

States

States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.

nothing flagged: Just the reply, with no summary line.
unsupported: A dotted amber underline and a warning mark: no source backs the claim up.
disputed: A dotted red underline: a source says otherwise.
note open: The pressed claim gets an amber fill and its note opens under the reply with Ask for a source and Take it out.
focus: Each warning mark shows a focus ring on keyboard focus.

Tokens

Change one of these and every part that uses it follows.

--attention
--attention-soft
--attention-fg
--attention-border
--danger
--danger-fg
--radius-control

Two claims flagged