Cost Meter

AI chats 30

About

AI run cost split by model or task and compared against an optional session budget.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Cost Meter to your project and fits it to your theme.

Code

How Cost Meter is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import CostMeter from '@/components/ui/cost-meter'

export default function Demo() {
  return (
    <CostMeter
      budget={0.1}
      className="w-full max-w-lg"
      items={[
        {
          cost: 0.0284,
          id: 'reasoning',
          label: 'Reasoning',
          tokens: 18240,
        },
        {
          cost: 0.0162,
          id: 'generation',
          label: 'Response generation',
          tokens: 4620,
        },
        {
          cost: 0.0078,
          id: 'tools',
          label: 'Tool calls',
          tokens: 2380,
        },
      ]}
    />
  )
}