Resumable Streams

The useChat hook has experimental support for resuming an ongoing chat generation stream by any client, either after a network disconnect or by reloading the chat page. This can be useful for building applications that involve long-running conversations or for ensuring that messages are not lost in case of network failures.

The following are the pre-requisities for your chat application to support resumable streams:

• Installing the resumable-stream package that helps create and manage the publisher/subscriber mechanism of the streams.
• Creating a Redis instance to store the stream state and setting either REDIS_URL or KV_URL.
• Creating a table that tracks the stream IDs associated with a chat.

To resume a chat stream, you will use the experimental_resume function returned by the useChat hook. You will call this function during the initial mount of the hook inside the main chat component.

'use client'
 
import { useChat } from "@ai-sdk/react";
import { Input } from "@/components/input";
import { Messages } from "@/components/messages";
 
export function Chat() {
  const { experimental_resume } = useChat({id});
 
  useEffect(() => {
    experimental_resume();
 
    // we use an empty dependency array to
    // ensure this effect runs only once
  }, [])
 
  return (
    <div>
      <Messages>
      <Input/>
    </div>
  )
}

The experimental_resume function makes a GET request to your configured chat endpoint (or /api/chat by default) whenever your client calls it. If there’s an active stream, it will pick up where it left off, otherwise it simply finishes without error.

The GET request automatically appends the chatId query parameter to the URL to help identify the chat the request belongs to. Using the chatId, you can look up the most recent stream ID from the database and resume the stream.