# TokenConfidence (/docs/charts/token-confidence)

TokenConfidence answers "which parts of this generated text should I double-check?". The text itself is the chart:
confidence becomes a typographic underline beneath each token, in three discrete tiers — confident tokens get no mark at
all, so reading stays primary and only the uncertain words draw the eye.

```tsx
import { TokenConfidence } from "@microcharts/react/token-confidence";

<TokenConfidence
  data={[
    { token: "The", confidence: 0.98 },
    { token: " Treaty", confidence: 0.93 },
    { token: " of", confidence: 0.99 },
    { token: " Westphalia", confidence: 0.71 },
    { token: " was", confidence: 0.96 },
    { token: " signed", confidence: 0.9 },
    { token: " in", confidence: 0.97 },
    { token: " 1648", confidence: 0.44 },
    { token: ", ending the Thirty", confidence: 0.63 },
    { token: " Years' War", confidence: 0.85 },
    { token: " over", confidence: 0.31 },
    { token: " a decade", confidence: 0.38 },
    { token: ".", confidence: 0.99 },
  ]}
  title="Model answer"
/>
```

## Install

```tsx
import { TokenConfidence } from "@microcharts/react/token-confidence";

<TokenConfidence data={tokens} title="Model answer" />
```

Setup (package + stylesheet): [Quickstart](/docs/quickstart#set-up-with-an-ai-agent) or paste [`/agent-setup.md`](/agent-setup.md) into your agent.


## When to use it

- **Good for** — LLM answers in chat or transcripts, flagging text to review.
- **Avoid for** — numeric confidence auditing (use CalibrationStrip) or a single score (Delta).

## Sizing

The text is the chart, so it inherits the surrounding font size — there is no `width`/`height`. Set
`style={{ fontSize }}` or let it flow inline with your prose.

## Variants

```tsx
<TokenConfidence
  data={[
    { token: "Likely", confidence: 0.92 },
    { token: " Paris", confidence: 0.62 },
    { token: ", maybe", confidence: 0.3 },
    { token: " Lyon", confidence: 0.28 },
  ]}
  legend
/>
```

## Edge cases

```tsx
<TokenConfidence
  data={[
    { token: "The", confidence: 0.95 },
    { token: " answer", confidence: 0.99 },
    { token: " is", confidence: 0.97 },
    { token: " Paris", confidence: 0.9 },
  ]}
/>
```

Every token clears the `hi` threshold, so nothing is flagged — the sentence renders as plain, unmarked text. That
absence of marks is the finding: nothing here needs a second look.

```tsx
<TokenConfidence data={[]} />
```

An empty `data` array renders nothing and reports **"No tokens."** to assistive tech.


## Why this default

The tiers are discrete — confident, unsure, guessing — never a continuous gradient, because people calibrate
categorically: a smooth colour ramp reads as noise, but "double-check this word" reads instantly. Confident tokens carry
no mark at all, and the two flagged tiers differ in **stroke style** as well as colour — unsure is a solid underline,
guessing a dotted one — so the tier never depends on colour alone. For auditing exact probabilities, reach for
[CalibrationStrip](/docs/charts/calibration-strip) instead.

## Accessibility

The accessible name is the tier tally — **"4 tokens: 1 confident, 1 unsure, 2 guessing."** The interactive entry gives
each flagged token a roving tab stop; ←/→ move between them (skipping confident tokens), announcing each one's tier and
confidence.

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `data` (required) | `{ token, confidence }[]` | Tokens + confidences. |
| `tiers` | `readonly [number, number]` | lo/hi thresholds — the only tuning. |
| `show` | `"flagged" \| "all"` | All also hairlines confident tokens. |
| `legend` | `boolean` | Appends the 1-line inline key. |

Plus the shared grammar — `data`, `domain`, `color`, `title`, `summary`, `format` — and the layout props (`width`, `height`, `className`, `style`) that every chart accepts. Interactive entries also share `animate` and `live`, and — wherever a chart has more than one navigable unit — `onActive`, `onSelect`, `selectedIndex` and `defaultSelectedIndex`; and — wherever the chart shows a hover value — `readout`. See [the shared grammar](/docs/quickstart#the-shared-grammar).