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>
</>
);
}| Component | Props | Renders when |
|---|---|---|
WhenQuotaAvailable | slug | Has remaining units |
WhenQuotaExhausted | slug | Fully consumed |
WhenQuotaOverage | slug | In overage |
WhenQuotaThreshold | slug, threshold | Usage 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
- Feature Flags — Gate features by plan or user.
- Billing — Subscription plans and checkout.