React AI Context

Ever wonder how much that conversation is costing you? This component shows token usage and costs right in the UI. There's a little circular progress indicator that shows how much of your context window you've used, and when you hover over it, you get the full breakdown—input tokens, output tokens, reasoning tokens (for o1-style models), cached tokens, and actual dollar costs. It uses tokenlens under the hood to calculate costs for pretty much any model. Super useful for power users who want to see what they're spending, or for apps where you need to warn users before they hit the context limit. Keeps everyone honest about LLM costs.

Context preview

Installation

npx shadcn@latest add https://www.shadcn.io/registry/context.json

npx shadcn@latest add https://www.shadcn.io/registry/context.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/context.json

bunx shadcn@latest add https://www.shadcn.io/registry/context.json

Related Components

FAQ