Example: Using Firebase

First, ensure your Firebase project is ready and the Firebase SDK is configured in your Next.js application.

1. Go to the Firebase Console,and copy the firebaseConfig object.

2. Update Firebase Config File (src/firebaseConfig.ts): Replace the placeholder values in firebaseConfig with your actual credentials in src/firebaseConfig.ts:

   src/firebaseConfig.ts

   import { initializeApp, getApp, getApps } from "firebase/app";
   import { getFirestore } from "firebase/firestore";
   
   // IMPORTANT: Replace these with your actual Firebase project configuration!
   const firebaseConfig = {
     apiKey: "YOUR_API_KEY",
     authDomain: "YOUR_AUTH_DOMAIN",
     projectId: "YOUR_PROJECT_ID",
     storageBucket: "YOUR_STORAGE_BUCKET",
     messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
     appId: "YOUR_APP_ID",
     measurementId: "YOUR_MEASUREMENT_ID"
   };
   
   // Initialize Firebase
   let app;
   if (!getApps().length) {
     app = initializeApp(firebaseConfig);
   } else {
     app = getApp();
   }
   
   const db = getFirestore(app);
   
   export { db };
   

   Expand code

Implement a service layer that handles persistence logic using Firestore.

Create src/services/threadService.ts:

1. Core CRUD Functions: Implement functions to create, read, update, and delete threads and messages.

Refer to the complete example threadService.ts for full implementations of others like getThreadList, getUIThreadMessages, getLLMThreadMessages, updateMessage, deleteThread, and updateThread similarly.

Configure C1Chat component (src/app/page.tsx) to use the functions in threadService.ts for data operations.

1. Configure C1 SDK Hooks: Pass the threadService functions to the useThreadListManager and useThreadManager hooks.

   src/app/page.tsx (Hook Configuration)

     const threadListManager = useThreadListManager({
       fetchThreadList: () => getThreadList(),
       deleteThread: (threadId) => deleteThread(threadId),
       updateThread: (t) => updateThread({ threadId: t.threadId, name: t.title }),
       onSwitchToNew: () => {
         replace(`${pathname}`);
       },
       onSelectThread: (threadId) => {
         const newSearch = `?threadId=${threadId}`;
         replace(`${pathname}${newSearch}`);
       },
       createThread: (message) => {
         return createThread(message.message!);
       },
     });
   
     const threadManager = useThreadManager({
       threadListManager,
       loadThread: async (threadId) => await getUIThreadMessages(threadId),
       onUpdateMessage: async ({ message }) => {
         await updateMessage(threadListManager.selectedThreadId!, message);
       },
       apiUrl: "/api/chat",
     });
   

   Expand code

   See the complete example page.tsx for detailed hook setup with imports.

Add Chat Api route to use Thesys C1 Api along with functions in threadService.ts for fetching historical messages and saving new ones.

1. Fetch History for LLM: Before calling the LLM, fetch the existing messages for the thread using getLLMThreadMessages.

   src/app/api/chat/route.ts (Fetch History)

   const llmMessages = await getLLMThreadMessages(threadId);
   
   const runToolsResponse = client.beta.chat.completions.runTools({
     model: "c1-nightly",
     messages: [
       ...llmMessages, // Add previous messages
       {
         role: "user",
         content: prompt.content!,
       },
     ],
     stream: true,
     tools,
   });
   

2. Save Messages on Stream End: In the on("end") event of the LLM stream, use addMessages to store the new user prompt and all assistant/tool messages generated in that turn.

   src/app/api/chat/route.ts (Save Messages)

   runToolsResponse.on("end", async () => {
     if (isError) {
       return;
     }
   
     const runToolsMessagesWithId = allRunToolsMessages.map((m, index) => {
       const id =
         allRunToolsMessages.length - 1 === index // for last message (the response shown to user), use the responseId as provided by the UI
           ? responseId
           : crypto.randomUUID();
   
       return {
         ...m,
         id,
       };
     });
   
     const messagesToStore = [prompt, ...runToolsMessagesWithId];
   
     await addMessages(threadId, ...messagesToStore);
   });
   

   Refer to the complete example /api/chat/route.ts for context.