PAIReact UI
Chat, composer, thread list, and tool cards.
The React chat tutorial is the first UI. This page is the map. Working pages cover the branches.
<Pai.Provider client={paiClient}>
<Assistant.ThreadProvider threadId={threadId}>
<Chat />
</Assistant.ThreadProvider>
</Pai.Provider>Pai.Provider holds the app client. ThreadProvider opens one thread and keeps it live.
Hooks on the binding
A chat page uses these three:
| Hook | Re-renders when | Use for |
|---|---|---|
useChat() | The thread moves | Messages, stop |
useComposer() | The draft changes | The text box |
useThreads() | The thread list changes | The sidebar |
Do not read the draft from useChat(). That would re-render the transcript on every keystroke.
Also on Pai.agent("main"): useThread(), useClient(), useClientTool(), useFileUrl(), useSubagent(), Tool. Full list: @pai/react.