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

TokenConfidence underlines each token by how confident the model was. The text itself is the chart, and confidence
resolves to three discrete tiers rather than a continuous ramp. Confident tokens get no mark at all, so reading stays
primary and only the uncertain words draw the eye. The two flagged tiers differ in stroke as well as color: unsure is a
solid underline, guessing a dotted one.

```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.

## Try it

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

<TokenConfidence
  data={tokens}
  tiers={[0.50, 0.80]}
/>
```

## When to use it

Use it for LLM answers in chat or transcripts, and for flagging text a reader should review. To audit exact
probabilities use [CalibrationStrip](/docs/charts/calibration-strip); for a single score use 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 and the sentence renders as plain, unmarked text. No marks
means no word here needs a second look.

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

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

## Four homes

**In a sentence**

```tsx
<p>
  Model answer confidence{" "}
  <span className="mc-inline">
    <TokenConfidence data={tokens} summary={false} />
  </span>{" "}
  — high on facts, dips on dates.
</p>
```

**In a table cell**

```tsx
<td>
  <TokenConfidence data={tokens} />
</td>
```

**In a KPI card**

```tsx
<div className="kpi">
  <span className="figure">98%</span>
  <TokenConfidence data={tokens} />
</div>
```

**In a tab header**

```tsx
<button className="tab">
  facts <TokenConfidence data={tokens} />
</button>
```

## 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. Hovering or focusing a flagged token also floats that reading over it as a chip (`guessing 0.22`): the
underline says the token is flagged, the chip gives its tier and number. `readout={false}` drops the chip.

## 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).