Introduction

import { wrapLanguageModel, openai } from 'ai';
import { createOpenAIV3Middleware } from '@ai-billing/openai';
import { createPolarDestination } from '@ai-billing/polar';

// 1. Configure where the billing events should be sent
const billingMiddleware = createOpenAIV3Middleware({
  destinations: [
    createPolarDestination({
      accessToken: process.env.POLAR_ACCESS_TOKEN,
      eventName: 'llm_usage',
    })
  ]
});

// 2. Wrap your model to automatically meter all generations
export const billedModel = wrapLanguageModel({
  model: openai('gpt-4o'),
  middleware: billingMiddleware
});

import { streamText } from 'ai';
import { billedModel } from '@/lib/billing';
export async function POST(req: Request) {
  const { messages } = await req.json();
  
  // Get the authenticated user ID (e.g., from your auth provider)
  const userId = 'user_123'; 
  const result = streamText({
    model: billedModel,
    messages,
    providerOptions: {
      // These tags are automatically forwarded to your billing destination
      'ai-billing-tags': {
        userId: userId,
      },
    },
  });
  return result.toDataStreamResponse();
}

import { CreditUsagePolar, CreditTopUpPolar } from '@ai-billing/nextjs';

export default function BillingDashboard({ userId }: { userId: string }) {
  return (
    <div className="flex flex-col gap-6 p-4">
      <h2 className="text-xl font-semibold">Usage & Billing</h2>
      
      {/* Shows current consumption and remaining budget/credits */}
      <CreditUsagePolar userId={userId} />
      
      {/* Renders a checkout component to buy more credits */}
      <CreditTopUpPolar userId={userId} />
    </div>
  );
}