Sources and Doubt

By the Syncfusion DevTutorials team · Last updated October 26, 2026

A confident wrong answer looks exactly like a right one. Add citation chips that link only to retrieved passages, a "not sure" state, and a scope note.

Why a Wrong Answer Looks Right

Trust cue = something on screen that helps the user decide how much to trust an answer.

In this lesson, you will add three trust cues to an AI answer: citation chips, a "not sure" state and a scope note.

A support agent asks: "What do we owe Asha for the late parcel?"

The AI replies: "We refund her shipping cost, and as a Gold member she also gets a free gift."

The first part is true. The second part is made up. But both parts read the same way: calm, clear and sure.

Press Play, or use Next to go one step at a time.

• Frame 1: no trust cues. The made-up gift looks as real as the refund.
• Frame 2: a chip for every source the model names. One chip points to a passage the app never read.
• Frame 3: chips only for passages that were retrieved. The gift now says "No source found".

Simple lesson: a wrong AI answer has no tell. The interface has to add one.

A Real-World Example

Think about a new colleague who answers every question at once, in the same calm voice.

Some answers come from the handbook. Some are guesses. You cannot tell which.

A good colleague says:

• "It's in the handbook, page 12." That is a citation.
• "I think so, but check with finance." That is a "not sure" state.
• "That's a legal question. Ask the legal team." That is a scope note.

AI answers need the same three cues.

Click the button. The Build tab plays the confident wrong answer through the naive interface.

• The screen: the gift claim looks as real as the refund.
• Events from the agent: the cite events name P2 and P9.
• The checks: P9 was never retrieved, and nothing on screen says so.

Simple lesson: if the screen treats every claim the same, users trust every claim the same.

What You Will Learn

In this lesson, you will learn:

1. Why confident wrong answers are dangerous.
2. How to link each claim to the passage behind it.
3. Why a chip must only link to retrieved passages.
4. When to show a "not sure" state.
5. When to show a scope note.

Citation Chips

Citation chip = a small label after a claim that names its source. Clicking it shows the passage.

Link Only What Was Retrieved

Retrieved passage = a piece of text the app really looked up for this answer.

A model can write "according to Loyalty terms §7" even when the app never retrieved that page. A chip that trusts the model's word looks real and links to nothing.

So check every citation against the list of retrieved passages:

Step through both frames.

• Frame 1: "We refund her shipping cost" cites P2. P2 was retrieved, so the chip can show real text.
• Frame 2: "she also gets a free gift" cites P9. P9 was never retrieved, so the chip must say so.

The Code

The chip looks up the passage in what was retrieved, not in what the model said:

function CitationChip({ passageId, retrieved }: { passageId: string; retrieved: Record<string, Passage> }) {
  const p = retrieved[passageId];
  if (!p) return <span className="chip warn">No source found</span>;
  return <a className="chip" href={p.url}>{p.title}</a>;
}

Simple lesson: a chip links to retrieved text, or it says no source was found.

Say When You Are Not Sure

Confidence

Confidence = a number from the agent, from 0 to 1, for how sure it is.

Where it comes from depends on your stack. Some agents score their own answer. Some apps score how well the answer matches the retrieved text. In this lab, each scenario's agent sends a confidence with its answer.

The "Not Sure" State

When confidence is low, show a banner that says what to check:

• "Not sure: the courier data is from yesterday. Check before you promise a date."

A good banner names the reason and the next step. "This may be wrong" alone does not help.

Confidence Does Not Catch Everything

Look back at the free gift. Its confidence was high. A "not sure" banner would not fire.

That is why you need both cues:

• Chips catch claims with no real source.
• The banner catches answers the agent itself doubts.

Simple lesson: show doubt when the agent is unsure, and show sources for every claim.

Say What the App Does Not Cover

Scope = the topics your app is meant to answer.

The order-support app covers orders, deliveries and refunds. But a model will answer anything. Ask it about suing a courier, and it gives legal advice in the same calm voice.

A scope note tells the user the question is outside the app, and where to go instead.

Step through both frames.

• Frame 1: a shaky delivery date. After: the "not sure" banner says what to check.
• Frame 2: a legal question. After: the scope note sends the user to the legal team.

Lab Exercise: Add Trust Cues

Your task: change the Lesson 3 choices in the Build tab so all four scenarios pass. Then press Check all scenarios.

Click the button and open the Build tab.

• Citation chips: pick "Chips only for passages that were retrieved".
• The four scenarios: good sources, the confident wrong answer, the shaky answer and the legal question.
• A failing check: names the claim or the cue that is missing.

Simple lesson: chips, a "not sure" banner and a scope note, each for its own job.

What Changes per Framework

Build It in React

In the Code tab, each cite event names a passage. Look it up in agent.retrieved. If it is there, draw a link with its title. If it is not, say "No source found". Never link to a passage the agent did not retrieve.

const p = agent.retrieved[c.passage];
return p ? <a href={p.url}>{p.title}</a> : <span>No source found</span>;

The done event carries confidence and inScope. Use them for the "not sure" note and the scope note.

TL;DR

1. Trust cue = something on screen that helps the user decide how much to trust an answer.

2. Citation chip = a label that links a claim to its source.

   • Link only to passages that were retrieved.
   • Otherwise say "No source found".
3. "Not sure" state = a banner on low-confidence answers that says what to check.
4. Scope note = says the question is outside the app, and where to go.
5. Both cues = confidence can be high on a wrong answer, so chips still matter.

Common mistakes

Check Your Understanding

Exercises

What to Remember

• A wrong AI answer reads as calmly as a right one.
• Link each claim to the passage behind it.
• Link only to passages that were retrieved. Otherwise say "No source found".
• Show a "not sure" banner on low confidence, and say what to check.
• High confidence can still be wrong, so you need chips too.
• Add a scope note when a question is outside the app.

Further Reading

• People + AI Guidebook: Explainability and Trust, by Google PAIR: how much to explain, and when.
• Guidelines for Human-AI Interaction, by Microsoft Research: see "Make clear how well the system can do what it can do".

Next: Stop, Edit, Retry, Undo, where you give users control over a runaway answer, the wrong question, a weak first try and an applied suggestion.