Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA stacked bar showing how much of a model's context window each part of a conversation uses, with a compact ring that opens it in a popover.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
| Prop | Type | Default | Description |
|---|---|---|---|
segments | TokenSegment[] | - | Where the tokens go. Order sets the stacking and the legend. |
limit | number | - | Size of the context window in tokens. |
title | string | "Context window" | Heading. |
warnAt | number | 80 | Percent used at which the meter switches to the warning state. |
cost | string | - | Cost of the current context, already formatted, such as "$0.21". |
action | ReactNode | - | Shown in the warning and full states, such as a "Compact" button. |
Also accepts all <div> props.
Takes segments, limit, warnAt, cost, action and title like TokenMeter, plus:
| Prop | Type | Default | Description |
|---|---|---|---|
side | "top" | "bottom" | "top" | Which side of the pill the popover opens on. |
Also accepts all <button> props.
| Field | Type | Description |
|---|---|---|
label | string | What these tokens are. Also used as the key. |
tokens | number | Token count. |
reserved | boolean | Reserved space, such as room for the reply. Drawn hatched, not counted as used. |
formatTokens(n) (12400 to "12.4k") and estimateTokens(text) (about four characters per token) are also exported.
The bar has role="meter" with a value text such as "164k of 200k tokens used, 82%. Nearing the limit, 36k left." The warning and full states are announced through role="status".