BrandApp Playground

AI Hooks

React hooks for AI operations including credit queries and streaming text generation.

Live Demo: useAiCredits

Query Status:pending
Stale:fresh
Updated:never

Live Demo: useAiStream

Stream State:idle

Query Cache State

queryKey: ["ai-credits"]
status: pending
fetchStatus: fetching
dataUpdatedAt: —
staleTime: 60s
components/credit-badge.tsx
import { useAiCredits } from "@reopt-ai/brandapp-sdk/react/hooks";
import type { ReoptSDK } from "@reopt-ai/brandapp-sdk";

function CreditBadge({ sdk }: { sdk: ReoptSDK }) {
  const { data, isLoading } = useAiCredits(sdk);

  if (isLoading) return <span>...</span>;

  return (
    <span>
      {data?.balance.toLocaleString()} / {data?.limit.toLocaleString()} credits
    </span>
  );
}