TokenConfidence
TokenConfidence underlines generated text by per-token confidence, in three tiers, leaving confident tokens unmarked.
- encodes
- typographic underline tier (color + thickness + style)
- precision
- low by design
- nodes
- 1 span per token (HTML, not SVG)
- collection
- Frontier
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.
Install
import { TokenConfidence } from "@microcharts/react/token-confidence";// tokens — real values under “Sample data” below<TokenConfidence data={tokens} title="Model answer" />Sample data
const tokens = [ { 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 },];Try it
Tab in, then use ←/→ to rove the flagged tokens — each announces its tier and confidence.
import { TokenConfidence } from "@microcharts/react/token-confidence/interactive";// tokens — real values under “Sample data” below<TokenConfidence data={tokens} tiers={[0.50, 0.80]}/>Sample data
const tokens = [ { 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 },];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; 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
Edge cases
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.
An empty data array renders nothing and reports "No tokens." to assistive tech.
Four homes
Model answer confidence — high on facts, dips on dates.
| facts | 98% | |
| dates | 71% | |
| names | 88% |
Preview uses the public chart API only. When an interactive twin exists, it swaps in with the same props and no entrance motion - code samples stay on the static import. Placement recipes: Composition, Sizing.
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 | Notes |
|---|---|---|
| data* | { 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.