Thread list custom backend

[ticosep]

I tried to extend the AssistantCloud class to create a custom one and searched for some hook to handle the thread list directly but did not have success. There is a way to handle the thread list crud with a custom backend/cloud?

[oschulztowa]

I just have finished a custom backend integration for assistant-ui, it was a bit hard to see through but basically its pretty easy. What i did was:

1. Create a free account at https://cloud.assistant-ui.com/.
2. Set up a project.
3. Run your local assistant using AssistantCloud as described in the documentation.
4. Make API calls from your assistant to track all requests to the cloud backend.
5. Write or configure a backend that can handle the same API requests as the cloud backend (e.g., thread CRUD, message CRUD, etc.).
6. Add your backend as an AssistantCloud backend. Ensure that you build your own login and authentication process.

const cloud = new AssistantCloud({
    baseUrl: 'http://you-custom-backend',
    authToken: async () => {
        return localStorage.getItem('jwt') ?? null;
    },
});

[UjjwalTiwari00]

hii , i want to integrate my custom backned api in my project and also assistant-ui interface to handle chat , images and chat history can you guide me im little bit confuse. need your help

[vincenzodomina]

I am running into the same problem, but i approached it by using the recommended useExternalStoreRuntime hook. I successfully synced my messages with my custom backend, but how to sync my threads?

The only method that looks like built for that is runtime.threads.import() but that runs into errors and does not look like good code, and i would have rather expected something like for the messages, a getter and setter inside the useExternalStoreRuntime input:

const runtime = useExternalStoreRuntime<ThreadMessageLike>({
   isRunning,
   messages: messages,
   setMessages: setMessages,

   // Expected this:
   // threads: threads,
   // setThreads: setThreads,

   onNew: startRun,
   adapters: {
     attachments: new CompositeAttachmentAdapter([
       new SimpleImageAttachmentAdapter(),
       new SimpleTextAttachmentAdapter(),
     ]),
   },
   convertMessage: (message: ThreadMessageLike) => message,
 });

 useEffect(() => {
   if (runtime && messages?.length) {
     const newMessagesMap: { message: any, parentId: string | null }[] = messages.map((m: ThreadMessageLike) => ({
       message: m,
       parentId: null
     }));

     // This errors for me

     // runtime.thread.import({
     //   messages: newMessagesMap
     // });
   }
 }, [runtime, messages]);

 return (
   <AssistantRuntimeProvider runtime={runtime}>
     {children}
   </AssistantRuntimeProvider>
 );

Any chance of having a hook for syncing custom thread state?

[1WorldCapture]

@vincenzodomina you could refer to the example "with-langgraph", it gives a full example about how to use remote threadlist runtime and external store runtime to sync both thread list and thread history with the backend. But you need change the code a little bit.

[vincenzodomina]

@vincenzodomina you could refer to the example "with-langgraph", it gives a full example about how to use remote threadlist runtime and external store runtime to sync both thread list and thread history with the backend. But you need change the code a little bit.

Thank you so much for pointing!

I'll go with a custom solution for a thread list (I have a custom thread state so I need only a simple list component and threads.map() )

The "with-langgraph" example is really not a nice DX for adding a thread list with assistant UI and a custom state. I would need a custom AssistantCloud instantiation, an api route and additional handlers and then also dive into how that works under the hood ...