Budget Guard

Component 5

About

A spend/token/call budget tracker for an AI agent run that shows a soft warning threshold and a hard stop limit as distinct markers on a progress bar, so a team can tell a notification apart from an actual cap.

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

Code

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

Usage.tsx

"use client";

import { BudgetGuard } from "@/components/ui/budget-guard";

const money = (value: number) => `£${(value / 100).toFixed(2)}`;

export default function BudgetGuardDemo() {
  return (
    <div className="w-full max-w-xl">
      <BudgetGuard
        budgets={[
          {
            id: "spend",
            label: "Spend",
            used: 2180,
            soft: 2000,
            hard: 2500,
            format: money,
          },
          {
            id: "tokens",
            label: "Tokens",
            used: 184_000,
            soft: 400_000,
            hard: 500_000,
          },
        ]}
      />
    </div>
  );
}