​
Quick Start

For rapid development, <C1Chat> includes a built-in, in-memory store that manages the conversation history. To get started, you only need to provide your backend endpoint’s URL to the apiUrl prop. For API implementation, please refer to Conversational API section. 
import { C1Chat } from "@thesysai/genui-sdk";

function App() {
  return <C1Chat apiUrl="/api/chat" />;
}
This is the fastest way to get a functional chat interface running.
The in-memory store is for development and prototyping. The entire chat history will be cleared when the page is refreshed.
Reference: <C1Chat> Component Props

​
Full Implementation: fetching thread and thread list from backend

For a production application, user expect a persistent conversation history. This is done by managing threads in your backend and fetching them to the UI. The C1 SDK provides two hooks that handle all the complex state management and data fetching logic for this process.

​
useThreadManager: Managing a Single Conversation

This hook handles the state and data fetching for a single thread. Its responsibilities include:
  • Fetching all messages for a given thread.
  • Adding a new user message to the state.
  • Calling your backend API to get an assistant response.
Reference: useThreadManager Hook API

​
useThreadListManager: Managing the Chat History

This hook handles the state and logic for the list of all threads. Its responsibilities include:
  • Fetching the list of a user’s conversations.
  • Switching the active thread.
  • Creating new threads and deleting old ones.
Reference: useThreadListManager Hook API

​
Connecting the Hooks to <C1Chat>

To enable persistence, you initialize these hooks and pass their state and handlers to the <C1Chat> component. This switches <C1Chat> from its automatic in-memory mode to a “controlled” mode, where all state is managed by you. 
import { C1Chat, useThreadManager, useThreadListManager } from "@thesysai/genui-sdk";

function PersistentChat() {
  // Hook for managing the list of all conversations
  const threadListManager = useThreadListManager({
    // Configuration for fetching, creating, and deleting threads...
  });

  // Hook for managing the currently active conversation
  const threadManager = useThreadManager({
    threadId: threadListManager.activeThreadId,
    // Configuration for fetching messages and calling the chat API...
  });

  return (
    <C1Chat
      threadManager={threadManager}
      threadListManager={threadListManager}
    />
  );
}