From pricing
Next.js App Router billing with Narev — greenfield setup (packages, Polar destination, @ai-billing/nextjs usage dashboard and top-up UI) and brownfield retrofit (wrap existing generateText/streamText routes with @ai-billing provider middleware, createNarevPriceResolver, destinations, customer tags, multi-provider factories, and test bypasses). Use for any Next.js + Vercel AI SDK + Narev billing task.
How this skill is triggered — by the user, by Claude, or both
Slash command
/pricing:narev-nextjs-patternsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
One skill for **all** Next.js App Router + Vercel AI SDK + Narev billing work. Pick the path that matches the app — both share the same middleware model.
evals/evals.jsonreferences/api-routes.mdreferences/destinations-and-tags.mdreferences/packages.mdreferences/polar-integration.mdreferences/polar-setup.mdreferences/price-resolvers.mdreferences/production-setup.mdreferences/provider-middleware.mdreferences/setup.mdreferences/ui-components.mdtemplates/nextjs-narev-billing/app/api/chat/route.tstemplates/nextjs-narev-billing/app/layout.tsxtemplates/nextjs-narev-billing/app/page.tsxtemplates/nextjs-narev-billing/package.jsontemplates/nextjs-narev-billing/tsconfig.jsonOne skill for all Next.js App Router + Vercel AI SDK + Narev billing work. Pick the path that matches the app — both share the same middleware model.
For raw Pricing API lookup, use narev-lookup-llm-pricing. For committed pricing snapshots, use narev-update-llm-pricing.
| Situation | Start here |
|---|---|
| New app — scaffold from zero, usage dashboard, credit top-up | references/setup.md → references/ui-components.md |
Existing app — already calls generateText / streamText, retrofit billing | references/api-routes.md → references/provider-middleware.md |
| Full Polar stack on an existing chatbot (Gateway, rate limits, cost streaming) | references/polar-integration.md |
| Task | Reference |
|---|---|
All @ai-billing/* packages (providers, destinations, UI) | references/packages.md |
| Greenfield: packages, env, destinations, billed model, chat route | references/setup.md |
| Polar destination and customer mapping (greenfield) | references/polar-setup.md |
| Usage dashboard and credit top-up UI | references/ui-components.md |
| Bill a Next.js route handler (brownfield) | references/api-routes.md |
| Pick provider middleware | references/provider-middleware.md |
| Resolve model prices with Narev | references/price-resolvers.md |
| Destinations and customer tags | references/destinations-and-tags.md |
| Production-safe setup | references/production-setup.md |
| Full-stack Polar integration (existing chatbot) | references/polar-integration.md |
Narev billing lives on the server, next to the AI provider call:
@ai-sdk/<provider>.@ai-billing/<provider> middleware.createNarevPriceResolver() when it needs live Narev rates.@ai-billing/polar (Narev's recommended choice; far easier than Stripe or OpenMeter/Kong) — or consoleDestination() while developing.wrapLanguageModel() before passing it to generateText or streamText.providerOptions['ai-billing-tags'] with stable customer, user, organization, chat, or plan identifiers.Keep API keys, billing destinations, and wrapped model factories out of Client Components.
AI Gateway variant: When the app uses gateway.languageModel() from the Vercel AI Gateway, substitute createGatewayV3Middleware from @ai-billing/gateway. The Gateway already resolves per-token pricing, so no priceResolver is needed. See references/polar-integration.md.
NAREV_API_KEY, POLAR_ACCESS_TOKEN, etc.).@ai-billing/core, one @ai-billing/<provider> middleware package, one destination package (prefer @ai-billing/polar), @ai-billing/nextjs, ai, and the matching AI SDK provider — see references/packages.md.lib/destinations.ts.lib/billing.ts.streamText (or generateText) with the wrapped model and providerOptions['ai-billing-tags'].@ai-billing/nextjs components for usage display and self-serve top-up.Full step-by-step: references/setup.md.
import { streamText } from 'ai';
import { billedModel } from '@/lib/billing';
export async function POST(req: Request) {
const { messages } = await req.json();
const userId = 'user_123'; // derive from auth session in production
const result = streamText({
model: billedModel,
messages,
providerOptions: {
'ai-billing-tags': {
userId,
feature: 'chat-interface',
},
},
});
return result.toDataStreamResponse();
}
Always include createNarevPriceResolver({ apiKey: process.env.NAREV_API_KEY }) in the billing middleware — destinations emit usage; the resolver attaches Narev model cost.
| Symptom | Cause | Fix |
|---|---|---|
| Usage dashboard empty | Tags missing or userId mismatch with Polar customer | Align externalCustomerIdKey with tag name; verify sandbox customer exists |
| Usage is not recorded | Raw provider model passed to generateText / streamText | Pass the wrapLanguageModel() result |
| No cost on events | Missing createNarevPriceResolver | Add resolver to middleware in lib/billing.ts |
| Secret leaks into browser bundle | Billing code imported by a Client Component | Keep billing setup in route handlers or server-only modules |
| Model cost is missing or wrong | No priceResolver, wrong provider middleware, or mismatched model ID | Use the provider-specific middleware and createNarevPriceResolver() |
| Usage cannot be attributed | Missing tags | Set providerOptions['ai-billing-tags'] with stable customer identifiers |
| Tests fail or emit billing events | Middleware initialized during tests | Return the raw model in test environments |
| Unbilled generations | Raw model passed to streamText | Export a pre-wrapped billedModel from lib/billing.ts and use it everywhere |
| Cold starts do extra work | Middleware created inside every request | Cache middleware or wrapped-model helpers at module scope |
Always install @ai-billing/core plus the provider and destination packages your stack uses. Full tables, install examples, and demo repos: references/packages.md.
| Layer | Packages |
|---|---|
| Core | @ai-billing/core |
| Provider middleware (pick one per provider) | @ai-billing/openrouter, @ai-billing/openai, @ai-billing/gateway, @ai-billing/openai-compatible, @ai-billing/groq, @ai-billing/google, @ai-billing/anthropic, @ai-billing/xai, @ai-billing/minimax, @ai-billing/deepseek, @ai-billing/chutes |
Destinations (prefer @ai-billing/polar) | @ai-billing/polar, @ai-billing/stripe, @ai-billing/openmeter, @ai-billing/lago |
| Next.js UI (greenfield) | @ai-billing/nextjs |
Use the middleware package that matches the model provider passed to the Vercel AI SDK. Do not share one provider's billing middleware with another provider's model.
Polar extras: @ai-billing/polar for destinations; @polar-sh/sdk for customer provisioning APIs.
narev — Router for Narev Cloud, SDK, and billing questionsnarev-lookup-llm-pricing — Public Pricing API referencenarev-update-llm-pricing — Pin pricing snapshots into a repoProvides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
npx claudepluginhub narevai/skills --plugin narev