Prebuilt billing UI
Narev ships headless React components you embed in your frontend to show real-time usage, remaining credits, and self-serve top-up flows. Components live in @ai-billing/ui and ship through framework packages such as @ai-billing/nextjs.
What you can build
- Usage dashboards—show customers how much they have consumed and what remains in their plan or credit balance.
- Credit top-up—embed checkout so users can buy more credits without leaving your app.
- Billing settings—surface plan details and payment actions in your product UI.
Before you start
Wire up LLM Pricing integrations first. UI components read usage and billing state that your backend middleware sends to Polar, Stripe, or another destination.
Match the userId you pass to UI components with the userId in your ai-billing-tags on billed API calls so usage displays correctly.
Next steps
Component guides for Polar, Stripe, and other destinations are coming soon. Until then, see the Quickstart for a full Next.js example with CreditUsagePolar and CreditTopUpPolar.
