(v5) How to add initial message history? (deprecated docs?)

[iywey]

Hi,

Thanks for the great work with the SDK.

https://v5.ai-sdk.dev/docs/ai-sdk-ui/chatbot-message-persistence mentions the chatStore as a way to pass message history

  const { input, handleInputChange, handleSubmit, messages } = useChat({
    chatId: id, // use the provided chat ID
    chatStore: defaultChatStoreOptions({
      api: '/api/chat',
      chats:
        initialMessages && id
          ? { [id]: { messages: initialMessages } }

Further, the useChat reference mentions that you can pass initialMessages: Message[].

Looking through the repo, I see that useChat can be initialized by passing ChatInit. ChatInit has messages?: UIMessage[], but no initialMessages: Message[] or chatStore.

So I wanted to clarify:

• Are the docs deprecated?
• Is now the preferred way to pass message history to use messages with UIMessage[]?

Thanks!

[lgrammel]

We are in the process of updating the ai sdk 5 docs. in the meantime check out this example https://github.com/vercel/ai/tree/main/examples/next

[iywey]

Thanks for the response. I checked out the examples and proceeded with my implementation. Could you help me understand why messages doesn't properly initialize for me? The messages returned by useChat is an empty array although I am passing an array of UIMessages to useChat through the messages param. I tried looking through the repo but didn't find a different way of initializing and receiving the initialized messages back.

  const initialMessages = messagesToUIMessages(dbMessages);
  console.log(initialMessages); // multiple UIMessages
  const { messages, sendMessage } = useChat({ messages: initialMessages });
  console.log(messages); // empty arrays

[lgrammel]

what does messagesToUIMessages do and where is it from?

[iywey]

It's a helper function that converts our internal Message type to UIMessage:

import { UIMessage } from "ai";
import { Message } from "../app-types";

export function messagesToUIMessages(messages: Message[]): UIMessage[] {
  return messages.map((m) => ({
    id: m.id,
    role: m.role,
    parts: [
      {
        type: "text",
        text: m.content,
        state: "done",
      },
    ],
  }));
}

[pavlo-tkhir]

Check if setMessages will fix your issue:

const { messages, setMessages } = useChat({ ... });

React.useEffect(() => {
  setMessages(initialMessages);
}, []);

I had an issue when messages were set directly like this: useChat({ messages: initialMessages });
Although it wasn't the same issue as you are having. In my case, initialMessages were cached and didn't change after the conversation. And once you switch between conversations, the messages (returned from useChat) were always the initialMessages without any new messages.

[lgrammel]

looks like a bug. created a ticket for investigation #7137

[iywey]

@pavlo-tkhir This doesn't fix it, and on Safari it also causes the site to fail responding.

[lgrammel]

@iywey #7190 confirms that the messages are returned. maybe something else is going on? or it is just on the initial render cycle?

[iywey]

Thanks @lgrammel, I confirm your test works.

The issue was indeed a render cycle issue where our messages reset with the current activeConvo, but nothing triggered useChat's messages to reinitialize.

Fix was using setMessages as @pavlo-tkhir suggested. The fact that it didn't work initially seems to just have been an unfortunately timed Safari bug.

  useEffect(() => {
    setMessages(messagesToUIMessages(initialMessages));
  }, [activeConvo?.id]);