BuildBaseBuildBase

Quotas

Enforce per-plan usage limits for API calls, storage, exports, and more.

Quotas enforce per-plan usage limits — API calls, storage, exports, video renders. Record usage server-side and show quota status in your app.

import BuildBase from '@buildbase/sdk';

const bb = BuildBase({ serverUrl, orgId, getSessionId });

// Record usage and check quota in an API route
export async function POST(req) {
  const usage = await bb.usage.record(workspaceId, {
    quotaSlug: 'api-calls',
    quantity: 1,
    idempotencyKey: req.headers.get('x-request-id'),
  });

  if (usage.available <= 0) {
    return Response.json({ error: 'Quota exceeded' }, { status: 429 });
  }

  return Response.json({ remaining: usage.available });
}

Before you start

Define quota items and assign them to plan versions in the BuildBase dashboard.

Showing quota status

import { useQuotaUsageStatus } from '@buildbase/sdk/react';

function UsageMeter({ workspaceId }) {
  const { status } = useQuotaUsageStatus(workspaceId, 'api-calls');
  if (!status) return null;

  const pct = Math.round((status.consumed / status.included) * 100);

  return (
    <div>
      <p>
        {status.consumed} / {status.included} API calls used
      </p>
      <div className="h-2 rounded bg-gray-200">
        <div
          className="h-2 rounded bg-blue-500"
          style={{ width: `${Math.min(pct, 100)}%` }}
        />
      </div>
    </div>
  );
}

Conditional components

import {
  WhenQuotaAvailable,
  WhenQuotaExhausted,
  WhenQuotaThreshold,
} from '@buildbase/sdk/react';

function APISection() {
  return (
    <>
      <WhenQuotaAvailable slug="api-calls">
        <Playground />
      </WhenQuotaAvailable>

      <WhenQuotaExhausted slug="api-calls">
        <p>Quota exhausted. Upgrade for more.</p>
      </WhenQuotaExhausted>

      <WhenQuotaThreshold slug="api-calls" threshold={80}>
        <p>Over 80% of API calls used.</p>
      </WhenQuotaThreshold>
    </>
  );
}
ComponentPropsRenders when
WhenQuotaAvailableslugHas remaining units
WhenQuotaExhaustedslugFully consumed
WhenQuotaOverageslugIn overage
WhenQuotaThresholdslug, thresholdUsage percentage at or above threshold

Batch recording

For high-throughput scenarios, record multiple events at once:

const result = await bb.usage.recordBatch(workspaceId, {
  items: [
    { quotaSlug: 'api-calls', quantity: 1, idempotencyKey: 'req-1' },
    { quotaSlug: 'storage-mb', quantity: 5, idempotencyKey: 'upload-1' },
  ],
});

Pre-built usage screen

openWorkspaceSettings('usage') shows a built-in usage dashboard with per-quota progress bars.

Next Steps