createPaiReact()
Typed React root: Provider plus per-agent bindings.
createPaiReact is the React root for a createPai app. Call Pai.agent("main") once at module scope to get the typed hooks (useChat, useComposer, Tool, …).
import { createPaiReact } from "@pai/react";
import type { AssistantPai } from "@server/http-server";
export const Pai = createPaiReact<AssistantPai>();
export const Assistant = Pai.agent("main");agent(id) must match a key in createPai({ agents }). Do not call agent() during render.
Import
import { createPaiReact } from "@pai/react";Signature
function createPaiReact<TPai extends PaiContractShape>(
contract?: PaiContractRuntimeFor<TPai>,
): PaiReactRoot<TPai>;Parameters
contract?: PaiContractRuntimeFor<TPai>
Runtime metadata object that pai generate client emits.
TPai is erased at runtime; this is how tool registration names resolve to
stable definition ids. A hand-written root may omit it.
Returns
PaiReactRoot
contract?: PaiContractRuntimeFor<TPai>
Whatever was passed to createPaiReact.
Provider: (props: PaiProviderProps<TPai>) => ReactElement | null
Holds the app client for the tree.
agent: (id, options?) => PaiAgentBinding
Binding for one registry id.
toolRenderers?: ToolRendererMap
clientTools?: ClientToolMap
toolErrorFallback?: ComponentType | null
PaiProviderProps
client: PaiClient<TPai>
An app client from createPaiHttpClient() or
createPaiSocketIoClient().
toolErrorFallback?: ComponentType<ToolErrorFallbackProps> | null
Fallback when a tool renderer throws.
children?: ReactNode
ThreadProvider
Opens one thread and keeps it live. Mount it under Pai.Provider.
<Pai.Provider client={paiClient}>
<Assistant.ThreadProvider threadId={threadId}>
<Chat />
</Assistant.ThreadProvider>
</Pai.Provider>threadId: ThreadId
Open this id through the current client. Mutually exclusive with thread.
thread: Thread<TContract>
Existing handle. Mutually exclusive with threadId. Use only when code
outside React already opened it.
clientData?: TContract['clientData']
Per-thread client data. Only with threadId. Untrusted — see
Identity.
observe?: boolean
Watch the thread while mounted.
Defaults to true.
readOnly?: boolean
UI hint for nested/subagent transcripts.
toolRenderers?: ToolRendererMap<TContract>
View-scoped renderer overlay.
children?: ReactNode