Ai Usage Card
AI token usage panel with a monthly progress bar, a per feature breakdown, and the overage policy stated in the same view.
AI token usage panel with a monthly progress bar, a per feature breakdown, and the overage policy stated in the same view.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
AI Usage Card is the token consumption panel for the current billing period, Jun 1 to Jun 13, 2026. A Progress bar shows 1,384,210 of 2,000,000 tokens used, 69% of the monthly allowance. Below it a ruled breakdown lists Chat (842,100), Autocomplete (391,440), and Search (150,670) each with a mini bar scaled to its share. A shaded overage policy box states the rule plainly: AI features slow down at the cap but the workspace is never cut off mid-task, responses resume at full speed when the billing period resets on Jul 1.
PLAN_TOKENS, USED_TOKENS, and the breakdown array are named constants; the fmt helper formats numbers with locale commas. Showing the overage rule next to the meter is what stops the mid-project support ticket when the counter hits 100%.
Reach for this block on the billing or AI settings page, wired to your usage endpoint and billing period dates. Pair it with the model picker card so admins can tune spend in one place.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the monthly AI quota panel. Other usage shapes:
Tip: always state the overage policy in the same view as the meter; a bare progress bar next to the cap is an anxiety machine.