@pura-ai/react

Official Pura LLM React components, version 0.1.0. React 18.2/19 and @pura-ai/sdk 0.1.x are peer dependencies. ESM with declarations, no CSS framework required; unused exports can be tree-shaken. License: proprietary, LICENSE. See CHANGELOG.

npm install @pura-ai/sdk @pura-ai/react react

Registry publication status is tracked in the release guide. Before publication, build with pnpm --dir packages --filter @pura-ai/sdk build and pnpm --dir packages --filter @pura-ai/react build, then pnpm pack.

tsx

import {ConnectPuraLLM, UsagePanel} from '@pura-ai/react';
import {PuraInferenceClient, completeBrowserConnection, type StoredTokens} from '@pura-ai/sdk';

const options = {
  apiBase: 'https://ai.puradigital.it/v1',
  clientId: 'YOUR_REGISTERED_PUBLIC_CLIENT_ID',
  redirectUri: 'https://your-app.example/pura/callback',
};
// Minimal single-tab demo only: reconnect after reload. Use your application's
// per-user session adapter for production; never embed a client secret.
let tokens: StoredTokens | null = null;
const store = {get: async () => tokens, set: async (value: StoredTokens) => {tokens = value;}};
const client = new PuraInferenceClient({...options, store});

// On the registered callback page, in the same tab, before mounting UsagePanel:
// await store.set(await completeBrowserConnection(options));
export function Connect() {
  return <ConnectPuraLLM options={options} onError={console.error} />;
}
export function ConnectedUsage() {
  return <UsagePanel client={client} />;
}

ConnectPuraLLM renders a white button with the official logo and the exact text “Connect Pura LLM”. It delegates PKCE, state, storage and navigation to the SDK. It prevents double clicks and calls onError if authorization fails. Standard button props and style are supported; label and click behavior are fixed.

UsagePanel calls only client.usage(). Pass a stable client and change refreshKey after inference to reload. It renders loading, error and blocked states, monthly/weekly percentages and ISO reset dates. It suppresses stale responses when unmounted or when the client changes. No monetary budgets, token storage, OAuth refresh logic or wallet fallback are implemented in the UI.

A complete demo component is available in examples/App.tsx (included in the npm package). Mount it in your React application, replace client ID/callback with a registered public client, and serve both the initial page and callback over HTTPS. The demo handles callback exchange, chat and usage refresh. Its in-memory token store is for one browser session: reconnect after reload; adapt persistence to your app.

llm.txt