Developers · Component registry

Poker UI that runs on your Poker Study AI key.

Grade a decision against our agent, ask it what to do, find your drill leaks, scout an opponent from the hands you uploaded. Each block installs with the API route it needs, and that route adds your psk_ key on your server, so the browser never sees it.

1. 1. Add the registry to components.json

   {
     "registries": {
       "@pokerstudy": "https://www.pokerstudy.ai/r/{name}.json"
     }
   }

   Or pass full URLs, such as https://www.pokerstudy.ai/r/training-report.json.

2. 2. Install a block and set your key

   $ npx shadcn@latest add @pokerstudy/training-report

   The install adds /api/pokerstudy/[...path] and a POKERSTUDY_API_KEY line in .env.local. Fill it with a Studio key from API settings.

   // app/page.tsx
   import { TrainingReport } from "@/components/pokerstudy/training-report";
   
   export default function Page() {
     // Calls /api/pokerstudy/trainer-stats, which adds POKERSTUDY_API_KEY on the server.
     return <TrainingReport />;
   }

3. 3. Decide who sees your hands

   Your key reads your uploaded sessions, opponents and drill results. Those routes work in development and return 403 in production until you say who may call them.

   // lib/pokerstudy/api.ts
   export async function authorizePrivate(req: Request) {
     // Only you (or your signed-in users) may read your hands.
     return Boolean((await auth()).userId);
   }