Learn to enhance user experience by updating them about the agent’s thinking process in real-time
@thesysai/genui-sdk
package provides a makeC1Response
function that can be used to add data related to thinking states to the response.
Here’s a simple example of how to use thinking states:
Create a c1Response object
makeC1Response
function to create a c1Response
object by importing it from the @thesysai/genui-sdk
package, and start writing the LLM response
content to this object:Write a thinking state to the response object
writeThinkItem
method defined on the c1Response
object:Use thinking states with long-running tool calls (optional)
writeThinkItem
method inside the
tool call handler. For example, for the webSearch
tool implemented in the Tool Calling guide, you can add a thinking state as follows:Next, modify the tool call handler to call a function that updates the thinking state:writeThinkingState
function to the tool call handler:Full API route code with tool calling and thinking states
Add a custom think component (optional)
customizeC1
prop to the C1Chat
component or the
useThreadManager
hook.Your custom component should accept the following props:C1Chat
component or the useThreadManager
hook like this:Test it out