Skip to content

Settings & Usage

Rate Limits

Requests and tokens per minute as refilling buckets, with a retry-after countdown and queued calls when throttled.

2 variantsMIT

Preview

Rate limits

opus-5.5 · Tier 3

Healthy
  • Requests / min4,000 of 4,000 left

    Full

  • Input tokens / min2.0M of 2.0M left

    Full

  • Output tokens / min400k of 400k left

    Full

Installation

Copies the component into components/ui and installs its dependencies and theme tokens.

pnpm dlx shadcn@latest add https://tuffui.com/r/rate-limits.json

Usage

Pass your own data and wire the callbacks to your agent runtime.

import { RateLimits } from "@/components/ui/rate-limits";

// Fill it from the rate-limit headers on each API response.
export function Limits({ headers, queue, retryAfter }: Props) {
  return (
    <RateLimits
      data={{
        model: "opus-5.5 · Tier 3",
        limits: [
          {
            id: "req",
            label: "Requests",
            limit: Number(headers["requests-limit"]),
            remaining: Number(headers["requests-remaining"]),
            resetsInMs: msUntil(headers["requests-reset"]),
          },
          // …input and output tokens the same way
        ],
        queued: queue, // calls your client is holding back
        retryAfterMs: retryAfter * 1000, // from a 429's retry-after header
      }}
      onRetry={() => client.flushQueue()}
    />
  );
}

Props

PropTypeDefaultDescription
data*{ model?: string; limits: RateLimit[]; queued?: QueuedCall[]; retryAfterMs?: number }—One gauge per limit. retryAfterMs (or a bucket at zero) switches to the throttled state; both timers count down locally.
onRetry() => void—Called by Retry now, which unlocks when the retry-after countdown ends.
classNamestring—Extra classes for the root element.
type RateLimit = {
  id: string;
  label: string; // shown as "<label> / min"
  limit: number;
  remaining: number;
  resetsInMs: number;
};

type QueuedCall = { id: string; label: string; tokens?: number };