Add resumable streaming guide for Agents SDK

Add comprehensive tutorial for building a chat application with automatic
resumable streaming using AIChatAgent and useAgentChat.

The guide covers:
- How resumable streaming works
- Setting up a chat agent with AIChatAgent
- Building a React client with useAgentChat
- Testing stream resumption after disconnection
- Server and client implementation details

This feature allows AI chat applications to automatically continue streaming
responses when users experience network interruptions, providing a seamless
user experience without requiring additional configuration.

🤖 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

@@ -0,0 +1,320 @@
+---
+title: Build a resumable streaming chat
+pcx_content_type: tutorial
+tags:
+  - AI SDK
+  - Streaming
+sidebar:
+  order: 8
+---
+
+import { TypeScriptExample, PackageManagers, Steps } from "~/components";
+
+Build a chat application with automatic resumable streaming that continues seamlessly when users disconnect and reconnect. The `AIChatAgent` class provides built-in resumable streaming, automatically persisting and resuming AI responses during network interruptions.
+
+## What you will build
+
+A real-time AI chat application that:
+- Streams AI responses in real-time
+- Automatically resumes streams after network disconnections
+- Persists chat history across sessions
+- Works without additional configuration
+
+## Prerequisites
+
+- An OpenAI API key (or another AI provider supported by [Vercel AI SDK](https://sdk.vercel.ai/docs/introduction))
+
+## How resumable streaming works
+
+When you use `AIChatAgent` with `useAgentChat`:
+
+1. **During streaming**: All chunks are automatically persisted to SQLite
+2. **On disconnect**: The stream continues server-side, buffering chunks
+3. **On reconnect**: Client receives all buffered chunks and continues streaming
+
+No additional setup required - it works automatically.
+
+## 1. Create a chat agent
+
+<Steps>
+
+1. Create a new Agent project using the `hello-world` template:
+
+	<PackageManagers
+		type="create"
+		pkg="cloudflare@latest"
+		args={"my-chat --template=cloudflare/ai/demos/hello-world"}
+	/>
+
+2. Move into the project directory and install dependencies:
+
+	```sh
+	cd my-chat
+	```
+
+3. Install the AI SDK and OpenAI provider:
+
+	<PackageManagers type="install" pkg="ai @ai-sdk/openai" />
+
+4. Add your OpenAI API key to `.dev.vars`:
+
+	```txt title=".dev.vars"
+	OPENAI_API_KEY=your_openai_api_key_here
+	```
+
+</Steps>
+
+## 2. Implement the server-side agent
+
+<Steps>
+
+1. Replace the contents of `src/index.ts` with a chat agent that extends `AIChatAgent`:
+
+	<TypeScriptExample>
+
+	```ts title="src/index.ts"
+	import { openai } from "@ai-sdk/openai";
+	import { type AgentNamespace, routeAgentRequest } from "agents";
+	import { AIChatAgent } from "agents/ai-chat-agent";
+	import {
+		streamText,
+		convertToModelMessages,
+		createUIMessageStream,
+		createUIMessageStreamResponse
+	} from "ai";
+
+	type Env = {
+		OPENAI_API_KEY: string;
+		ChatAgent: AgentNamespace<ChatAgent>;
+	};
+
+	export class ChatAgent extends AIChatAgent<Env> {
+		async onChatMessage() {
+			const stream = createUIMessageStream({
+				execute: async ({ writer }) => {
+					const result = streamText({
+						model: openai("gpt-4o"),
+						messages: convertToModelMessages(this.messages)
+					});
+
+					writer.merge(result.toUIMessageStream());
+				}
+			});
+			return createUIMessageStreamResponse({ stream });
+		}
+	}
+
+	export default {
+		async fetch(request: Request, env: Env) {
+			return (
+				(await routeAgentRequest(request, env)) ||
+				new Response("Not found", { status: 404 })
+			);
+		}
+	} satisfies ExportedHandler<Env>;
+	```
+	</TypeScriptExample>
+
+2. Update `wrangler.jsonc` to enable SQLite for stream persistence:
+
+	```jsonc title="wrangler.jsonc"
+	{
+		"$schema": "../../node_modules/wrangler/config-schema.json",
+		"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"
+			}
+		],
+		"name": "my-chat"
+	}
+	```
+
+</Steps>
+
+The `AIChatAgent` class automatically handles:
+- Creating SQLite tables for stream chunks and metadata
+- Buffering and flushing chunks every 100ms
+- Detecting reconnections and sending `CF_AGENT_STREAM_RESUMING` notifications
+- Cleaning up old streams after 24 hours
+
+## 3. Build the client interface
+
+<Steps>
+
+1. Install React dependencies:
+
+	<PackageManagers type="install" pkg="react react-dom agents" />
+
+	<PackageManagers type="install" pkg="-D @types/react @types/react-dom" />
+
+2. Create a chat component that uses `useAgentChat`:
+
+	<TypeScriptExample>
+
+	```tsx title="src/client.tsx"
+	import { useState, useRef, useEffect } from "react";
+	import { useAgent } from "agents/react";
+	import { useAgentChat } from "agents/ai-react";
+
+	export default function Chat() {
+		const [input, setInput] = useState("");
+		const messagesEndRef = useRef<HTMLDivElement>(null);
+
+		const agent = useAgent({
+			agent: "ChatAgent",
+			name: "my-chat"
+		});
+
+		const { messages, sendMessage, status } = useAgentChat({
+			agent
+			// resume: true is the default - streams automatically resume on reconnect
+		});
+
+		const isStreaming = status === "streaming";
+
+		useEffect(() => {
+			messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+		}, [messages]);
+
+		const handleSubmit = async (e: React.FormEvent) => {
+			e.preventDefault();
+			if (!input.trim() || isStreaming) return;
+
+			const message = input;
+			setInput("");
+
+			await sendMessage({
+				role: "user",
+				parts: [{ type: "text", text: message }]
+			});
+		};
+
+		return (
+			<div style={{ display: "flex", flexDirection: "column", height: "100vh" }}>
+				<div style={{ flex: 1, overflowY: "auto", padding: "1rem" }}>
+					{messages.map((message) => {
+						const text = message.parts
+							.filter((part) => part.type === "text")
+							.map((part) => part.text)
+							.join("");
+
+						return (
+							<div key={message.id} style={{ marginBottom: "1rem" }}>
+								<strong>{message.role === "user" ? "You" : "Assistant"}:</strong>
+								<div>{text}</div>
+							</div>
+						);
+					})}
+					<div ref={messagesEndRef} />
+				</div>
+
+				<form onSubmit={handleSubmit} style={{ padding: "1rem" }}>
+					<input
+						type="text"
+						value={input}
+						onChange={(e) => setInput(e.target.value)}
+						disabled={isStreaming}
+						placeholder="Type your message..."
+						style={{ width: "100%", padding: "0.5rem" }}
+					/>
+					<button type="submit" disabled={!input.trim() || isStreaming}>
+						{isStreaming ? "Streaming..." : "Send"}
+					</button>
+				</form>
+			</div>
+		);
+	}
+	```
+	</TypeScriptExample>
+
+</Steps>
+
+The `useAgentChat` hook automatically handles:
+- Listening for `CF_AGENT_STREAM_RESUMING` notifications
+- Sending acknowledgment when ready to resume
+- Reconstructing messages from buffered chunks
+- Continuing to receive live chunks
+
+## 4. Test resumable streaming
+
+<Steps>
+
+1. Start your development server:
+
+	```sh
+	npm start
+	```
+
+2. Open your chat application in a browser.
+
+3. Start a long response by asking the AI a question that requires a lengthy answer.
+
+4. While the response is streaming, refresh the page or close and reopen the tab.
+
+5. Watch the stream automatically resume from where it left off.
+
+</Steps>
+
+## Optional: Disable automatic resume
+
+For use cases where resuming is not needed (for example, short responses), you can disable automatic resume:
+
+<TypeScriptExample>
+
+```tsx
+const { messages } = useAgentChat({
+	agent,
+	resume: false // Disable automatic stream resumption
+});
+```
+</TypeScriptExample>
+
+## Under the hood
+
+### Server-side implementation
+
+The `AIChatAgent` class:
+- Creates SQLite tables for stream chunks and metadata on startup
+- Assigns a unique ID to each stream and tracks chunk indices
+- Buffers chunks and flushes to SQLite every 100ms for performance
+- Checks for active streams when clients connect
+- Sends `CF_AGENT_STREAM_RESUMING` notification if an active stream exists
+- Cleans up completed streams after 24 hours
+
+### Client-side implementation
+
+The `useAgentChat` hook:
+- Listens for `CF_AGENT_STREAM_RESUMING` notifications
+- Sends `CF_AGENT_STREAM_RESUME_ACK` when ready to resume
+- Receives all buffered chunks in order
+- Reconstructs the message state
+- Continues receiving live chunks as they arrive
+
+## Summary
+
+You built a chat application with automatic resumable streaming that:
+- Continues AI responses seamlessly after network interruptions
+- Requires no additional configuration or code
+- Persists stream state using SQLite
+- Works with any AI provider supported by Vercel AI SDK
+
+## Related resources
+
+- [AIChatAgent — API reference](/agents/api-reference/ai-chat-agent/) — Complete API documentation
+- [Vercel AI SDK](https://sdk.vercel.ai/docs/introduction) — AI SDK documentation
+- [Example: Resumable stream chat](https://github.com/cloudflare/agents/tree/main/examples/resumable-stream-chat) — Complete working example