Docs
Getting started
The registry is a shadcn registry named pokerstudy. Building blocks such as playing cards never call the API. Blocks that read your account install a server route that adds your key, so the browser in your app never sees it.
1. Init shadcn
In a Next.js app that already has Tailwind, create components.json.
$ npx shadcn@latest init2. Add the registry
Point @pokerstudy at the JSON files. You can also pass a full URL and skip this step.
{
"registries": {
"@pokerstudy": "https://www.pokerstudy.ai/r/{name}.json"
}
}3. Add a component
$ npx shadcn@latest add https://www.pokerstudy.ai/r/playing-card.jsonPlaying cards are a good first install: no key, no proxy. The playing card page has the preview, the source the CLI ships, and the props.
import { TrainingReport } from "@/components/pokerstudy/training-report";
export default function Page() {
return <TrainingReport />;
}4. The API key
On this site, one key in the header unlocks live previews of your own stats. It is stored in sessionStorage for the tab, checked with GET /api/trainer/stats, and never logged. Closing the tab clears it. localStorage and cookies are unused. Mint a Studio key on API settings. The standard is written up at /developers/components#api-key.
Session stats shows sample data until that key checks out, then your latest uploaded session. Playing cards stay ungated.
In an app you ship, the key stays on the server. Installing a data block adds app/api/pokerstudy/[...path]/route.ts from web/registry/pokerstudy/proxy-route.ts. Set POKERSTUDY_API_KEY in the server environment. The browser calls your proxy, and the proxy adds the key.
5. Decide who sees your hands
Sessions, opponents, and drill stats work in development and return 403 in production until you edit authorizePrivate.
export async function authorizePrivate(req: Request) {
// Only you, or your signed-in users, may read your hands.
return Boolean((await auth()).userId);
}