Does AI SDK Support onFinish on Client Side?

[myudak]

I want to store chat messages locally using IndexedDB. The AI SDK provides onFinish in /api/chat -> streamText, but that is server-based. I need to store messages locally. I tried using onFinish in useChat(), but it didn't trigger the console log.

Here is my code:

"use client";

const {
    messages,
    input,
    handleInputChange,
    handleSubmit,
    setMessages,
    isLoading,
    reload,
    stop,
} = useChat({
    headers: {
        async onFinish(newMessage) {
            // Store the new message in IndexedDB
            console.log("Stored message:", newMessage);
        },
    },
});

Has anyone successfully used onFinish on the client side to store messages locally? Any insights or solutions would be greatly appreciated.

[djam90]

Your problem is you are putting the onFinish callback inside the "headers" key which is not correct.
Try doing this instead:

"use client";

const {
    messages,
    input,
    handleInputChange,
    handleSubmit,
    setMessages,
    isLoading,
    reload,
    stop,
} = useChat({
    onFinish: async (message: Message) => {
      console.log("the message:", message);
    },
});

[myudak]

yeah my first question is a typo i already tried that and didnt work,

const {
   messages,
   input,
   handleInputChange,
   handleSubmit,
   setMessages,
   isLoading,
   reload,
   stop,
 } = useChat({
   headers: {
     "Content-Type": "application/json",
     kodeUnik: nameRandom,
     currentBranch: currentBranch,
   },
   async onFinish(newMessage) {
     // Store the new message in IndexedDB
     console.log("Stored message:", newMessage);
   },
 });

[zisra]

@myudak Have you been able to resolve this?

[zisra]

I couldn't find a good solution, so I'll just go with this patch at the moment.

const { messages, sendMessage, status } = useChat({
  messages: initialMessages,
  transport: new DefaultChatTransport({
    api: "http://localhost:8000/api/chat"
  }),
});

useEffect(() => {
  chatStorage.saveChat(messages);
}, [messages]);