We now have chatId = 123 in the params.
When we say: hello, how are you?
We can see in tools the chat being called with an ID of 123.
We’re simply passing an ID into useChat.
If we remove the chatId and try again, the SDK generates a random UUID for us automatically.
So why does the front end control what ID is used to create the chat? Normally, you would send everything except the ID and then receive one back. But in this case, having the ID on the front end makes things easier.
As soon as the stream starts, we want to navigate to that chatId. Putting it into the URL right away saves logic on the backend and makes the whole flow easier to reason about.
In a production application, of course, we would also check that the ID hasn’t already been used, or if it has, that it belongs to the user.
That’s why it makes sense for the front end to own the ID. Even though this is just a single property of useChat, understanding how it works is important. The front end generates and passes the ID, and the AISDK makes it very simple to send along.
Nice work, and I’ll see you in the next one.
const { messages, sendMessage } = useChat({id: chatId,})