Your users do more, you earn more.
Usage-based billing for AI apps.

import { useChatWithUsage } from "@usagetap/sdk/react";

export default function AIChatPanel({ customerId }: { customerId: string }) {
  const {
    messages,
    input,
    setInput,
    handleSubmit,
    isLoading,
    stop,
    clear,
  } = useChatWithUsage({
    api: "/api/chat",           // your Next.js route
    customerId,
    feature: "ai-assistant",
    tags: ["app", "chat"],
  });

  // That's it. Every message automatically:
  //   ✓ Checks entitlements (premium model access, tool gating)
  //   ✓ Streams the response with real-time token counting
  //   ✓ Reports usage to UsageTap for billing
  //   ✓ Respects rate limits per customer tier

  return (
    <div className="flex h-full flex-col">
      <div className="flex-1 overflow-y-auto space-y-3 p-4">
        {messages.map((m) => (
          <div key={m.id} className={m.role === "user" ? "text-right" : ""}>
            <p className="inline-block rounded-lg bg-gray-100 px-3 py-2">
              {m.content}
            </p>
          </div>
        ))}
      </div>
      <form onSubmit={handleSubmit} className="flex gap-2 border-t p-4">
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Ask anything..."
          className="flex-1 rounded-lg border px-3 py-2"
          disabled={isLoading}
        />
        <button type="submit" disabled={isLoading}>Send</button>
      </form>
    </div>
  );
}