AI Usage Quota

AI chats 3

About

Display AI usage and quota information.

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

Code

How AI Usage Quota is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import AIUsageQuota from "@/components/ui/ai-usage-quota";

export default function DemoOne() {
  return (
    <div>
      <AIUsageQuota
        tokenUsage={{
          input: 225_000,
          output: 178_700,
          total: 403_700,
          dailyUsageHistory: [],
        }}
        rateLimit={{
          remaining: 7,
          limit: 100,
          resetAt: new Date(),
          window: "hour",
        }}
        quota={{
          used: 9_590_000,
          limit: 10_000_000,
          resetAt: new Date(),
          period: "month",
        }}
        showUpgradePrompt={true}
        upgradeThreshold={80}
        onUpgrade={() => {
          /* upgrade logic */
        }}
      />
    </div>
  );
}