React SDK

@pandorakit/react-sdk provides React hooks for building custom UIs against Pandora. It handles authentication, streaming chat, thread management, configuration, and more.

For non-React consumers, use the SDK Client directly.

Installation


npm install @pandorakit/react-sdk @pandorakit/sdk ai @ai-sdk/react @tanstack/react-query

Setup

Wrap your app with PandoraProvider. All SDK hooks must be rendered inside this provider.


import { PandoraProvider } from '@pandorakit/react-sdk'
 
function App() {
  return (
    <PandoraProvider baseUrl="http://localhost:4111">
      <YourApp />
    </PandoraProvider>
  )
}

Prop	Type	Description
`baseUrl`	`string`	Pandora server URL. Defaults to `"http://localhost:4111"`.
`queryClient`	`QueryClient`	Optional. Bring your own React Query client.

Authentication

The useAuth() hook manages the full authentication lifecycle:


import { useAuth } from '@pandorakit/react-sdk'
 
function AuthGate({ children }: { children: React.ReactNode }) {
  const { status, login, setup } = useAuth()
 
  if (status === 'loading') return <div>Loading...</div>
 
  if (status === 'setup_required') {
    return (
      <form onSubmit={async (e) => {
        e.preventDefault()
        const password = new FormData(e.currentTarget).get('password') as string
        await setup(password)
      }}>
        <input name="password" type="password" placeholder="Create a password" />
        <button type="submit">Set Up</button>
      </form>
    )
  }
 
  if (status === 'login_required') {
    return (
      <form onSubmit={async (e) => {
        e.preventDefault()
        const password = new FormData(e.currentTarget).get('password') as string
        await login(password)
      }}>
        <input name="password" type="password" placeholder="Password" />
        <button type="submit">Log In</button>
      </form>
    )
  }
 
  return <>{children}</>
}

UseAuthReturn

Property	Type	Description
`status`	`'loading' \| 'setup_required' \| 'login_required' \| 'authenticated'`	Current auth state
`login`	`(password: string) => Promise<void>`	Log in with a password
`setup`	`(password: string) => Promise<void>`	First-run password creation
`logout`	`() => Promise<void>`	Log out and clear stored credentials
`changePassword`	`(currentPassword: string, newPassword: string) => Promise<void>`	Change the account password
`sessions`	`UseQueryResult<Session[]>`	Active sessions (fetches when authenticated)
`revokeSession`	`(id: string) => Promise<{ loggedOut: boolean }>`	Revoke a specific session
`revokeAllSessions`	`() => Promise<void>`	Revoke all sessions