PAIPAI

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>

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

Learn more

On this page