Skip to main content
Once you have the basic setup ready, users would expect their conversations to be saved upon refresh. This guide explains how to configure the useThreadManager and useThreadListManager hooks with your app’s persistence logic.
Import useThreadManager and useThreadListManager from @thesysai/genui-sdk package. They are wrapper around the @crayonai/react-core package with C1 specific logic.

​
useThreadManager

A Thread is a single conversation session, maintaining its own history and context. The ThreadManager, obtained via the useThreadManager hook, controls its state and actions. Key configurations:
​
ThreadListManager
The ThreadListManager object. For more information on how to get this object, see useThreadListManager.
​
function
Load all messages for a specific thread.
​
function
Save message updates (e.g., after a form submission).
​
string
A backend endpoint (e.g., "/api/chat"). Thesys GenUI SDK does a POST request to this endpoint with the following three arguments in the request body. If you need to pass additional arguments, use the processMessage function. Provide either processMessage or apiUrl.
​
function
A custom function for more control over sending messages and receiving AI responses. Provide either processMessage or apiUrl.The useThreadManager hook uses the Response object from this function to handle streaming updates to the UI.
Application backend must use the responseId to set the final assistant’s response message ID, as it’s used for future updates to that message.

​
useThreadListManager

The Thread List displays multiple conversation threads, typically in a sidebar. The ThreadListManager, from the useThreadListManager hook, manages this list. Key configurations:
​
function
Fetch all thread list.
​
function
Create a new thread when the user sends the first message.
​
function
Delete a specific thread.
​
function
Update a thread’s metadata, like its title.
​
function
UI Callback function: called when a user selects a thread from the list.
​
function
UI Callback function: called to prepare for a new conversation.
By configuring these hooks with your service functions, you integrate your application’s data operations (like saving to or loading from the database) to enable persistent chat experiences. For a detailed walkthrough of implementing service functions with a Firebase backend, see: