Add documentation for resumable streaming feature

This documentation covers the new automatic resumable streaming feature in AIChatAgent and useAgentChat, which allows AI chat responses to automatically resume when clients reconnect after disconnection.

Key features documented:
- Automatic stream persistence to SQLite
- Client reconnection handling
- Server-side and client-side implementation examples
- Configuration options for disabling resume

Based on PR cloudflare/agents#673

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: github-actions[bot]

src/content/docs/agents/guides/resumable-streaming.mdx

@@ -5,10 +5,12 @@ sidebar:
   order: 6
 ---
 
-import { PackageManagers, TypeScriptExample, WranglerConfig } from "~/components";
+import { TypeScriptExample, WranglerConfig, PackageManagers } from "~/components";
 
 The `AIChatAgent` class provides automatic resumable streaming out of the box. When a client disconnects and reconnects during an active stream, the response automatically resumes from where it left off.
 
+This is particularly useful for long-running AI responses from reasoning models (such as OpenAI's o3, DeepSeek R1, or Anthropic's Claude) where users might disconnect due to network issues, page refreshes, or other interruptions.
+
 ## How it works
 
 When you use `AIChatAgent` with `useAgentChat`:
@@ -17,37 +19,81 @@ When you use `AIChatAgent` with `useAgentChat`:
 2. **On disconnect**: The stream continues server-side, buffering chunks
 3. **On reconnect**: Client receives all buffered chunks and continues streaming
 
+No additional configuration is required.
+
 ## Example
 
-### Server
+### Server-side implementation
 
-<TypeScriptExample>
+<TypeScriptExample filename="src/index.ts">
 
 ```ts
 import { AIChatAgent } from "agents/ai-chat-agent";
-import { streamText } from "ai";
+import { streamText, convertToModelMessages, createUIMessageStream, createUIMessageStreamResponse } from "ai";
 import { openai } from "@ai-sdk/openai";
 
+type Env = {
+  OPENAI_API_KEY: string;
+  ChatAgent: AgentNamespace<ChatAgent>;
+};
+
 export class ChatAgent extends AIChatAgent<Env> {
   async onChatMessage() {
-    const result = streamText({
-      model: openai("gpt-4o"),
-      messages: this.messages
+    const stream = createUIMessageStream({
+      execute: async ({ writer }) => {
+        const result = streamText({
+          model: openai("gpt-4o"),
+          messages: convertToModelMessages(this.messages)
+        });
+
+        writer.merge(result.toUIMessageStream());
+      }
     });
 
     // Automatic resumable streaming - no extra code needed
-    return result.toUIMessageStreamResponse();
+    return createUIMessageStreamResponse({ stream });
   }
 }
 ```
 
 </TypeScriptExample>
 
-### Client
+Configure your Wrangler configuration to include the Durable Object binding:
+
+<WranglerConfig>
+
+```jsonc
+{
+  "compatibility_date": "2025-03-14",
+  "compatibility_flags": [
+    "nodejs_compat",
+    "nodejs_compat_populate_process_env"
+  ],
+  "durable_objects": {
+    "bindings": [
+      {
+        "class_name": "ChatAgent",
+        "name": "ChatAgent"
+      }
+    ]
+  },
+  "main": "src/index.ts",
+  "migrations": [
+    {
+      "new_sqlite_classes": ["ChatAgent"],
+      "tag": "v1"
+    }
+  ]
+}
+```
+
+</WranglerConfig>
 
-<TypeScriptExample>
+### Client-side implementation
 
-```ts
+<TypeScriptExample filename="src/client.tsx">
+
+```tsx
 import { useAgent } from "agents/react";
 import { useAgentChat } from "agents/ai-react";
 
@@ -57,13 +103,30 @@ function Chat() {
     name: "my-chat"
   });
 
-  const { messages, input, handleInputChange, handleSubmit, status } =
-    useAgentChat({
-      agent
-      // resume: true is the default - streams automatically resume on reconnect
-    });
+  const { messages, sendMessage, status } = useAgentChat({
+    agent
+    // resume: true is the default - streams automatically resume on reconnect
+  });
 
-  // ... render your chat UI
+  const handleSubmit = async (userMessage: string) => {
+    await sendMessage({
+      role: "user",
+      parts: [{ type: "text", text: userMessage }]
+    });
+  };
+
+  return (
+    <div>
+      {messages.map((message) => (
+        <div key={message.id}>
+          {message.parts.map((part) =>
+            part.type === "text" ? part.text : null
+          )}
+        </div>
+      ))}
+      {status === "streaming" && <div>Streaming...</div>}
+    </div>
+  );
 }
 ```
 
@@ -73,26 +136,30 @@ function Chat() {
 
 ### Server-side (`AIChatAgent`)
 
-- Creates SQLite tables for stream chunks and metadata on startup
-- Each stream gets a unique ID and tracks chunk indices
-- Chunks are buffered and flushed to SQLite every 100ms for performance
-- On client connect, checks for active streams and sends `CF_AGENT_STREAM_RESUMING`
-- Old completed streams are cleaned up after 24 hours
+The `AIChatAgent` class handles resumable streaming by:
+
+- Creating SQLite tables for stream chunks and metadata on startup
+- Assigning each stream a unique ID and tracking chunk indices
+- Buffering chunks and flushing to SQLite every 100ms for performance
+- Detecting active streams on client connect and sending `CF_AGENT_STREAM_RESUMING` notification
+- Cleaning up old completed streams after 24 hours
 
 ### Client-side (`useAgentChat`)
 
-- Listens for `CF_AGENT_STREAM_RESUMING` notification
-- Sends `CF_AGENT_STREAM_RESUME_ACK` when ready
-- Receives all buffered chunks and reconstructs the message
-- Continues receiving live chunks as they arrive
+The `useAgentChat` hook enables resumable streaming by:
+
+- Listening for `CF_AGENT_STREAM_RESUMING` notification
+- Sending `CF_AGENT_STREAM_RESUME_ACK` when ready
+- Receiving all buffered chunks and reconstructing the message
+- Continuing to receive live chunks as they arrive
 
 ## Disabling resume
 
 If you do not want automatic resume (for example, for short responses), disable it:
 
-<TypeScriptExample>
+<TypeScriptExample filename="src/client.tsx">
 
-```ts
+```tsx
 const { messages } = useAgentChat({
   agent,
   resume: false // Disable automatic stream resumption
@@ -103,4 +170,10 @@ const { messages } = useAgentChat({
 
 ## Try it
 
-Refer to the [resumable-stream-chat example](https://github.com/cloudflare/agents/tree/main/examples/resumable-stream-chat) for a complete working example. Start a long response, refresh the page mid-stream, and watch it resume automatically.
+Refer to the [resumable-stream-chat example](https://github.com/cloudflare/agents/tree/main/examples/resumable-stream-chat) for a complete working implementation. Start a long response, refresh the page mid-stream, and watch it resume automatically.
+
+## Related resources
+
+- [Using AI Models](/agents/api-reference/using-ai-models/)
+- [WebSockets](/agents/api-reference/websockets/)
+- [Store and Sync State](/agents/api-reference/store-and-sync-state/)