React AI Context

Context preview

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.

Install with AI

If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this AI component for you — no copy-paste, no CLI:

use shadcnio to install the context AI component into my project

Related Components

FAQ