diff --git a/examples/ai-agent-vercel/README.md b/examples/ai-agent-vercel/README.md
index 041431340a..20e4b758c0 100644
--- a/examples/ai-agent-vercel/README.md
+++ b/examples/ai-agent-vercel/README.md
@@ -3,42 +3,42 @@
 
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Frivet-gg%2Frivet%2Ftree%2Fmain%2Fexamples%2Fai-agent-vercel&project-name=ai-agent-vercel)
 
-# AI Agent Chat
+# AI Agent
 
-Example project demonstrating AI agent integration.
+Example project demonstrating queue-driven Rivet Actor AI agents with streaming Vercel AI SDK responses.
 
 ## Getting Started
 
 ```sh
 git clone https://github.com/rivet-dev/rivet.git
 cd rivet/examples/ai-agent
-npm install
-npm run dev
+pnpm install
+pnpm dev
 ```
 
-
 ## Features
 
-- **AI SDK integration**: Use Vercel AI SDK with OpenAI within Rivet Actors
-- **Persistent conversation state**: Message history automatically persisted across actor restarts
-- **Real-time updates**: Broadcast AI responses to connected clients using actor events
-- **Tool calling**: Integrate custom tools (weather lookup) that AI can invoke
+- Actor-per-agent pattern with a coordinating manager Rivet Actor
+- Queue-based intake using `c.queue.next` inside the run loop
+- Streaming AI responses sent to the UI as they arrive
+- Persistent history stored in Rivet Actor state
+- Live status updates via events and polling
 
-## Implementation
+## Prerequisites
 
-The AI agent is implemented as a Rivet Actor that maintains conversation state and integrates with OpenAI. Key implementation details:
+- OpenAI API key set as `OPENAI_API_KEY`
 
-- **Actor Definition** ([`src/backend/registry.ts`](https://github.com/rivet-dev/rivet/tree/main/examples/ai-agent/src/backend/registry.ts)): Defines the `aiAgent` actor with persistent message history
-- **Custom Tools** ([`src/backend/my-tools.ts`](https://github.com/rivet-dev/rivet/tree/main/examples/ai-agent/src/backend/my-tools.ts)): Implements the weather lookup tool that the AI can invoke
-- **Message Types** ([`src/backend/types.ts`](https://github.com/rivet-dev/rivet/tree/main/examples/ai-agent/src/backend/types.ts)): TypeScript types for message structure
+## Implementation
 
-## Prerequisites
+The AgentManager creates and tracks agent actors, while each AI agent Rivet Actor consumes queue messages in `run` and streams responses with the Vercel AI SDK.
 
-- OpenAI API Key (set as `OPENAI_API_KEY` environment variable)
+- **Actor definitions and queues** ([`src/actors.ts`](https://github.com/rivet-dev/rivet/tree/main/examples/ai-agent/src/actors.ts))
+- **Frontend orchestration** ([`frontend/App.tsx`](https://github.com/rivet-dev/rivet/tree/main/examples/ai-agent/frontend/App.tsx))
+- **Server entry point** ([`src/server.ts`](https://github.com/rivet-dev/rivet/tree/main/examples/ai-agent/src/server.ts))
 
 ## Resources
 
-Read more about [actions](/docs/actors/actions), [state](/docs/actors/state), and [events](/docs/actors/events).
+Read more about [queues](https://rivet.dev/docs/actors/queues), [run handlers](https://rivet.dev/docs/actors/run), [state](https://rivet.dev/docs/actors/state), and [events](https://rivet.dev/docs/actors/events).
 
 ## License
 
diff --git a/examples/ai-agent-vercel/frontend/App.tsx b/examples/ai-agent-vercel/frontend/App.tsx
index cebc26c97f..900945b812 100644
--- a/examples/ai-agent-vercel/frontend/App.tsx
+++ b/examples/ai-agent-vercel/frontend/App.tsx
@@ -1,80 +1,244 @@
 import { createRivetKit } from "@rivetkit/react";
 import { useEffect, useState } from "react";
-import { registry } from "../src/actors.ts";
-import type { Message } from "../src/types.ts";
+import type {
+	AgentInfo,
+	AgentMessage,
+	AgentStatus,
+	registry,
+} from "../src/actors.ts";
 
-const { useActor } = createRivetKit<typeof registry>(`${window.location.origin}/api/rivet`);
+const { useActor } = createRivetKit<typeof registry>(
+	`${location.origin}/api/rivet`,
+);
 
-export function App() {
-	const aiAgent = useActor({
-		name: "aiAgent",
-		key: ["default"],
+type ResponseEvent = {
+	messageId: string;
+	delta: string;
+	content: string;
+	done: boolean;
+	error?: string;
+};
+
+function formatTime(timestamp: number) {
+	return new Date(timestamp).toLocaleTimeString();
+}
+
+function AgentPanel({ info }: { info: AgentInfo }) {
+	const agent = useActor({
+		name: "agent",
+		key: [info.id],
 	});
-	const [messages, setMessages] = useState<Message[]>([]);
+	const [messages, setMessages] = useState<AgentMessage[]>([]);
+	const [status, setStatus] = useState<AgentStatus | null>(null);
 	const [input, setInput] = useState("");
-	const [isLoading, setIsLoading] = useState(false);
 
 	useEffect(() => {
-		if (aiAgent.connection) {
-			aiAgent.connection.getMessages().then(setMessages);
+		if (!agent.connection) {
+			return;
 		}
-	}, [aiAgent.connection]);
 
-	aiAgent.useEvent("messageReceived", (message: Message) => {
-		setMessages((prev) => [...prev, message]);
-		setIsLoading(false);
+		agent.connection.getHistory().then(setMessages);
+		agent.connection.getStatus().then(setStatus);
+	}, [agent.connection]);
+
+	agent.useEvent("messageAdded", (message: AgentMessage) => {
+		setMessages((prev) => {
+			const existingIndex = prev.findIndex((item) => item.id === message.id);
+			if (existingIndex !== -1) {
+				const next = [...prev];
+				next[existingIndex] = message;
+				return next;
+			}
+			return [...prev, message].sort(
+				(a, b) => a.createdAt - b.createdAt,
+			);
+		});
+	});
+
+	agent.useEvent("response", (payload: ResponseEvent) => {
+		setMessages((prev) =>
+			prev.map((message) =>
+				message.id === payload.messageId
+					? { ...message, content: payload.content }
+					: message,
+			),
+		);
+	});
+
+	agent.useEvent("status", (nextStatus: AgentStatus) => {
+		setStatus(nextStatus);
 	});
 
-	const handleSendMessage = async () => {
-		if (aiAgent.connection && input.trim()) {
-			setIsLoading(true);
+	const sendMessage = async () => {
+		if (!agent.connection) {
+			return;
+		}
 
-			const userMessage = { role: "user", content: input, timestamp: Date.now() } as Message;
-			setMessages((prev) => [...prev, userMessage]);
+		const trimmed = input.trim();
+		if (!trimmed) {
+			return;
+		}
 
-			await aiAgent.connection.sendMessage(input);
-			setInput("");
+		await agent.connection.queue.message.send({
+			text: trimmed,
+			sender: "Operator",
+		});
+		setInput("");
+	};
+
+	const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+		if (event.key === "Enter" && !event.shiftKey) {
+			event.preventDefault();
+			sendMessage();
 		}
 	};
 
 	return (
-		<div className="ai-chat">
-			<div className="messages">
+		<section className="agent-card">
+			<header className="agent-card__header">
+				<div>
+					<p className="agent-card__title">{info.name}</p>
+					<p className="agent-card__meta">{info.id}</p>
+				</div>
+				<div className="agent-card__status">
+					<span
+						className={`status-dot status-dot--${status?.state ?? "idle"}`}
+					/>
+					<span className="status-label">
+						{status?.state ?? "idle"}
+					</span>
+				</div>
+			</header>
+
+			<div className="agent-card__timeline">
 				{messages.length === 0 ? (
-					<div className="empty-message">
-						Ask the AI assistant a question to get started
-					</div>
+					<p className="agent-card__empty">
+						Send a message to wake this Rivet Actor.
+					</p>
 				) : (
-					messages.map((msg, i) => (
-						<div key={i} className={`message ${msg.role}`}>
-							<div className="avatar">{msg.role === "user" ? "👤" : "🤖"}</div>
-							<div className="content">{msg.content}</div>
-						</div>
+					messages.map((message) => (
+						<article
+							key={message.id}
+							className={`message message--${message.role}`}
+						>
+							<div className="message__header">
+								<span className="message__sender">{message.sender}</span>
+								<span className="message__time">
+									{formatTime(message.createdAt)}
+								</span>
+							</div>
+							<p className="message__content">{message.content}</p>
+						</article>
 					))
 				)}
-				{isLoading && (
-					<div className="message assistant loading">
-						<div className="avatar">🤖</div>
-						<div className="content">Thinking...</div>
-					</div>
-				)}
 			</div>
 
-			<div className="input-area">
-				<input
+			<div className="agent-card__footer">
+				<textarea
 					value={input}
-					onChange={(e) => setInput(e.target.value)}
-					onKeyPress={(e) => e.key === "Enter" && handleSendMessage()}
-					placeholder="Ask the AI assistant..."
-					disabled={isLoading}
+					onChange={(event) => setInput(event.target.value)}
+					onKeyDown={handleKeyDown}
+					placeholder="Send a message to this agent"
+					rows={2}
+					disabled={!agent.connection}
 				/>
 				<button
-					onClick={handleSendMessage}
-					disabled={isLoading || !input.trim()}
+					onClick={sendMessage}
+					disabled={!agent.connection || !input.trim()}
 				>
 					Send
 				</button>
 			</div>
+
+			{status?.state === "error" && status.error ? (
+				<p className="agent-card__error">{status.error}</p>
+			) : null}
+		</section>
+	);
+}
+
+export function App() {
+	const manager = useActor({
+		name: "agentManager",
+		key: ["primary"],
+	});
+	const [agents, setAgents] = useState<AgentInfo[]>([]);
+	const [agentName, setAgentName] = useState("");
+
+	useEffect(() => {
+		if (!manager.connection) {
+			return;
+		}
+
+		manager.connection.listAgents().then(setAgents);
+	}, [manager.connection]);
+
+	const createAgent = async () => {
+		if (!manager.connection) {
+			return;
+		}
+
+		const info = await manager.connection.createAgent(agentName);
+		setAgents((prev) => [...prev, info]);
+		setAgentName("");
+	};
+
+	const handleCreateKeyDown = (
+		event: React.KeyboardEvent<HTMLInputElement>,
+	) => {
+		if (event.key === "Enter") {
+			createAgent();
+		}
+	};
+
+	return (
+		<div className="layout">
+			<header className="hero">
+				<div>
+					<p className="hero__eyebrow">AI Agent</p>
+					<h1>Spin up AI agents and message them in parallel.</h1>
+					<p className="hero__subtitle">
+						Each Rivet Actor keeps its own memory and streams responses
+						as queue messages arrive.
+					</p>
+				</div>
+				<div className="hero__controls">
+					<label className="control">
+						<span>Agent name</span>
+						<input
+							value={agentName}
+							onChange={(event) => setAgentName(event.target.value)}
+							onKeyDown={handleCreateKeyDown}
+							placeholder="Ops Analyst"
+							disabled={!manager.connection}
+						/>
+					</label>
+					<button
+						onClick={createAgent}
+						disabled={!manager.connection}
+					>
+						Create agent
+					</button>
+				</div>
+			</header>
+
+			<section className="agents">
+				<div className="agents__header">
+					<h2>Active agents</h2>
+					<span className="agents__count">{agents.length}</span>
+				</div>
+				<div className="agents__grid">
+					{agents.length === 0 ? (
+						<p className="agents__empty">
+							No agents yet. Create one to start chatting.
+						</p>
+					) : (
+						agents.map((info) => (
+							<AgentPanel key={info.id} info={info} />
+						))
+					)}
+				</div>
+			</section>
 		</div>
 	);
 }
diff --git a/examples/ai-agent-vercel/frontend/main.tsx b/examples/ai-agent-vercel/frontend/main.tsx
index c90f447886..4a245d701b 100644
--- a/examples/ai-agent-vercel/frontend/main.tsx
+++ b/examples/ai-agent-vercel/frontend/main.tsx
@@ -3,10 +3,12 @@ import { createRoot } from "react-dom/client";
 import { App } from "./App.tsx";
 
 const root = document.getElementById("root");
-if (!root) throw new Error("Root element not found");
+if (!root) {
+	throw new Error("Root element not found");
+}
 
 createRoot(root).render(
 	<StrictMode>
 		<App />
-	</StrictMode>
-);
\ No newline at end of file
+	</StrictMode>,
+);
diff --git a/examples/ai-agent-vercel/index.html b/examples/ai-agent-vercel/index.html
index f8c24d6258..fa620a314d 100644
--- a/examples/ai-agent-vercel/index.html
+++ b/examples/ai-agent-vercel/index.html
@@ -1,116 +1,340 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>AI Agent Example</title>
-    <style>
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            margin: 0;
-            padding: 20px;
-            background-color: #f5f5f5;
-        }
-        .ai-chat {
-            max-width: 800px;
-            margin: 0 auto;
-            background: white;
-            border-radius: 8px;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-            overflow: hidden;
-        }
-        .messages {
-            height: 400px;
-            overflow-y: auto;
-            padding: 20px;
-            border-bottom: 1px solid #eee;
-        }
-        .message {
-            display: flex;
-            margin-bottom: 16px;
-            align-items: flex-start;
-        }
-        .message.user {
-            justify-content: flex-end;
-        }
-        .message.assistant {
-            justify-content: flex-start;
-        }
-        .avatar {
-            width: 40px;
-            height: 40px;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background: #007bff;
-            color: white;
-            font-size: 18px;
-            flex-shrink: 0;
-        }
-        .message.user .avatar {
-            background: #28a745;
-            margin-left: 10px;
-        }
-        .message.assistant .avatar {
-            background: #007bff;
-            margin-right: 10px;
-        }
-        .content {
-            max-width: 60%;
-            padding: 12px 16px;
-            border-radius: 18px;
-            background: #f1f1f1;
-            word-wrap: break-word;
-        }
-        .message.user .content {
-            background: #007bff;
-            color: white;
-        }
-        .message.assistant .content {
-            background: #f1f1f1;
-        }
-        .message.loading .content {
-            background: #e9ecef;
-            font-style: italic;
-        }
-        .empty-message {
-            text-align: center;
-            color: #666;
-            padding: 40px;
-        }
-        .input-area {
-            display: flex;
-            padding: 20px;
-            gap: 10px;
-        }
-        .input-area input {
-            flex: 1;
-            padding: 12px;
-            border: 1px solid #ddd;
-            border-radius: 6px;
-            font-size: 16px;
-        }
-        .input-area button {
-            padding: 12px 24px;
-            background: #007bff;
-            color: white;
-            border: none;
-            border-radius: 6px;
-            cursor: pointer;
-            font-size: 16px;
-        }
-        .input-area button:disabled {
-            background: #ccc;
-            cursor: not-allowed;
-        }
-        .input-area button:hover:not(:disabled) {
-            background: #0056b3;
-        }
-    </style>
+	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<title>AI Agent Example</title>
+	<style>
+		@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=Space+Grotesk:wght@400;600;700&display=swap");
+
+		:root {
+			color-scheme: light;
+			--ink: #1a1d22;
+			--muted: #5b6069;
+			--surface: #ffffff;
+			--surface-muted: #f4f6f8;
+			--accent: #1f7a75;
+			--accent-strong: #0c5f5a;
+			--highlight: #f2b93b;
+			--border: rgba(26, 29, 34, 0.12);
+			--shadow: rgba(20, 24, 31, 0.08);
+		}
+
+		* {
+			box-sizing: border-box;
+		}
+
+		body {
+			margin: 0;
+			font-family: "Space Grotesk", "Helvetica Neue", sans-serif;
+			color: var(--ink);
+			background:
+				radial-gradient(circle at top left, #fef1d8 0%, transparent 45%),
+				radial-gradient(circle at 20% 30%, #e0f2f1 0%, transparent 50%),
+				linear-gradient(120deg, #f7f5ef 0%, #f2f7f7 100%);
+			min-height: 100vh;
+		}
+
+		h1,
+		h2,
+		h3,
+		p {
+			margin: 0;
+		}
+
+		button,
+		input,
+		textarea {
+			font-family: inherit;
+		}
+
+		.layout {
+			max-width: 1200px;
+			margin: 0 auto;
+			padding: 32px 20px 48px;
+			display: flex;
+			flex-direction: column;
+			gap: 28px;
+		}
+
+		.hero {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 24px;
+			align-items: center;
+			justify-content: space-between;
+			background: var(--surface);
+			border: 1px solid var(--border);
+			border-radius: 20px;
+			padding: 28px;
+			box-shadow: 0 18px 40px var(--shadow);
+		}
+
+		.hero__eyebrow {
+			text-transform: uppercase;
+			letter-spacing: 0.2em;
+			font-size: 0.75rem;
+			color: var(--accent-strong);
+			margin-bottom: 12px;
+		}
+
+		.hero h1 {
+			font-size: clamp(2.2rem, 3vw, 3.2rem);
+			line-height: 1.1;
+			max-width: 520px;
+		}
+
+		.hero__subtitle {
+			margin-top: 12px;
+			max-width: 520px;
+			color: var(--muted);
+		}
+
+		.hero__controls {
+			flex: 1;
+			min-width: 260px;
+			background: var(--surface-muted);
+			border-radius: 16px;
+			padding: 20px;
+			display: flex;
+			flex-direction: column;
+			gap: 12px;
+		}
+
+		.control {
+			display: flex;
+			flex-direction: column;
+			gap: 6px;
+			font-size: 0.9rem;
+			color: var(--muted);
+		}
+
+		.control input {
+			padding: 10px 12px;
+			border-radius: 10px;
+			border: 1px solid var(--border);
+			font-size: 1rem;
+		}
+
+		.hero__controls button {
+			padding: 12px 16px;
+			border: none;
+			border-radius: 12px;
+			background: var(--accent);
+			color: white;
+			font-weight: 600;
+			cursor: pointer;
+			transition: transform 0.2s ease, box-shadow 0.2s ease;
+		}
+
+		.hero__controls button:hover:not(:disabled) {
+			transform: translateY(-1px);
+			box-shadow: 0 10px 18px rgba(31, 122, 117, 0.25);
+		}
+
+		.hero__controls button:disabled {
+			opacity: 0.6;
+			cursor: not-allowed;
+		}
+
+		.agents {
+			display: flex;
+			flex-direction: column;
+			gap: 16px;
+		}
+
+		.agents__header {
+			display: flex;
+			align-items: center;
+			gap: 12px;
+		}
+
+		.agents__header h2 {
+			font-size: 1.4rem;
+		}
+
+		.agents__count {
+			background: var(--highlight);
+			color: #3f2a00;
+			padding: 4px 10px;
+			border-radius: 999px;
+			font-weight: 600;
+			font-size: 0.9rem;
+		}
+
+		.agents__grid {
+			display: grid;
+			grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+			gap: 18px;
+		}
+
+		.agents__empty {
+			padding: 20px;
+			background: var(--surface-muted);
+			border-radius: 14px;
+			color: var(--muted);
+			border: 1px dashed var(--border);
+		}
+
+		.agent-card {
+			background: var(--surface);
+			border: 1px solid var(--border);
+			border-radius: 16px;
+			padding: 18px;
+			display: flex;
+			flex-direction: column;
+			gap: 14px;
+			min-height: 420px;
+			box-shadow: 0 12px 24px var(--shadow);
+		}
+
+		.agent-card__header {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			gap: 12px;
+		}
+
+		.agent-card__title {
+			font-weight: 600;
+			font-size: 1.1rem;
+		}
+
+		.agent-card__meta {
+			font-size: 0.75rem;
+			color: var(--muted);
+			font-family: "IBM Plex Mono", monospace;
+		}
+
+		.agent-card__status {
+			display: inline-flex;
+			align-items: center;
+			gap: 6px;
+			font-size: 0.85rem;
+			color: var(--muted);
+		}
+
+		.status-dot {
+			width: 10px;
+			height: 10px;
+			border-radius: 50%;
+			background: #9aa1ab;
+		}
+
+		.status-dot--thinking {
+			background: var(--highlight);
+		}
+
+		.status-dot--error {
+			background: #d95040;
+		}
+
+		.status-dot--idle {
+			background: #5bc184;
+		}
+
+		.agent-card__timeline {
+			background: var(--surface-muted);
+			border-radius: 12px;
+			padding: 12px;
+			flex: 1;
+			overflow-y: auto;
+			display: flex;
+			flex-direction: column;
+			gap: 12px;
+		}
+
+		.agent-card__empty {
+			color: var(--muted);
+			font-size: 0.95rem;
+		}
+
+		.message {
+			background: var(--surface);
+			border-radius: 12px;
+			padding: 10px 12px;
+			box-shadow: inset 0 0 0 1px var(--border);
+			display: flex;
+			flex-direction: column;
+			gap: 6px;
+		}
+
+		.message--user {
+			border-left: 4px solid var(--accent);
+		}
+
+		.message--assistant {
+			border-left: 4px solid #f0a33b;
+		}
+
+		.message__header {
+			display: flex;
+			justify-content: space-between;
+			font-size: 0.75rem;
+			color: var(--muted);
+			text-transform: uppercase;
+			letter-spacing: 0.08em;
+		}
+
+		.message__content {
+			margin: 0;
+			white-space: pre-wrap;
+			line-height: 1.4;
+			font-size: 0.95rem;
+		}
+
+		.agent-card__footer {
+			display: flex;
+			gap: 10px;
+			align-items: center;
+		}
+
+		.agent-card__footer textarea {
+			flex: 1;
+			resize: vertical;
+			border-radius: 12px;
+			border: 1px solid var(--border);
+			padding: 10px 12px;
+			background: white;
+		}
+
+		.agent-card__footer button {
+			padding: 10px 16px;
+			border-radius: 12px;
+			border: none;
+			background: var(--accent-strong);
+			color: white;
+			font-weight: 600;
+			cursor: pointer;
+		}
+
+		.agent-card__footer button:disabled {
+			opacity: 0.6;
+			cursor: not-allowed;
+		}
+
+		.agent-card__error {
+			font-size: 0.85rem;
+			color: #b04032;
+			background: #fdebe8;
+			padding: 8px 10px;
+			border-radius: 10px;
+			border: 1px solid #f5c3bb;
+		}
+
+		@media (max-width: 720px) {
+			.hero {
+				padding: 20px;
+			}
+
+			.hero__controls {
+				width: 100%;
+			}
+		}
+	</style>
 </head>
 <body>
-    <div id="root"></div>
-    <script type="module" src="/frontend/main.tsx"></script>
+	<div id="root"></div>
+	<script type="module" src="/frontend/main.tsx"></script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/examples/ai-agent-vercel/package.json b/examples/ai-agent-vercel/package.json
index d63fbbb5a6..11b0fbacec 100644
--- a/examples/ai-agent-vercel/package.json
+++ b/examples/ai-agent-vercel/package.json
@@ -1,5 +1,5 @@
 {
-	"name": "example-ai-agent-vercel",
+	"name": "ai-agent-vercel",
 	"version": "2.0.21",
 	"private": true,
 	"type": "module",
@@ -14,11 +14,10 @@
 		"@hono/node-ws": "^1.3.0",
 		"@rivetkit/react": "^2.0.38",
 		"ai": "^4.0.38",
-		"hono": "^4.0.0",
+		"hono": "^4.11.3",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"rivetkit": "^2.0.38",
-		"zod": "^3.25.69"
+		"rivetkit": "^2.0.38"
 	},
 	"devDependencies": {
 		"@types/node": "^22.13.9",
@@ -32,13 +31,14 @@
 	},
 	"template": {
 		"technologies": [
+			"react",
 			"typescript"
 		],
 		"tags": [
 			"ai",
 			"real-time"
 		],
-		"priority": 100,
+		"priority": 120,
 		"frontendPort": 5173
 	},
 	"stableVersion": "0.8.0",
diff --git a/examples/ai-agent-vercel/src/actors.ts b/examples/ai-agent-vercel/src/actors.ts
index cb792ba04a..81bd367d5b 100644
--- a/examples/ai-agent-vercel/src/actors.ts
+++ b/examples/ai-agent-vercel/src/actors.ts
@@ -1,66 +1,199 @@
 import { openai } from "@ai-sdk/openai";
-import { generateText, tool } from "ai";
+import { streamText, type CoreMessage } from "ai";
 import { actor, setup } from "rivetkit";
-import { z } from "zod";
-import { getWeather } from "./my-tools.ts";
-import type { Message } from "./types.ts";
 
-export const aiAgent = actor({
+export type AgentMessage = {
+	id: string;
+	role: "user" | "assistant";
+	sender: string;
+	content: string;
+	createdAt: number;
+};
+
+export type AgentStatus = {
+	state: "idle" | "thinking" | "error";
+	updatedAt: number;
+	error?: string;
+};
+
+export type AgentInfo = {
+	id: string;
+	name: string;
+	createdAt: number;
+};
+
+export type AgentQueueMessage = {
+	text: string;
+	sender?: string;
+};
+
+const SYSTEM_PROMPT =
+	"You are a focused AI assistant. Keep responses concise, actionable, and ready for handoff.";
+
+const buildId = (prefix: string) =>
+	`${prefix}-${Date.now()}-${Math.random().toString(16).slice(2)}`;
+
+const buildPromptMessages = (messages: AgentMessage[]): CoreMessage[] => {
+	return [
+		{ role: "system", content: SYSTEM_PROMPT },
+		...messages.map((message) => ({
+			role: message.role,
+			content: message.content,
+		})),
+	];
+};
+
+export const agent = actor({
 	// Persistent state that survives restarts: https://rivet.dev/docs/actors/state
 	state: {
-		messages: [] as Message[],
+		messages: [] as AgentMessage[],
+		status: {
+			state: "idle",
+			updatedAt: Date.now(),
+		} as AgentStatus,
 	},
 
-	actions: {
-		// Callable functions from clients: https://rivet.dev/docs/actors/actions
-		getMessages: (c) => c.state.messages,
+	// The run hook keeps the agent listening for queued messages.
+	run: async (c) => {
+		while (true) {
+			const queued = await c.queue.next("message");
+
+			const body = queued.body as AgentQueueMessage;
+			if (!body?.text || typeof body.text !== "string") {
+				continue;
+			}
 
-		sendMessage: async (c, userMessage: string) => {
-			const userMsg: Message = {
+			const sender = body.sender?.trim() || "Operator";
+			const userMessage: AgentMessage = {
+				id: buildId("user"),
 				role: "user",
-				content: userMessage,
-				timestamp: Date.now(),
+				sender,
+				content: body.text.trim(),
+				createdAt: Date.now(),
 			};
-			// State changes are automatically persisted
-			c.state.messages.push(userMsg);
-
-			const { text } = await generateText({
-				model: openai("gpt-4o-mini"),
-				prompt: userMessage,
-				messages: c.state.messages,
-				tools: {
-					weather: tool({
-						description: "Get the weather in a location",
-						parameters: z.object({
-							location: z
-								.string()
-								.describe(
-									"The location to get the weather for",
-								),
-						}),
-						execute: async ({ location }) => {
-							return await getWeather(location);
-						},
-					}),
-				},
-			});
-
-			const assistantMsg: Message = {
+
+			c.state.messages.push(userMessage);
+			c.broadcast("messageAdded", userMessage);
+
+			const promptMessages = buildPromptMessages(c.state.messages);
+
+			const assistantMessage: AgentMessage = {
+				id: buildId("assistant"),
 				role: "assistant",
-				content: text,
-				timestamp: Date.now(),
+				sender: "Agent",
+				content: "",
+				createdAt: Date.now(),
+			};
+
+			c.state.messages.push(assistantMessage);
+			c.broadcast("messageAdded", assistantMessage);
+
+			c.state.status = {
+				state: "thinking",
+				updatedAt: Date.now(),
+			};
+			c.broadcast("status", c.state.status);
+
+			try {
+				const result = await streamText({
+					model: openai("gpt-4o-mini"),
+					messages: promptMessages,
+				});
+
+				let content = "";
+				for await (const delta of result.textStream) {
+					if (c.abortSignal.aborted) {
+						break;
+					}
+
+					content += delta;
+					assistantMessage.content = content;
+					c.broadcast("response", {
+						messageId: assistantMessage.id,
+						delta,
+						content,
+						done: false,
+					});
+				}
+
+				assistantMessage.content = content || assistantMessage.content;
+				c.broadcast("response", {
+					messageId: assistantMessage.id,
+					delta: "",
+					content: assistantMessage.content,
+					done: true,
+				});
+
+				c.state.status = {
+					state: "idle",
+					updatedAt: Date.now(),
+				};
+				c.broadcast("status", c.state.status);
+			} catch (error) {
+				const errorMessage =
+					error instanceof Error ? error.message : "Unknown error";
+
+				assistantMessage.content =
+					assistantMessage.content ||
+					"I hit a snag while responding. Please try again.";
+
+				c.state.status = {
+					state: "error",
+					updatedAt: Date.now(),
+					error: errorMessage,
+				};
+
+				c.broadcast("response", {
+					messageId: assistantMessage.id,
+					delta: "",
+					content: assistantMessage.content,
+					done: true,
+					error: errorMessage,
+				});
+				c.broadcast("status", c.state.status);
+			}
+		}
+	},
+
+	actions: {
+		// Callable functions from clients: https://rivet.dev/docs/actors/actions
+		getHistory: (c) => c.state.messages,
+		getStatus: (c) => c.state.status,
+	},
+});
+
+export const agentManager = actor({
+	// Persistent state that survives restarts: https://rivet.dev/docs/actors/state
+	state: {
+		agents: [] as AgentInfo[],
+	},
+
+	actions: {
+		// Callable functions from clients: https://rivet.dev/docs/actors/actions
+		createAgent: async (c, name?: string) => {
+			const trimmedName = name?.trim();
+			const agentName =
+				trimmedName || `Agent ${c.state.agents.length + 1}`;
+			const info: AgentInfo = {
+				id: buildId("agent"),
+				name: agentName,
+				createdAt: Date.now(),
 			};
-			c.state.messages.push(assistantMsg);
 
-			// Send events to all connected clients: https://rivet.dev/docs/actors/events
-			c.broadcast("messageReceived", assistantMsg);
+			c.state.agents.push(info);
 
-			return assistantMsg;
+			const client = c.client<typeof registry>();
+			const handle = client.agent.getOrCreate([info.id]);
+			await handle.getStatus();
+
+			return info;
 		},
+
+		listAgents: (c) => c.state.agents,
 	},
 });
 
 // Register actors for use: https://rivet.dev/docs/setup
 export const registry = setup({
-	use: { aiAgent },
+	use: { agent, agentManager },
 });
diff --git a/examples/ai-agent-vercel/src/my-tools.ts b/examples/ai-agent-vercel/src/my-tools.ts
deleted file mode 100644
index a0ef451bea..0000000000
--- a/examples/ai-agent-vercel/src/my-tools.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export async function getWeather(location: string) {
-	// Mock weather API response
-	return {
-		location,
-		temperature: Math.floor(Math.random() * 30) + 10,
-		condition: ["sunny", "cloudy", "rainy", "snowy"][
-			Math.floor(Math.random() * 4)
-		],
-		humidity: Math.floor(Math.random() * 50) + 30,
-	};
-}
diff --git a/examples/ai-agent-vercel/src/server.ts b/examples/ai-agent-vercel/src/server.ts
index 95c8895f94..8c065a6b5e 100644
--- a/examples/ai-agent-vercel/src/server.ts
+++ b/examples/ai-agent-vercel/src/server.ts
@@ -2,5 +2,7 @@ import { Hono } from "hono";
 import { registry } from "./actors.ts";
 
 const app = new Hono();
+
 app.all("/api/rivet/*", (c) => registry.handler(c.req.raw));
+
 export default app;
diff --git a/examples/ai-agent-vercel/src/types.ts b/examples/ai-agent-vercel/src/types.ts
deleted file mode 100644
index 010dfec6d7..0000000000
--- a/examples/ai-agent-vercel/src/types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export type Message = {
-	role: "user" | "assistant";
-	content: string;
-	timestamp: number;
-};
diff --git a/examples/ai-agent-vercel/tests/ai-agent.test.ts b/examples/ai-agent-vercel/tests/ai-agent.test.ts
deleted file mode 100644
index 3532a76f4f..0000000000
--- a/examples/ai-agent-vercel/tests/ai-agent.test.ts
+++ /dev/null
@@ -1,117 +0,0 @@
-import { setupTest } from "rivetkit/test";
-import { expect, test, vi } from "vitest";
-import { registry } from "../src/actors.ts";
-
-// Mock the AI SDK and OpenAI
-vi.mock("@ai-sdk/openai", () => ({
-	openai: () => "mock-model",
-}));
-
-vi.mock("ai", () => ({
-	generateText: vi.fn().mockImplementation(async ({ prompt }) => ({
-		text: `AI response to: ${prompt}`,
-	})),
-	tool: vi.fn().mockImplementation(({ execute }) => ({ execute })),
-}));
-
-vi.mock("../src/my-tools.ts", () => ({
-	getWeather: vi.fn().mockResolvedValue({
-		location: "San Francisco",
-		temperature: 72,
-		condition: "sunny",
-	}),
-}));
-
-test("AI Agent can handle basic actions without connection", async (ctx) => {
-	const { client } = await setupTest(ctx, registry);
-	const agent = client.aiAgent.getOrCreate(["test-basic"]);
-
-	// Test initial state
-	const initialMessages = await agent.getMessages();
-	expect(initialMessages).toEqual([]);
-
-	// Send a message
-	const userMessage = "Hello, how are you?";
-	const response = await agent.sendMessage(userMessage);
-
-	// Verify response structure
-	expect(response).toMatchObject({
-		role: "assistant",
-		content: expect.stringContaining("AI response to: Hello, how are you?"),
-		timestamp: expect.any(Number),
-	});
-
-	// Verify messages are stored
-	const messages = await agent.getMessages();
-	expect(messages).toHaveLength(2);
-	expect(messages[0]).toMatchObject({
-		role: "user",
-		content: userMessage,
-		timestamp: expect.any(Number),
-	});
-	expect(messages[1]).toEqual(response);
-});
-
-test("AI Agent maintains conversation history", async (ctx) => {
-	const { client } = await setupTest(ctx, registry);
-	const agent = client.aiAgent.getOrCreate(["test-history"]);
-
-	// Send multiple messages
-	await agent.sendMessage("First message");
-	await agent.sendMessage("Second message");
-	await agent.sendMessage("Third message");
-
-	const messages = await agent.getMessages();
-	expect(messages).toHaveLength(6); // 3 user + 3 assistant messages
-
-	// Verify message ordering and roles
-	expect(messages[0].role).toBe("user");
-	expect(messages[0].content).toBe("First message");
-	expect(messages[1].role).toBe("assistant");
-	expect(messages[2].role).toBe("user");
-	expect(messages[2].content).toBe("Second message");
-	expect(messages[3].role).toBe("assistant");
-	expect(messages[4].role).toBe("user");
-	expect(messages[4].content).toBe("Third message");
-	expect(messages[5].role).toBe("assistant");
-});
-
-test("AI Agent handles weather tool usage", async (ctx) => {
-	const { client } = await setupTest(ctx, registry);
-	const agent = client.aiAgent.getOrCreate(["test-weather"]);
-
-	// Send a weather-related message
-	const response = await agent.sendMessage(
-		"What's the weather in San Francisco?",
-	);
-
-	// Verify response was generated
-	expect(response.role).toBe("assistant");
-	expect(response.content).toContain(
-		"AI response to: What's the weather in San Francisco?",
-	);
-	expect(response.timestamp).toBeGreaterThan(0);
-
-	// Verify message history includes both user and assistant messages
-	const messages = await agent.getMessages();
-	expect(messages).toHaveLength(2);
-	expect(messages[0].content).toBe("What's the weather in San Francisco?");
-	expect(messages[1]).toEqual(response);
-});
-
-test("AI Agent timestamps are sequential", async (ctx) => {
-	const { client } = await setupTest(ctx, registry);
-	const agent = client.aiAgent.getOrCreate(["test-timestamps"]);
-
-	const response1 = await agent.sendMessage("First");
-	const response2 = await agent.sendMessage("Second");
-
-	expect(response2.timestamp).toBeGreaterThanOrEqual(response1.timestamp);
-
-	const messages = await agent.getMessages();
-	for (let i = 1; i < messages.length; i++) {
-		expect(messages[i].timestamp).toBeGreaterThanOrEqual(
-			messages[i - 1].timestamp,
-		);
-	}
-});
diff --git a/examples/ai-agent-vercel/vitest.config.ts b/examples/ai-agent-vercel/vitest.config.ts
deleted file mode 100644
index 5a32eade8e..0000000000
--- a/examples/ai-agent-vercel/vitest.config.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { defineConfig } from "vitest/config";
-
-export default defineConfig({
-	test: {
-		include: ["tests/**/*.test.ts"],
-		testTimeout: 30000,
-	},
-});
diff --git a/examples/ai-agent/.gitignore b/examples/ai-agent/.gitignore
new file mode 100644
index 0000000000..dc6f607390
--- /dev/null
+++ b/examples/ai-agent/.gitignore
@@ -0,0 +1,2 @@
+.actorcore
+node_modules
diff --git a/examples/ai-agent/README.md b/examples/ai-agent/README.md
index 6d5725ade0..c96b3c9004 100644
--- a/examples/ai-agent/README.md
+++ b/examples/ai-agent/README.md
@@ -1,39 +1,39 @@
-# AI Agent Chat
+# AI Agent
 
-Example project demonstrating AI agent integration.
+Example project demonstrating queue-driven Rivet Actor AI agents with streaming Vercel AI SDK responses.
 
 ## Getting Started
 
 ```sh
 git clone https://github.com/rivet-dev/rivet.git
 cd rivet/examples/ai-agent
-npm install
-npm run dev
+pnpm install
+pnpm dev
 ```
 
-
 ## Features
 
-- **AI SDK integration**: Use Vercel AI SDK with OpenAI within Rivet Actors
-- **Persistent conversation state**: Message history automatically persisted across actor restarts
-- **Real-time updates**: Broadcast AI responses to connected clients using actor events
-- **Tool calling**: Integrate custom tools (weather lookup) that AI can invoke
+- Actor-per-agent pattern with a coordinating manager Rivet Actor
+- Queue-based intake using `c.queue.next` inside the run loop
+- Streaming AI responses sent to the UI as they arrive
+- Persistent history stored in Rivet Actor state
+- Live status updates via events and polling
 
-## Implementation
+## Prerequisites
 
-The AI agent is implemented as a Rivet Actor that maintains conversation state and integrates with OpenAI. Key implementation details:
+- OpenAI API key set as `OPENAI_API_KEY`
 
-- **Actor Definition** ([`src/backend/registry.ts`](https://github.com/rivet-dev/rivet/tree/main/examples/ai-agent/src/backend/registry.ts)): Defines the `aiAgent` actor with persistent message history
-- **Custom Tools** ([`src/backend/my-tools.ts`](https://github.com/rivet-dev/rivet/tree/main/examples/ai-agent/src/backend/my-tools.ts)): Implements the weather lookup tool that the AI can invoke
-- **Message Types** ([`src/backend/types.ts`](https://github.com/rivet-dev/rivet/tree/main/examples/ai-agent/src/backend/types.ts)): TypeScript types for message structure
+## Implementation
 
-## Prerequisites
+The AgentManager creates and tracks agent actors, while each AI agent Rivet Actor consumes queue messages in `run` and streams responses with the Vercel AI SDK.
 
-- OpenAI API Key (set as `OPENAI_API_KEY` environment variable)
+- **Actor definitions and queues** ([`src/actors.ts`](https://github.com/rivet-dev/rivet/tree/main/examples/ai-agent/src/actors.ts))
+- **Frontend orchestration** ([`frontend/App.tsx`](https://github.com/rivet-dev/rivet/tree/main/examples/ai-agent/frontend/App.tsx))
+- **Server entry point** ([`src/server.ts`](https://github.com/rivet-dev/rivet/tree/main/examples/ai-agent/src/server.ts))
 
 ## Resources
 
-Read more about [actions](/docs/actors/actions), [state](/docs/actors/state), and [events](/docs/actors/events).
+Read more about [queues](https://rivet.dev/docs/actors/queues), [run handlers](https://rivet.dev/docs/actors/run), [state](https://rivet.dev/docs/actors/state), and [events](https://rivet.dev/docs/actors/events).
 
 ## License
 
diff --git a/examples/ai-agent/frontend/App.tsx b/examples/ai-agent/frontend/App.tsx
index cebc26c97f..900945b812 100644
--- a/examples/ai-agent/frontend/App.tsx
+++ b/examples/ai-agent/frontend/App.tsx
@@ -1,80 +1,244 @@
 import { createRivetKit } from "@rivetkit/react";
 import { useEffect, useState } from "react";
-import { registry } from "../src/actors.ts";
-import type { Message } from "../src/types.ts";
+import type {
+	AgentInfo,
+	AgentMessage,
+	AgentStatus,
+	registry,
+} from "../src/actors.ts";
 
-const { useActor } = createRivetKit<typeof registry>(`${window.location.origin}/api/rivet`);
+const { useActor } = createRivetKit<typeof registry>(
+	`${location.origin}/api/rivet`,
+);
 
-export function App() {
-	const aiAgent = useActor({
-		name: "aiAgent",
-		key: ["default"],
+type ResponseEvent = {
+	messageId: string;
+	delta: string;
+	content: string;
+	done: boolean;
+	error?: string;
+};
+
+function formatTime(timestamp: number) {
+	return new Date(timestamp).toLocaleTimeString();
+}
+
+function AgentPanel({ info }: { info: AgentInfo }) {
+	const agent = useActor({
+		name: "agent",
+		key: [info.id],
 	});
-	const [messages, setMessages] = useState<Message[]>([]);
+	const [messages, setMessages] = useState<AgentMessage[]>([]);
+	const [status, setStatus] = useState<AgentStatus | null>(null);
 	const [input, setInput] = useState("");
-	const [isLoading, setIsLoading] = useState(false);
 
 	useEffect(() => {
-		if (aiAgent.connection) {
-			aiAgent.connection.getMessages().then(setMessages);
+		if (!agent.connection) {
+			return;
 		}
-	}, [aiAgent.connection]);
 
-	aiAgent.useEvent("messageReceived", (message: Message) => {
-		setMessages((prev) => [...prev, message]);
-		setIsLoading(false);
+		agent.connection.getHistory().then(setMessages);
+		agent.connection.getStatus().then(setStatus);
+	}, [agent.connection]);
+
+	agent.useEvent("messageAdded", (message: AgentMessage) => {
+		setMessages((prev) => {
+			const existingIndex = prev.findIndex((item) => item.id === message.id);
+			if (existingIndex !== -1) {
+				const next = [...prev];
+				next[existingIndex] = message;
+				return next;
+			}
+			return [...prev, message].sort(
+				(a, b) => a.createdAt - b.createdAt,
+			);
+		});
+	});
+
+	agent.useEvent("response", (payload: ResponseEvent) => {
+		setMessages((prev) =>
+			prev.map((message) =>
+				message.id === payload.messageId
+					? { ...message, content: payload.content }
+					: message,
+			),
+		);
+	});
+
+	agent.useEvent("status", (nextStatus: AgentStatus) => {
+		setStatus(nextStatus);
 	});
 
-	const handleSendMessage = async () => {
-		if (aiAgent.connection && input.trim()) {
-			setIsLoading(true);
+	const sendMessage = async () => {
+		if (!agent.connection) {
+			return;
+		}
 
-			const userMessage = { role: "user", content: input, timestamp: Date.now() } as Message;
-			setMessages((prev) => [...prev, userMessage]);
+		const trimmed = input.trim();
+		if (!trimmed) {
+			return;
+		}
 
-			await aiAgent.connection.sendMessage(input);
-			setInput("");
+		await agent.connection.queue.message.send({
+			text: trimmed,
+			sender: "Operator",
+		});
+		setInput("");
+	};
+
+	const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+		if (event.key === "Enter" && !event.shiftKey) {
+			event.preventDefault();
+			sendMessage();
 		}
 	};
 
 	return (
-		<div className="ai-chat">
-			<div className="messages">
+		<section className="agent-card">
+			<header className="agent-card__header">
+				<div>
+					<p className="agent-card__title">{info.name}</p>
+					<p className="agent-card__meta">{info.id}</p>
+				</div>
+				<div className="agent-card__status">
+					<span
+						className={`status-dot status-dot--${status?.state ?? "idle"}`}
+					/>
+					<span className="status-label">
+						{status?.state ?? "idle"}
+					</span>
+				</div>
+			</header>
+
+			<div className="agent-card__timeline">
 				{messages.length === 0 ? (
-					<div className="empty-message">
-						Ask the AI assistant a question to get started
-					</div>
+					<p className="agent-card__empty">
+						Send a message to wake this Rivet Actor.
+					</p>
 				) : (
-					messages.map((msg, i) => (
-						<div key={i} className={`message ${msg.role}`}>
-							<div className="avatar">{msg.role === "user" ? "👤" : "🤖"}</div>
-							<div className="content">{msg.content}</div>
-						</div>
+					messages.map((message) => (
+						<article
+							key={message.id}
+							className={`message message--${message.role}`}
+						>
+							<div className="message__header">
+								<span className="message__sender">{message.sender}</span>
+								<span className="message__time">
+									{formatTime(message.createdAt)}
+								</span>
+							</div>
+							<p className="message__content">{message.content}</p>
+						</article>
 					))
 				)}
-				{isLoading && (
-					<div className="message assistant loading">
-						<div className="avatar">🤖</div>
-						<div className="content">Thinking...</div>
-					</div>
-				)}
 			</div>
 
-			<div className="input-area">
-				<input
+			<div className="agent-card__footer">
+				<textarea
 					value={input}
-					onChange={(e) => setInput(e.target.value)}
-					onKeyPress={(e) => e.key === "Enter" && handleSendMessage()}
-					placeholder="Ask the AI assistant..."
-					disabled={isLoading}
+					onChange={(event) => setInput(event.target.value)}
+					onKeyDown={handleKeyDown}
+					placeholder="Send a message to this agent"
+					rows={2}
+					disabled={!agent.connection}
 				/>
 				<button
-					onClick={handleSendMessage}
-					disabled={isLoading || !input.trim()}
+					onClick={sendMessage}
+					disabled={!agent.connection || !input.trim()}
 				>
 					Send
 				</button>
 			</div>
+
+			{status?.state === "error" && status.error ? (
+				<p className="agent-card__error">{status.error}</p>
+			) : null}
+		</section>
+	);
+}
+
+export function App() {
+	const manager = useActor({
+		name: "agentManager",
+		key: ["primary"],
+	});
+	const [agents, setAgents] = useState<AgentInfo[]>([]);
+	const [agentName, setAgentName] = useState("");
+
+	useEffect(() => {
+		if (!manager.connection) {
+			return;
+		}
+
+		manager.connection.listAgents().then(setAgents);
+	}, [manager.connection]);
+
+	const createAgent = async () => {
+		if (!manager.connection) {
+			return;
+		}
+
+		const info = await manager.connection.createAgent(agentName);
+		setAgents((prev) => [...prev, info]);
+		setAgentName("");
+	};
+
+	const handleCreateKeyDown = (
+		event: React.KeyboardEvent<HTMLInputElement>,
+	) => {
+		if (event.key === "Enter") {
+			createAgent();
+		}
+	};
+
+	return (
+		<div className="layout">
+			<header className="hero">
+				<div>
+					<p className="hero__eyebrow">AI Agent</p>
+					<h1>Spin up AI agents and message them in parallel.</h1>
+					<p className="hero__subtitle">
+						Each Rivet Actor keeps its own memory and streams responses
+						as queue messages arrive.
+					</p>
+				</div>
+				<div className="hero__controls">
+					<label className="control">
+						<span>Agent name</span>
+						<input
+							value={agentName}
+							onChange={(event) => setAgentName(event.target.value)}
+							onKeyDown={handleCreateKeyDown}
+							placeholder="Ops Analyst"
+							disabled={!manager.connection}
+						/>
+					</label>
+					<button
+						onClick={createAgent}
+						disabled={!manager.connection}
+					>
+						Create agent
+					</button>
+				</div>
+			</header>
+
+			<section className="agents">
+				<div className="agents__header">
+					<h2>Active agents</h2>
+					<span className="agents__count">{agents.length}</span>
+				</div>
+				<div className="agents__grid">
+					{agents.length === 0 ? (
+						<p className="agents__empty">
+							No agents yet. Create one to start chatting.
+						</p>
+					) : (
+						agents.map((info) => (
+							<AgentPanel key={info.id} info={info} />
+						))
+					)}
+				</div>
+			</section>
 		</div>
 	);
 }
diff --git a/examples/ai-agent/frontend/main.tsx b/examples/ai-agent/frontend/main.tsx
index c90f447886..4a245d701b 100644
--- a/examples/ai-agent/frontend/main.tsx
+++ b/examples/ai-agent/frontend/main.tsx
@@ -3,10 +3,12 @@ import { createRoot } from "react-dom/client";
 import { App } from "./App.tsx";
 
 const root = document.getElementById("root");
-if (!root) throw new Error("Root element not found");
+if (!root) {
+	throw new Error("Root element not found");
+}
 
 createRoot(root).render(
 	<StrictMode>
 		<App />
-	</StrictMode>
-);
\ No newline at end of file
+	</StrictMode>,
+);
diff --git a/examples/ai-agent/index.html b/examples/ai-agent/index.html
index f8c24d6258..fa620a314d 100644
--- a/examples/ai-agent/index.html
+++ b/examples/ai-agent/index.html
@@ -1,116 +1,340 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>AI Agent Example</title>
-    <style>
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            margin: 0;
-            padding: 20px;
-            background-color: #f5f5f5;
-        }
-        .ai-chat {
-            max-width: 800px;
-            margin: 0 auto;
-            background: white;
-            border-radius: 8px;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-            overflow: hidden;
-        }
-        .messages {
-            height: 400px;
-            overflow-y: auto;
-            padding: 20px;
-            border-bottom: 1px solid #eee;
-        }
-        .message {
-            display: flex;
-            margin-bottom: 16px;
-            align-items: flex-start;
-        }
-        .message.user {
-            justify-content: flex-end;
-        }
-        .message.assistant {
-            justify-content: flex-start;
-        }
-        .avatar {
-            width: 40px;
-            height: 40px;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background: #007bff;
-            color: white;
-            font-size: 18px;
-            flex-shrink: 0;
-        }
-        .message.user .avatar {
-            background: #28a745;
-            margin-left: 10px;
-        }
-        .message.assistant .avatar {
-            background: #007bff;
-            margin-right: 10px;
-        }
-        .content {
-            max-width: 60%;
-            padding: 12px 16px;
-            border-radius: 18px;
-            background: #f1f1f1;
-            word-wrap: break-word;
-        }
-        .message.user .content {
-            background: #007bff;
-            color: white;
-        }
-        .message.assistant .content {
-            background: #f1f1f1;
-        }
-        .message.loading .content {
-            background: #e9ecef;
-            font-style: italic;
-        }
-        .empty-message {
-            text-align: center;
-            color: #666;
-            padding: 40px;
-        }
-        .input-area {
-            display: flex;
-            padding: 20px;
-            gap: 10px;
-        }
-        .input-area input {
-            flex: 1;
-            padding: 12px;
-            border: 1px solid #ddd;
-            border-radius: 6px;
-            font-size: 16px;
-        }
-        .input-area button {
-            padding: 12px 24px;
-            background: #007bff;
-            color: white;
-            border: none;
-            border-radius: 6px;
-            cursor: pointer;
-            font-size: 16px;
-        }
-        .input-area button:disabled {
-            background: #ccc;
-            cursor: not-allowed;
-        }
-        .input-area button:hover:not(:disabled) {
-            background: #0056b3;
-        }
-    </style>
+	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<title>AI Agent Example</title>
+	<style>
+		@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=Space+Grotesk:wght@400;600;700&display=swap");
+
+		:root {
+			color-scheme: light;
+			--ink: #1a1d22;
+			--muted: #5b6069;
+			--surface: #ffffff;
+			--surface-muted: #f4f6f8;
+			--accent: #1f7a75;
+			--accent-strong: #0c5f5a;
+			--highlight: #f2b93b;
+			--border: rgba(26, 29, 34, 0.12);
+			--shadow: rgba(20, 24, 31, 0.08);
+		}
+
+		* {
+			box-sizing: border-box;
+		}
+
+		body {
+			margin: 0;
+			font-family: "Space Grotesk", "Helvetica Neue", sans-serif;
+			color: var(--ink);
+			background:
+				radial-gradient(circle at top left, #fef1d8 0%, transparent 45%),
+				radial-gradient(circle at 20% 30%, #e0f2f1 0%, transparent 50%),
+				linear-gradient(120deg, #f7f5ef 0%, #f2f7f7 100%);
+			min-height: 100vh;
+		}
+
+		h1,
+		h2,
+		h3,
+		p {
+			margin: 0;
+		}
+
+		button,
+		input,
+		textarea {
+			font-family: inherit;
+		}
+
+		.layout {
+			max-width: 1200px;
+			margin: 0 auto;
+			padding: 32px 20px 48px;
+			display: flex;
+			flex-direction: column;
+			gap: 28px;
+		}
+
+		.hero {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 24px;
+			align-items: center;
+			justify-content: space-between;
+			background: var(--surface);
+			border: 1px solid var(--border);
+			border-radius: 20px;
+			padding: 28px;
+			box-shadow: 0 18px 40px var(--shadow);
+		}
+
+		.hero__eyebrow {
+			text-transform: uppercase;
+			letter-spacing: 0.2em;
+			font-size: 0.75rem;
+			color: var(--accent-strong);
+			margin-bottom: 12px;
+		}
+
+		.hero h1 {
+			font-size: clamp(2.2rem, 3vw, 3.2rem);
+			line-height: 1.1;
+			max-width: 520px;
+		}
+
+		.hero__subtitle {
+			margin-top: 12px;
+			max-width: 520px;
+			color: var(--muted);
+		}
+
+		.hero__controls {
+			flex: 1;
+			min-width: 260px;
+			background: var(--surface-muted);
+			border-radius: 16px;
+			padding: 20px;
+			display: flex;
+			flex-direction: column;
+			gap: 12px;
+		}
+
+		.control {
+			display: flex;
+			flex-direction: column;
+			gap: 6px;
+			font-size: 0.9rem;
+			color: var(--muted);
+		}
+
+		.control input {
+			padding: 10px 12px;
+			border-radius: 10px;
+			border: 1px solid var(--border);
+			font-size: 1rem;
+		}
+
+		.hero__controls button {
+			padding: 12px 16px;
+			border: none;
+			border-radius: 12px;
+			background: var(--accent);
+			color: white;
+			font-weight: 600;
+			cursor: pointer;
+			transition: transform 0.2s ease, box-shadow 0.2s ease;
+		}
+
+		.hero__controls button:hover:not(:disabled) {
+			transform: translateY(-1px);
+			box-shadow: 0 10px 18px rgba(31, 122, 117, 0.25);
+		}
+
+		.hero__controls button:disabled {
+			opacity: 0.6;
+			cursor: not-allowed;
+		}
+
+		.agents {
+			display: flex;
+			flex-direction: column;
+			gap: 16px;
+		}
+
+		.agents__header {
+			display: flex;
+			align-items: center;
+			gap: 12px;
+		}
+
+		.agents__header h2 {
+			font-size: 1.4rem;
+		}
+
+		.agents__count {
+			background: var(--highlight);
+			color: #3f2a00;
+			padding: 4px 10px;
+			border-radius: 999px;
+			font-weight: 600;
+			font-size: 0.9rem;
+		}
+
+		.agents__grid {
+			display: grid;
+			grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+			gap: 18px;
+		}
+
+		.agents__empty {
+			padding: 20px;
+			background: var(--surface-muted);
+			border-radius: 14px;
+			color: var(--muted);
+			border: 1px dashed var(--border);
+		}
+
+		.agent-card {
+			background: var(--surface);
+			border: 1px solid var(--border);
+			border-radius: 16px;
+			padding: 18px;
+			display: flex;
+			flex-direction: column;
+			gap: 14px;
+			min-height: 420px;
+			box-shadow: 0 12px 24px var(--shadow);
+		}
+
+		.agent-card__header {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			gap: 12px;
+		}
+
+		.agent-card__title {
+			font-weight: 600;
+			font-size: 1.1rem;
+		}
+
+		.agent-card__meta {
+			font-size: 0.75rem;
+			color: var(--muted);
+			font-family: "IBM Plex Mono", monospace;
+		}
+
+		.agent-card__status {
+			display: inline-flex;
+			align-items: center;
+			gap: 6px;
+			font-size: 0.85rem;
+			color: var(--muted);
+		}
+
+		.status-dot {
+			width: 10px;
+			height: 10px;
+			border-radius: 50%;
+			background: #9aa1ab;
+		}
+
+		.status-dot--thinking {
+			background: var(--highlight);
+		}
+
+		.status-dot--error {
+			background: #d95040;
+		}
+
+		.status-dot--idle {
+			background: #5bc184;
+		}
+
+		.agent-card__timeline {
+			background: var(--surface-muted);
+			border-radius: 12px;
+			padding: 12px;
+			flex: 1;
+			overflow-y: auto;
+			display: flex;
+			flex-direction: column;
+			gap: 12px;
+		}
+
+		.agent-card__empty {
+			color: var(--muted);
+			font-size: 0.95rem;
+		}
+
+		.message {
+			background: var(--surface);
+			border-radius: 12px;
+			padding: 10px 12px;
+			box-shadow: inset 0 0 0 1px var(--border);
+			display: flex;
+			flex-direction: column;
+			gap: 6px;
+		}
+
+		.message--user {
+			border-left: 4px solid var(--accent);
+		}
+
+		.message--assistant {
+			border-left: 4px solid #f0a33b;
+		}
+
+		.message__header {
+			display: flex;
+			justify-content: space-between;
+			font-size: 0.75rem;
+			color: var(--muted);
+			text-transform: uppercase;
+			letter-spacing: 0.08em;
+		}
+
+		.message__content {
+			margin: 0;
+			white-space: pre-wrap;
+			line-height: 1.4;
+			font-size: 0.95rem;
+		}
+
+		.agent-card__footer {
+			display: flex;
+			gap: 10px;
+			align-items: center;
+		}
+
+		.agent-card__footer textarea {
+			flex: 1;
+			resize: vertical;
+			border-radius: 12px;
+			border: 1px solid var(--border);
+			padding: 10px 12px;
+			background: white;
+		}
+
+		.agent-card__footer button {
+			padding: 10px 16px;
+			border-radius: 12px;
+			border: none;
+			background: var(--accent-strong);
+			color: white;
+			font-weight: 600;
+			cursor: pointer;
+		}
+
+		.agent-card__footer button:disabled {
+			opacity: 0.6;
+			cursor: not-allowed;
+		}
+
+		.agent-card__error {
+			font-size: 0.85rem;
+			color: #b04032;
+			background: #fdebe8;
+			padding: 8px 10px;
+			border-radius: 10px;
+			border: 1px solid #f5c3bb;
+		}
+
+		@media (max-width: 720px) {
+			.hero {
+				padding: 20px;
+			}
+
+			.hero__controls {
+				width: 100%;
+			}
+		}
+	</style>
 </head>
 <body>
-    <div id="root"></div>
-    <script type="module" src="/frontend/main.tsx"></script>
+	<div id="root"></div>
+	<script type="module" src="/frontend/main.tsx"></script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/examples/ai-agent/package.json b/examples/ai-agent/package.json
index de0443f84c..ebca9a3b6f 100644
--- a/examples/ai-agent/package.json
+++ b/examples/ai-agent/package.json
@@ -1,50 +1,50 @@
 {
-  "name": "example-ai-agent",
-  "version": "2.0.21",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "check-types": "tsc --noEmit",
-    "test": "vitest run",
-    "build": "vite build && vite build --mode server",
-    "start": "srvx --static=public/ dist/server.js"
-  },
-  "devDependencies": {
-    "@types/node": "^22.13.9",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
-    "@vitejs/plugin-react": "^4.2.0",
-    "tsx": "^3.12.7",
-    "typescript": "^5.5.2",
-    "vite": "^5.0.0",
-    "vitest": "^3.1.1",
-    "vite-plugin-srvx": "^1.0.0"
-  },
-  "dependencies": {
-    "@ai-sdk/openai": "^0.0.66",
-    "@hono/node-server": "^1.19.7",
-    "@hono/node-ws": "^1.3.0",
-    "@rivetkit/react": "^2.0.38",
-    "ai": "^4.0.38",
-    "hono": "^4.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "rivetkit": "^2.0.38",
-    "srvx": "^0.10.0",
-    "zod": "^3.25.69"
-  },
-  "stableVersion": "0.8.0",
-  "template": {
-    "technologies": [
-      "typescript"
-    ],
-    "tags": [
-      "ai",
-      "real-time"
-    ],
-    "priority": 100,
-    "frontendPort": 5173
-  },
-  "license": "MIT"
+	"name": "ai-agent",
+	"version": "2.0.21",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"dev": "vite",
+		"check-types": "tsc --noEmit",
+		"test": "vitest run",
+		"build": "vite build && vite build --mode server",
+		"start": "srvx --static=public/ dist/server.js"
+	},
+	"devDependencies": {
+		"@types/node": "^22.13.9",
+		"@types/react": "^18.2.0",
+		"@types/react-dom": "^18.2.0",
+		"@vitejs/plugin-react": "^4.2.0",
+		"tsx": "^3.12.7",
+		"typescript": "^5.5.2",
+		"vite": "^5.0.0",
+		"vite-plugin-srvx": "^1.0.0",
+		"vitest": "^3.1.1"
+	},
+	"dependencies": {
+		"@ai-sdk/openai": "^0.0.66",
+		"@hono/node-server": "^1.19.7",
+		"@hono/node-ws": "^1.3.0",
+		"@rivetkit/react": "^2.0.38",
+		"ai": "^4.0.38",
+		"hono": "^4.11.3",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"rivetkit": "^2.0.38",
+		"srvx": "^0.10.0"
+	},
+	"stableVersion": "0.8.0",
+	"template": {
+		"technologies": [
+			"react",
+			"typescript"
+		],
+		"tags": [
+			"ai",
+			"real-time"
+		],
+		"priority": 120,
+		"frontendPort": 5173
+	},
+	"license": "MIT"
 }
diff --git a/examples/ai-agent/src/actors.ts b/examples/ai-agent/src/actors.ts
index cb792ba04a..81bd367d5b 100644
--- a/examples/ai-agent/src/actors.ts
+++ b/examples/ai-agent/src/actors.ts
@@ -1,66 +1,199 @@
 import { openai } from "@ai-sdk/openai";
-import { generateText, tool } from "ai";
+import { streamText, type CoreMessage } from "ai";
 import { actor, setup } from "rivetkit";
-import { z } from "zod";
-import { getWeather } from "./my-tools.ts";
-import type { Message } from "./types.ts";
 
-export const aiAgent = actor({
+export type AgentMessage = {
+	id: string;
+	role: "user" | "assistant";
+	sender: string;
+	content: string;
+	createdAt: number;
+};
+
+export type AgentStatus = {
+	state: "idle" | "thinking" | "error";
+	updatedAt: number;
+	error?: string;
+};
+
+export type AgentInfo = {
+	id: string;
+	name: string;
+	createdAt: number;
+};
+
+export type AgentQueueMessage = {
+	text: string;
+	sender?: string;
+};
+
+const SYSTEM_PROMPT =
+	"You are a focused AI assistant. Keep responses concise, actionable, and ready for handoff.";
+
+const buildId = (prefix: string) =>
+	`${prefix}-${Date.now()}-${Math.random().toString(16).slice(2)}`;
+
+const buildPromptMessages = (messages: AgentMessage[]): CoreMessage[] => {
+	return [
+		{ role: "system", content: SYSTEM_PROMPT },
+		...messages.map((message) => ({
+			role: message.role,
+			content: message.content,
+		})),
+	];
+};
+
+export const agent = actor({
 	// Persistent state that survives restarts: https://rivet.dev/docs/actors/state
 	state: {
-		messages: [] as Message[],
+		messages: [] as AgentMessage[],
+		status: {
+			state: "idle",
+			updatedAt: Date.now(),
+		} as AgentStatus,
 	},
 
-	actions: {
-		// Callable functions from clients: https://rivet.dev/docs/actors/actions
-		getMessages: (c) => c.state.messages,
+	// The run hook keeps the agent listening for queued messages.
+	run: async (c) => {
+		while (true) {
+			const queued = await c.queue.next("message");
+
+			const body = queued.body as AgentQueueMessage;
+			if (!body?.text || typeof body.text !== "string") {
+				continue;
+			}
 
-		sendMessage: async (c, userMessage: string) => {
-			const userMsg: Message = {
+			const sender = body.sender?.trim() || "Operator";
+			const userMessage: AgentMessage = {
+				id: buildId("user"),
 				role: "user",
-				content: userMessage,
-				timestamp: Date.now(),
+				sender,
+				content: body.text.trim(),
+				createdAt: Date.now(),
 			};
-			// State changes are automatically persisted
-			c.state.messages.push(userMsg);
-
-			const { text } = await generateText({
-				model: openai("gpt-4o-mini"),
-				prompt: userMessage,
-				messages: c.state.messages,
-				tools: {
-					weather: tool({
-						description: "Get the weather in a location",
-						parameters: z.object({
-							location: z
-								.string()
-								.describe(
-									"The location to get the weather for",
-								),
-						}),
-						execute: async ({ location }) => {
-							return await getWeather(location);
-						},
-					}),
-				},
-			});
-
-			const assistantMsg: Message = {
+
+			c.state.messages.push(userMessage);
+			c.broadcast("messageAdded", userMessage);
+
+			const promptMessages = buildPromptMessages(c.state.messages);
+
+			const assistantMessage: AgentMessage = {
+				id: buildId("assistant"),
 				role: "assistant",
-				content: text,
-				timestamp: Date.now(),
+				sender: "Agent",
+				content: "",
+				createdAt: Date.now(),
+			};
+
+			c.state.messages.push(assistantMessage);
+			c.broadcast("messageAdded", assistantMessage);
+
+			c.state.status = {
+				state: "thinking",
+				updatedAt: Date.now(),
+			};
+			c.broadcast("status", c.state.status);
+
+			try {
+				const result = await streamText({
+					model: openai("gpt-4o-mini"),
+					messages: promptMessages,
+				});
+
+				let content = "";
+				for await (const delta of result.textStream) {
+					if (c.abortSignal.aborted) {
+						break;
+					}
+
+					content += delta;
+					assistantMessage.content = content;
+					c.broadcast("response", {
+						messageId: assistantMessage.id,
+						delta,
+						content,
+						done: false,
+					});
+				}
+
+				assistantMessage.content = content || assistantMessage.content;
+				c.broadcast("response", {
+					messageId: assistantMessage.id,
+					delta: "",
+					content: assistantMessage.content,
+					done: true,
+				});
+
+				c.state.status = {
+					state: "idle",
+					updatedAt: Date.now(),
+				};
+				c.broadcast("status", c.state.status);
+			} catch (error) {
+				const errorMessage =
+					error instanceof Error ? error.message : "Unknown error";
+
+				assistantMessage.content =
+					assistantMessage.content ||
+					"I hit a snag while responding. Please try again.";
+
+				c.state.status = {
+					state: "error",
+					updatedAt: Date.now(),
+					error: errorMessage,
+				};
+
+				c.broadcast("response", {
+					messageId: assistantMessage.id,
+					delta: "",
+					content: assistantMessage.content,
+					done: true,
+					error: errorMessage,
+				});
+				c.broadcast("status", c.state.status);
+			}
+		}
+	},
+
+	actions: {
+		// Callable functions from clients: https://rivet.dev/docs/actors/actions
+		getHistory: (c) => c.state.messages,
+		getStatus: (c) => c.state.status,
+	},
+});
+
+export const agentManager = actor({
+	// Persistent state that survives restarts: https://rivet.dev/docs/actors/state
+	state: {
+		agents: [] as AgentInfo[],
+	},
+
+	actions: {
+		// Callable functions from clients: https://rivet.dev/docs/actors/actions
+		createAgent: async (c, name?: string) => {
+			const trimmedName = name?.trim();
+			const agentName =
+				trimmedName || `Agent ${c.state.agents.length + 1}`;
+			const info: AgentInfo = {
+				id: buildId("agent"),
+				name: agentName,
+				createdAt: Date.now(),
 			};
-			c.state.messages.push(assistantMsg);
 
-			// Send events to all connected clients: https://rivet.dev/docs/actors/events
-			c.broadcast("messageReceived", assistantMsg);
+			c.state.agents.push(info);
 
-			return assistantMsg;
+			const client = c.client<typeof registry>();
+			const handle = client.agent.getOrCreate([info.id]);
+			await handle.getStatus();
+
+			return info;
 		},
+
+		listAgents: (c) => c.state.agents,
 	},
 });
 
 // Register actors for use: https://rivet.dev/docs/setup
 export const registry = setup({
-	use: { aiAgent },
+	use: { agent, agentManager },
 });
diff --git a/examples/ai-agent/src/my-tools.ts b/examples/ai-agent/src/my-tools.ts
deleted file mode 100644
index a0ef451bea..0000000000
--- a/examples/ai-agent/src/my-tools.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export async function getWeather(location: string) {
-	// Mock weather API response
-	return {
-		location,
-		temperature: Math.floor(Math.random() * 30) + 10,
-		condition: ["sunny", "cloudy", "rainy", "snowy"][
-			Math.floor(Math.random() * 4)
-		],
-		humidity: Math.floor(Math.random() * 50) + 30,
-	};
-}
diff --git a/examples/ai-agent/src/server.ts b/examples/ai-agent/src/server.ts
index 95c8895f94..8c065a6b5e 100644
--- a/examples/ai-agent/src/server.ts
+++ b/examples/ai-agent/src/server.ts
@@ -2,5 +2,7 @@ import { Hono } from "hono";
 import { registry } from "./actors.ts";
 
 const app = new Hono();
+
 app.all("/api/rivet/*", (c) => registry.handler(c.req.raw));
+
 export default app;
diff --git a/examples/ai-agent/src/types.ts b/examples/ai-agent/src/types.ts
deleted file mode 100644
index 010dfec6d7..0000000000
--- a/examples/ai-agent/src/types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export type Message = {
-	role: "user" | "assistant";
-	content: string;
-	timestamp: number;
-};
diff --git a/examples/ai-agent/tests/ai-agent.test.ts b/examples/ai-agent/tests/ai-agent.test.ts
deleted file mode 100644
index 3532a76f4f..0000000000
--- a/examples/ai-agent/tests/ai-agent.test.ts
+++ /dev/null
@@ -1,117 +0,0 @@
-import { setupTest } from "rivetkit/test";
-import { expect, test, vi } from "vitest";
-import { registry } from "../src/actors.ts";
-
-// Mock the AI SDK and OpenAI
-vi.mock("@ai-sdk/openai", () => ({
-	openai: () => "mock-model",
-}));
-
-vi.mock("ai", () => ({
-	generateText: vi.fn().mockImplementation(async ({ prompt }) => ({
-		text: `AI response to: ${prompt}`,
-	})),
-	tool: vi.fn().mockImplementation(({ execute }) => ({ execute })),
-}));
-
-vi.mock("../src/my-tools.ts", () => ({
-	getWeather: vi.fn().mockResolvedValue({
-		location: "San Francisco",
-		temperature: 72,
-		condition: "sunny",
-	}),
-}));
-
-test("AI Agent can handle basic actions without connection", async (ctx) => {
-	const { client } = await setupTest(ctx, registry);
-	const agent = client.aiAgent.getOrCreate(["test-basic"]);
-
-	// Test initial state
-	const initialMessages = await agent.getMessages();
-	expect(initialMessages).toEqual([]);
-
-	// Send a message
-	const userMessage = "Hello, how are you?";
-	const response = await agent.sendMessage(userMessage);
-
-	// Verify response structure
-	expect(response).toMatchObject({
-		role: "assistant",
-		content: expect.stringContaining("AI response to: Hello, how are you?"),
-		timestamp: expect.any(Number),
-	});
-
-	// Verify messages are stored
-	const messages = await agent.getMessages();
-	expect(messages).toHaveLength(2);
-	expect(messages[0]).toMatchObject({
-		role: "user",
-		content: userMessage,
-		timestamp: expect.any(Number),
-	});
-	expect(messages[1]).toEqual(response);
-});
-
-test("AI Agent maintains conversation history", async (ctx) => {
-	const { client } = await setupTest(ctx, registry);
-	const agent = client.aiAgent.getOrCreate(["test-history"]);
-
-	// Send multiple messages
-	await agent.sendMessage("First message");
-	await agent.sendMessage("Second message");
-	await agent.sendMessage("Third message");
-
-	const messages = await agent.getMessages();
-	expect(messages).toHaveLength(6); // 3 user + 3 assistant messages
-
-	// Verify message ordering and roles
-	expect(messages[0].role).toBe("user");
-	expect(messages[0].content).toBe("First message");
-	expect(messages[1].role).toBe("assistant");
-	expect(messages[2].role).toBe("user");
-	expect(messages[2].content).toBe("Second message");
-	expect(messages[3].role).toBe("assistant");
-	expect(messages[4].role).toBe("user");
-	expect(messages[4].content).toBe("Third message");
-	expect(messages[5].role).toBe("assistant");
-});
-
-test("AI Agent handles weather tool usage", async (ctx) => {
-	const { client } = await setupTest(ctx, registry);
-	const agent = client.aiAgent.getOrCreate(["test-weather"]);
-
-	// Send a weather-related message
-	const response = await agent.sendMessage(
-		"What's the weather in San Francisco?",
-	);
-
-	// Verify response was generated
-	expect(response.role).toBe("assistant");
-	expect(response.content).toContain(
-		"AI response to: What's the weather in San Francisco?",
-	);
-	expect(response.timestamp).toBeGreaterThan(0);
-
-	// Verify message history includes both user and assistant messages
-	const messages = await agent.getMessages();
-	expect(messages).toHaveLength(2);
-	expect(messages[0].content).toBe("What's the weather in San Francisco?");
-	expect(messages[1]).toEqual(response);
-});
-
-test("AI Agent timestamps are sequential", async (ctx) => {
-	const { client } = await setupTest(ctx, registry);
-	const agent = client.aiAgent.getOrCreate(["test-timestamps"]);
-
-	const response1 = await agent.sendMessage("First");
-	const response2 = await agent.sendMessage("Second");
-
-	expect(response2.timestamp).toBeGreaterThanOrEqual(response1.timestamp);
-
-	const messages = await agent.getMessages();
-	for (let i = 1; i < messages.length; i++) {
-		expect(messages[i].timestamp).toBeGreaterThanOrEqual(
-			messages[i - 1].timestamp,
-		);
-	}
-});
diff --git a/examples/ai-agent/turbo.json b/examples/ai-agent/turbo.json
index c5e71016d3..29d4cb2625 100644
--- a/examples/ai-agent/turbo.json
+++ b/examples/ai-agent/turbo.json
@@ -1,9 +1,4 @@
 {
 	"$schema": "https://turbo.build/schema.json",
-	"extends": ["//"],
-	"tasks": {
-		"build": {
-			"dependsOn": ["@rivetkit/react#build", "rivetkit#build"]
-		}
-	}
+	"extends": ["//"]
 }
diff --git a/examples/ai-agent/vite.config.ts b/examples/ai-agent/vite.config.ts
index 06dae893f5..fabe9b5525 100644
--- a/examples/ai-agent/vite.config.ts
+++ b/examples/ai-agent/vite.config.ts
@@ -1,5 +1,5 @@
-import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
 import srvx from "vite-plugin-srvx";
 
 export default defineConfig({
diff --git a/examples/collaborative-document-vercel/README.md b/examples/collaborative-document-vercel/README.md
new file mode 100644
index 0000000000..205d878a9c
--- /dev/null
+++ b/examples/collaborative-document-vercel/README.md
@@ -0,0 +1,40 @@
+> **Note:** This is the Vercel-optimized version of the [collaborative-document](../collaborative-document) example.
+> It uses the `hono/vercel` adapter and is configured for Vercel deployment.
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Frivet-gg%2Frivet%2Ftree%2Fmain%2Fexamples%2Fcollaborative-document-vercel&project-name=collaborative-document-vercel)
+
+# Collaborative Document
+
+A shared text editor that uses Rivet Actors with Yjs for real-time CRDT sync and presence.
+
+## Getting Started
+
+```sh
+git clone https://github.com/rivet-dev/rivet.git
+cd rivet/examples/collaborative-document
+pnpm install
+pnpm dev
+```
+
+## Features
+
+- **Coordinator pattern**: One documentList actor per workspace indexes document actors
+- **CRDT synchronization**: Document actors broadcast Yjs updates to every collaborator
+- **Presence and cursors**: Awareness updates flow through actor events for live cursors
+- **Durable persistence**: Yjs snapshots are stored in actor KV for crash recovery
+
+## Implementation
+
+The coordinator creates document actors and tracks IDs, while each document actor stores Yjs state in KV storage and broadcasts updates.
+
+- **Coordinator and document actors**: [`src/actors.ts`](https://github.com/rivet-dev/rivet/tree/main/examples/collaborative-document/src/actors.ts)
+- **React editor and presence UI**: [`frontend/App.tsx`](https://github.com/rivet-dev/rivet/tree/main/examples/collaborative-document/frontend/App.tsx)
+- **Server entry point**: [`src/server.ts`](https://github.com/rivet-dev/rivet/tree/main/examples/collaborative-document/src/server.ts)
+
+## Resources
+
+Read more about [coordinator actors](/docs/actors/design-patterns), [events](/docs/actors/events), [actions](/docs/actors/actions), and [KV storage](/docs/actors/kv).
+
+## License
+
+MIT
diff --git a/examples/collaborative-document-vercel/api/index.ts b/examples/collaborative-document-vercel/api/index.ts
new file mode 100644
index 0000000000..07a830391f
--- /dev/null
+++ b/examples/collaborative-document-vercel/api/index.ts
@@ -0,0 +1,3 @@
+import app from "../src/server.ts";
+
+export default app;
diff --git a/examples/collaborative-document-vercel/frontend/App.tsx b/examples/collaborative-document-vercel/frontend/App.tsx
new file mode 100644
index 0000000000..88e8fd4779
--- /dev/null
+++ b/examples/collaborative-document-vercel/frontend/App.tsx
@@ -0,0 +1,496 @@
+import { createRivetKit } from "@rivetkit/react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import type { CSSProperties, ReactNode } from "react";
+import type {
+	AwarenessEvent,
+	DocumentSummary,
+	SyncEvent,
+	registry,
+} from "../src/actors.ts";
+import { Awareness, applyAwarenessUpdate, encodeAwarenessUpdate } from "y-protocols/awareness";
+import * as Y from "yjs";
+
+const { useActor } = createRivetKit<typeof registry>(`${location.origin}/api/rivet`);
+
+const CURSOR_COLORS = [
+	"#f97316",
+	"#facc15",
+	"#22c55e",
+	"#06b6d4",
+	"#3b82f6",
+	"#8b5cf6",
+	"#ec4899",
+	"#f43f5e",
+];
+
+type PresenceEntry = {
+	clientId: number;
+	user?: { name: string; color: string };
+	cursor?: { index: number; length: number } | null;
+};
+
+type RemoteCursor = {
+	clientId: number;
+	name: string;
+	color: string;
+	index: number;
+};
+
+const toNumbers = (update: Uint8Array) => Array.from(update);
+const toBytes = (update: number[]) => Uint8Array.from(update);
+
+const buildPresence = (awareness: Awareness): PresenceEntry[] => {
+	return Array.from(awareness.getStates().entries()).map(([clientId, state]) => {
+		return {
+			clientId,
+			user: state.user as PresenceEntry["user"],
+			cursor: state.cursor as PresenceEntry["cursor"],
+		};
+	});
+};
+
+const renderWithCursors = (text: string, cursors: RemoteCursor[]) => {
+	if (cursors.length === 0) {
+		return text;
+	}
+	const ordered = [...cursors].sort((a, b) => {
+		if (a.index !== b.index) return a.index - b.index;
+		return a.clientId - b.clientId;
+	});
+	const parts: ReactNode[] = [];
+	let lastIndex = 0;
+	for (const cursor of ordered) {
+		const clamped = Math.max(0, Math.min(cursor.index, text.length));
+		if (clamped > lastIndex) {
+			parts.push(text.slice(lastIndex, clamped));
+		}
+		parts.push(
+			<span
+				key={`cursor-${cursor.clientId}-${clamped}`}
+				className="cursor-marker"
+				data-name={cursor.name}
+				style={{
+					"--cursor-color": cursor.color,
+				} as CSSProperties}
+			/>,
+		);
+		lastIndex = clamped;
+	}
+	if (lastIndex < text.length) {
+		parts.push(text.slice(lastIndex));
+	}
+	return parts;
+};
+
+type DocumentEditorProps = {
+	workspaceId: string;
+	document: DocumentSummary;
+	username: string;
+	userColor: string;
+};
+
+function DocumentEditor({
+	workspaceId,
+	document,
+	username,
+	userColor,
+}: DocumentEditorProps) {
+	const documentActor = useActor({
+		name: "document",
+		key: [workspaceId, document.id],
+	});
+
+	const [content, setContent] = useState("");
+	const [presence, setPresence] = useState<PresenceEntry[]>([]);
+	const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+	const connectionRef = useRef(documentActor.connection);
+	const docRef = useRef<Y.Doc | null>(null);
+	const textRef = useRef<Y.Text | null>(null);
+	const awarenessRef = useRef<Awareness | null>(null);
+
+	useEffect(() => {
+		connectionRef.current = documentActor.connection;
+	}, [documentActor.connection]);
+
+	useEffect(() => {
+		setContent("");
+		setPresence([]);
+
+		const doc = new Y.Doc();
+		const text = doc.getText("content");
+		const awareness = new Awareness(doc);
+		docRef.current = doc;
+		textRef.current = text;
+		awarenessRef.current = awareness;
+
+		const handleDocUpdate = (update: Uint8Array, origin: unknown) => {
+			setContent(text.toString());
+			if (origin === "remote") {
+				return;
+			}
+			const connection = connectionRef.current;
+			if (!connection) {
+				return;
+			}
+			connection.applyUpdate(toNumbers(update), "sync");
+		};
+
+		const handleAwarenessUpdate = (
+			{ added, updated, removed }: { added: number[]; updated: number[]; removed: number[] },
+			origin: unknown,
+		) => {
+			setPresence(buildPresence(awareness));
+			if (origin === "remote") {
+				return;
+			}
+			const connection = connectionRef.current;
+			if (!connection) {
+				return;
+			}
+			const update = encodeAwarenessUpdate(awareness, [
+				...added,
+				...updated,
+				...removed,
+			]);
+			connection.applyUpdate(toNumbers(update), "awareness", awareness.clientID);
+		};
+
+		doc.on("update", handleDocUpdate);
+		awareness.on("update", handleAwarenessUpdate);
+
+		return () => {
+			doc.off("update", handleDocUpdate);
+			awareness.off("update", handleAwarenessUpdate);
+			awareness.destroy();
+			doc.destroy();
+		};
+	}, [document.id]);
+
+	useEffect(() => {
+		const awareness = awarenessRef.current;
+		if (!awareness) {
+			return;
+		}
+		awareness.setLocalStateField("user", { name: username, color: userColor });
+	}, [username, userColor, document.id, documentActor.connection]);
+
+	useEffect(() => {
+		const connection = documentActor.connection;
+		const doc = docRef.current;
+		const awareness = awarenessRef.current;
+		const text = textRef.current;
+		if (!connection || !doc || !awareness || !text) {
+			return;
+		}
+
+		let cancelled = false;
+
+		connection
+			.getContent()
+			.then((update) => {
+				if (cancelled) {
+					return;
+				}
+				Y.applyUpdate(doc, toBytes(update), "remote");
+				setContent(text.toString());
+			})
+			.catch(() => null);
+
+		connection
+			.getAwareness()
+			.then((update) => {
+				if (cancelled) {
+					return;
+				}
+				applyAwarenessUpdate(awareness, toBytes(update), "remote");
+				setPresence(buildPresence(awareness));
+			})
+			.catch(() => null);
+
+		return () => {
+			cancelled = true;
+		};
+	}, [documentActor.connection, document.id]);
+
+	documentActor.useEvent("sync", (event: SyncEvent) => {
+		const doc = docRef.current;
+		if (!doc) {
+			return;
+		}
+		Y.applyUpdate(doc, toBytes(event.update), "remote");
+	});
+
+	documentActor.useEvent("awareness", (event: AwarenessEvent) => {
+		const awareness = awarenessRef.current;
+		if (!awareness) {
+			return;
+		}
+		applyAwarenessUpdate(awareness, toBytes(event.update), "remote");
+		setPresence(buildPresence(awareness));
+	});
+
+	const updateLocalCursor = () => {
+		const awareness = awarenessRef.current;
+		const textarea = textareaRef.current;
+		if (!awareness || !textarea) {
+			return;
+		}
+		const start = textarea.selectionStart ?? 0;
+		const end = textarea.selectionEnd ?? start;
+		awareness.setLocalStateField("cursor", {
+			index: start,
+			length: Math.max(0, end - start),
+		});
+	};
+
+	const clearCursor = () => {
+		const awareness = awarenessRef.current;
+		if (!awareness) {
+			return;
+		}
+		awareness.setLocalStateField("cursor", null);
+	};
+
+	const handleChange = (value: string) => {
+		const doc = docRef.current;
+		const text = textRef.current;
+		if (!doc || !text) {
+			return;
+		}
+		const current = text.toString();
+		if (value === current) {
+			return;
+		}
+		doc.transact(() => {
+			text.delete(0, text.length);
+			text.insert(0, value);
+		}, "local");
+	};
+
+	const awareness = awarenessRef.current;
+	const localClientId = awareness?.clientID;
+	const remoteCursors: RemoteCursor[] = presence
+		.filter((entry) => entry.clientId !== localClientId)
+		.filter((entry) => entry.cursor && entry.user)
+		.map((entry) => ({
+			clientId: entry.clientId,
+			name: entry.user?.name ?? "Anonymous",
+			color: entry.user?.color ?? "#94a3b8",
+			index: entry.cursor?.index ?? 0,
+		}));
+	const cursorOverlay = renderWithCursors(content, remoteCursors);
+
+	return (
+		<section className="editor">
+			<header className="editor-header">
+				<div>
+					<h2>{document.title}</h2>
+					<p>Document ID: {document.id}</p>
+				</div>
+				<div className="editor-status">
+					<span
+						className={`status-dot ${documentActor.connection ? "online" : "offline"}`}
+					/>
+					{documentActor.connection ? "Connected" : "Connecting"}
+				</div>
+			</header>
+
+			<div className="editor-body">
+				<div className="editor-panel">
+					<div className="editor-canvas">
+						<div className="cursor-overlay">{cursorOverlay}</div>
+						<textarea
+							ref={textareaRef}
+							value={content}
+							onChange={(event) => handleChange(event.target.value)}
+							onSelect={updateLocalCursor}
+							onKeyUp={updateLocalCursor}
+							onMouseUp={updateLocalCursor}
+							onBlur={clearCursor}
+							placeholder="Start typing to collaborate"
+						/>
+					</div>
+					<p className="editor-hint">
+						This editor uses Yjs updates broadcast through the document actor.
+					</p>
+				</div>
+
+				<div className="presence-panel">
+					<h3>Active collaborators</h3>
+					{presence.length === 0 ? (
+						<p className="empty">No collaborators connected yet.</p>
+					) : (
+						<ul>
+							{presence.map((entry) => (
+								<li key={entry.clientId}>
+									<span
+										className="presence-color"
+										style={{
+											"--cursor-color": entry.user?.color ?? "#94a3b8",
+										} as CSSProperties}
+									/>
+									<div>
+										<strong>{entry.user?.name ?? "Anonymous"}</strong>
+										<span>
+											Cursor: {entry.cursor ? entry.cursor.index : "idle"}
+										</span>
+									</div>
+								</li>
+							))}
+						</ul>
+					)}
+				</div>
+			</div>
+		</section>
+	);
+}
+
+export function App() {
+	const [workspaceId, setWorkspaceId] = useState("design-team");
+	const [username, setUsername] = useState("Ada");
+	const [newTitle, setNewTitle] = useState("Product spec");
+	const [documents, setDocuments] = useState<DocumentSummary[]>([]);
+	const [activeDocumentId, setActiveDocumentId] = useState<string | null>(null);
+
+	const userColor = useMemo(() => {
+		const hash = Array.from(username).reduce((sum, char) => sum + char.charCodeAt(0), 0);
+		return CURSOR_COLORS[hash % CURSOR_COLORS.length];
+	}, [username]);
+
+	const documentList = useActor({
+		name: "documentList",
+		key: [workspaceId],
+	});
+
+	useEffect(() => {
+		if (!documentList.connection) {
+			return;
+		}
+		documentList.connection.listDocuments().then((list) => {
+			setDocuments(list);
+			setActiveDocumentId((current) => current ?? list[0]?.id ?? null);
+		});
+	}, [documentList.connection, workspaceId]);
+
+	const handleCreateDocument = async () => {
+		if (!documentList.connection) {
+			return;
+		}
+		const doc = await documentList.connection.createDocument(newTitle);
+		setDocuments((prev) => [...prev, doc]);
+		setActiveDocumentId(doc.id);
+		setNewTitle("Untitled document");
+	};
+
+	const handleDeleteDocument = async (docId: string) => {
+		if (!documentList.connection) {
+			return;
+		}
+		await documentList.connection.deleteDocument(docId);
+		setDocuments((prev) => prev.filter((doc) => doc.id !== docId));
+		if (activeDocumentId === docId) {
+			setActiveDocumentId(null);
+		}
+	};
+
+	const activeDocument = documents.find((doc) => doc.id === activeDocumentId) ?? null;
+
+	return (
+		<div className="page">
+			<header className="hero">
+				<div>
+					<p className="eyebrow">Collaborative Document</p>
+					<h1>Shared documents with Yjs and Rivet Actors</h1>
+					<p>
+						Document actors keep CRDT state in KV storage, while the coordinator
+						indexes documents per workspace.
+					</p>
+				</div>
+				<div className="hero-card">
+					<label>
+						Workspace
+						<input
+							value={workspaceId}
+							onChange={(event) => setWorkspaceId(event.target.value)}
+							placeholder="workspace-id"
+						/>
+					</label>
+					<label>
+						Name
+						<input
+							value={username}
+							onChange={(event) => setUsername(event.target.value)}
+							placeholder="Your name"
+						/>
+					</label>
+				<div className="color-chip" style={{ "--cursor-color": userColor } as CSSProperties}>
+						Active color
+					</div>
+				</div>
+			</header>
+
+			<section className="documents">
+				<div className="documents-header">
+					<h2>Workspace documents</h2>
+					<div className="create-row">
+						<input
+							value={newTitle}
+							onChange={(event) => setNewTitle(event.target.value)}
+							placeholder="New document title"
+						/>
+						<button
+							onClick={handleCreateDocument}
+							disabled={!documentList.connection}
+						>
+							Create
+						</button>
+					</div>
+				</div>
+				<div className="documents-list">
+					{documents.length === 0 ? (
+						<p className="empty">No documents yet. Create one to start.</p>
+					) : (
+						documents.map((doc) => (
+							<article
+								key={doc.id}
+								className={
+									doc.id === activeDocumentId ? "document-card active" : "document-card"
+								}
+							>
+								<div>
+									<h3>{doc.title}</h3>
+									<p>{new Date(doc.createdAt).toLocaleString()}</p>
+								</div>
+								<div className="document-actions">
+									<button onClick={() => setActiveDocumentId(doc.id)}>
+										Open
+									</button>
+									<button
+										className="secondary"
+										onClick={() => handleDeleteDocument(doc.id)}
+									>
+										Delete
+									</button>
+								</div>
+							</article>
+						))
+					)}
+				</div>
+			</section>
+
+			{activeDocument ? (
+				<DocumentEditor
+					workspaceId={workspaceId}
+					document={activeDocument}
+					username={username}
+					userColor={userColor}
+				/>
+			) : (
+				<section className="editor empty">
+					<h2>Select a document</h2>
+					<p>Choose a document from the workspace list to start editing.</p>
+				</section>
+			)}
+		</div>
+	);
+}
diff --git a/examples/multi-region/frontend/main.tsx b/examples/collaborative-document-vercel/frontend/main.tsx
similarity index 94%
rename from examples/multi-region/frontend/main.tsx
rename to examples/collaborative-document-vercel/frontend/main.tsx
index 372f49c622..2efcb334fc 100644
--- a/examples/multi-region/frontend/main.tsx
+++ b/examples/collaborative-document-vercel/frontend/main.tsx
@@ -8,5 +8,5 @@ if (!root) throw new Error("Root element not found");
 createRoot(root).render(
 	<StrictMode>
 		<App />
-	</StrictMode>
+	</StrictMode>,
 );
diff --git a/examples/collaborative-document-vercel/index.html b/examples/collaborative-document-vercel/index.html
new file mode 100644
index 0000000000..6868026f91
--- /dev/null
+++ b/examples/collaborative-document-vercel/index.html
@@ -0,0 +1,401 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Collaborative Document Example</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            color-scheme: light;
+            --bg: #f5f1e8;
+            --surface: #ffffff;
+            --surface-2: #fef7ed;
+            --border: #e2d8c7;
+            --text: #1f2a37;
+            --muted: #6b7280;
+            --accent: #0f766e;
+            --accent-2: #f97316;
+            --shadow: 0 18px 60px rgba(15, 23, 42, 0.12);
+            --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+            --sans: "Space Grotesk", "Segoe UI", sans-serif;
+        }
+
+        * {
+            box-sizing: border-box;
+        }
+
+        body {
+            margin: 0;
+            padding: 0;
+            font-family: var(--sans);
+            color: var(--text);
+            background:
+                radial-gradient(circle at top left, #fef3c7 0%, transparent 45%),
+                radial-gradient(circle at 80% 10%, #ecfccb 0%, transparent 45%),
+                linear-gradient(120deg, #f5f1e8 0%, #fef7ed 50%, #fef3c7 100%);
+            min-height: 100vh;
+        }
+
+        #root {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 48px 24px 72px;
+        }
+
+        .page {
+            display: flex;
+            flex-direction: column;
+            gap: 32px;
+        }
+
+        .hero {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 32px;
+            align-items: flex-start;
+            justify-content: space-between;
+        }
+
+        .hero h1 {
+            margin: 12px 0 12px;
+            font-size: clamp(2rem, 4vw, 3.2rem);
+        }
+
+        .hero p {
+            max-width: 560px;
+            color: var(--muted);
+            line-height: 1.6;
+        }
+
+        .eyebrow {
+            text-transform: uppercase;
+            letter-spacing: 0.2em;
+            font-size: 0.75rem;
+            color: var(--accent);
+            font-weight: 600;
+        }
+
+        .hero-card {
+            background: var(--surface);
+            border: 1px solid var(--border);
+            padding: 20px;
+            border-radius: 16px;
+            min-width: 280px;
+            box-shadow: var(--shadow);
+            display: grid;
+            gap: 14px;
+        }
+
+        .hero-card label {
+            display: grid;
+            gap: 6px;
+            font-size: 0.9rem;
+            color: var(--muted);
+        }
+
+        input {
+            font: inherit;
+            padding: 10px 12px;
+            border-radius: 10px;
+            border: 1px solid var(--border);
+            background: #fff;
+        }
+
+        button {
+            font: inherit;
+            border-radius: 999px;
+            border: none;
+            padding: 10px 18px;
+            background: var(--accent);
+            color: white;
+            cursor: pointer;
+            font-weight: 600;
+            transition: transform 0.2s ease, box-shadow 0.2s ease;
+            box-shadow: 0 10px 20px rgba(15, 118, 110, 0.2);
+        }
+
+        button.secondary {
+            background: #f1f5f9;
+            color: var(--text);
+            box-shadow: none;
+        }
+
+        button:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+            box-shadow: none;
+        }
+
+        button:not(:disabled):hover {
+            transform: translateY(-1px);
+        }
+
+        .color-chip {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 0.85rem;
+            font-weight: 600;
+            color: var(--muted);
+        }
+
+        .color-chip::before {
+            content: "";
+            width: 14px;
+            height: 14px;
+            border-radius: 50%;
+            background: var(--cursor-color, #94a3b8);
+        }
+
+        .documents {
+            background: var(--surface);
+            border: 1px solid var(--border);
+            border-radius: 20px;
+            padding: 24px;
+            box-shadow: var(--shadow);
+            display: grid;
+            gap: 20px;
+        }
+
+        .documents-header {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 16px;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        .create-row {
+            display: flex;
+            gap: 12px;
+            flex-wrap: wrap;
+        }
+
+        .documents-list {
+            display: grid;
+            gap: 12px;
+        }
+
+        .document-card {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 16px;
+            padding: 16px;
+            border-radius: 16px;
+            border: 1px solid transparent;
+            background: var(--surface-2);
+        }
+
+        .document-card.active {
+            border-color: var(--accent);
+            background: #ecfeff;
+        }
+
+        .document-card h3 {
+            margin: 0 0 4px;
+        }
+
+        .document-card p {
+            margin: 0;
+            color: var(--muted);
+            font-size: 0.85rem;
+        }
+
+        .document-actions {
+            display: flex;
+            gap: 8px;
+            flex-wrap: wrap;
+        }
+
+        .editor {
+            background: var(--surface);
+            border: 1px solid var(--border);
+            border-radius: 22px;
+            padding: 24px;
+            box-shadow: var(--shadow);
+            display: grid;
+            gap: 24px;
+        }
+
+        .editor.empty {
+            text-align: center;
+            color: var(--muted);
+        }
+
+        .editor-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 16px;
+            flex-wrap: wrap;
+        }
+
+        .editor-header h2 {
+            margin: 0 0 6px;
+        }
+
+        .editor-header p {
+            margin: 0;
+            color: var(--muted);
+            font-size: 0.85rem;
+        }
+
+        .editor-status {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 0.9rem;
+            color: var(--muted);
+        }
+
+        .status-dot {
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            background: #f59e0b;
+        }
+
+        .status-dot.online {
+            background: #10b981;
+        }
+
+        .editor-body {
+            display: grid;
+            grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
+            gap: 24px;
+        }
+
+        .editor-panel {
+            display: grid;
+            gap: 12px;
+        }
+
+        .editor-canvas {
+            position: relative;
+            min-height: 320px;
+        }
+
+        textarea,
+        .cursor-overlay {
+            width: 100%;
+            min-height: 320px;
+            padding: 18px;
+            font-family: var(--mono);
+            font-size: 0.95rem;
+            line-height: 1.6;
+            border-radius: 16px;
+            border: 1px solid var(--border);
+            background: #fff;
+            white-space: pre-wrap;
+            word-break: break-word;
+        }
+
+        textarea {
+            position: relative;
+            z-index: 2;
+            resize: vertical;
+        }
+
+        .cursor-overlay {
+            position: absolute;
+            inset: 0;
+            z-index: 3;
+            color: transparent;
+            pointer-events: none;
+            overflow: hidden;
+            background: transparent;
+        }
+
+        .cursor-marker {
+            display: inline-block;
+            position: relative;
+            height: 1.4em;
+            margin-left: -1px;
+            border-left: 2px solid var(--cursor-color, #94a3b8);
+        }
+
+        .cursor-marker::after {
+            content: attr(data-name);
+            position: absolute;
+            top: -1.4em;
+            left: 0;
+            padding: 2px 6px;
+            border-radius: 999px;
+            background: var(--cursor-color, #94a3b8);
+            color: white;
+            font-size: 0.65rem;
+            white-space: nowrap;
+        }
+
+        .editor-hint {
+            margin: 0;
+            color: var(--muted);
+            font-size: 0.85rem;
+        }
+
+        .presence-panel {
+            background: #0f172a;
+            color: white;
+            border-radius: 16px;
+            padding: 18px;
+            display: grid;
+            gap: 12px;
+        }
+
+        .presence-panel h3 {
+            margin: 0;
+            font-size: 1rem;
+        }
+
+        .presence-panel ul {
+            list-style: none;
+            margin: 0;
+            padding: 0;
+            display: grid;
+            gap: 12px;
+        }
+
+        .presence-panel li {
+            display: flex;
+            gap: 12px;
+            align-items: center;
+            background: rgba(255, 255, 255, 0.08);
+            padding: 10px;
+            border-radius: 12px;
+        }
+
+        .presence-panel li span {
+            display: block;
+            color: rgba(255, 255, 255, 0.7);
+            font-size: 0.75rem;
+            margin-top: 4px;
+        }
+
+        .presence-color {
+            width: 28px;
+            height: 28px;
+            border-radius: 50%;
+            background: var(--cursor-color, #94a3b8);
+        }
+
+        .empty {
+            margin: 0;
+            color: var(--muted);
+        }
+
+        @media (max-width: 900px) {
+            .editor-body {
+                grid-template-columns: 1fr;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="root"></div>
+    <script type="module" src="/frontend/main.tsx"></script>
+</body>
+</html>
diff --git a/examples/collaborative-document-vercel/package.json b/examples/collaborative-document-vercel/package.json
new file mode 100644
index 0000000000..55ef8f601f
--- /dev/null
+++ b/examples/collaborative-document-vercel/package.json
@@ -0,0 +1,45 @@
+{
+	"name": "collaborative-document-vercel",
+	"version": "2.0.21",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"dev": "vercel dev",
+		"build": "vite build",
+		"check-types": "tsc --noEmit"
+	},
+	"dependencies": {
+		"@hono/node-server": "^1.19.7",
+		"@hono/node-ws": "^1.3.0",
+		"@rivetkit/react": "^2.0.38",
+		"hono": "^4.11.3",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"rivetkit": "^2.0.38",
+		"y-protocols": "^1.0.6",
+		"yjs": "^13.6.24"
+	},
+	"devDependencies": {
+		"@types/node": "^22.13.9",
+		"@types/react": "^18.2.0",
+		"@types/react-dom": "^18.2.0",
+		"@vitejs/plugin-react": "^4.2.0",
+		"tsx": "^3.12.7",
+		"typescript": "^5.5.2",
+		"vite": "^5.0.0",
+		"vitest": "^3.1.1"
+	},
+	"template": {
+		"technologies": [
+			"react",
+			"typescript"
+		],
+		"tags": [
+			"real-time"
+		],
+		"priority": 200,
+		"frontendPort": 5173
+	},
+	"stableVersion": "0.8.0",
+	"license": "MIT"
+}
diff --git a/examples/collaborative-document-vercel/src/actors.ts b/examples/collaborative-document-vercel/src/actors.ts
new file mode 100644
index 0000000000..3b973c9eb4
--- /dev/null
+++ b/examples/collaborative-document-vercel/src/actors.ts
@@ -0,0 +1,138 @@
+import { actor, setup } from "rivetkit";
+import { applyAwarenessUpdate, Awareness, encodeAwarenessUpdate } from "y-protocols/awareness";
+import { randomUUID } from "node:crypto";
+import * as Y from "yjs";
+
+export type DocumentSummary = {
+	id: string;
+	title: string;
+	createdAt: number;
+	updatedAt: number;
+};
+
+export type SyncEvent = { update: number[] };
+export type AwarenessEvent = { update: number[] };
+
+type DocumentInput = { title: string; createdAt: number };
+
+type UpdateKind = "sync" | "awareness";
+
+const toNumbers = (update: Uint8Array) => Array.from(update);
+const toBytes = (update: number[]) => Uint8Array.from(update);
+
+export const document = actor({
+	// Track client awareness IDs per connection.
+	connState: {
+		clientIds: [] as number[],
+	},
+
+	// Persistent metadata that survives restarts: https://rivet.dev/docs/actors/state
+	createState: (_c, input: DocumentInput) => ({
+		title: input.title,
+		createdAt: input.createdAt,
+		updatedAt: input.createdAt,
+	}),
+
+	// Load Yjs state from durable KV storage.
+	createVars: async (c) => {
+		const doc = new Y.Doc();
+		const stored = await c.kv.get("yjs:doc", { type: "binary" });
+		if (stored) {
+			Y.applyUpdate(doc, stored);
+		}
+		const awareness = new Awareness(doc);
+		return { doc, awareness };
+	},
+
+	onDisconnect: (c, conn) => {
+		const clientIds = conn.state.clientIds;
+		if (clientIds.length === 0) {
+			return;
+		}
+		c.vars.awareness.removeStates(clientIds, "disconnect");
+		const update = encodeAwarenessUpdate(c.vars.awareness, clientIds);
+		c.broadcast("awareness", { update: toNumbers(update) });
+		conn.state.clientIds = [];
+	},
+
+	actions: {
+		getContent: (c) => {
+			const update = Y.encodeStateAsUpdate(c.vars.doc);
+			return toNumbers(update);
+		},
+		applyUpdate: async (
+			c,
+			update: number[],
+			kind: UpdateKind,
+			clientId?: number,
+		) => {
+			if (kind === "sync") {
+				const bytes = toBytes(update);
+				Y.applyUpdate(c.vars.doc, bytes, "client");
+				const snapshot = Y.encodeStateAsUpdate(c.vars.doc);
+				await c.kv.put("yjs:doc", snapshot);
+				c.state.updatedAt = Date.now();
+				c.broadcast("sync", { update });
+				return;
+			}
+
+			const bytes = toBytes(update);
+			applyAwarenessUpdate(c.vars.awareness, bytes, "client");
+			if (typeof clientId === "number" && c.conn) {
+				const knownIds = c.conn.state.clientIds;
+				if (!knownIds.includes(clientId)) {
+					knownIds.push(clientId);
+				}
+			}
+			c.broadcast("awareness", { update });
+		},
+		getAwareness: (c) => {
+			const clients = Array.from(c.vars.awareness.getStates().keys());
+			const update = encodeAwarenessUpdate(c.vars.awareness, clients);
+			return toNumbers(update);
+		},
+	},
+});
+
+export const documentList = actor({
+	// One coordinator per workspace that indexes document actors.
+	state: {
+		documents: [] as DocumentSummary[],
+	},
+
+	actions: {
+		createDocument: async (c, title: string) => {
+			const documentId = randomUUID();
+			const createdAt = Date.now();
+			const workspaceId = c.key[0] ?? "default";
+			const safeTitle = title.trim() || "Untitled document";
+
+			const client = c.client<typeof registry>();
+			const handle = await client.document.create([workspaceId, documentId], {
+				input: { title: safeTitle, createdAt },
+			});
+			await handle.resolve();
+
+			const summary: DocumentSummary = {
+				id: documentId,
+				title: safeTitle,
+				createdAt,
+				updatedAt: createdAt,
+			};
+			c.state.documents.push(summary);
+			return summary;
+		},
+		listDocuments: (c) => c.state.documents,
+		deleteDocument: (c, documentId: string) => {
+			c.state.documents = c.state.documents.filter(
+				(document) => document.id !== documentId,
+			);
+			return true;
+		},
+	},
+});
+
+// Register actors for use: https://rivet.dev/docs/setup
+export const registry = setup({
+	use: { document, documentList },
+});
diff --git a/examples/multi-region/src/server.ts b/examples/collaborative-document-vercel/src/server.ts
similarity index 100%
rename from examples/multi-region/src/server.ts
rename to examples/collaborative-document-vercel/src/server.ts
diff --git a/examples/collaborative-document-vercel/tsconfig.json b/examples/collaborative-document-vercel/tsconfig.json
new file mode 100644
index 0000000000..91635880bc
--- /dev/null
+++ b/examples/collaborative-document-vercel/tsconfig.json
@@ -0,0 +1,27 @@
+{
+	"compilerOptions": {
+		"target": "esnext",
+		"lib": [
+			"esnext",
+			"dom",
+			"dom.iterable"
+		],
+		"jsx": "react-jsx",
+		"module": "esnext",
+		"moduleResolution": "bundler",
+		"types": [
+			"node",
+			"vite/client"
+		],
+		"noEmit": true,
+		"strict": true,
+		"skipLibCheck": true,
+		"allowImportingTsExtensions": true,
+		"rewriteRelativeImportExtensions": true
+	},
+	"include": [
+		"src/**/*",
+		"api/**/*",
+		"frontend/**/*"
+	]
+}
diff --git a/examples/collaborative-document-vercel/turbo.json b/examples/collaborative-document-vercel/turbo.json
new file mode 100644
index 0000000000..c3d3d3b9bb
--- /dev/null
+++ b/examples/collaborative-document-vercel/turbo.json
@@ -0,0 +1,6 @@
+{
+	"$schema": "https://turbo.build/schema.json",
+	"extends": [
+		"//"
+	]
+}
diff --git a/examples/collaborative-document-vercel/vercel.json b/examples/collaborative-document-vercel/vercel.json
new file mode 100644
index 0000000000..64a8d9b467
--- /dev/null
+++ b/examples/collaborative-document-vercel/vercel.json
@@ -0,0 +1,9 @@
+{
+	"framework": "vite",
+	"rewrites": [
+		{
+			"source": "/api/(.*)",
+			"destination": "/api"
+		}
+	]
+}
diff --git a/examples/collaborative-document-vercel/vite.config.ts b/examples/collaborative-document-vercel/vite.config.ts
new file mode 100644
index 0000000000..f9f0d5ec2f
--- /dev/null
+++ b/examples/collaborative-document-vercel/vite.config.ts
@@ -0,0 +1,6 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+	plugins: [react()],
+});
diff --git a/examples/collaborative-document/README.md b/examples/collaborative-document/README.md
new file mode 100644
index 0000000000..3f3ffdd5e1
--- /dev/null
+++ b/examples/collaborative-document/README.md
@@ -0,0 +1,35 @@
+# Collaborative Document
+
+A shared text editor that uses Rivet Actors with Yjs for real-time CRDT sync and presence.
+
+## Getting Started
+
+```sh
+git clone https://github.com/rivet-dev/rivet.git
+cd rivet/examples/collaborative-document
+pnpm install
+pnpm dev
+```
+
+## Features
+
+- **Coordinator pattern**: One documentList actor per workspace indexes document actors
+- **CRDT synchronization**: Document actors broadcast Yjs updates to every collaborator
+- **Presence and cursors**: Awareness updates flow through actor events for live cursors
+- **Durable persistence**: Yjs snapshots are stored in actor KV for crash recovery
+
+## Implementation
+
+The coordinator creates document actors and tracks IDs, while each document actor stores Yjs state in KV storage and broadcasts updates.
+
+- **Coordinator and document actors**: [`src/actors.ts`](https://github.com/rivet-dev/rivet/tree/main/examples/collaborative-document/src/actors.ts)
+- **React editor and presence UI**: [`frontend/App.tsx`](https://github.com/rivet-dev/rivet/tree/main/examples/collaborative-document/frontend/App.tsx)
+- **Server entry point**: [`src/server.ts`](https://github.com/rivet-dev/rivet/tree/main/examples/collaborative-document/src/server.ts)
+
+## Resources
+
+Read more about [coordinator actors](/docs/actors/design-patterns), [events](/docs/actors/events), [actions](/docs/actors/actions), and [KV storage](/docs/actors/kv).
+
+## License
+
+MIT
diff --git a/examples/collaborative-document/frontend/App.tsx b/examples/collaborative-document/frontend/App.tsx
new file mode 100644
index 0000000000..88e8fd4779
--- /dev/null
+++ b/examples/collaborative-document/frontend/App.tsx
@@ -0,0 +1,496 @@
+import { createRivetKit } from "@rivetkit/react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import type { CSSProperties, ReactNode } from "react";
+import type {
+	AwarenessEvent,
+	DocumentSummary,
+	SyncEvent,
+	registry,
+} from "../src/actors.ts";
+import { Awareness, applyAwarenessUpdate, encodeAwarenessUpdate } from "y-protocols/awareness";
+import * as Y from "yjs";
+
+const { useActor } = createRivetKit<typeof registry>(`${location.origin}/api/rivet`);
+
+const CURSOR_COLORS = [
+	"#f97316",
+	"#facc15",
+	"#22c55e",
+	"#06b6d4",
+	"#3b82f6",
+	"#8b5cf6",
+	"#ec4899",
+	"#f43f5e",
+];
+
+type PresenceEntry = {
+	clientId: number;
+	user?: { name: string; color: string };
+	cursor?: { index: number; length: number } | null;
+};
+
+type RemoteCursor = {
+	clientId: number;
+	name: string;
+	color: string;
+	index: number;
+};
+
+const toNumbers = (update: Uint8Array) => Array.from(update);
+const toBytes = (update: number[]) => Uint8Array.from(update);
+
+const buildPresence = (awareness: Awareness): PresenceEntry[] => {
+	return Array.from(awareness.getStates().entries()).map(([clientId, state]) => {
+		return {
+			clientId,
+			user: state.user as PresenceEntry["user"],
+			cursor: state.cursor as PresenceEntry["cursor"],
+		};
+	});
+};
+
+const renderWithCursors = (text: string, cursors: RemoteCursor[]) => {
+	if (cursors.length === 0) {
+		return text;
+	}
+	const ordered = [...cursors].sort((a, b) => {
+		if (a.index !== b.index) return a.index - b.index;
+		return a.clientId - b.clientId;
+	});
+	const parts: ReactNode[] = [];
+	let lastIndex = 0;
+	for (const cursor of ordered) {
+		const clamped = Math.max(0, Math.min(cursor.index, text.length));
+		if (clamped > lastIndex) {
+			parts.push(text.slice(lastIndex, clamped));
+		}
+		parts.push(
+			<span
+				key={`cursor-${cursor.clientId}-${clamped}`}
+				className="cursor-marker"
+				data-name={cursor.name}
+				style={{
+					"--cursor-color": cursor.color,
+				} as CSSProperties}
+			/>,
+		);
+		lastIndex = clamped;
+	}
+	if (lastIndex < text.length) {
+		parts.push(text.slice(lastIndex));
+	}
+	return parts;
+};
+
+type DocumentEditorProps = {
+	workspaceId: string;
+	document: DocumentSummary;
+	username: string;
+	userColor: string;
+};
+
+function DocumentEditor({
+	workspaceId,
+	document,
+	username,
+	userColor,
+}: DocumentEditorProps) {
+	const documentActor = useActor({
+		name: "document",
+		key: [workspaceId, document.id],
+	});
+
+	const [content, setContent] = useState("");
+	const [presence, setPresence] = useState<PresenceEntry[]>([]);
+	const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+	const connectionRef = useRef(documentActor.connection);
+	const docRef = useRef<Y.Doc | null>(null);
+	const textRef = useRef<Y.Text | null>(null);
+	const awarenessRef = useRef<Awareness | null>(null);
+
+	useEffect(() => {
+		connectionRef.current = documentActor.connection;
+	}, [documentActor.connection]);
+
+	useEffect(() => {
+		setContent("");
+		setPresence([]);
+
+		const doc = new Y.Doc();
+		const text = doc.getText("content");
+		const awareness = new Awareness(doc);
+		docRef.current = doc;
+		textRef.current = text;
+		awarenessRef.current = awareness;
+
+		const handleDocUpdate = (update: Uint8Array, origin: unknown) => {
+			setContent(text.toString());
+			if (origin === "remote") {
+				return;
+			}
+			const connection = connectionRef.current;
+			if (!connection) {
+				return;
+			}
+			connection.applyUpdate(toNumbers(update), "sync");
+		};
+
+		const handleAwarenessUpdate = (
+			{ added, updated, removed }: { added: number[]; updated: number[]; removed: number[] },
+			origin: unknown,
+		) => {
+			setPresence(buildPresence(awareness));
+			if (origin === "remote") {
+				return;
+			}
+			const connection = connectionRef.current;
+			if (!connection) {
+				return;
+			}
+			const update = encodeAwarenessUpdate(awareness, [
+				...added,
+				...updated,
+				...removed,
+			]);
+			connection.applyUpdate(toNumbers(update), "awareness", awareness.clientID);
+		};
+
+		doc.on("update", handleDocUpdate);
+		awareness.on("update", handleAwarenessUpdate);
+
+		return () => {
+			doc.off("update", handleDocUpdate);
+			awareness.off("update", handleAwarenessUpdate);
+			awareness.destroy();
+			doc.destroy();
+		};
+	}, [document.id]);
+
+	useEffect(() => {
+		const awareness = awarenessRef.current;
+		if (!awareness) {
+			return;
+		}
+		awareness.setLocalStateField("user", { name: username, color: userColor });
+	}, [username, userColor, document.id, documentActor.connection]);
+
+	useEffect(() => {
+		const connection = documentActor.connection;
+		const doc = docRef.current;
+		const awareness = awarenessRef.current;
+		const text = textRef.current;
+		if (!connection || !doc || !awareness || !text) {
+			return;
+		}
+
+		let cancelled = false;
+
+		connection
+			.getContent()
+			.then((update) => {
+				if (cancelled) {
+					return;
+				}
+				Y.applyUpdate(doc, toBytes(update), "remote");
+				setContent(text.toString());
+			})
+			.catch(() => null);
+
+		connection
+			.getAwareness()
+			.then((update) => {
+				if (cancelled) {
+					return;
+				}
+				applyAwarenessUpdate(awareness, toBytes(update), "remote");
+				setPresence(buildPresence(awareness));
+			})
+			.catch(() => null);
+
+		return () => {
+			cancelled = true;
+		};
+	}, [documentActor.connection, document.id]);
+
+	documentActor.useEvent("sync", (event: SyncEvent) => {
+		const doc = docRef.current;
+		if (!doc) {
+			return;
+		}
+		Y.applyUpdate(doc, toBytes(event.update), "remote");
+	});
+
+	documentActor.useEvent("awareness", (event: AwarenessEvent) => {
+		const awareness = awarenessRef.current;
+		if (!awareness) {
+			return;
+		}
+		applyAwarenessUpdate(awareness, toBytes(event.update), "remote");
+		setPresence(buildPresence(awareness));
+	});
+
+	const updateLocalCursor = () => {
+		const awareness = awarenessRef.current;
+		const textarea = textareaRef.current;
+		if (!awareness || !textarea) {
+			return;
+		}
+		const start = textarea.selectionStart ?? 0;
+		const end = textarea.selectionEnd ?? start;
+		awareness.setLocalStateField("cursor", {
+			index: start,
+			length: Math.max(0, end - start),
+		});
+	};
+
+	const clearCursor = () => {
+		const awareness = awarenessRef.current;
+		if (!awareness) {
+			return;
+		}
+		awareness.setLocalStateField("cursor", null);
+	};
+
+	const handleChange = (value: string) => {
+		const doc = docRef.current;
+		const text = textRef.current;
+		if (!doc || !text) {
+			return;
+		}
+		const current = text.toString();
+		if (value === current) {
+			return;
+		}
+		doc.transact(() => {
+			text.delete(0, text.length);
+			text.insert(0, value);
+		}, "local");
+	};
+
+	const awareness = awarenessRef.current;
+	const localClientId = awareness?.clientID;
+	const remoteCursors: RemoteCursor[] = presence
+		.filter((entry) => entry.clientId !== localClientId)
+		.filter((entry) => entry.cursor && entry.user)
+		.map((entry) => ({
+			clientId: entry.clientId,
+			name: entry.user?.name ?? "Anonymous",
+			color: entry.user?.color ?? "#94a3b8",
+			index: entry.cursor?.index ?? 0,
+		}));
+	const cursorOverlay = renderWithCursors(content, remoteCursors);
+
+	return (
+		<section className="editor">
+			<header className="editor-header">
+				<div>
+					<h2>{document.title}</h2>
+					<p>Document ID: {document.id}</p>
+				</div>
+				<div className="editor-status">
+					<span
+						className={`status-dot ${documentActor.connection ? "online" : "offline"}`}
+					/>
+					{documentActor.connection ? "Connected" : "Connecting"}
+				</div>
+			</header>
+
+			<div className="editor-body">
+				<div className="editor-panel">
+					<div className="editor-canvas">
+						<div className="cursor-overlay">{cursorOverlay}</div>
+						<textarea
+							ref={textareaRef}
+							value={content}
+							onChange={(event) => handleChange(event.target.value)}
+							onSelect={updateLocalCursor}
+							onKeyUp={updateLocalCursor}
+							onMouseUp={updateLocalCursor}
+							onBlur={clearCursor}
+							placeholder="Start typing to collaborate"
+						/>
+					</div>
+					<p className="editor-hint">
+						This editor uses Yjs updates broadcast through the document actor.
+					</p>
+				</div>
+
+				<div className="presence-panel">
+					<h3>Active collaborators</h3>
+					{presence.length === 0 ? (
+						<p className="empty">No collaborators connected yet.</p>
+					) : (
+						<ul>
+							{presence.map((entry) => (
+								<li key={entry.clientId}>
+									<span
+										className="presence-color"
+										style={{
+											"--cursor-color": entry.user?.color ?? "#94a3b8",
+										} as CSSProperties}
+									/>
+									<div>
+										<strong>{entry.user?.name ?? "Anonymous"}</strong>
+										<span>
+											Cursor: {entry.cursor ? entry.cursor.index : "idle"}
+										</span>
+									</div>
+								</li>
+							))}
+						</ul>
+					)}
+				</div>
+			</div>
+		</section>
+	);
+}
+
+export function App() {
+	const [workspaceId, setWorkspaceId] = useState("design-team");
+	const [username, setUsername] = useState("Ada");
+	const [newTitle, setNewTitle] = useState("Product spec");
+	const [documents, setDocuments] = useState<DocumentSummary[]>([]);
+	const [activeDocumentId, setActiveDocumentId] = useState<string | null>(null);
+
+	const userColor = useMemo(() => {
+		const hash = Array.from(username).reduce((sum, char) => sum + char.charCodeAt(0), 0);
+		return CURSOR_COLORS[hash % CURSOR_COLORS.length];
+	}, [username]);
+
+	const documentList = useActor({
+		name: "documentList",
+		key: [workspaceId],
+	});
+
+	useEffect(() => {
+		if (!documentList.connection) {
+			return;
+		}
+		documentList.connection.listDocuments().then((list) => {
+			setDocuments(list);
+			setActiveDocumentId((current) => current ?? list[0]?.id ?? null);
+		});
+	}, [documentList.connection, workspaceId]);
+
+	const handleCreateDocument = async () => {
+		if (!documentList.connection) {
+			return;
+		}
+		const doc = await documentList.connection.createDocument(newTitle);
+		setDocuments((prev) => [...prev, doc]);
+		setActiveDocumentId(doc.id);
+		setNewTitle("Untitled document");
+	};
+
+	const handleDeleteDocument = async (docId: string) => {
+		if (!documentList.connection) {
+			return;
+		}
+		await documentList.connection.deleteDocument(docId);
+		setDocuments((prev) => prev.filter((doc) => doc.id !== docId));
+		if (activeDocumentId === docId) {
+			setActiveDocumentId(null);
+		}
+	};
+
+	const activeDocument = documents.find((doc) => doc.id === activeDocumentId) ?? null;
+
+	return (
+		<div className="page">
+			<header className="hero">
+				<div>
+					<p className="eyebrow">Collaborative Document</p>
+					<h1>Shared documents with Yjs and Rivet Actors</h1>
+					<p>
+						Document actors keep CRDT state in KV storage, while the coordinator
+						indexes documents per workspace.
+					</p>
+				</div>
+				<div className="hero-card">
+					<label>
+						Workspace
+						<input
+							value={workspaceId}
+							onChange={(event) => setWorkspaceId(event.target.value)}
+							placeholder="workspace-id"
+						/>
+					</label>
+					<label>
+						Name
+						<input
+							value={username}
+							onChange={(event) => setUsername(event.target.value)}
+							placeholder="Your name"
+						/>
+					</label>
+				<div className="color-chip" style={{ "--cursor-color": userColor } as CSSProperties}>
+						Active color
+					</div>
+				</div>
+			</header>
+
+			<section className="documents">
+				<div className="documents-header">
+					<h2>Workspace documents</h2>
+					<div className="create-row">
+						<input
+							value={newTitle}
+							onChange={(event) => setNewTitle(event.target.value)}
+							placeholder="New document title"
+						/>
+						<button
+							onClick={handleCreateDocument}
+							disabled={!documentList.connection}
+						>
+							Create
+						</button>
+					</div>
+				</div>
+				<div className="documents-list">
+					{documents.length === 0 ? (
+						<p className="empty">No documents yet. Create one to start.</p>
+					) : (
+						documents.map((doc) => (
+							<article
+								key={doc.id}
+								className={
+									doc.id === activeDocumentId ? "document-card active" : "document-card"
+								}
+							>
+								<div>
+									<h3>{doc.title}</h3>
+									<p>{new Date(doc.createdAt).toLocaleString()}</p>
+								</div>
+								<div className="document-actions">
+									<button onClick={() => setActiveDocumentId(doc.id)}>
+										Open
+									</button>
+									<button
+										className="secondary"
+										onClick={() => handleDeleteDocument(doc.id)}
+									>
+										Delete
+									</button>
+								</div>
+							</article>
+						))
+					)}
+				</div>
+			</section>
+
+			{activeDocument ? (
+				<DocumentEditor
+					workspaceId={workspaceId}
+					document={activeDocument}
+					username={username}
+					userColor={userColor}
+				/>
+			) : (
+				<section className="editor empty">
+					<h2>Select a document</h2>
+					<p>Choose a document from the workspace list to start editing.</p>
+				</section>
+			)}
+		</div>
+	);
+}
diff --git a/examples/collaborative-document/frontend/main.tsx b/examples/collaborative-document/frontend/main.tsx
new file mode 100644
index 0000000000..2efcb334fc
--- /dev/null
+++ b/examples/collaborative-document/frontend/main.tsx
@@ -0,0 +1,12 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App.tsx";
+
+const root = document.getElementById("root");
+if (!root) throw new Error("Root element not found");
+
+createRoot(root).render(
+	<StrictMode>
+		<App />
+	</StrictMode>,
+);
diff --git a/examples/collaborative-document/index.html b/examples/collaborative-document/index.html
new file mode 100644
index 0000000000..6868026f91
--- /dev/null
+++ b/examples/collaborative-document/index.html
@@ -0,0 +1,401 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Collaborative Document Example</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            color-scheme: light;
+            --bg: #f5f1e8;
+            --surface: #ffffff;
+            --surface-2: #fef7ed;
+            --border: #e2d8c7;
+            --text: #1f2a37;
+            --muted: #6b7280;
+            --accent: #0f766e;
+            --accent-2: #f97316;
+            --shadow: 0 18px 60px rgba(15, 23, 42, 0.12);
+            --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+            --sans: "Space Grotesk", "Segoe UI", sans-serif;
+        }
+
+        * {
+            box-sizing: border-box;
+        }
+
+        body {
+            margin: 0;
+            padding: 0;
+            font-family: var(--sans);
+            color: var(--text);
+            background:
+                radial-gradient(circle at top left, #fef3c7 0%, transparent 45%),
+                radial-gradient(circle at 80% 10%, #ecfccb 0%, transparent 45%),
+                linear-gradient(120deg, #f5f1e8 0%, #fef7ed 50%, #fef3c7 100%);
+            min-height: 100vh;
+        }
+
+        #root {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 48px 24px 72px;
+        }
+
+        .page {
+            display: flex;
+            flex-direction: column;
+            gap: 32px;
+        }
+
+        .hero {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 32px;
+            align-items: flex-start;
+            justify-content: space-between;
+        }
+
+        .hero h1 {
+            margin: 12px 0 12px;
+            font-size: clamp(2rem, 4vw, 3.2rem);
+        }
+
+        .hero p {
+            max-width: 560px;
+            color: var(--muted);
+            line-height: 1.6;
+        }
+
+        .eyebrow {
+            text-transform: uppercase;
+            letter-spacing: 0.2em;
+            font-size: 0.75rem;
+            color: var(--accent);
+            font-weight: 600;
+        }
+
+        .hero-card {
+            background: var(--surface);
+            border: 1px solid var(--border);
+            padding: 20px;
+            border-radius: 16px;
+            min-width: 280px;
+            box-shadow: var(--shadow);
+            display: grid;
+            gap: 14px;
+        }
+
+        .hero-card label {
+            display: grid;
+            gap: 6px;
+            font-size: 0.9rem;
+            color: var(--muted);
+        }
+
+        input {
+            font: inherit;
+            padding: 10px 12px;
+            border-radius: 10px;
+            border: 1px solid var(--border);
+            background: #fff;
+        }
+
+        button {
+            font: inherit;
+            border-radius: 999px;
+            border: none;
+            padding: 10px 18px;
+            background: var(--accent);
+            color: white;
+            cursor: pointer;
+            font-weight: 600;
+            transition: transform 0.2s ease, box-shadow 0.2s ease;
+            box-shadow: 0 10px 20px rgba(15, 118, 110, 0.2);
+        }
+
+        button.secondary {
+            background: #f1f5f9;
+            color: var(--text);
+            box-shadow: none;
+        }
+
+        button:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+            box-shadow: none;
+        }
+
+        button:not(:disabled):hover {
+            transform: translateY(-1px);
+        }
+
+        .color-chip {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 0.85rem;
+            font-weight: 600;
+            color: var(--muted);
+        }
+
+        .color-chip::before {
+            content: "";
+            width: 14px;
+            height: 14px;
+            border-radius: 50%;
+            background: var(--cursor-color, #94a3b8);
+        }
+
+        .documents {
+            background: var(--surface);
+            border: 1px solid var(--border);
+            border-radius: 20px;
+            padding: 24px;
+            box-shadow: var(--shadow);
+            display: grid;
+            gap: 20px;
+        }
+
+        .documents-header {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 16px;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        .create-row {
+            display: flex;
+            gap: 12px;
+            flex-wrap: wrap;
+        }
+
+        .documents-list {
+            display: grid;
+            gap: 12px;
+        }
+
+        .document-card {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 16px;
+            padding: 16px;
+            border-radius: 16px;
+            border: 1px solid transparent;
+            background: var(--surface-2);
+        }
+
+        .document-card.active {
+            border-color: var(--accent);
+            background: #ecfeff;
+        }
+
+        .document-card h3 {
+            margin: 0 0 4px;
+        }
+
+        .document-card p {
+            margin: 0;
+            color: var(--muted);
+            font-size: 0.85rem;
+        }
+
+        .document-actions {
+            display: flex;
+            gap: 8px;
+            flex-wrap: wrap;
+        }
+
+        .editor {
+            background: var(--surface);
+            border: 1px solid var(--border);
+            border-radius: 22px;
+            padding: 24px;
+            box-shadow: var(--shadow);
+            display: grid;
+            gap: 24px;
+        }
+
+        .editor.empty {
+            text-align: center;
+            color: var(--muted);
+        }
+
+        .editor-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 16px;
+            flex-wrap: wrap;
+        }
+
+        .editor-header h2 {
+            margin: 0 0 6px;
+        }
+
+        .editor-header p {
+            margin: 0;
+            color: var(--muted);
+            font-size: 0.85rem;
+        }
+
+        .editor-status {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 0.9rem;
+            color: var(--muted);
+        }
+
+        .status-dot {
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            background: #f59e0b;
+        }
+
+        .status-dot.online {
+            background: #10b981;
+        }
+
+        .editor-body {
+            display: grid;
+            grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
+            gap: 24px;
+        }
+
+        .editor-panel {
+            display: grid;
+            gap: 12px;
+        }
+
+        .editor-canvas {
+            position: relative;
+            min-height: 320px;
+        }
+
+        textarea,
+        .cursor-overlay {
+            width: 100%;
+            min-height: 320px;
+            padding: 18px;
+            font-family: var(--mono);
+            font-size: 0.95rem;
+            line-height: 1.6;
+            border-radius: 16px;
+            border: 1px solid var(--border);
+            background: #fff;
+            white-space: pre-wrap;
+            word-break: break-word;
+        }
+
+        textarea {
+            position: relative;
+            z-index: 2;
+            resize: vertical;
+        }
+
+        .cursor-overlay {
+            position: absolute;
+            inset: 0;
+            z-index: 3;
+            color: transparent;
+            pointer-events: none;
+            overflow: hidden;
+            background: transparent;
+        }
+
+        .cursor-marker {
+            display: inline-block;
+            position: relative;
+            height: 1.4em;
+            margin-left: -1px;
+            border-left: 2px solid var(--cursor-color, #94a3b8);
+        }
+
+        .cursor-marker::after {
+            content: attr(data-name);
+            position: absolute;
+            top: -1.4em;
+            left: 0;
+            padding: 2px 6px;
+            border-radius: 999px;
+            background: var(--cursor-color, #94a3b8);
+            color: white;
+            font-size: 0.65rem;
+            white-space: nowrap;
+        }
+
+        .editor-hint {
+            margin: 0;
+            color: var(--muted);
+            font-size: 0.85rem;
+        }
+
+        .presence-panel {
+            background: #0f172a;
+            color: white;
+            border-radius: 16px;
+            padding: 18px;
+            display: grid;
+            gap: 12px;
+        }
+
+        .presence-panel h3 {
+            margin: 0;
+            font-size: 1rem;
+        }
+
+        .presence-panel ul {
+            list-style: none;
+            margin: 0;
+            padding: 0;
+            display: grid;
+            gap: 12px;
+        }
+
+        .presence-panel li {
+            display: flex;
+            gap: 12px;
+            align-items: center;
+            background: rgba(255, 255, 255, 0.08);
+            padding: 10px;
+            border-radius: 12px;
+        }
+
+        .presence-panel li span {
+            display: block;
+            color: rgba(255, 255, 255, 0.7);
+            font-size: 0.75rem;
+            margin-top: 4px;
+        }
+
+        .presence-color {
+            width: 28px;
+            height: 28px;
+            border-radius: 50%;
+            background: var(--cursor-color, #94a3b8);
+        }
+
+        .empty {
+            margin: 0;
+            color: var(--muted);
+        }
+
+        @media (max-width: 900px) {
+            .editor-body {
+                grid-template-columns: 1fr;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="root"></div>
+    <script type="module" src="/frontend/main.tsx"></script>
+</body>
+</html>
diff --git a/examples/collaborative-document/package.json b/examples/collaborative-document/package.json
new file mode 100644
index 0000000000..808c106733
--- /dev/null
+++ b/examples/collaborative-document/package.json
@@ -0,0 +1,49 @@
+{
+	"name": "collaborative-document",
+	"version": "2.0.21",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"dev": "vite",
+		"check-types": "tsc --noEmit",
+		"test": "vitest run",
+		"build": "vite build && vite build --mode server",
+		"start": "srvx --static=public/ dist/server.js"
+	},
+	"devDependencies": {
+		"@types/node": "^22.13.9",
+		"@types/react": "^18.2.0",
+		"@types/react-dom": "^18.2.0",
+		"@vitejs/plugin-react": "^4.2.0",
+		"tsx": "^3.12.7",
+		"typescript": "^5.5.2",
+		"vite": "^5.0.0",
+		"vite-plugin-srvx": "^1.0.0",
+		"vitest": "^3.1.1"
+	},
+	"dependencies": {
+		"@hono/node-server": "^1.19.7",
+		"@hono/node-ws": "^1.3.0",
+		"@rivetkit/react": "^2.0.38",
+		"hono": "^4.11.3",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"rivetkit": "^2.0.38",
+		"srvx": "^0.10.0",
+		"y-protocols": "^1.0.6",
+		"yjs": "^13.6.24"
+	},
+	"stableVersion": "0.8.0",
+	"template": {
+		"technologies": [
+			"react",
+			"typescript"
+		],
+		"tags": [
+			"real-time"
+		],
+		"priority": 200,
+		"frontendPort": 5173
+	},
+	"license": "MIT"
+}
diff --git a/examples/collaborative-document/src/actors.ts b/examples/collaborative-document/src/actors.ts
new file mode 100644
index 0000000000..3b973c9eb4
--- /dev/null
+++ b/examples/collaborative-document/src/actors.ts
@@ -0,0 +1,138 @@
+import { actor, setup } from "rivetkit";
+import { applyAwarenessUpdate, Awareness, encodeAwarenessUpdate } from "y-protocols/awareness";
+import { randomUUID } from "node:crypto";
+import * as Y from "yjs";
+
+export type DocumentSummary = {
+	id: string;
+	title: string;
+	createdAt: number;
+	updatedAt: number;
+};
+
+export type SyncEvent = { update: number[] };
+export type AwarenessEvent = { update: number[] };
+
+type DocumentInput = { title: string; createdAt: number };
+
+type UpdateKind = "sync" | "awareness";
+
+const toNumbers = (update: Uint8Array) => Array.from(update);
+const toBytes = (update: number[]) => Uint8Array.from(update);
+
+export const document = actor({
+	// Track client awareness IDs per connection.
+	connState: {
+		clientIds: [] as number[],
+	},
+
+	// Persistent metadata that survives restarts: https://rivet.dev/docs/actors/state
+	createState: (_c, input: DocumentInput) => ({
+		title: input.title,
+		createdAt: input.createdAt,
+		updatedAt: input.createdAt,
+	}),
+
+	// Load Yjs state from durable KV storage.
+	createVars: async (c) => {
+		const doc = new Y.Doc();
+		const stored = await c.kv.get("yjs:doc", { type: "binary" });
+		if (stored) {
+			Y.applyUpdate(doc, stored);
+		}
+		const awareness = new Awareness(doc);
+		return { doc, awareness };
+	},
+
+	onDisconnect: (c, conn) => {
+		const clientIds = conn.state.clientIds;
+		if (clientIds.length === 0) {
+			return;
+		}
+		c.vars.awareness.removeStates(clientIds, "disconnect");
+		const update = encodeAwarenessUpdate(c.vars.awareness, clientIds);
+		c.broadcast("awareness", { update: toNumbers(update) });
+		conn.state.clientIds = [];
+	},
+
+	actions: {
+		getContent: (c) => {
+			const update = Y.encodeStateAsUpdate(c.vars.doc);
+			return toNumbers(update);
+		},
+		applyUpdate: async (
+			c,
+			update: number[],
+			kind: UpdateKind,
+			clientId?: number,
+		) => {
+			if (kind === "sync") {
+				const bytes = toBytes(update);
+				Y.applyUpdate(c.vars.doc, bytes, "client");
+				const snapshot = Y.encodeStateAsUpdate(c.vars.doc);
+				await c.kv.put("yjs:doc", snapshot);
+				c.state.updatedAt = Date.now();
+				c.broadcast("sync", { update });
+				return;
+			}
+
+			const bytes = toBytes(update);
+			applyAwarenessUpdate(c.vars.awareness, bytes, "client");
+			if (typeof clientId === "number" && c.conn) {
+				const knownIds = c.conn.state.clientIds;
+				if (!knownIds.includes(clientId)) {
+					knownIds.push(clientId);
+				}
+			}
+			c.broadcast("awareness", { update });
+		},
+		getAwareness: (c) => {
+			const clients = Array.from(c.vars.awareness.getStates().keys());
+			const update = encodeAwarenessUpdate(c.vars.awareness, clients);
+			return toNumbers(update);
+		},
+	},
+});
+
+export const documentList = actor({
+	// One coordinator per workspace that indexes document actors.
+	state: {
+		documents: [] as DocumentSummary[],
+	},
+
+	actions: {
+		createDocument: async (c, title: string) => {
+			const documentId = randomUUID();
+			const createdAt = Date.now();
+			const workspaceId = c.key[0] ?? "default";
+			const safeTitle = title.trim() || "Untitled document";
+
+			const client = c.client<typeof registry>();
+			const handle = await client.document.create([workspaceId, documentId], {
+				input: { title: safeTitle, createdAt },
+			});
+			await handle.resolve();
+
+			const summary: DocumentSummary = {
+				id: documentId,
+				title: safeTitle,
+				createdAt,
+				updatedAt: createdAt,
+			};
+			c.state.documents.push(summary);
+			return summary;
+		},
+		listDocuments: (c) => c.state.documents,
+		deleteDocument: (c, documentId: string) => {
+			c.state.documents = c.state.documents.filter(
+				(document) => document.id !== documentId,
+			);
+			return true;
+		},
+	},
+});
+
+// Register actors for use: https://rivet.dev/docs/setup
+export const registry = setup({
+	use: { document, documentList },
+});
diff --git a/examples/collaborative-document/src/server.ts b/examples/collaborative-document/src/server.ts
new file mode 100644
index 0000000000..95c8895f94
--- /dev/null
+++ b/examples/collaborative-document/src/server.ts
@@ -0,0 +1,6 @@
+import { Hono } from "hono";
+import { registry } from "./actors.ts";
+
+const app = new Hono();
+app.all("/api/rivet/*", (c) => registry.handler(c.req.raw));
+export default app;
diff --git a/examples/collaborative-document/tsconfig.json b/examples/collaborative-document/tsconfig.json
new file mode 100644
index 0000000000..0551447a84
--- /dev/null
+++ b/examples/collaborative-document/tsconfig.json
@@ -0,0 +1,16 @@
+{
+	"compilerOptions": {
+		"target": "esnext",
+		"lib": ["esnext", "dom"],
+		"jsx": "react-jsx",
+		"module": "esnext",
+		"moduleResolution": "bundler",
+		"types": ["node", "vite/client"],
+		"noEmit": true,
+		"strict": true,
+		"skipLibCheck": true,
+		"allowImportingTsExtensions": true,
+		"rewriteRelativeImportExtensions": true
+	},
+	"include": ["src/**/*", "frontend/**/*", "tests/**/*"]
+}
diff --git a/examples/collaborative-document/turbo.json b/examples/collaborative-document/turbo.json
new file mode 100644
index 0000000000..29d4cb2625
--- /dev/null
+++ b/examples/collaborative-document/turbo.json
@@ -0,0 +1,4 @@
+{
+	"$schema": "https://turbo.build/schema.json",
+	"extends": ["//"]
+}
diff --git a/examples/collaborative-document/vite.config.ts b/examples/collaborative-document/vite.config.ts
new file mode 100644
index 0000000000..fabe9b5525
--- /dev/null
+++ b/examples/collaborative-document/vite.config.ts
@@ -0,0 +1,7 @@
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+import srvx from "vite-plugin-srvx";
+
+export default defineConfig({
+	plugins: [react(), ...srvx({ entry: "src/server.ts" })],
+});
diff --git a/examples/geo-distributed-database-vercel/README.md b/examples/geo-distributed-database-vercel/README.md
new file mode 100644
index 0000000000..5102be705d
--- /dev/null
+++ b/examples/geo-distributed-database-vercel/README.md
@@ -0,0 +1,38 @@
+> **Note:** This is the Vercel-optimized version of the [geo-distributed-database](../geo-distributed-database) example.
+> It uses the `hono/vercel` adapter and is configured for Vercel deployment.
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Frivet-gg%2Frivet%2Ftree%2Fmain%2Fexamples%2Fgeo-distributed-database-vercel&project-name=geo-distributed-database-vercel)
+
+# Geo-Distributed Database
+
+Store user session state in edge-local Rivet Actors so preferences and activity stay close to users.
+
+## Getting Started
+
+```bash
+pnpm install
+pnpm dev
+```
+
+## Features
+
+- Creates a region-specific Rivet Actor using `createInRegion` and `createState` input.
+- Persists session preferences, recent activity, and last login time in actor state.
+- Measures action latency to highlight the benefit of edge-local updates.
+- Visualizes data locality with a world map and region indicators.
+
+## Implementation
+
+The UserSession actor initializes state with a region input and stores session data in persistent state.
+See the implementation in [`src/actors.ts`](https://github.com/rivet-dev/rivet/tree/main/examples/geo-distributed-database/src/actors.ts).
+
+The frontend connects with `createInRegion` and displays session locality from the actor state.
+See the client UI in [`frontend/App.tsx`](https://github.com/rivet-dev/rivet/tree/main/examples/geo-distributed-database/frontend/App.tsx) and the server wiring in [`src/server.ts`](https://github.com/rivet-dev/rivet/tree/main/examples/geo-distributed-database/src/server.ts).
+
+## Resources
+
+Read more about [state](/docs/actors/state), [actions](/docs/actors/actions), and [actor inputs](/docs/actors/input).
+
+## License
+
+MIT
diff --git a/examples/geo-distributed-database-vercel/api/index.ts b/examples/geo-distributed-database-vercel/api/index.ts
new file mode 100644
index 0000000000..07a830391f
--- /dev/null
+++ b/examples/geo-distributed-database-vercel/api/index.ts
@@ -0,0 +1,3 @@
+import app from "../src/server.ts";
+
+export default app;
diff --git a/examples/geo-distributed-database-vercel/frontend/App.tsx b/examples/geo-distributed-database-vercel/frontend/App.tsx
new file mode 100644
index 0000000000..39dffe5b43
--- /dev/null
+++ b/examples/geo-distributed-database-vercel/frontend/App.tsx
@@ -0,0 +1,362 @@
+import { createRivetKit } from "@rivetkit/react";
+import { useEffect, useMemo, useState } from "react";
+import type {
+	UserSessionPreferences,
+	UserSessionState,
+	registry,
+} from "../src/actors.ts";
+
+const { useActor } = createRivetKit<typeof registry>(
+	`${window.location.origin}/api/rivet`,
+);
+
+const REGION_OPTIONS = [
+	{
+		id: "us-west",
+		label: "US West",
+		city: "Oregon",
+		latencyHint: "18-32ms",
+		map: { x: 165, y: 190 },
+	},
+	{
+		id: "us-east",
+		label: "US East",
+		city: "Virginia",
+		latencyHint: "20-36ms",
+		map: { x: 290, y: 185 },
+	},
+	{
+		id: "eu-west",
+		label: "EU West",
+		city: "Dublin",
+		latencyHint: "32-48ms",
+		map: { x: 430, y: 160 },
+	},
+	{
+		id: "ap-south",
+		label: "AP South",
+		city: "Mumbai",
+		latencyHint: "45-70ms",
+		map: { x: 560, y: 210 },
+	},
+];
+
+const THEMES: Array<{ id: UserSessionPreferences["theme"]; label: string }> = [
+	{ id: "light", label: "Light" },
+	{ id: "dark", label: "Dark" },
+];
+
+const LANGUAGES: Array<{ id: UserSessionPreferences["language"]; label: string }> = [
+	{ id: "en", label: "English" },
+	{ id: "es", label: "Espanol" },
+	{ id: "fr", label: "Francais" },
+];
+
+const PAGE_VISITS = ["Dashboard", "Insights", "Billing", "Settings", "Reports"];
+
+function formatTimestamp(timestamp?: number) {
+	if (!timestamp) return "Awaiting login";
+	return new Date(timestamp).toLocaleString();
+}
+
+function regionLabel(regionId: string) {
+	return REGION_OPTIONS.find((region) => region.id === regionId)?.label ?? regionId;
+}
+
+function RegionMap({ activeRegion }: { activeRegion: string }) {
+	return (
+		<svg className="world-map" viewBox="0 0 720 360" role="img">
+			<title>Global data locality map</title>
+			<g className="map-lands">
+				<path d="M68 98l74-24 86 22 24 50-18 54-70 24-64-26-26-44z" />
+				<path d="M226 216l34-18 40 20-6 40-36 38-30-22z" />
+				<path d="M350 118l62-24 54 14 18 30-24 42-68 12-40-34z" />
+				<path d="M394 200l58-16 54 20 18 42-26 52-68 8-40-40z" />
+				<path d="M520 124l110-10 46 34-22 48-86 18-66-34z" />
+				<path d="M556 232l70-18 52 22-10 44-52 30-56-26z" />
+			</g>
+			<g className="map-grid">
+				<line x1="60" y1="60" x2="660" y2="60" />
+				<line x1="60" y1="180" x2="660" y2="180" />
+				<line x1="60" y1="300" x2="660" y2="300" />
+			</g>
+			<g className="map-markers">
+				{REGION_OPTIONS.map((region) => {
+					const isActive = region.id === activeRegion;
+					return (
+						<g
+							key={region.id}
+							className={isActive ? "map-marker active" : "map-marker"}
+						>
+							<circle
+								cx={region.map.x}
+								cy={region.map.y}
+								r={isActive ? 11 : 9}
+							/>
+							<text x={region.map.x + 14} y={region.map.y + 4}>
+								{region.label}
+							</text>
+						</g>
+					);
+				})}
+			</g>
+		</svg>
+	);
+}
+
+export function App() {
+	const [selectedRegion, setSelectedRegion] = useState(REGION_OPTIONS[1]?.id ?? "us-east");
+	const [session, setSession] = useState<UserSessionState | null>(null);
+	const [reportedRegion, setReportedRegion] = useState<string>("");
+	const [latencyMs, setLatencyMs] = useState<number | null>(null);
+	const [userId] = useState(() => crypto.randomUUID());
+
+	const actor = useActor({
+		name: "userSession",
+		key: ["user", userId],
+		createInRegion: selectedRegion,
+		createWithInput: { region: selectedRegion },
+	});
+
+	const activeRegion = reportedRegion || session?.region || selectedRegion;
+	const activeRegionLabel = regionLabel(activeRegion);
+
+	useEffect(() => {
+		if (!actor.connection) return;
+
+		let cancelled = false;
+
+		const loadSession = async () => {
+			const start = performance.now();
+			const [snapshot, region] = await Promise.all([
+				actor.connection.getSession(),
+				actor.connection.getRegion(),
+			]);
+			if (cancelled) return;
+			setSession(snapshot);
+			setReportedRegion(region);
+			setLatencyMs(Math.round(performance.now() - start));
+		};
+
+		loadSession().catch((err: unknown) => {
+			console.error("Failed to load session data:", err);
+		});
+
+		return () => {
+			cancelled = true;
+		};
+	}, [actor.connection]);
+
+	const handleRegionChange = (regionId: string) => {
+		setSelectedRegion(regionId);
+		setSession(null);
+		setReportedRegion("");
+		setLatencyMs(null);
+	};
+
+	const updatePreferences = async (next: Partial<UserSessionPreferences>) => {
+		if (!actor.connection) return;
+		try {
+			const start = performance.now();
+			const updated = await actor.connection.updatePreferences(next);
+			setSession(updated);
+			setLatencyMs(Math.round(performance.now() - start));
+		} catch (err: unknown) {
+			console.error("Failed to update preferences:", err);
+		}
+	};
+
+	const logActivity = async (page: string, isLogin = false) => {
+		if (!actor.connection) return;
+		try {
+			const start = performance.now();
+			const updated = await actor.connection.logActivity({ page, isLogin });
+			setSession(updated);
+			setLatencyMs(Math.round(performance.now() - start));
+		} catch (err: unknown) {
+			console.error("Failed to log activity:", err);
+		}
+	};
+
+	const regionDetails = useMemo(
+		() => REGION_OPTIONS.find((region) => region.id === activeRegion),
+		[activeRegion],
+	);
+
+	return (
+		<div className="app">
+			<header className="hero">
+				<div className="hero-copy">
+					<div className="eyebrow">Geo-Distributed Database</div>
+					<h1>Edge sessions that follow your users.</h1>
+					<p>
+						Each user session lives inside a regional Rivet Actor. Preference
+						updates and page visits stay close to the user, reducing round trip
+						latency while keeping data persistent.
+					</p>
+					<div className="status-row">
+						<span
+							className={
+								actor.connection ? "status connected" : "status connecting"
+							}
+						>
+							{actor.connection ? "Connected" : "Connecting"}
+						</span>
+						<span className="status detail">
+							Edge latency {latencyMs ? `${latencyMs}ms` : "measuring"}
+						</span>
+					</div>
+				</div>
+				<div className="hero-region">
+					<div className="region-label">Session stored in</div>
+					<div className="region-name">{activeRegionLabel}</div>
+					<div className="region-meta">
+						<div>Region code: {activeRegion}</div>
+						<div>
+							Last login: {formatTimestamp(session?.lastLoginAt)}
+						</div>
+					</div>
+				</div>
+			</header>
+
+			<section className="grid">
+				<div className="panel map-panel">
+					<div className="panel-header">
+						<div>
+							<h2>Data locality map</h2>
+							<p>
+								Your session state is pinned to a regional data plane.
+							</p>
+						</div>
+						<div className="chip">{activeRegionLabel}</div>
+					</div>
+					<RegionMap activeRegion={activeRegion} />
+					<div className="map-meta">
+						<div className="map-stat">
+							<span>Nearest edge</span>
+							<strong>{regionDetails?.city ?? "Local"}</strong>
+						</div>
+						<div className="map-stat">
+							<span>Estimated RTT</span>
+							<strong>{regionDetails?.latencyHint ?? "-"}</strong>
+						</div>
+						<div className="map-stat">
+							<span>Storage mode</span>
+							<strong>Edge persistent state</strong>
+						</div>
+					</div>
+				</div>
+
+				<div className="panel session-panel">
+					<div className="panel-header">
+						<div>
+							<h2>Session preferences</h2>
+							<p>Update state with actions and see it persist instantly.</p>
+						</div>
+					</div>
+					<div className="form-row">
+						<label htmlFor="theme">Theme</label>
+						<select
+							id="theme"
+							value={session?.preferences.theme ?? "light"}
+							onChange={(event) =>
+								updatePreferences({ theme: event.target.value as "light" | "dark" })
+							}
+						>
+							{THEMES.map((theme) => (
+								<option key={theme.id} value={theme.id}>
+									{theme.label}
+								</option>
+							))}
+						</select>
+					</div>
+					<div className="form-row">
+						<label htmlFor="language">Language</label>
+						<select
+							id="language"
+							value={session?.preferences.language ?? "en"}
+							onChange={(event) =>
+								updatePreferences({
+									language: event.target.value as "en" | "es" | "fr",
+								})
+							}
+						>
+							{LANGUAGES.map((language) => (
+								<option key={language.id} value={language.id}>
+									{language.label}
+								</option>
+							))}
+						</select>
+					</div>
+					<div className="form-row">
+						<label>Region selection</label>
+						<div className="region-buttons">
+							{REGION_OPTIONS.map((region) => (
+								<button
+									key={region.id}
+									type="button"
+									className={
+										region.id === selectedRegion
+											? "tag active"
+											: "tag"
+									}
+									onClick={() => handleRegionChange(region.id)}
+								>
+									{region.label}
+								</button>
+							))}
+						</div>
+					</div>
+					<div className="divider" />
+					<div className="activity-list">
+						<div className="activity-header">
+							<h3>Recent page visits</h3>
+							<button
+								type="button"
+								className="ghost"
+								onClick={() => logActivity("Login", true)}
+							>
+								Log login
+							</button>
+						</div>
+						{session?.recentActivity.length ? (
+							<ul>
+								{session.recentActivity.map((entry) => (
+									<li key={`${entry.page}-${entry.timestamp}`}>
+										<span>{entry.page}</span>
+										<time>{formatTimestamp(entry.timestamp)}</time>
+									</li>
+								))}
+							</ul>
+						) : (
+							<p className="empty">No activity logged yet.</p>
+						)}
+					</div>
+				</div>
+			</section>
+
+			<section className="panel activity-panel">
+				<div className="panel-header">
+					<div>
+						<h2>Simulate nearby activity</h2>
+						<p>
+							Click a page to store activity at the edge and measure latency.
+						</p>
+					</div>
+				</div>
+				<div className="page-buttons">
+					{PAGE_VISITS.map((page) => (
+						<button
+							key={page}
+							type="button"
+							className="page"
+							onClick={() => logActivity(page)}
+						>
+							{page}
+						</button>
+					))}
+				</div>
+			</section>
+		</div>
+	);
+}
diff --git a/examples/geo-distributed-database-vercel/frontend/main.tsx b/examples/geo-distributed-database-vercel/frontend/main.tsx
new file mode 100644
index 0000000000..2efcb334fc
--- /dev/null
+++ b/examples/geo-distributed-database-vercel/frontend/main.tsx
@@ -0,0 +1,12 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App.tsx";
+
+const root = document.getElementById("root");
+if (!root) throw new Error("Root element not found");
+
+createRoot(root).render(
+	<StrictMode>
+		<App />
+	</StrictMode>,
+);
diff --git a/examples/geo-distributed-database-vercel/index.html b/examples/geo-distributed-database-vercel/index.html
new file mode 100644
index 0000000000..296d2e1959
--- /dev/null
+++ b/examples/geo-distributed-database-vercel/index.html
@@ -0,0 +1,411 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Geo-Distributed Database</title>
+    <style>
+        @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap");
+
+        :root {
+            color-scheme: light;
+            --ink: #0f1c2e;
+            --ink-soft: #38485f;
+            --accent: #1f6f78;
+            --accent-strong: #0f5f66;
+            --sun: #f2a541;
+            --panel: rgba(255, 255, 255, 0.92);
+            --panel-border: #d7e0ea;
+            --shadow: 0 28px 60px rgba(17, 31, 51, 0.16);
+        }
+
+        * {
+            box-sizing: border-box;
+        }
+
+        body {
+            margin: 0;
+            font-family: "Space Grotesk", "Avenir Next", "Avenir", sans-serif;
+            color: var(--ink);
+            background: radial-gradient(circle at top, #fff4dc 0%, #e6f0f7 45%, #d7e2ef 100%);
+            min-height: 100vh;
+        }
+
+        .app {
+            max-width: 1120px;
+            margin: 0 auto;
+            padding: 48px 24px 80px;
+            display: flex;
+            flex-direction: column;
+            gap: 28px;
+        }
+
+        .hero {
+            display: grid;
+            grid-template-columns: 1.2fr 0.8fr;
+            gap: 32px;
+            padding: 34px;
+            border-radius: 28px;
+            background: linear-gradient(120deg, #0f1c2e 0%, #1f6f78 100%);
+            color: #fef6e7;
+            box-shadow: var(--shadow);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .hero::after {
+            content: "";
+            position: absolute;
+            inset: 0;
+            background: radial-gradient(circle at 20% 20%, rgba(242, 165, 65, 0.35), transparent 45%);
+            opacity: 0.7;
+            pointer-events: none;
+        }
+
+        .hero-copy {
+            position: relative;
+            z-index: 1;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+        }
+
+        .eyebrow {
+            font-size: 0.9rem;
+            text-transform: uppercase;
+            letter-spacing: 0.12em;
+            color: rgba(254, 246, 231, 0.75);
+        }
+
+        .hero h1 {
+            margin: 0;
+            font-size: clamp(2rem, 3vw, 2.9rem);
+            line-height: 1.05;
+        }
+
+        .hero p {
+            margin: 0;
+            color: rgba(254, 246, 231, 0.85);
+            font-size: 1.05rem;
+        }
+
+        .status-row {
+            display: flex;
+            gap: 12px;
+            flex-wrap: wrap;
+            align-items: center;
+        }
+
+        .status {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            padding: 6px 14px;
+            border-radius: 999px;
+            font-size: 0.9rem;
+            background: rgba(255, 255, 255, 0.14);
+        }
+
+        .status.connected::before,
+        .status.connecting::before {
+            content: "";
+            width: 8px;
+            height: 8px;
+            border-radius: 999px;
+            background: var(--sun);
+            display: inline-block;
+        }
+
+        .status.connecting::before {
+            background: rgba(255, 255, 255, 0.7);
+        }
+
+        .status.detail {
+            font-family: "IBM Plex Mono", "Courier New", monospace;
+        }
+
+        .hero-region {
+            position: relative;
+            z-index: 1;
+            background: rgba(255, 255, 255, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.18);
+            border-radius: 20px;
+            padding: 22px;
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+        }
+
+        .region-label {
+            text-transform: uppercase;
+            letter-spacing: 0.14em;
+            font-size: 0.75rem;
+            color: rgba(254, 246, 231, 0.65);
+        }
+
+        .region-name {
+            font-size: 2rem;
+            font-weight: 700;
+        }
+
+        .region-meta {
+            font-family: "IBM Plex Mono", "Courier New", monospace;
+            font-size: 0.85rem;
+            color: rgba(254, 246, 231, 0.85);
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+        }
+
+        .grid {
+            display: grid;
+            grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
+            gap: 24px;
+        }
+
+        .panel {
+            background: var(--panel);
+            border: 1px solid var(--panel-border);
+            border-radius: 24px;
+            padding: 24px;
+            box-shadow: 0 18px 40px rgba(15, 28, 46, 0.08);
+            display: flex;
+            flex-direction: column;
+            gap: 18px;
+        }
+
+        .panel-header {
+            display: flex;
+            justify-content: space-between;
+            gap: 16px;
+            align-items: center;
+        }
+
+        .panel-header h2 {
+            margin: 0 0 4px 0;
+            font-size: 1.4rem;
+        }
+
+        .panel-header p {
+            margin: 0;
+            color: var(--ink-soft);
+        }
+
+        .chip {
+            padding: 6px 12px;
+            border-radius: 999px;
+            background: rgba(31, 111, 120, 0.12);
+            color: var(--accent-strong);
+            font-weight: 600;
+            font-size: 0.85rem;
+        }
+
+        .world-map {
+            width: 100%;
+            height: auto;
+            border-radius: 20px;
+            background: #f6fafc;
+            border: 1px solid #e1e8f0;
+            padding: 12px;
+        }
+
+        .map-lands path {
+            fill: #cfdbe7;
+            stroke: #b3c2d3;
+            stroke-width: 2;
+        }
+
+        .map-grid line {
+            stroke: rgba(15, 28, 46, 0.08);
+            stroke-width: 1;
+        }
+
+        .map-marker circle {
+            fill: #f2a541;
+            stroke: #fff;
+            stroke-width: 3;
+        }
+
+        .map-marker text {
+            font-family: "IBM Plex Mono", "Courier New", monospace;
+            font-size: 11px;
+            fill: #4a5a70;
+        }
+
+        .map-marker.active circle {
+            fill: #1f6f78;
+        }
+
+        .map-meta {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+            gap: 12px;
+        }
+
+        .map-stat {
+            background: #f9f3e9;
+            border-radius: 16px;
+            padding: 12px;
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+        }
+
+        .map-stat span {
+            font-size: 0.8rem;
+            color: var(--ink-soft);
+        }
+
+        .map-stat strong {
+            font-size: 1rem;
+        }
+
+        .form-row {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+
+        .form-row label {
+            font-weight: 600;
+            color: var(--ink-soft);
+        }
+
+        select {
+            border-radius: 12px;
+            padding: 10px 12px;
+            border: 1px solid #d3dbe4;
+            font-size: 1rem;
+            font-family: "Space Grotesk", "Avenir Next", "Avenir", sans-serif;
+            background: #fff;
+        }
+
+        .region-buttons {
+            display: flex;
+            gap: 10px;
+            flex-wrap: wrap;
+        }
+
+        .tag {
+            padding: 8px 14px;
+            border-radius: 999px;
+            border: 1px solid #d6dee8;
+            background: #fff;
+            cursor: pointer;
+            font-family: "IBM Plex Mono", "Courier New", monospace;
+        }
+
+        .tag.active {
+            background: rgba(31, 111, 120, 0.12);
+            border-color: rgba(31, 111, 120, 0.4);
+            color: var(--accent-strong);
+        }
+
+        .divider {
+            height: 1px;
+            background: #e4eaf1;
+        }
+
+        .activity-list {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+        }
+
+        .activity-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .activity-list ul {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+
+        .activity-list li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px 12px;
+            border-radius: 12px;
+            background: #f6f9fb;
+            font-family: "IBM Plex Mono", "Courier New", monospace;
+            font-size: 0.85rem;
+        }
+
+        .activity-list time {
+            color: #6a7a8f;
+        }
+
+        .empty {
+            color: #7a899d;
+            font-size: 0.95rem;
+        }
+
+        button {
+            border: none;
+            cursor: pointer;
+            font-family: "Space Grotesk", "Avenir Next", "Avenir", sans-serif;
+        }
+
+        .ghost {
+            padding: 6px 12px;
+            border-radius: 999px;
+            border: 1px solid #d7e0ea;
+            background: transparent;
+            font-size: 0.85rem;
+        }
+
+        .page-buttons {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 12px;
+        }
+
+        .page {
+            padding: 12px 18px;
+            border-radius: 14px;
+            background: #0f1c2e;
+            color: #fef6e7;
+            font-size: 0.95rem;
+        }
+
+        .page:hover {
+            background: #14263d;
+        }
+
+        @media (max-width: 960px) {
+            .hero {
+                grid-template-columns: 1fr;
+            }
+
+            .grid {
+                grid-template-columns: 1fr;
+            }
+        }
+
+        @media (max-width: 600px) {
+            .app {
+                padding: 28px 18px 60px;
+            }
+
+            .hero {
+                padding: 24px;
+            }
+
+            .region-name {
+                font-size: 1.6rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="root"></div>
+    <script type="module" src="/frontend/main.tsx"></script>
+</body>
+</html>
diff --git a/examples/geo-distributed-database-vercel/package.json b/examples/geo-distributed-database-vercel/package.json
new file mode 100644
index 0000000000..146635f847
--- /dev/null
+++ b/examples/geo-distributed-database-vercel/package.json
@@ -0,0 +1,45 @@
+{
+	"name": "geo-distributed-database-vercel",
+	"version": "2.0.21",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"dev": "vercel dev",
+		"build": "vite build",
+		"check-types": "tsc --noEmit"
+	},
+	"dependencies": {
+		"@hono/node-server": "^1.19.7",
+		"@hono/node-ws": "^1.3.0",
+		"@rivetkit/react": "*",
+		"hono": "^4.0.0",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"rivetkit": "*"
+	},
+	"devDependencies": {
+		"@types/node": "^22.13.9",
+		"@types/react": "^18.2.0",
+		"@types/react-dom": "^18.2.0",
+		"@vitejs/plugin-react": "^4.2.0",
+		"tsx": "^3.12.7",
+		"typescript": "^5.5.2",
+		"vite": "^5.0.0",
+		"vitest": "^3.1.1"
+	},
+	"template": {
+		"technologies": [
+			"react",
+			"typescript"
+		],
+		"tags": [
+			"state",
+			"edge",
+			"multi-region"
+		],
+		"priority": 1000,
+		"frontendPort": 5173
+	},
+	"stableVersion": "0.8.0",
+	"license": "MIT"
+}
diff --git a/examples/geo-distributed-database-vercel/src/actors.ts b/examples/geo-distributed-database-vercel/src/actors.ts
new file mode 100644
index 0000000000..199801c2a4
--- /dev/null
+++ b/examples/geo-distributed-database-vercel/src/actors.ts
@@ -0,0 +1,80 @@
+import { actor, setup } from "rivetkit";
+
+export type UserSessionPreferences = {
+	theme: "light" | "dark";
+	language: "en" | "es" | "fr";
+};
+
+export type UserSessionActivity = {
+	page: string;
+	timestamp: number;
+};
+
+export type UserSessionState = {
+	region: string;
+	preferences: UserSessionPreferences;
+	recentActivity: UserSessionActivity[];
+	lastLoginAt: number;
+};
+
+interface UserSessionInput {
+	region: string;
+}
+
+const MAX_ACTIVITY = 6;
+
+export const userSession = actor({
+	// Initialize state with a region-specific input parameter. https://rivet.dev/docs/actors/state
+	createState: (_c, input: UserSessionInput): UserSessionState => ({
+		region: input.region,
+		preferences: {
+			theme: "light",
+			language: "en",
+		},
+		recentActivity: [],
+		lastLoginAt: Date.now(),
+	}),
+
+	actions: {
+		// Read session data stored in state.
+		getSession: (c) => c.state,
+
+		// Update user preferences stored in state.
+		updatePreferences: (
+			c,
+			preferences: Partial<UserSessionPreferences>,
+		) => {
+			if (preferences.theme) {
+				c.state.preferences.theme = preferences.theme;
+			}
+			if (preferences.language) {
+				c.state.preferences.language = preferences.language;
+			}
+			return c.state;
+		},
+
+		// Log activity and keep a short history of recent pages.
+		logActivity: (c, entry: { page: string; isLogin?: boolean }) => {
+			const activity: UserSessionActivity = {
+				page: entry.page,
+				timestamp: Date.now(),
+			};
+			c.state.recentActivity = [activity, ...c.state.recentActivity].slice(
+				0,
+				MAX_ACTIVITY,
+			);
+			if (entry.isLogin) {
+				c.state.lastLoginAt = activity.timestamp;
+			}
+			return c.state;
+		},
+
+		// Return the actor's region so the UI can show data locality.
+		getRegion: (c) => c.state.region,
+	},
+});
+
+// Register actors for use in the server.
+export const registry = setup({
+	use: { userSession },
+});
diff --git a/examples/geo-distributed-database-vercel/src/server.ts b/examples/geo-distributed-database-vercel/src/server.ts
new file mode 100644
index 0000000000..8c065a6b5e
--- /dev/null
+++ b/examples/geo-distributed-database-vercel/src/server.ts
@@ -0,0 +1,8 @@
+import { Hono } from "hono";
+import { registry } from "./actors.ts";
+
+const app = new Hono();
+
+app.all("/api/rivet/*", (c) => registry.handler(c.req.raw));
+
+export default app;
diff --git a/examples/geo-distributed-database-vercel/tsconfig.json b/examples/geo-distributed-database-vercel/tsconfig.json
new file mode 100644
index 0000000000..91635880bc
--- /dev/null
+++ b/examples/geo-distributed-database-vercel/tsconfig.json
@@ -0,0 +1,27 @@
+{
+	"compilerOptions": {
+		"target": "esnext",
+		"lib": [
+			"esnext",
+			"dom",
+			"dom.iterable"
+		],
+		"jsx": "react-jsx",
+		"module": "esnext",
+		"moduleResolution": "bundler",
+		"types": [
+			"node",
+			"vite/client"
+		],
+		"noEmit": true,
+		"strict": true,
+		"skipLibCheck": true,
+		"allowImportingTsExtensions": true,
+		"rewriteRelativeImportExtensions": true
+	},
+	"include": [
+		"src/**/*",
+		"api/**/*",
+		"frontend/**/*"
+	]
+}
diff --git a/examples/geo-distributed-database-vercel/turbo.json b/examples/geo-distributed-database-vercel/turbo.json
new file mode 100644
index 0000000000..c3d3d3b9bb
--- /dev/null
+++ b/examples/geo-distributed-database-vercel/turbo.json
@@ -0,0 +1,6 @@
+{
+	"$schema": "https://turbo.build/schema.json",
+	"extends": [
+		"//"
+	]
+}
diff --git a/examples/geo-distributed-database-vercel/vercel.json b/examples/geo-distributed-database-vercel/vercel.json
new file mode 100644
index 0000000000..64a8d9b467
--- /dev/null
+++ b/examples/geo-distributed-database-vercel/vercel.json
@@ -0,0 +1,9 @@
+{
+	"framework": "vite",
+	"rewrites": [
+		{
+			"source": "/api/(.*)",
+			"destination": "/api"
+		}
+	]
+}
diff --git a/examples/geo-distributed-database-vercel/vite.config.ts b/examples/geo-distributed-database-vercel/vite.config.ts
new file mode 100644
index 0000000000..f9f0d5ec2f
--- /dev/null
+++ b/examples/geo-distributed-database-vercel/vite.config.ts
@@ -0,0 +1,6 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+	plugins: [react()],
+});
diff --git a/examples/geo-distributed-database/README.md b/examples/geo-distributed-database/README.md
new file mode 100644
index 0000000000..a81ac4ada9
--- /dev/null
+++ b/examples/geo-distributed-database/README.md
@@ -0,0 +1,33 @@
+# Geo-Distributed Database
+
+Store user session state in edge-local Rivet Actors so preferences and activity stay close to users.
+
+## Getting Started
+
+```bash
+pnpm install
+pnpm dev
+```
+
+## Features
+
+- Creates a region-specific Rivet Actor using `createInRegion` and `createState` input.
+- Persists session preferences, recent activity, and last login time in actor state.
+- Measures action latency to highlight the benefit of edge-local updates.
+- Visualizes data locality with a world map and region indicators.
+
+## Implementation
+
+The UserSession actor initializes state with a region input and stores session data in persistent state.
+See the implementation in [`src/actors.ts`](https://github.com/rivet-dev/rivet/tree/main/examples/geo-distributed-database/src/actors.ts).
+
+The frontend connects with `createInRegion` and displays session locality from the actor state.
+See the client UI in [`frontend/App.tsx`](https://github.com/rivet-dev/rivet/tree/main/examples/geo-distributed-database/frontend/App.tsx) and the server wiring in [`src/server.ts`](https://github.com/rivet-dev/rivet/tree/main/examples/geo-distributed-database/src/server.ts).
+
+## Resources
+
+Read more about [state](/docs/actors/state), [actions](/docs/actors/actions), and [actor inputs](/docs/actors/input).
+
+## License
+
+MIT
diff --git a/examples/geo-distributed-database/frontend/App.tsx b/examples/geo-distributed-database/frontend/App.tsx
new file mode 100644
index 0000000000..39dffe5b43
--- /dev/null
+++ b/examples/geo-distributed-database/frontend/App.tsx
@@ -0,0 +1,362 @@
+import { createRivetKit } from "@rivetkit/react";
+import { useEffect, useMemo, useState } from "react";
+import type {
+	UserSessionPreferences,
+	UserSessionState,
+	registry,
+} from "../src/actors.ts";
+
+const { useActor } = createRivetKit<typeof registry>(
+	`${window.location.origin}/api/rivet`,
+);
+
+const REGION_OPTIONS = [
+	{
+		id: "us-west",
+		label: "US West",
+		city: "Oregon",
+		latencyHint: "18-32ms",
+		map: { x: 165, y: 190 },
+	},
+	{
+		id: "us-east",
+		label: "US East",
+		city: "Virginia",
+		latencyHint: "20-36ms",
+		map: { x: 290, y: 185 },
+	},
+	{
+		id: "eu-west",
+		label: "EU West",
+		city: "Dublin",
+		latencyHint: "32-48ms",
+		map: { x: 430, y: 160 },
+	},
+	{
+		id: "ap-south",
+		label: "AP South",
+		city: "Mumbai",
+		latencyHint: "45-70ms",
+		map: { x: 560, y: 210 },
+	},
+];
+
+const THEMES: Array<{ id: UserSessionPreferences["theme"]; label: string }> = [
+	{ id: "light", label: "Light" },
+	{ id: "dark", label: "Dark" },
+];
+
+const LANGUAGES: Array<{ id: UserSessionPreferences["language"]; label: string }> = [
+	{ id: "en", label: "English" },
+	{ id: "es", label: "Espanol" },
+	{ id: "fr", label: "Francais" },
+];
+
+const PAGE_VISITS = ["Dashboard", "Insights", "Billing", "Settings", "Reports"];
+
+function formatTimestamp(timestamp?: number) {
+	if (!timestamp) return "Awaiting login";
+	return new Date(timestamp).toLocaleString();
+}
+
+function regionLabel(regionId: string) {
+	return REGION_OPTIONS.find((region) => region.id === regionId)?.label ?? regionId;
+}
+
+function RegionMap({ activeRegion }: { activeRegion: string }) {
+	return (
+		<svg className="world-map" viewBox="0 0 720 360" role="img">
+			<title>Global data locality map</title>
+			<g className="map-lands">
+				<path d="M68 98l74-24 86 22 24 50-18 54-70 24-64-26-26-44z" />
+				<path d="M226 216l34-18 40 20-6 40-36 38-30-22z" />
+				<path d="M350 118l62-24 54 14 18 30-24 42-68 12-40-34z" />
+				<path d="M394 200l58-16 54 20 18 42-26 52-68 8-40-40z" />
+				<path d="M520 124l110-10 46 34-22 48-86 18-66-34z" />
+				<path d="M556 232l70-18 52 22-10 44-52 30-56-26z" />
+			</g>
+			<g className="map-grid">
+				<line x1="60" y1="60" x2="660" y2="60" />
+				<line x1="60" y1="180" x2="660" y2="180" />
+				<line x1="60" y1="300" x2="660" y2="300" />
+			</g>
+			<g className="map-markers">
+				{REGION_OPTIONS.map((region) => {
+					const isActive = region.id === activeRegion;
+					return (
+						<g
+							key={region.id}
+							className={isActive ? "map-marker active" : "map-marker"}
+						>
+							<circle
+								cx={region.map.x}
+								cy={region.map.y}
+								r={isActive ? 11 : 9}
+							/>
+							<text x={region.map.x + 14} y={region.map.y + 4}>
+								{region.label}
+							</text>
+						</g>
+					);
+				})}
+			</g>
+		</svg>
+	);
+}
+
+export function App() {
+	const [selectedRegion, setSelectedRegion] = useState(REGION_OPTIONS[1]?.id ?? "us-east");
+	const [session, setSession] = useState<UserSessionState | null>(null);
+	const [reportedRegion, setReportedRegion] = useState<string>("");
+	const [latencyMs, setLatencyMs] = useState<number | null>(null);
+	const [userId] = useState(() => crypto.randomUUID());
+
+	const actor = useActor({
+		name: "userSession",
+		key: ["user", userId],
+		createInRegion: selectedRegion,
+		createWithInput: { region: selectedRegion },
+	});
+
+	const activeRegion = reportedRegion || session?.region || selectedRegion;
+	const activeRegionLabel = regionLabel(activeRegion);
+
+	useEffect(() => {
+		if (!actor.connection) return;
+
+		let cancelled = false;
+
+		const loadSession = async () => {
+			const start = performance.now();
+			const [snapshot, region] = await Promise.all([
+				actor.connection.getSession(),
+				actor.connection.getRegion(),
+			]);
+			if (cancelled) return;
+			setSession(snapshot);
+			setReportedRegion(region);
+			setLatencyMs(Math.round(performance.now() - start));
+		};
+
+		loadSession().catch((err: unknown) => {
+			console.error("Failed to load session data:", err);
+		});
+
+		return () => {
+			cancelled = true;
+		};
+	}, [actor.connection]);
+
+	const handleRegionChange = (regionId: string) => {
+		setSelectedRegion(regionId);
+		setSession(null);
+		setReportedRegion("");
+		setLatencyMs(null);
+	};
+
+	const updatePreferences = async (next: Partial<UserSessionPreferences>) => {
+		if (!actor.connection) return;
+		try {
+			const start = performance.now();
+			const updated = await actor.connection.updatePreferences(next);
+			setSession(updated);
+			setLatencyMs(Math.round(performance.now() - start));
+		} catch (err: unknown) {
+			console.error("Failed to update preferences:", err);
+		}
+	};
+
+	const logActivity = async (page: string, isLogin = false) => {
+		if (!actor.connection) return;
+		try {
+			const start = performance.now();
+			const updated = await actor.connection.logActivity({ page, isLogin });
+			setSession(updated);
+			setLatencyMs(Math.round(performance.now() - start));
+		} catch (err: unknown) {
+			console.error("Failed to log activity:", err);
+		}
+	};
+
+	const regionDetails = useMemo(
+		() => REGION_OPTIONS.find((region) => region.id === activeRegion),
+		[activeRegion],
+	);
+
+	return (
+		<div className="app">
+			<header className="hero">
+				<div className="hero-copy">
+					<div className="eyebrow">Geo-Distributed Database</div>
+					<h1>Edge sessions that follow your users.</h1>
+					<p>
+						Each user session lives inside a regional Rivet Actor. Preference
+						updates and page visits stay close to the user, reducing round trip
+						latency while keeping data persistent.
+					</p>
+					<div className="status-row">
+						<span
+							className={
+								actor.connection ? "status connected" : "status connecting"
+							}
+						>
+							{actor.connection ? "Connected" : "Connecting"}
+						</span>
+						<span className="status detail">
+							Edge latency {latencyMs ? `${latencyMs}ms` : "measuring"}
+						</span>
+					</div>
+				</div>
+				<div className="hero-region">
+					<div className="region-label">Session stored in</div>
+					<div className="region-name">{activeRegionLabel}</div>
+					<div className="region-meta">
+						<div>Region code: {activeRegion}</div>
+						<div>
+							Last login: {formatTimestamp(session?.lastLoginAt)}
+						</div>
+					</div>
+				</div>
+			</header>
+
+			<section className="grid">
+				<div className="panel map-panel">
+					<div className="panel-header">
+						<div>
+							<h2>Data locality map</h2>
+							<p>
+								Your session state is pinned to a regional data plane.
+							</p>
+						</div>
+						<div className="chip">{activeRegionLabel}</div>
+					</div>
+					<RegionMap activeRegion={activeRegion} />
+					<div className="map-meta">
+						<div className="map-stat">
+							<span>Nearest edge</span>
+							<strong>{regionDetails?.city ?? "Local"}</strong>
+						</div>
+						<div className="map-stat">
+							<span>Estimated RTT</span>
+							<strong>{regionDetails?.latencyHint ?? "-"}</strong>
+						</div>
+						<div className="map-stat">
+							<span>Storage mode</span>
+							<strong>Edge persistent state</strong>
+						</div>
+					</div>
+				</div>
+
+				<div className="panel session-panel">
+					<div className="panel-header">
+						<div>
+							<h2>Session preferences</h2>
+							<p>Update state with actions and see it persist instantly.</p>
+						</div>
+					</div>
+					<div className="form-row">
+						<label htmlFor="theme">Theme</label>
+						<select
+							id="theme"
+							value={session?.preferences.theme ?? "light"}
+							onChange={(event) =>
+								updatePreferences({ theme: event.target.value as "light" | "dark" })
+							}
+						>
+							{THEMES.map((theme) => (
+								<option key={theme.id} value={theme.id}>
+									{theme.label}
+								</option>
+							))}
+						</select>
+					</div>
+					<div className="form-row">
+						<label htmlFor="language">Language</label>
+						<select
+							id="language"
+							value={session?.preferences.language ?? "en"}
+							onChange={(event) =>
+								updatePreferences({
+									language: event.target.value as "en" | "es" | "fr",
+								})
+							}
+						>
+							{LANGUAGES.map((language) => (
+								<option key={language.id} value={language.id}>
+									{language.label}
+								</option>
+							))}
+						</select>
+					</div>
+					<div className="form-row">
+						<label>Region selection</label>
+						<div className="region-buttons">
+							{REGION_OPTIONS.map((region) => (
+								<button
+									key={region.id}
+									type="button"
+									className={
+										region.id === selectedRegion
+											? "tag active"
+											: "tag"
+									}
+									onClick={() => handleRegionChange(region.id)}
+								>
+									{region.label}
+								</button>
+							))}
+						</div>
+					</div>
+					<div className="divider" />
+					<div className="activity-list">
+						<div className="activity-header">
+							<h3>Recent page visits</h3>
+							<button
+								type="button"
+								className="ghost"
+								onClick={() => logActivity("Login", true)}
+							>
+								Log login
+							</button>
+						</div>
+						{session?.recentActivity.length ? (
+							<ul>
+								{session.recentActivity.map((entry) => (
+									<li key={`${entry.page}-${entry.timestamp}`}>
+										<span>{entry.page}</span>
+										<time>{formatTimestamp(entry.timestamp)}</time>
+									</li>
+								))}
+							</ul>
+						) : (
+							<p className="empty">No activity logged yet.</p>
+						)}
+					</div>
+				</div>
+			</section>
+
+			<section className="panel activity-panel">
+				<div className="panel-header">
+					<div>
+						<h2>Simulate nearby activity</h2>
+						<p>
+							Click a page to store activity at the edge and measure latency.
+						</p>
+					</div>
+				</div>
+				<div className="page-buttons">
+					{PAGE_VISITS.map((page) => (
+						<button
+							key={page}
+							type="button"
+							className="page"
+							onClick={() => logActivity(page)}
+						>
+							{page}
+						</button>
+					))}
+				</div>
+			</section>
+		</div>
+	);
+}
diff --git a/examples/geo-distributed-database/frontend/main.tsx b/examples/geo-distributed-database/frontend/main.tsx
new file mode 100644
index 0000000000..2efcb334fc
--- /dev/null
+++ b/examples/geo-distributed-database/frontend/main.tsx
@@ -0,0 +1,12 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App.tsx";
+
+const root = document.getElementById("root");
+if (!root) throw new Error("Root element not found");
+
+createRoot(root).render(
+	<StrictMode>
+		<App />
+	</StrictMode>,
+);
diff --git a/examples/geo-distributed-database/index.html b/examples/geo-distributed-database/index.html
new file mode 100644
index 0000000000..296d2e1959
--- /dev/null
+++ b/examples/geo-distributed-database/index.html
@@ -0,0 +1,411 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Geo-Distributed Database</title>
+    <style>
+        @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap");
+
+        :root {
+            color-scheme: light;
+            --ink: #0f1c2e;
+            --ink-soft: #38485f;
+            --accent: #1f6f78;
+            --accent-strong: #0f5f66;
+            --sun: #f2a541;
+            --panel: rgba(255, 255, 255, 0.92);
+            --panel-border: #d7e0ea;
+            --shadow: 0 28px 60px rgba(17, 31, 51, 0.16);
+        }
+
+        * {
+            box-sizing: border-box;
+        }
+
+        body {
+            margin: 0;
+            font-family: "Space Grotesk", "Avenir Next", "Avenir", sans-serif;
+            color: var(--ink);
+            background: radial-gradient(circle at top, #fff4dc 0%, #e6f0f7 45%, #d7e2ef 100%);
+            min-height: 100vh;
+        }
+
+        .app {
+            max-width: 1120px;
+            margin: 0 auto;
+            padding: 48px 24px 80px;
+            display: flex;
+            flex-direction: column;
+            gap: 28px;
+        }
+
+        .hero {
+            display: grid;
+            grid-template-columns: 1.2fr 0.8fr;
+            gap: 32px;
+            padding: 34px;
+            border-radius: 28px;
+            background: linear-gradient(120deg, #0f1c2e 0%, #1f6f78 100%);
+            color: #fef6e7;
+            box-shadow: var(--shadow);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .hero::after {
+            content: "";
+            position: absolute;
+            inset: 0;
+            background: radial-gradient(circle at 20% 20%, rgba(242, 165, 65, 0.35), transparent 45%);
+            opacity: 0.7;
+            pointer-events: none;
+        }
+
+        .hero-copy {
+            position: relative;
+            z-index: 1;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+        }
+
+        .eyebrow {
+            font-size: 0.9rem;
+            text-transform: uppercase;
+            letter-spacing: 0.12em;
+            color: rgba(254, 246, 231, 0.75);
+        }
+
+        .hero h1 {
+            margin: 0;
+            font-size: clamp(2rem, 3vw, 2.9rem);
+            line-height: 1.05;
+        }
+
+        .hero p {
+            margin: 0;
+            color: rgba(254, 246, 231, 0.85);
+            font-size: 1.05rem;
+        }
+
+        .status-row {
+            display: flex;
+            gap: 12px;
+            flex-wrap: wrap;
+            align-items: center;
+        }
+
+        .status {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            padding: 6px 14px;
+            border-radius: 999px;
+            font-size: 0.9rem;
+            background: rgba(255, 255, 255, 0.14);
+        }
+
+        .status.connected::before,
+        .status.connecting::before {
+            content: "";
+            width: 8px;
+            height: 8px;
+            border-radius: 999px;
+            background: var(--sun);
+            display: inline-block;
+        }
+
+        .status.connecting::before {
+            background: rgba(255, 255, 255, 0.7);
+        }
+
+        .status.detail {
+            font-family: "IBM Plex Mono", "Courier New", monospace;
+        }
+
+        .hero-region {
+            position: relative;
+            z-index: 1;
+            background: rgba(255, 255, 255, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.18);
+            border-radius: 20px;
+            padding: 22px;
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+        }
+
+        .region-label {
+            text-transform: uppercase;
+            letter-spacing: 0.14em;
+            font-size: 0.75rem;
+            color: rgba(254, 246, 231, 0.65);
+        }
+
+        .region-name {
+            font-size: 2rem;
+            font-weight: 700;
+        }
+
+        .region-meta {
+            font-family: "IBM Plex Mono", "Courier New", monospace;
+            font-size: 0.85rem;
+            color: rgba(254, 246, 231, 0.85);
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+        }
+
+        .grid {
+            display: grid;
+            grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
+            gap: 24px;
+        }
+
+        .panel {
+            background: var(--panel);
+            border: 1px solid var(--panel-border);
+            border-radius: 24px;
+            padding: 24px;
+            box-shadow: 0 18px 40px rgba(15, 28, 46, 0.08);
+            display: flex;
+            flex-direction: column;
+            gap: 18px;
+        }
+
+        .panel-header {
+            display: flex;
+            justify-content: space-between;
+            gap: 16px;
+            align-items: center;
+        }
+
+        .panel-header h2 {
+            margin: 0 0 4px 0;
+            font-size: 1.4rem;
+        }
+
+        .panel-header p {
+            margin: 0;
+            color: var(--ink-soft);
+        }
+
+        .chip {
+            padding: 6px 12px;
+            border-radius: 999px;
+            background: rgba(31, 111, 120, 0.12);
+            color: var(--accent-strong);
+            font-weight: 600;
+            font-size: 0.85rem;
+        }
+
+        .world-map {
+            width: 100%;
+            height: auto;
+            border-radius: 20px;
+            background: #f6fafc;
+            border: 1px solid #e1e8f0;
+            padding: 12px;
+        }
+
+        .map-lands path {
+            fill: #cfdbe7;
+            stroke: #b3c2d3;
+            stroke-width: 2;
+        }
+
+        .map-grid line {
+            stroke: rgba(15, 28, 46, 0.08);
+            stroke-width: 1;
+        }
+
+        .map-marker circle {
+            fill: #f2a541;
+            stroke: #fff;
+            stroke-width: 3;
+        }
+
+        .map-marker text {
+            font-family: "IBM Plex Mono", "Courier New", monospace;
+            font-size: 11px;
+            fill: #4a5a70;
+        }
+
+        .map-marker.active circle {
+            fill: #1f6f78;
+        }
+
+        .map-meta {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+            gap: 12px;
+        }
+
+        .map-stat {
+            background: #f9f3e9;
+            border-radius: 16px;
+            padding: 12px;
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+        }
+
+        .map-stat span {
+            font-size: 0.8rem;
+            color: var(--ink-soft);
+        }
+
+        .map-stat strong {
+            font-size: 1rem;
+        }
+
+        .form-row {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+
+        .form-row label {
+            font-weight: 600;
+            color: var(--ink-soft);
+        }
+
+        select {
+            border-radius: 12px;
+            padding: 10px 12px;
+            border: 1px solid #d3dbe4;
+            font-size: 1rem;
+            font-family: "Space Grotesk", "Avenir Next", "Avenir", sans-serif;
+            background: #fff;
+        }
+
+        .region-buttons {
+            display: flex;
+            gap: 10px;
+            flex-wrap: wrap;
+        }
+
+        .tag {
+            padding: 8px 14px;
+            border-radius: 999px;
+            border: 1px solid #d6dee8;
+            background: #fff;
+            cursor: pointer;
+            font-family: "IBM Plex Mono", "Courier New", monospace;
+        }
+
+        .tag.active {
+            background: rgba(31, 111, 120, 0.12);
+            border-color: rgba(31, 111, 120, 0.4);
+            color: var(--accent-strong);
+        }
+
+        .divider {
+            height: 1px;
+            background: #e4eaf1;
+        }
+
+        .activity-list {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+        }
+
+        .activity-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .activity-list ul {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+
+        .activity-list li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px 12px;
+            border-radius: 12px;
+            background: #f6f9fb;
+            font-family: "IBM Plex Mono", "Courier New", monospace;
+            font-size: 0.85rem;
+        }
+
+        .activity-list time {
+            color: #6a7a8f;
+        }
+
+        .empty {
+            color: #7a899d;
+            font-size: 0.95rem;
+        }
+
+        button {
+            border: none;
+            cursor: pointer;
+            font-family: "Space Grotesk", "Avenir Next", "Avenir", sans-serif;
+        }
+
+        .ghost {
+            padding: 6px 12px;
+            border-radius: 999px;
+            border: 1px solid #d7e0ea;
+            background: transparent;
+            font-size: 0.85rem;
+        }
+
+        .page-buttons {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 12px;
+        }
+
+        .page {
+            padding: 12px 18px;
+            border-radius: 14px;
+            background: #0f1c2e;
+            color: #fef6e7;
+            font-size: 0.95rem;
+        }
+
+        .page:hover {
+            background: #14263d;
+        }
+
+        @media (max-width: 960px) {
+            .hero {
+                grid-template-columns: 1fr;
+            }
+
+            .grid {
+                grid-template-columns: 1fr;
+            }
+        }
+
+        @media (max-width: 600px) {
+            .app {
+                padding: 28px 18px 60px;
+            }
+
+            .hero {
+                padding: 24px;
+            }
+
+            .region-name {
+                font-size: 1.6rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="root"></div>
+    <script type="module" src="/frontend/main.tsx"></script>
+</body>
+</html>
diff --git a/examples/multi-region/package.json b/examples/geo-distributed-database/package.json
similarity index 79%
rename from examples/multi-region/package.json
rename to examples/geo-distributed-database/package.json
index 9bd5a32ae9..f164b427c8 100644
--- a/examples/multi-region/package.json
+++ b/examples/geo-distributed-database/package.json
@@ -1,8 +1,9 @@
 {
-  "name": "multi-region",
+  "name": "geo-distributed-database",
   "version": "2.0.21",
   "private": true,
   "type": "module",
+  "stableVersion": "0.8.0",
   "scripts": {
     "dev": "vite",
     "check-types": "tsc --noEmit",
@@ -24,18 +25,23 @@
   "dependencies": {
     "@hono/node-server": "^1.19.7",
     "@hono/node-ws": "^1.3.0",
-    "@rivetkit/react": "^2.0.38",
-    "hono": "^4.7.4",
+    "@rivetkit/react": "*",
+    "hono": "^4.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rivetkit": "^2.0.38",
+    "rivetkit": "*",
     "srvx": "^0.10.0"
   },
   "template": {
     "technologies": [
+      "react",
       "typescript"
     ],
-    "tags": [],
+    "tags": [
+      "state",
+      "edge",
+      "multi-region"
+    ],
     "priority": 1000,
     "frontendPort": 5173
   },
diff --git a/examples/geo-distributed-database/src/actors.ts b/examples/geo-distributed-database/src/actors.ts
new file mode 100644
index 0000000000..199801c2a4
--- /dev/null
+++ b/examples/geo-distributed-database/src/actors.ts
@@ -0,0 +1,80 @@
+import { actor, setup } from "rivetkit";
+
+export type UserSessionPreferences = {
+	theme: "light" | "dark";
+	language: "en" | "es" | "fr";
+};
+
+export type UserSessionActivity = {
+	page: string;
+	timestamp: number;
+};
+
+export type UserSessionState = {
+	region: string;
+	preferences: UserSessionPreferences;
+	recentActivity: UserSessionActivity[];
+	lastLoginAt: number;
+};
+
+interface UserSessionInput {
+	region: string;
+}
+
+const MAX_ACTIVITY = 6;
+
+export const userSession = actor({
+	// Initialize state with a region-specific input parameter. https://rivet.dev/docs/actors/state
+	createState: (_c, input: UserSessionInput): UserSessionState => ({
+		region: input.region,
+		preferences: {
+			theme: "light",
+			language: "en",
+		},
+		recentActivity: [],
+		lastLoginAt: Date.now(),
+	}),
+
+	actions: {
+		// Read session data stored in state.
+		getSession: (c) => c.state,
+
+		// Update user preferences stored in state.
+		updatePreferences: (
+			c,
+			preferences: Partial<UserSessionPreferences>,
+		) => {
+			if (preferences.theme) {
+				c.state.preferences.theme = preferences.theme;
+			}
+			if (preferences.language) {
+				c.state.preferences.language = preferences.language;
+			}
+			return c.state;
+		},
+
+		// Log activity and keep a short history of recent pages.
+		logActivity: (c, entry: { page: string; isLogin?: boolean }) => {
+			const activity: UserSessionActivity = {
+				page: entry.page,
+				timestamp: Date.now(),
+			};
+			c.state.recentActivity = [activity, ...c.state.recentActivity].slice(
+				0,
+				MAX_ACTIVITY,
+			);
+			if (entry.isLogin) {
+				c.state.lastLoginAt = activity.timestamp;
+			}
+			return c.state;
+		},
+
+		// Return the actor's region so the UI can show data locality.
+		getRegion: (c) => c.state.region,
+	},
+});
+
+// Register actors for use in the server.
+export const registry = setup({
+	use: { userSession },
+});
diff --git a/examples/geo-distributed-database/src/server.ts b/examples/geo-distributed-database/src/server.ts
new file mode 100644
index 0000000000..8c065a6b5e
--- /dev/null
+++ b/examples/geo-distributed-database/src/server.ts
@@ -0,0 +1,8 @@
+import { Hono } from "hono";
+import { registry } from "./actors.ts";
+
+const app = new Hono();
+
+app.all("/api/rivet/*", (c) => registry.handler(c.req.raw));
+
+export default app;
diff --git a/examples/geo-distributed-database/tsconfig.json b/examples/geo-distributed-database/tsconfig.json
new file mode 100644
index 0000000000..82e8cc4d83
--- /dev/null
+++ b/examples/geo-distributed-database/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "lib": ["esnext", "dom"],
+    "jsx": "react-jsx",
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "types": ["node", "vite/client"],
+    "noEmit": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "allowImportingTsExtensions": true,
+    "rewriteRelativeImportExtensions": true
+  },
+  "include": ["src/**/*", "frontend/**/*"]
+}
diff --git a/examples/geo-distributed-database/turbo.json b/examples/geo-distributed-database/turbo.json
new file mode 100644
index 0000000000..95960709b1
--- /dev/null
+++ b/examples/geo-distributed-database/turbo.json
@@ -0,0 +1,4 @@
+{
+  "$schema": "https://turbo.build/schema.json",
+  "extends": ["//"]
+}
diff --git a/examples/multi-region/vite.config.ts b/examples/geo-distributed-database/vite.config.ts
similarity index 100%
rename from examples/multi-region/vite.config.ts
rename to examples/geo-distributed-database/vite.config.ts
diff --git a/examples/multi-region/README.md b/examples/multi-region/README.md
deleted file mode 100644
index 02b154c93f..0000000000
--- a/examples/multi-region/README.md
+++ /dev/null
@@ -1,34 +0,0 @@
-# Multi-Region
-
-Demonstrates deploying Rivet Actors across multiple geographic regions for low-latency global access.
-
-## Getting Started
-
-```sh
-git clone https://github.com/rivet-dev/rivet.git
-cd rivet/examples/multi-region
-npm install
-npm run dev
-```
-
-
-## Features
-
-- **Multi-region deployment**: Deploy actors across multiple geographic regions automatically
-- **Low-latency access**: Users connect to the nearest region for optimal performance
-- **Automatic routing**: Requests automatically routed to the appropriate regional deployment
-- **Global state management**: Actor state synchronized across regions as needed
-
-## Implementation
-
-This example demonstrates deploying actors across multiple regions:
-
-- **Actor Definition** ([`src/backend/registry.ts`](https://github.com/rivet-dev/rivet/tree/main/examples/multi-region/src/backend/registry.ts)): Shows configuration for multi-region actor deployment
-
-## Resources
-
-Read more about [actions](/docs/actors/actions), [state](/docs/actors/state), and [setup](/docs/setup).
-
-## License
-
-MIT
diff --git a/examples/multi-region/frontend/App.tsx b/examples/multi-region/frontend/App.tsx
deleted file mode 100644
index e91671c225..0000000000
--- a/examples/multi-region/frontend/App.tsx
+++ /dev/null
@@ -1,260 +0,0 @@
-import { createRivetKit } from "@rivetkit/react";
-import { useEffect, useState } from "react";
-import type { Player, registry } from "../src/actors.ts";
-
-const { useActor } = createRivetKit<typeof registry>(`${window.location.origin}/api/rivet`);
-
-export function App() {
-	const [region, setRegion] = useState("us-east");
-	const [players, setPlayers] = useState<Record<string, Player>>({});
-	const [myPlayerId, setMyPlayerId] = useState<string | null>(null);
-	const [latency, setLatency] = useState<number>(0);
-	const [currentRegion, setCurrentRegion] = useState<string>("");
-
-	// Pass region parameter to useActor - this demonstrates multi-region deployment
-	const actor = useActor({
-		name: "gameRoom",
-		key: ["main"],
-		// createInRegion isolates actor instances by region
-		createInRegion: region,
-		// createWithInput parameter is passed to createState
-		createWithInput: { region },
-	});
-
-	// Track connection and get initial state
-	useEffect(() => {
-		if (!actor.connection) return;
-
-		// Fetch initial game state
-		actor.connection
-			.getGameState()
-			.then((state: { players: Record<string, Player>; region: string }) => {
-				setPlayers(state.players);
-				setCurrentRegion(state.region);
-				// Set my player ID to one of the players (we'll update this when playerJoined event fires)
-				const playerIds = Object.keys(state.players);
-				if (playerIds.length > 0 && !myPlayerId) {
-					setMyPlayerId(playerIds[playerIds.length - 1]);
-				}
-			})
-			.catch((err: unknown) => console.error("Failed to get game state:", err));
-	}, [actor.connection, myPlayerId]);
-
-	// Handle keyboard input for movement
-	useEffect(() => {
-		if (!actor.connection) return;
-
-		const handleKeyDown = (e: KeyboardEvent) => {
-			let dx = 0;
-			let dy = 0;
-
-			switch (e.key) {
-				case "w":
-				case "ArrowUp":
-					dy = -10;
-					break;
-				case "s":
-				case "ArrowDown":
-					dy = 10;
-					break;
-				case "a":
-				case "ArrowLeft":
-					dx = -10;
-					break;
-				case "d":
-				case "ArrowRight":
-					dx = 10;
-					break;
-			}
-
-			if (dx !== 0 || dy !== 0) {
-				const startTime = Date.now();
-				actor.connection
-					?.move(dx, dy)
-					.then(() => {
-						// Calculate round-trip latency
-						setLatency(Date.now() - startTime);
-					})
-					.catch((err: unknown) => console.error("Move failed:", err));
-			}
-		};
-
-		window.addEventListener("keydown", handleKeyDown);
-		return () => window.removeEventListener("keydown", handleKeyDown);
-	}, [actor.connection]);
-
-	// Listen for player joined event
-	actor.useEvent(
-		"playerJoined",
-		({ playerId, player }: { playerId: string; player: Player }) => {
-			setPlayers((prev) => ({ ...prev, [playerId]: player }));
-			// Set our player ID if we don't have one yet
-			if (!myPlayerId) {
-				setMyPlayerId(playerId);
-			}
-		},
-	);
-
-	// Listen for player left event
-	actor.useEvent("playerLeft", ({ playerId }: { playerId: string }) => {
-		setPlayers((prev) => {
-			const newPlayers = { ...prev };
-			delete newPlayers[playerId];
-			return newPlayers;
-		});
-	});
-
-	// Listen for player movement
-	actor.useEvent(
-		"playerMoved",
-		({ playerId, x, y }: { playerId: string; x: number; y: number }) => {
-			setPlayers((prev) => {
-				const player = prev[playerId];
-				if (!player) return prev;
-				return {
-					...prev,
-					[playerId]: { ...player, x, y, lastUpdate: Date.now() },
-				};
-			});
-		},
-	);
-
-	// Handle region change
-	const handleRegionChange = (newRegion: string) => {
-		setRegion(newRegion);
-		setPlayers({});
-		setMyPlayerId(null);
-	};
-
-	const playerCount = Object.keys(players).length;
-
-	return (
-		<div className="app-container">
-			<div className="connection-status-wrapper">
-				<div
-					className={`connection-status ${actor.connection ? "connected" : "disconnected"}`}
-				>
-					{actor.connection ? "Connected" : "Disconnected"}
-				</div>
-			</div>
-
-			<div className="header">
-				<h1>Quickstart: Multi-Region</h1>
-				<p>Multiplayer game demonstrating multi-region deployment</p>
-			</div>
-
-			<div className="info-box">
-				<h3>Multi-Region Deployment</h3>
-				<p>
-					Select a region below to connect to a game room in that region. Each
-					region has its own isolated set of actors, allowing players to connect
-					to servers closer to them for lower latency.
-				</p>
-			</div>
-
-			<div className="region-selector">
-				<label>
-					<strong>Select Region:</strong>
-				</label>
-				<select value={region} onChange={(e) => handleRegionChange(e.target.value)}>
-					<option value="us-east">US East</option>
-					<option value="eu-west">EU West</option>
-					<option value="ap-south">AP South</option>
-				</select>
-			</div>
-
-			<div className="region-info">
-				<div className="info-card">
-					<strong>Current Region:</strong> {currentRegion || region}
-				</div>
-				<div className="info-card">
-					<strong>Players in Region:</strong> {playerCount}
-				</div>
-				<div className="info-card">
-					<strong>Latency:</strong> {latency}ms
-				</div>
-			</div>
-
-			<div className="game-area">
-				<svg
-					width="600"
-					height="600"
-					className="game-canvas"
-					viewBox="0 0 1000 1000"
-				>
-					{/* Grid background */}
-					<defs>
-						<pattern
-							id="grid"
-							width="100"
-							height="100"
-							patternUnits="userSpaceOnUse"
-						>
-							<path
-								d="M 100 0 L 0 0 0 100"
-								fill="none"
-								stroke="#e0e0e0"
-								strokeWidth="1"
-							/>
-						</pattern>
-					</defs>
-					<rect width="1000" height="1000" fill="url(#grid)" />
-					<rect
-						width="1000"
-						height="1000"
-						fill="none"
-						stroke="#333"
-						strokeWidth="3"
-					/>
-
-					{/* Render all players */}
-					{Object.values(players).map((player) => {
-						const isMe = player.id === myPlayerId;
-						return (
-							<g key={player.id}>
-								{/* Player shadow */}
-								<circle
-									cx={player.x + 2}
-									cy={player.y + 2}
-									r="12"
-									fill="rgba(0,0,0,0.2)"
-								/>
-								{/* Player */}
-								<circle
-									cx={player.x}
-									cy={player.y}
-									r="10"
-									fill={player.color}
-									stroke="#333"
-									strokeWidth="2"
-								/>
-								{/* Player label */}
-								<text
-									x={player.x}
-									y={player.y - 15}
-									textAnchor="middle"
-									fontSize="12"
-									fill="#333"
-									fontWeight={isMe ? "bold" : "normal"}
-								>
-									{isMe ? "YOU" : player.id.substring(0, 8)}
-								</text>
-							</g>
-						);
-					})}
-				</svg>
-			</div>
-
-			<div className="controls">
-				<p>
-					<strong>Controls:</strong>
-				</p>
-				<p>Move: WASD or Arrow Keys</p>
-				<p>
-					Each region has its own isolated game rooms. Players in different
-					regions cannot see each other.
-				</p>
-			</div>
-		</div>
-	);
-}
diff --git a/examples/multi-region/index.html b/examples/multi-region/index.html
deleted file mode 100644
index 5cbbcde5d6..0000000000
--- a/examples/multi-region/index.html
+++ /dev/null
@@ -1,134 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Quickstart: Multi-Region</title>
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-            margin: 0;
-            padding: 20px;
-            background-color: #f0f0f0;
-        }
-        .app-container {
-            max-width: 800px;
-            margin: 0 auto;
-            background-color: white;
-            padding: 20px;
-            border-radius: 8px;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-        }
-        .header {
-            text-align: center;
-            margin-bottom: 30px;
-        }
-        .header h1 {
-            color: #333;
-            margin: 0;
-        }
-        .header p {
-            color: #666;
-            margin: 10px 0;
-        }
-        .info-box {
-            background-color: #e8f4f8;
-            border: 1px solid #b8d4da;
-            border-radius: 6px;
-            padding: 15px;
-            margin-bottom: 20px;
-        }
-        .info-box h3 {
-            margin: 0 0 10px 0;
-            color: #2c5aa0;
-        }
-        .info-box p {
-            margin: 0;
-            color: #555;
-            line-height: 1.5;
-        }
-        .region-selector {
-            margin-bottom: 20px;
-            text-align: center;
-        }
-        .region-selector label {
-            margin-right: 10px;
-            color: #333;
-        }
-        .region-selector select {
-            padding: 8px 12px;
-            font-size: 14px;
-            border: 2px solid #4287f5;
-            border-radius: 4px;
-            background-color: white;
-            cursor: pointer;
-        }
-        .region-info {
-            display: flex;
-            justify-content: space-around;
-            gap: 10px;
-            margin-bottom: 20px;
-            flex-wrap: wrap;
-        }
-        .info-card {
-            background-color: #f9f9f9;
-            border: 1px solid #ddd;
-            border-radius: 6px;
-            padding: 10px 15px;
-            text-align: center;
-            flex: 1;
-            min-width: 150px;
-        }
-        .info-card strong {
-            color: #333;
-            display: block;
-            margin-bottom: 5px;
-        }
-        .game-area {
-            text-align: center;
-            margin-bottom: 20px;
-        }
-        .game-canvas {
-            border: 3px solid #333;
-            border-radius: 8px;
-            background-color: #fafafa;
-            max-width: 100%;
-            height: auto;
-        }
-        .controls {
-            margin-top: 20px;
-            text-align: center;
-        }
-        .controls p {
-            margin: 5px 0;
-            font-size: 14px;
-            color: #555;
-        }
-        .connection-status-wrapper {
-            position: relative;
-            height: 0;
-        }
-        .connection-status {
-            position: absolute;
-            top: -10px;
-            right: -10px;
-            padding: 8px 12px;
-            border-radius: 4px;
-            font-size: 14px;
-            font-weight: bold;
-        }
-        .connection-status.connected {
-            background-color: #d4edda;
-            color: #155724;
-        }
-        .connection-status.disconnected {
-            background-color: #f8d7da;
-            color: #721c24;
-        }
-    </style>
-</head>
-<body>
-    <div id="root"></div>
-    <script type="module" src="/frontend/main.tsx"></script>
-</body>
-</html>
diff --git a/examples/multi-region/src/actors.ts b/examples/multi-region/src/actors.ts
deleted file mode 100644
index 3286648d47..0000000000
--- a/examples/multi-region/src/actors.ts
+++ /dev/null
@@ -1,116 +0,0 @@
-import { actor, setup } from "rivetkit";
-import type { Player } from "./types.ts";
-
-export type { Player };
-
-interface State {
-	players: Record<string, Player>;
-	region: string;
-}
-
-const gameRoom = actor({
-	// Create initial state with region parameter
-	createState: (_c, input: { region: string }): State => ({
-		players: {} as Record<string, Player>,
-		region: input.region,
-	}),
-
-	// Connection state - tracks which player belongs to each connection
-	connState: {
-		playerId: null as string | null,
-	},
-
-	// Handle client connections
-	onConnect: (c, conn) => {
-		// Generate a unique player ID
-		const playerId = conn.id;
-
-		// Generate random color for player
-		const colors = [
-			"#FF6B6B",
-			"#4ECDC4",
-			"#45B7D1",
-			"#FFA07A",
-			"#98D8C8",
-			"#F7DC6F",
-			"#BB8FCE",
-			"#85C1E2",
-		];
-		const color = colors[Math.floor(Math.random() * colors.length)];
-
-		// Set connection state
-		conn.state.playerId = playerId;
-
-		// Add player at random position
-		c.state.players[playerId] = {
-			id: playerId,
-			x: Math.floor(Math.random() * 900) + 50,
-			y: Math.floor(Math.random() * 900) + 50,
-			color,
-			lastUpdate: Date.now(),
-		};
-
-		// Broadcast player joined event
-		c.broadcast("playerJoined", {
-			playerId,
-			player: c.state.players[playerId],
-		});
-	},
-
-	onDisconnect: (c, conn) => {
-		const playerId = conn.state.playerId;
-		if (playerId) {
-			delete c.state.players[playerId];
-			c.broadcast("playerLeft", { playerId });
-		}
-	},
-
-	actions: {
-		// Move player by delta
-		move: (c, dx: number, dy: number) => {
-			const playerId = c.conn.state.playerId;
-			if (!playerId) return { x: 0, y: 0 };
-
-			const player = c.state.players[playerId];
-			if (!player) return { x: 0, y: 0 };
-
-			// Update position
-			player.x += dx;
-			player.y += dy;
-
-			// Keep player in bounds (0-1000)
-			player.x = Math.max(0, Math.min(player.x, 1000));
-			player.y = Math.max(0, Math.min(player.y, 1000));
-
-			// Update timestamp
-			player.lastUpdate = Date.now();
-
-			// Broadcast movement
-			c.broadcast("playerMoved", {
-				playerId,
-				x: player.x,
-				y: player.y,
-			});
-
-			return { x: player.x, y: player.y };
-		},
-
-		// Get current game state
-		getGameState: (c) => {
-			return {
-				players: c.state.players,
-				region: c.state.region,
-			};
-		},
-
-		// Get region info
-		getRegion: (c) => {
-			return c.state.region;
-		},
-	},
-});
-
-// Register actors for use
-export const registry = setup({
-	use: { gameRoom },
-});
diff --git a/examples/multi-region/src/types.ts b/examples/multi-region/src/types.ts
deleted file mode 100644
index 3c6733533d..0000000000
--- a/examples/multi-region/src/types.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-export type Position = { x: number; y: number };
-
-export type Player = {
-	id: string;
-	x: number;
-	y: number;
-	color: string;
-	lastUpdate: number;
-};
-
-export type GameState = {
-	players: Record<string, Player>;
-	region: string;
-};
-
-export type ConnectionState = {
-	playerId: string | null;
-};
diff --git a/examples/multi-region/tests/regions.test.ts b/examples/multi-region/tests/regions.test.ts
deleted file mode 100644
index 669446ef7d..0000000000
--- a/examples/multi-region/tests/regions.test.ts
+++ /dev/null
@@ -1,181 +0,0 @@
-import { setupTest } from "rivetkit/test";
-import { describe, expect, test } from "vitest";
-import { registry } from "../src/actors.ts";
-
-describe("multi-region deployment", () => {
-	test("isolates actors by region", async (ctx) => {
-		const { client } = await setupTest(ctx, registry);
-
-		const usEast = client.gameRoom.getOrCreate(["room1"], {
-			createInRegion: "us-east",
-			createWithInput: { region: "us-east" },
-		});
-
-		const euWest = client.gameRoom.getOrCreate(["room1"], {
-			createInRegion: "eu-west",
-			createWithInput: { region: "eu-west" },
-		});
-
-		const usRegion = await usEast.getRegion();
-		const euRegion = await euWest.getRegion();
-
-		expect(usRegion).toBe("us-east");
-		expect(euRegion).toBe("eu-west");
-
-		// Verify they are different actor instances
-		const usState = await usEast.getGameState();
-		const euState = await euWest.getGameState();
-
-		expect(usState.region).toBe("us-east");
-		expect(euState.region).toBe("eu-west");
-	});
-
-	test("players isolated by region", async (ctx) => {
-		const { client } = await setupTest(ctx, registry);
-
-		// Create actors in different regions
-		const usEast = client.gameRoom.getOrCreate(["room2"], {
-			createInRegion: "us-east",
-			createWithInput: { region: "us-east" },
-		});
-
-		const euWest = client.gameRoom.getOrCreate(["room2"], {
-			createInRegion: "eu-west",
-			createWithInput: { region: "eu-west" },
-		});
-
-		// Get initial state
-		const usInitialState = await usEast.getGameState();
-		const euInitialState = await euWest.getGameState();
-
-		// Verify rooms maintain separate player lists
-		expect(usInitialState.players).not.toBe(euInitialState.players);
-	});
-
-	test("same room ID, different regions", async (ctx) => {
-		const { client } = await setupTest(ctx, registry);
-
-		// Create "room1" in different regions
-		const usRoom1 = client.gameRoom.getOrCreate(["room1"], {
-			createInRegion: "us-east",
-			createWithInput: { region: "us-east" },
-		});
-
-		const euRoom1 = client.gameRoom.getOrCreate(["room1"], {
-			createInRegion: "eu-west",
-			createWithInput: { region: "eu-west" },
-		});
-
-		// Verify they are different instances
-		const usState = await usRoom1.getGameState();
-		const euState = await euRoom1.getGameState();
-
-		expect(usState.region).toBe("us-east");
-		expect(euState.region).toBe("eu-west");
-
-		// Verify state is not shared
-		expect(usState).not.toBe(euState);
-	});
-
-	test("movement within region", async (ctx) => {
-		const { client } = await setupTest(ctx, registry);
-
-		const room = client.gameRoom.getOrCreate(["room3"], {
-			createInRegion: "us-east",
-			createWithInput: { region: "us-east" },
-		});
-
-		// Movement should work within region
-		// Note: move requires connection context, so this tests the action exists
-		expect(room.move).toBeDefined();
-		expect(typeof room.move).toBe("function");
-	});
-
-	test("region parameter validation", async (ctx) => {
-		const { client } = await setupTest(ctx, registry);
-
-		// Create actor with custom region
-		const customRegion = client.gameRoom.getOrCreate(["room4"], {
-			createInRegion: "custom-region",
-			createWithInput: { region: "custom-region" },
-		});
-
-		const region = await customRegion.getRegion();
-		expect(region).toBe("custom-region");
-	});
-
-	test("region switching creates separate instances", async (ctx) => {
-		const { client } = await setupTest(ctx, registry);
-
-		// Connect to us-east
-		const usEast = client.gameRoom.getOrCreate(["room5"], {
-			createInRegion: "us-east",
-			createWithInput: { region: "us-east" },
-		});
-
-		const usState = await usEast.getGameState();
-		expect(usState.region).toBe("us-east");
-
-		// Connect to eu-west with same room ID
-		const euWest = client.gameRoom.getOrCreate(["room5"], {
-			createInRegion: "eu-west",
-			createWithInput: { region: "eu-west" },
-		});
-
-		const euState = await euWest.getGameState();
-		expect(euState.region).toBe("eu-west");
-
-		// Verify they have separate state
-		expect(usState.region).not.toBe(euState.region);
-	});
-
-	test("multiple regions with different room IDs", async (ctx) => {
-		const { client } = await setupTest(ctx, registry);
-
-		// Create different rooms in different regions
-		const usRoom1 = client.gameRoom.getOrCreate(["lobby"], {
-			createInRegion: "us-east",
-			createWithInput: { region: "us-east" },
-		});
-
-		const usRoom2 = client.gameRoom.getOrCreate(["game"], {
-			createInRegion: "us-east",
-			createWithInput: { region: "us-east" },
-		});
-
-		const euRoom1 = client.gameRoom.getOrCreate(["lobby"], {
-			createInRegion: "eu-west",
-			createWithInput: { region: "eu-west" },
-		});
-
-		// Verify all have correct regions
-		expect(await usRoom1.getRegion()).toBe("us-east");
-		expect(await usRoom2.getRegion()).toBe("us-east");
-		expect(await euRoom1.getRegion()).toBe("eu-west");
-
-		// Verify they are independent
-		const usRoom1State = await usRoom1.getGameState();
-		const usRoom2State = await usRoom2.getGameState();
-		const euRoom1State = await euRoom1.getGameState();
-
-		expect(usRoom1State.players).not.toBe(usRoom2State.players);
-		expect(usRoom1State.players).not.toBe(euRoom1State.players);
-	});
-
-	test("getGameState returns players and region", async (ctx) => {
-		const { client } = await setupTest(ctx, registry);
-
-		const room = client.gameRoom.getOrCreate(["test-state"], {
-			createInRegion: "ap-south",
-			createWithInput: { region: "ap-south" },
-		});
-
-		const state = await room.getGameState();
-
-		// Verify structure
-		expect(state).toHaveProperty("players");
-		expect(state).toHaveProperty("region");
-		expect(typeof state.players).toBe("object");
-		expect(state.region).toBe("ap-south");
-	});
-});
diff --git a/examples/multi-region/tsconfig.json b/examples/multi-region/tsconfig.json
deleted file mode 100644
index 6066bc46a9..0000000000
--- a/examples/multi-region/tsconfig.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-	"compilerOptions": {
-		"target": "ES2020",
-		"lib": ["ES2020", "DOM", "DOM.Iterable"],
-		"module": "ESNext",
-		"skipLibCheck": true,
-		"moduleResolution": "bundler",
-		"allowImportingTsExtensions": true,
-		"rewriteRelativeImportExtensions": true,
-		"resolveJsonModule": true,
-		"isolatedModules": true,
-		"noEmit": true,
-		"jsx": "react-jsx",
-		"strict": true,
-		"noUnusedLocals": true,
-		"noUnusedParameters": true,
-		"noFallthroughCasesInSwitch": true
-	},
-	"include": ["src", "tests", "frontend"],
-	"exclude": ["node_modules", "dist"]
-}
diff --git a/examples/multi-region/turbo.json b/examples/multi-region/turbo.json
deleted file mode 100644
index c5e71016d3..0000000000
--- a/examples/multi-region/turbo.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-	"$schema": "https://turbo.build/schema.json",
-	"extends": ["//"],
-	"tasks": {
-		"build": {
-			"dependsOn": ["@rivetkit/react#build", "rivetkit#build"]
-		}
-	}
-}
diff --git a/examples/multi-region/vitest.config.ts b/examples/multi-region/vitest.config.ts
deleted file mode 100644
index e92f387bef..0000000000
--- a/examples/multi-region/vitest.config.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { defineConfig } from "vitest/config";
-
-export default defineConfig({
-	test: {
-		environment: "node",
-	},
-});
diff --git a/examples/multiplayer-game-vercel/.gitignore b/examples/multiplayer-game-vercel/.gitignore
new file mode 100644
index 0000000000..e28f3d79db
--- /dev/null
+++ b/examples/multiplayer-game-vercel/.gitignore
@@ -0,0 +1,4 @@
+.actorcore
+node_modules
+dist
+.vercel
diff --git a/examples/multiplayer-game-vercel/README.md b/examples/multiplayer-game-vercel/README.md
new file mode 100644
index 0000000000..4f3e61ca27
--- /dev/null
+++ b/examples/multiplayer-game-vercel/README.md
@@ -0,0 +1,38 @@
+> **Note:** This is the Vercel-optimized version of the [multiplayer-game](../multiplayer-game) example.
+> It uses the `hono/vercel` adapter and is configured for Vercel deployment.
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Frivet-gg%2Frivet%2Ftree%2Fmain%2Fexamples%2Fmultiplayer-game-vercel&project-name=multiplayer-game-vercel)
+
+# Multiplayer Game
+
+A real-time Agar.io style arena showing a matchmaker coordinator and GameRoom data actors.
+
+## Getting Started
+
+```sh
+git clone https://github.com/rivet-dev/rivet.git
+cd rivet/examples/multiplayer-game
+pnpm install
+pnpm dev
+```
+
+## Features
+
+- **Coordinator pattern**: Matchmaker Rivet Actor that indexes and assigns GameRoom actors
+- **Real-time events**: Player joins, movement, and collisions broadcast to connected clients
+- **Stateful gameplay**: Persistent room state with player growth and collision resolution
+- **Typed React client**: `@rivetkit/react` hooks for actions and event subscriptions
+
+## Implementation
+
+- **Matchmaker and GameRoom actors** ([`src/actors.ts`](https://github.com/rivet-dev/rivet/tree/main/examples/multiplayer-game/src/actors.ts)): Coordinator actor for room discovery plus GameRoom state and physics
+- **Server routing** ([`src/server.ts`](https://github.com/rivet-dev/rivet/tree/main/examples/multiplayer-game/src/server.ts)): Hono server exposing the Rivet Actor handler
+- **Canvas frontend** ([`frontend/App.tsx`](https://github.com/rivet-dev/rivet/tree/main/examples/multiplayer-game/frontend/App.tsx)): Canvas rendering, input handling, and leaderboard UI
+
+## Resources
+
+Read more about [design patterns](/docs/actors/design-patterns), [actions](/docs/actors/actions), [events](/docs/actors/events), and [state](/docs/actors/state).
+
+## License
+
+MIT
diff --git a/examples/multiplayer-game-vercel/api/index.ts b/examples/multiplayer-game-vercel/api/index.ts
new file mode 100644
index 0000000000..07a830391f
--- /dev/null
+++ b/examples/multiplayer-game-vercel/api/index.ts
@@ -0,0 +1,3 @@
+import app from "../src/server.ts";
+
+export default app;
diff --git a/examples/multiplayer-game-vercel/frontend/App.tsx b/examples/multiplayer-game-vercel/frontend/App.tsx
new file mode 100644
index 0000000000..9c5e269ed7
--- /dev/null
+++ b/examples/multiplayer-game-vercel/frontend/App.tsx
@@ -0,0 +1,349 @@
+import { createRivetKit } from "@rivetkit/react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import type { GameState, JoinResult, Player } from "../src/types.ts";
+import type { registry } from "../src/actors.ts";
+
+const { useActor } = createRivetKit<typeof registry>(`${window.location.origin}/api/rivet`);
+
+const WORLD_SIZE = 1200;
+const INPUT_RATE_MS = 50;
+
+const getDirectionFromKeys = (keys: Set<string>) => {
+	let dx = 0;
+	let dy = 0;
+
+	if (keys.has("w") || keys.has("ArrowUp")) dy -= 1;
+	if (keys.has("s") || keys.has("ArrowDown")) dy += 1;
+	if (keys.has("a") || keys.has("ArrowLeft")) dx -= 1;
+	if (keys.has("d") || keys.has("ArrowRight")) dx += 1;
+
+	return { dx, dy };
+};
+
+const radiusFromMass = (mass: number) => Math.max(8, Math.sqrt(mass) * 3.2);
+
+export function App() {
+	const [roomId, setRoomId] = useState<string | null>(null);
+	const [players, setPlayers] = useState<Record<string, Player>>({});
+	const [myPlayerId, setMyPlayerId] = useState<string | null>(null);
+	const [maxPlayers, setMaxPlayers] = useState(10);
+	const [displayName, setDisplayName] = useState("Pilot");
+	const [status, setStatus] = useState<string>("Finding a room...");
+	const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+	const canvasRef = useRef<HTMLCanvasElement | null>(null);
+	const keysRef = useRef<Set<string>>(new Set());
+
+	const matchmaker = useActor({
+		name: "matchmaker",
+		key: ["main"],
+	});
+
+	const gameRoom = useActor({
+		name: "gameRoom",
+		key: roomId ? [roomId] : ["pending"],
+		enabled: Boolean(roomId),
+	});
+
+	useEffect(() => {
+		if (!matchmaker.connection || roomId) return;
+
+		matchmaker.connection
+			.findGame()
+			.then((nextRoomId: string) => {
+				setRoomId(nextRoomId);
+				setStatus(`Connected to ${nextRoomId}`);
+			})
+			.catch((err: unknown) => {
+				console.error("Failed to find game:", err);
+				setErrorMessage("Matchmaking failed. Try again.");
+			});
+	}, [matchmaker.connection, roomId]);
+
+	useEffect(() => {
+		setPlayers({});
+		setMyPlayerId(null);
+		setErrorMessage(null);
+	}, [roomId]);
+
+	useEffect(() => {
+		if (!gameRoom.connection) return;
+
+		gameRoom.connection
+			.getState()
+			.then((state: GameState) => {
+				setPlayers(state.players);
+				setMaxPlayers(state.maxPlayers);
+				setStatus(`Room ${state.roomId}`);
+			})
+			.catch((err: unknown) => {
+				console.error("Failed to load room state:", err);
+			});
+	}, [gameRoom.connection]);
+
+	gameRoom.useEvent("playerJoined", ({ playerId, player }: JoinResult) => {
+		setPlayers((prev) => ({ ...prev, [playerId]: player }));
+	});
+
+	gameRoom.useEvent("playerLeft", ({ playerId }: { playerId: string }) => {
+		setPlayers((prev) => {
+			const next = { ...prev };
+			delete next[playerId];
+			return next;
+		});
+		if (playerId === myPlayerId) {
+			setMyPlayerId(null);
+		}
+	});
+
+	gameRoom.useEvent(
+		"playerMoved",
+		({ playerId, x, y, mass, radius }: { playerId: string; x: number; y: number; mass: number; radius: number }) => {
+			setPlayers((prev) => {
+				const player = prev[playerId];
+				if (!player) return prev;
+				return {
+					...prev,
+					[playerId]: {
+						...player,
+						x,
+						y,
+						mass,
+						radius,
+						lastUpdate: Date.now(),
+					},
+				};
+			});
+		},
+	);
+
+	gameRoom.useEvent(
+		"playerEaten",
+		({ eaterId, eatenId, eaterMass }: { eaterId: string; eatenId: string; eaterMass: number }) => {
+			setPlayers((prev) => {
+				const next = { ...prev };
+				delete next[eatenId];
+				if (next[eaterId]) {
+					next[eaterId] = {
+						...next[eaterId],
+						mass: eaterMass,
+						radius: radiusFromMass(eaterMass),
+					};
+				}
+				return next;
+			});
+
+		if (eatenId === myPlayerId) {
+			setMyPlayerId(null);
+			setStatus("You were eaten. Rejoin to respawn.");
+		}
+		},
+	);
+
+	gameRoom.useEvent("gameState", (state: GameState) => {
+		setPlayers(state.players);
+		setMaxPlayers(state.maxPlayers);
+	});
+
+	useEffect(() => {
+		const handleKeyDown = (event: KeyboardEvent) => {
+			if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(event.key)) {
+				event.preventDefault();
+			}
+			keysRef.current.add(event.key);
+		};
+
+		const handleKeyUp = (event: KeyboardEvent) => {
+			keysRef.current.delete(event.key);
+		};
+
+		window.addEventListener("keydown", handleKeyDown);
+		window.addEventListener("keyup", handleKeyUp);
+
+		return () => {
+			window.removeEventListener("keydown", handleKeyDown);
+			window.removeEventListener("keyup", handleKeyUp);
+		};
+	}, []);
+
+	useEffect(() => {
+		if (!gameRoom.connection || !myPlayerId) return;
+
+		const interval = setInterval(() => {
+			const { dx, dy } = getDirectionFromKeys(keysRef.current);
+			if (dx === 0 && dy === 0) return;
+
+			gameRoom.connection
+				?.move(dx, dy)
+				.catch((err: unknown) => console.error("Move failed:", err));
+		}, INPUT_RATE_MS);
+
+		return () => clearInterval(interval);
+	}, [gameRoom.connection, myPlayerId]);
+
+	useEffect(() => {
+		const canvas = canvasRef.current;
+		if (!canvas) return;
+
+		const ctx = canvas.getContext("2d");
+		if (!ctx) return;
+
+		ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+		const scale = canvas.width / WORLD_SIZE;
+
+		ctx.fillStyle = "#f7f7f7";
+		ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+		ctx.strokeStyle = "#e3e3e3";
+		ctx.lineWidth = 1;
+		for (let i = 0; i <= WORLD_SIZE; i += 100) {
+			const pos = i * scale;
+			ctx.beginPath();
+			ctx.moveTo(pos, 0);
+			ctx.lineTo(pos, canvas.height);
+			ctx.stroke();
+
+			ctx.beginPath();
+			ctx.moveTo(0, pos);
+			ctx.lineTo(canvas.width, pos);
+			ctx.stroke();
+		}
+
+		Object.values(players).forEach((player) => {
+			const isMe = player.id === myPlayerId;
+			const x = player.x * scale;
+			const y = player.y * scale;
+			const radius = player.radius * scale;
+
+			ctx.beginPath();
+			ctx.fillStyle = player.color;
+			ctx.arc(x, y, radius, 0, Math.PI * 2);
+			ctx.fill();
+
+			ctx.strokeStyle = isMe ? "#111" : "#444";
+			ctx.lineWidth = isMe ? 3 : 1.5;
+			ctx.stroke();
+
+			ctx.fillStyle = "#1d1d1d";
+			ctx.font = isMe ? "bold 12px Arial" : "12px Arial";
+			ctx.textAlign = "center";
+			ctx.fillText(isMe ? "YOU" : player.name, x, y - radius - 6);
+		});
+	}, [players, myPlayerId]);
+
+	const leaderboard = useMemo(() => {
+		return Object.values(players)
+			.sort((a, b) => b.mass - a.mass)
+			.slice(0, 5);
+	}, [players]);
+
+	const joinGame = async () => {
+		if (!gameRoom.connection || !displayName.trim()) return;
+
+		setErrorMessage(null);
+		const result = await gameRoom.connection.join(displayName.trim());
+		if (!result) {
+			setStatus("Room full. Finding a new room...");
+			const nextRoom = await matchmaker.connection?.findGame();
+			if (nextRoom) {
+				setRoomId(nextRoom);
+				return;
+			}
+			setErrorMessage("No room available. Try again.");
+			return;
+		}
+
+		setMyPlayerId(result.playerId);
+		setPlayers((prev) => ({ ...prev, [result.playerId]: result.player }));
+		setStatus("Joined the game");
+	};
+
+	const playerCount = Object.keys(players).length;
+
+	return (
+		<div className="app-shell">
+			<header className="header">
+				<div>
+					<p className="eyebrow">Rivet multiplayer example</p>
+					<h1>Multiplayer Game</h1>
+					<p className="subhead">A real-time Agar.io style arena with Rivet Actors.</p>
+				</div>
+				<div className="status">
+					<span className={gameRoom.connection ? "connected" : "disconnected"}>
+						{gameRoom.connection ? "Connected" : "Disconnected"}
+					</span>
+					<span>{status}</span>
+				</div>
+			</header>
+
+			<section className="hud">
+				<div>
+					<p>Room</p>
+					<strong>{roomId ?? "-"}</strong>
+				</div>
+				<div>
+					<p>Players</p>
+					<strong>
+						{playerCount}/{maxPlayers}
+					</strong>
+				</div>
+				<div>
+					<p>Your status</p>
+					<strong>{myPlayerId ? "Alive" : "Spectating"}</strong>
+				</div>
+			</section>
+
+			<section className="play-area">
+				<div className="canvas-shell">
+					<canvas ref={canvasRef} width={720} height={720} />
+					{!myPlayerId && (
+						<div className="overlay">
+							<p>Enter a name to join the arena.</p>
+						</div>
+					)}
+				</div>
+				<aside className="sidebar">
+					<div className="panel">
+						<h3>Join the match</h3>
+						<label htmlFor="player-name">Name</label>
+						<input
+							id="player-name"
+							value={displayName}
+							onChange={(event) => setDisplayName(event.target.value)}
+							placeholder="Pilot name"
+						/>
+						<button
+							onClick={joinGame}
+							disabled={!gameRoom.connection || !displayName.trim()}
+						>
+							{myPlayerId ? "Respawn" : "Join"}
+						</button>
+						{errorMessage && <p className="error">{errorMessage}</p>}
+					</div>
+					<div className="panel">
+						<h3>Leaderboard</h3>
+						{leaderboard.length === 0 ? (
+							<p className="muted">Waiting for players...</p>
+						) : (
+							<ul>
+								{leaderboard.map((player) => (
+									<li key={player.id} className={player.id === myPlayerId ? "me" : ""}>
+										<span>{player.name}</span>
+										<span>{Math.round(player.mass)}</span>
+									</li>
+								))}
+							</ul>
+						)}
+					</div>
+					<div className="panel">
+						<h3>Controls</h3>
+						<p>Move with WASD or arrow keys.</p>
+						<p>Eat smaller circles to grow.</p>
+						<p>Rooms auto-scale when they reach 10 players.</p>
+					</div>
+				</aside>
+			</section>
+		</div>
+	);
+}
diff --git a/examples/multiplayer-game-vercel/frontend/main.tsx b/examples/multiplayer-game-vercel/frontend/main.tsx
new file mode 100644
index 0000000000..2efcb334fc
--- /dev/null
+++ b/examples/multiplayer-game-vercel/frontend/main.tsx
@@ -0,0 +1,12 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App.tsx";
+
+const root = document.getElementById("root");
+if (!root) throw new Error("Root element not found");
+
+createRoot(root).render(
+	<StrictMode>
+		<App />
+	</StrictMode>,
+);
diff --git a/examples/multiplayer-game-vercel/index.html b/examples/multiplayer-game-vercel/index.html
new file mode 100644
index 0000000000..e0dc9d057f
--- /dev/null
+++ b/examples/multiplayer-game-vercel/index.html
@@ -0,0 +1,261 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Multiplayer Game</title>
+	<style>
+		@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap");
+
+		:root {
+			--bg: #f3efe9;
+			--panel: #ffffff;
+			--ink: #1f1a17;
+			--muted: #6b625a;
+			--accent: #ff7a59;
+			--accent-dark: #d54d30;
+			--accent-soft: #fff2ec;
+			--border: #e2dbd4;
+			--shadow: rgba(20, 16, 12, 0.1);
+		}
+
+		* {
+			box-sizing: border-box;
+		}
+
+		body {
+			margin: 0;
+			font-family: "Space Grotesk", "Segoe UI", sans-serif;
+			background: radial-gradient(circle at top, #fff9f3 0%, var(--bg) 60%);
+			color: var(--ink);
+			min-height: 100vh;
+			padding: 32px 20px 48px;
+		}
+
+		.app-shell {
+			max-width: 1200px;
+			margin: 0 auto;
+			display: flex;
+			flex-direction: column;
+			gap: 24px;
+		}
+
+		.header {
+			display: flex;
+			justify-content: space-between;
+			align-items: flex-start;
+			gap: 24px;
+			flex-wrap: wrap;
+		}
+
+		.eyebrow {
+			text-transform: uppercase;
+			letter-spacing: 0.2em;
+			font-size: 12px;
+			color: var(--muted);
+			margin: 0 0 6px;
+		}
+
+		h1 {
+			font-size: 36px;
+			margin: 0 0 8px;
+		}
+
+		.subhead {
+			margin: 0;
+			color: var(--muted);
+			max-width: 420px;
+		}
+
+		.status {
+			display: flex;
+			flex-direction: column;
+			gap: 6px;
+			font-size: 14px;
+		}
+
+		.status span {
+			display: inline-flex;
+			align-items: center;
+			gap: 8px;
+			font-weight: 600;
+		}
+
+		.status .connected::before,
+		.status .disconnected::before {
+			content: "";
+			display: inline-block;
+			width: 10px;
+			height: 10px;
+			border-radius: 50%;
+			background: #d54d30;
+		}
+
+		.status .connected::before {
+			background: #2aa36b;
+		}
+
+		.hud {
+			display: grid;
+			grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+			gap: 16px;
+		}
+
+		.hud div {
+			background: var(--panel);
+			border-radius: 16px;
+			padding: 16px 18px;
+			border: 1px solid var(--border);
+			box-shadow: 0 12px 24px var(--shadow);
+		}
+
+		.hud p {
+			margin: 0 0 6px;
+			font-size: 13px;
+			color: var(--muted);
+		}
+
+		.hud strong {
+			font-size: 20px;
+		}
+
+		.play-area {
+			display: grid;
+			grid-template-columns: minmax(0, 1fr) 320px;
+			gap: 24px;
+		}
+
+		.canvas-shell {
+			position: relative;
+			background: var(--panel);
+			border-radius: 24px;
+			padding: 20px;
+			border: 1px solid var(--border);
+			box-shadow: 0 18px 30px var(--shadow);
+		}
+
+		canvas {
+			width: 100%;
+			height: auto;
+			display: block;
+			border-radius: 18px;
+			border: 2px solid #1f1a17;
+		}
+
+		.overlay {
+			position: absolute;
+			inset: 20px;
+			background: rgba(255, 255, 255, 0.82);
+			border-radius: 18px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			font-weight: 600;
+			color: var(--muted);
+			text-align: center;
+			padding: 12px;
+		}
+
+		.sidebar {
+			display: flex;
+			flex-direction: column;
+			gap: 16px;
+		}
+
+		.panel {
+			background: var(--panel);
+			border-radius: 18px;
+			padding: 18px;
+			border: 1px solid var(--border);
+			box-shadow: 0 12px 24px var(--shadow);
+			display: flex;
+			flex-direction: column;
+			gap: 10px;
+		}
+
+		.panel h3 {
+			margin: 0;
+			font-size: 18px;
+		}
+
+		label {
+			font-size: 13px;
+			color: var(--muted);
+		}
+
+		input {
+			padding: 10px 12px;
+			border-radius: 10px;
+			border: 1px solid var(--border);
+			font-family: inherit;
+			font-size: 14px;
+		}
+
+		button {
+			padding: 10px 14px;
+			border-radius: 12px;
+			border: none;
+			background: var(--accent);
+			color: #fff;
+			font-weight: 700;
+			cursor: pointer;
+			transition: transform 0.15s ease, background 0.15s ease;
+		}
+
+		button:hover {
+			background: var(--accent-dark);
+			transform: translateY(-1px);
+		}
+
+		button:disabled {
+			background: #d4c7bc;
+			cursor: not-allowed;
+			transform: none;
+		}
+
+		ul {
+			list-style: none;
+			padding: 0;
+			margin: 0;
+			display: flex;
+			flex-direction: column;
+			gap: 8px;
+		}
+
+		li {
+			display: flex;
+			justify-content: space-between;
+			padding: 8px 10px;
+			border-radius: 10px;
+			background: var(--accent-soft);
+			font-size: 14px;
+		}
+
+		li.me {
+			background: #1f1a17;
+			color: #fff;
+		}
+
+		.muted {
+			color: var(--muted);
+			font-size: 14px;
+		}
+
+		.error {
+			margin: 0;
+			color: #c1292e;
+			font-size: 13px;
+		}
+
+		@media (max-width: 980px) {
+			.play-area {
+				grid-template-columns: 1fr;
+			}
+		}
+	</style>
+</head>
+<body>
+	<div id="root"></div>
+	<script type="module" src="/frontend/main.tsx"></script>
+</body>
+</html>
diff --git a/examples/multiplayer-game-vercel/package.json b/examples/multiplayer-game-vercel/package.json
new file mode 100644
index 0000000000..a75777b3f1
--- /dev/null
+++ b/examples/multiplayer-game-vercel/package.json
@@ -0,0 +1,43 @@
+{
+	"name": "multiplayer-game-vercel",
+	"version": "2.0.21",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"dev": "vercel dev",
+		"build": "vite build",
+		"check-types": "tsc --noEmit"
+	},
+	"dependencies": {
+		"@hono/node-server": "^1.19.7",
+		"@hono/node-ws": "^1.3.0",
+		"@rivetkit/react": "^2.0.38",
+		"hono": "^4.11.3",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"rivetkit": "^2.0.38"
+	},
+	"devDependencies": {
+		"@types/node": "^22.13.9",
+		"@types/react": "^18.2.0",
+		"@types/react-dom": "^18.2.0",
+		"@vitejs/plugin-react": "^4.2.0",
+		"tsx": "^3.12.7",
+		"typescript": "^5.5.2",
+		"vite": "^5.0.0",
+		"vitest": "^3.1.1"
+	},
+	"template": {
+		"technologies": [
+			"react",
+			"typescript"
+		],
+		"tags": [
+			"real-time"
+		],
+		"priority": 500,
+		"frontendPort": 5173
+	},
+	"stableVersion": "0.8.0",
+	"license": "MIT"
+}
diff --git a/examples/multiplayer-game-vercel/src/actors.ts b/examples/multiplayer-game-vercel/src/actors.ts
new file mode 100644
index 0000000000..1eebecda63
--- /dev/null
+++ b/examples/multiplayer-game-vercel/src/actors.ts
@@ -0,0 +1,246 @@
+import { actor, setup } from "rivetkit";
+import type { GameState, JoinResult, Player, RoomStats } from "./types.ts";
+
+const MAX_PLAYERS = 10;
+const WORLD_SIZE = 1200;
+const START_MASS = 20;
+const SPEED_BASE = 7;
+
+const COLORS = [
+	"#ff6b6b",
+	"#6bc5ff",
+	"#ffd36b",
+	"#8affc1",
+	"#b28dff",
+	"#ff9ad5",
+	"#7bffed",
+	"#ffc48a",
+];
+
+const randomBetween = (min: number, max: number) =>
+	Math.floor(Math.random() * (max - min + 1)) + min;
+
+const radiusFromMass = (mass: number) => Math.max(8, Math.sqrt(mass) * 3.2);
+
+const createPlayer = (id: string, name: string): Player => {
+	const mass = START_MASS;
+	return {
+		id,
+		name,
+		x: randomBetween(80, WORLD_SIZE - 80),
+		y: randomBetween(80, WORLD_SIZE - 80),
+		color: COLORS[Math.floor(Math.random() * COLORS.length)],
+		mass,
+		radius: radiusFromMass(mass),
+		lastUpdate: Date.now(),
+	};
+};
+
+const buildGameState = (roomId: string, maxPlayers: number, players: Record<string, Player>): GameState => ({
+	roomId,
+	maxPlayers,
+	players,
+	updatedAt: Date.now(),
+});
+
+const matchmaker = actor({
+	// Coordinator actor that tracks active game rooms. https://rivet.dev/docs/actors/design-patterns
+	state: {
+		rooms: [] as RoomStats[],
+	},
+	actions: {
+		findGame: async (c) => {
+			const openRoom = c.state.rooms.find(
+				(room) => room.playerCount < room.maxPlayers,
+			);
+			if (openRoom) {
+				return openRoom.roomId;
+			}
+
+			const roomId = `room-${c.state.rooms.length + 1}`;
+			const client = c.client<typeof registry>();
+			await client.gameRoom.create([roomId], {
+				input: { roomId, maxPlayers: MAX_PLAYERS },
+			});
+
+			c.state.rooms.push({
+				roomId,
+				playerCount: 0,
+				createdAt: Date.now(),
+				lastUpdatedAt: Date.now(),
+				maxPlayers: MAX_PLAYERS,
+			});
+
+			return roomId;
+		},
+		listRooms: (c) => c.state.rooms.map((room) => room.roomId),
+		getRoomStats: (c) => c.state.rooms,
+		updateRoomStats: (c, roomId: string, playerCount: number) => {
+			const room = c.state.rooms.find((entry) => entry.roomId === roomId);
+			if (room) {
+				room.playerCount = playerCount;
+				room.lastUpdatedAt = Date.now();
+			} else {
+				c.state.rooms.push({
+					roomId,
+					playerCount,
+					createdAt: Date.now(),
+					lastUpdatedAt: Date.now(),
+					maxPlayers: MAX_PLAYERS,
+				});
+			}
+
+			return { roomId, playerCount };
+		},
+	},
+});
+
+const gameRoom = actor({
+	// Data actor that owns room state and broadcasts changes. https://rivet.dev/docs/actors/state
+	createState: (_c, input: { roomId: string; maxPlayers: number }) => ({
+		roomId: input.roomId,
+		maxPlayers: input.maxPlayers,
+		players: {} as Record<string, Player>,
+	}),
+	connState: {
+		playerId: null as string | null,
+	},
+	onDisconnect: (c, conn) => {
+		const playerId = conn.state.playerId;
+		if (!playerId) return;
+
+		if (c.state.players[playerId]) {
+			delete c.state.players[playerId];
+			c.broadcast("playerLeft", { playerId });
+			c.broadcast("gameState", buildGameState(c.state.roomId, c.state.maxPlayers, c.state.players));
+			void reportRoomCount(c);
+		}
+
+		conn.state.playerId = null;
+	},
+	actions: {
+		join: async (c, name: string): Promise<JoinResult | null> => {
+			const existingId = c.conn.state.playerId;
+			if (existingId && c.state.players[existingId]) {
+				return { playerId: existingId, player: c.state.players[existingId] };
+			}
+
+			if (Object.keys(c.state.players).length >= c.state.maxPlayers) {
+				return null;
+			}
+
+			const playerId = c.conn.id;
+			const player = createPlayer(playerId, name);
+
+			c.conn.state.playerId = playerId;
+			c.state.players[playerId] = player;
+
+			c.broadcast("playerJoined", { playerId, player });
+			c.broadcast("gameState", buildGameState(c.state.roomId, c.state.maxPlayers, c.state.players));
+			await reportRoomCount(c);
+
+			return { playerId, player };
+		},
+		move: async (c, dx: number, dy: number) => {
+			const playerId = c.conn.state.playerId;
+			if (!playerId) return null;
+
+			const player = c.state.players[playerId];
+			if (!player) return null;
+
+			const magnitude = Math.hypot(dx, dy);
+			if (magnitude > 0) {
+				const speed = SPEED_BASE * Math.max(0.4, START_MASS / player.mass);
+				const nx = dx / magnitude;
+				const ny = dy / magnitude;
+				player.x = clamp(player.x + nx * speed, player.radius, WORLD_SIZE - player.radius);
+				player.y = clamp(player.y + ny * speed, player.radius, WORLD_SIZE - player.radius);
+				player.lastUpdate = Date.now();
+			}
+
+			const eaten = resolveCollisions(c.state.players, c.conns);
+			for (const entry of eaten) {
+				c.broadcast("playerEaten", entry);
+			}
+
+			if (c.state.players[playerId]) {
+				c.broadcast("playerMoved", {
+					playerId,
+					x: player.x,
+					y: player.y,
+					mass: player.mass,
+					radius: player.radius,
+				});
+			}
+
+			if (eaten.length > 0) {
+				await reportRoomCount(c);
+			}
+
+			c.broadcast("gameState", buildGameState(c.state.roomId, c.state.maxPlayers, c.state.players));
+
+			return { x: player.x, y: player.y, mass: player.mass, radius: player.radius };
+		},
+		getState: (c) => buildGameState(c.state.roomId, c.state.maxPlayers, c.state.players),
+	},
+});
+
+const clamp = (value: number, min: number, max: number) => Math.max(min, Math.min(value, max));
+
+const resolveCollisions = (
+	players: Record<string, Player>,
+	connections: Map<string, { state: { playerId: string | null } }>,
+) => {
+	const playerIds = Object.keys(players);
+	const ordered = playerIds.sort(
+		(a, b) => players[b].mass - players[a].mass,
+	);
+	const removed = new Set<string>();
+	const eaten: Array<{ eaterId: string; eatenId: string; eaterMass: number }> = [];
+
+	for (let i = 0; i < ordered.length; i++) {
+		const eaterId = ordered[i];
+		if (removed.has(eaterId)) continue;
+		const eater = players[eaterId];
+		if (!eater) continue;
+
+		for (let j = ordered.length - 1; j > i; j--) {
+			const targetId = ordered[j];
+			if (removed.has(targetId)) continue;
+			const target = players[targetId];
+			if (!target) continue;
+
+			const distance = Math.hypot(eater.x - target.x, eater.y - target.y);
+			if (distance < eater.radius && eater.mass > target.mass) {
+				removed.add(targetId);
+				eater.mass += target.mass;
+				eater.radius = radiusFromMass(eater.mass);
+				eaten.push({ eaterId, eatenId: targetId, eaterMass: eater.mass });
+			}
+		}
+	}
+
+	if (removed.size > 0) {
+		for (const targetId of removed) {
+			delete players[targetId];
+			for (const conn of connections.values()) {
+				if (conn.state.playerId === targetId) {
+					conn.state.playerId = null;
+				}
+			}
+		}
+	}
+
+	return eaten;
+};
+
+const reportRoomCount = async (c: { state: { roomId: string; maxPlayers: number; players: Record<string, Player> }; client: <T>() => any }) => {
+	const client = c.client<typeof registry>();
+	await client.matchmaker
+		.getOrCreate(["main"])
+		.updateRoomStats(c.state.roomId, Object.keys(c.state.players).length);
+};
+
+export const registry = setup({
+	use: { matchmaker, gameRoom },
+});
diff --git a/examples/multiplayer-game-vercel/src/server.ts b/examples/multiplayer-game-vercel/src/server.ts
new file mode 100644
index 0000000000..95c8895f94
--- /dev/null
+++ b/examples/multiplayer-game-vercel/src/server.ts
@@ -0,0 +1,6 @@
+import { Hono } from "hono";
+import { registry } from "./actors.ts";
+
+const app = new Hono();
+app.all("/api/rivet/*", (c) => registry.handler(c.req.raw));
+export default app;
diff --git a/examples/multiplayer-game-vercel/src/types.ts b/examples/multiplayer-game-vercel/src/types.ts
new file mode 100644
index 0000000000..25ee0a4f4c
--- /dev/null
+++ b/examples/multiplayer-game-vercel/src/types.ts
@@ -0,0 +1,30 @@
+export type Player = {
+	id: string;
+	name: string;
+	x: number;
+	y: number;
+	color: string;
+	mass: number;
+	radius: number;
+	lastUpdate: number;
+};
+
+export type GameState = {
+	roomId: string;
+	maxPlayers: number;
+	players: Record<string, Player>;
+	updatedAt: number;
+};
+
+export type RoomStats = {
+	roomId: string;
+	playerCount: number;
+	createdAt: number;
+	lastUpdatedAt: number;
+	maxPlayers: number;
+};
+
+export type JoinResult = {
+	playerId: string;
+	player: Player;
+};
diff --git a/examples/multiplayer-game-vercel/tsconfig.json b/examples/multiplayer-game-vercel/tsconfig.json
new file mode 100644
index 0000000000..91635880bc
--- /dev/null
+++ b/examples/multiplayer-game-vercel/tsconfig.json
@@ -0,0 +1,27 @@
+{
+	"compilerOptions": {
+		"target": "esnext",
+		"lib": [
+			"esnext",
+			"dom",
+			"dom.iterable"
+		],
+		"jsx": "react-jsx",
+		"module": "esnext",
+		"moduleResolution": "bundler",
+		"types": [
+			"node",
+			"vite/client"
+		],
+		"noEmit": true,
+		"strict": true,
+		"skipLibCheck": true,
+		"allowImportingTsExtensions": true,
+		"rewriteRelativeImportExtensions": true
+	},
+	"include": [
+		"src/**/*",
+		"api/**/*",
+		"frontend/**/*"
+	]
+}
diff --git a/examples/multiplayer-game-vercel/turbo.json b/examples/multiplayer-game-vercel/turbo.json
new file mode 100644
index 0000000000..c3d3d3b9bb
--- /dev/null
+++ b/examples/multiplayer-game-vercel/turbo.json
@@ -0,0 +1,6 @@
+{
+	"$schema": "https://turbo.build/schema.json",
+	"extends": [
+		"//"
+	]
+}
diff --git a/examples/multiplayer-game-vercel/vercel.json b/examples/multiplayer-game-vercel/vercel.json
new file mode 100644
index 0000000000..64a8d9b467
--- /dev/null
+++ b/examples/multiplayer-game-vercel/vercel.json
@@ -0,0 +1,9 @@
+{
+	"framework": "vite",
+	"rewrites": [
+		{
+			"source": "/api/(.*)",
+			"destination": "/api"
+		}
+	]
+}
diff --git a/examples/multiplayer-game-vercel/vite.config.ts b/examples/multiplayer-game-vercel/vite.config.ts
new file mode 100644
index 0000000000..f9f0d5ec2f
--- /dev/null
+++ b/examples/multiplayer-game-vercel/vite.config.ts
@@ -0,0 +1,6 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+	plugins: [react()],
+});
diff --git a/examples/multiplayer-game/.gitignore b/examples/multiplayer-game/.gitignore
new file mode 100644
index 0000000000..dc6f607390
--- /dev/null
+++ b/examples/multiplayer-game/.gitignore
@@ -0,0 +1,2 @@
+.actorcore
+node_modules
diff --git a/examples/multiplayer-game/README.md b/examples/multiplayer-game/README.md
new file mode 100644
index 0000000000..19015d264b
--- /dev/null
+++ b/examples/multiplayer-game/README.md
@@ -0,0 +1,33 @@
+# Multiplayer Game
+
+A real-time Agar.io style arena showing a matchmaker coordinator and GameRoom data actors.
+
+## Getting Started
+
+```sh
+git clone https://github.com/rivet-dev/rivet.git
+cd rivet/examples/multiplayer-game
+pnpm install
+pnpm dev
+```
+
+## Features
+
+- **Coordinator pattern**: Matchmaker Rivet Actor that indexes and assigns GameRoom actors
+- **Real-time events**: Player joins, movement, and collisions broadcast to connected clients
+- **Stateful gameplay**: Persistent room state with player growth and collision resolution
+- **Typed React client**: `@rivetkit/react` hooks for actions and event subscriptions
+
+## Implementation
+
+- **Matchmaker and GameRoom actors** ([`src/actors.ts`](https://github.com/rivet-dev/rivet/tree/main/examples/multiplayer-game/src/actors.ts)): Coordinator actor for room discovery plus GameRoom state and physics
+- **Server routing** ([`src/server.ts`](https://github.com/rivet-dev/rivet/tree/main/examples/multiplayer-game/src/server.ts)): Hono server exposing the Rivet Actor handler
+- **Canvas frontend** ([`frontend/App.tsx`](https://github.com/rivet-dev/rivet/tree/main/examples/multiplayer-game/frontend/App.tsx)): Canvas rendering, input handling, and leaderboard UI
+
+## Resources
+
+Read more about [design patterns](/docs/actors/design-patterns), [actions](/docs/actors/actions), [events](/docs/actors/events), and [state](/docs/actors/state).
+
+## License
+
+MIT
diff --git a/examples/multiplayer-game/frontend/App.tsx b/examples/multiplayer-game/frontend/App.tsx
new file mode 100644
index 0000000000..9c5e269ed7
--- /dev/null
+++ b/examples/multiplayer-game/frontend/App.tsx
@@ -0,0 +1,349 @@
+import { createRivetKit } from "@rivetkit/react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import type { GameState, JoinResult, Player } from "../src/types.ts";
+import type { registry } from "../src/actors.ts";
+
+const { useActor } = createRivetKit<typeof registry>(`${window.location.origin}/api/rivet`);
+
+const WORLD_SIZE = 1200;
+const INPUT_RATE_MS = 50;
+
+const getDirectionFromKeys = (keys: Set<string>) => {
+	let dx = 0;
+	let dy = 0;
+
+	if (keys.has("w") || keys.has("ArrowUp")) dy -= 1;
+	if (keys.has("s") || keys.has("ArrowDown")) dy += 1;
+	if (keys.has("a") || keys.has("ArrowLeft")) dx -= 1;
+	if (keys.has("d") || keys.has("ArrowRight")) dx += 1;
+
+	return { dx, dy };
+};
+
+const radiusFromMass = (mass: number) => Math.max(8, Math.sqrt(mass) * 3.2);
+
+export function App() {
+	const [roomId, setRoomId] = useState<string | null>(null);
+	const [players, setPlayers] = useState<Record<string, Player>>({});
+	const [myPlayerId, setMyPlayerId] = useState<string | null>(null);
+	const [maxPlayers, setMaxPlayers] = useState(10);
+	const [displayName, setDisplayName] = useState("Pilot");
+	const [status, setStatus] = useState<string>("Finding a room...");
+	const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+	const canvasRef = useRef<HTMLCanvasElement | null>(null);
+	const keysRef = useRef<Set<string>>(new Set());
+
+	const matchmaker = useActor({
+		name: "matchmaker",
+		key: ["main"],
+	});
+
+	const gameRoom = useActor({
+		name: "gameRoom",
+		key: roomId ? [roomId] : ["pending"],
+		enabled: Boolean(roomId),
+	});
+
+	useEffect(() => {
+		if (!matchmaker.connection || roomId) return;
+
+		matchmaker.connection
+			.findGame()
+			.then((nextRoomId: string) => {
+				setRoomId(nextRoomId);
+				setStatus(`Connected to ${nextRoomId}`);
+			})
+			.catch((err: unknown) => {
+				console.error("Failed to find game:", err);
+				setErrorMessage("Matchmaking failed. Try again.");
+			});
+	}, [matchmaker.connection, roomId]);
+
+	useEffect(() => {
+		setPlayers({});
+		setMyPlayerId(null);
+		setErrorMessage(null);
+	}, [roomId]);
+
+	useEffect(() => {
+		if (!gameRoom.connection) return;
+
+		gameRoom.connection
+			.getState()
+			.then((state: GameState) => {
+				setPlayers(state.players);
+				setMaxPlayers(state.maxPlayers);
+				setStatus(`Room ${state.roomId}`);
+			})
+			.catch((err: unknown) => {
+				console.error("Failed to load room state:", err);
+			});
+	}, [gameRoom.connection]);
+
+	gameRoom.useEvent("playerJoined", ({ playerId, player }: JoinResult) => {
+		setPlayers((prev) => ({ ...prev, [playerId]: player }));
+	});
+
+	gameRoom.useEvent("playerLeft", ({ playerId }: { playerId: string }) => {
+		setPlayers((prev) => {
+			const next = { ...prev };
+			delete next[playerId];
+			return next;
+		});
+		if (playerId === myPlayerId) {
+			setMyPlayerId(null);
+		}
+	});
+
+	gameRoom.useEvent(
+		"playerMoved",
+		({ playerId, x, y, mass, radius }: { playerId: string; x: number; y: number; mass: number; radius: number }) => {
+			setPlayers((prev) => {
+				const player = prev[playerId];
+				if (!player) return prev;
+				return {
+					...prev,
+					[playerId]: {
+						...player,
+						x,
+						y,
+						mass,
+						radius,
+						lastUpdate: Date.now(),
+					},
+				};
+			});
+		},
+	);
+
+	gameRoom.useEvent(
+		"playerEaten",
+		({ eaterId, eatenId, eaterMass }: { eaterId: string; eatenId: string; eaterMass: number }) => {
+			setPlayers((prev) => {
+				const next = { ...prev };
+				delete next[eatenId];
+				if (next[eaterId]) {
+					next[eaterId] = {
+						...next[eaterId],
+						mass: eaterMass,
+						radius: radiusFromMass(eaterMass),
+					};
+				}
+				return next;
+			});
+
+		if (eatenId === myPlayerId) {
+			setMyPlayerId(null);
+			setStatus("You were eaten. Rejoin to respawn.");
+		}
+		},
+	);
+
+	gameRoom.useEvent("gameState", (state: GameState) => {
+		setPlayers(state.players);
+		setMaxPlayers(state.maxPlayers);
+	});
+
+	useEffect(() => {
+		const handleKeyDown = (event: KeyboardEvent) => {
+			if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(event.key)) {
+				event.preventDefault();
+			}
+			keysRef.current.add(event.key);
+		};
+
+		const handleKeyUp = (event: KeyboardEvent) => {
+			keysRef.current.delete(event.key);
+		};
+
+		window.addEventListener("keydown", handleKeyDown);
+		window.addEventListener("keyup", handleKeyUp);
+
+		return () => {
+			window.removeEventListener("keydown", handleKeyDown);
+			window.removeEventListener("keyup", handleKeyUp);
+		};
+	}, []);
+
+	useEffect(() => {
+		if (!gameRoom.connection || !myPlayerId) return;
+
+		const interval = setInterval(() => {
+			const { dx, dy } = getDirectionFromKeys(keysRef.current);
+			if (dx === 0 && dy === 0) return;
+
+			gameRoom.connection
+				?.move(dx, dy)
+				.catch((err: unknown) => console.error("Move failed:", err));
+		}, INPUT_RATE_MS);
+
+		return () => clearInterval(interval);
+	}, [gameRoom.connection, myPlayerId]);
+
+	useEffect(() => {
+		const canvas = canvasRef.current;
+		if (!canvas) return;
+
+		const ctx = canvas.getContext("2d");
+		if (!ctx) return;
+
+		ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+		const scale = canvas.width / WORLD_SIZE;
+
+		ctx.fillStyle = "#f7f7f7";
+		ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+		ctx.strokeStyle = "#e3e3e3";
+		ctx.lineWidth = 1;
+		for (let i = 0; i <= WORLD_SIZE; i += 100) {
+			const pos = i * scale;
+			ctx.beginPath();
+			ctx.moveTo(pos, 0);
+			ctx.lineTo(pos, canvas.height);
+			ctx.stroke();
+
+			ctx.beginPath();
+			ctx.moveTo(0, pos);
+			ctx.lineTo(canvas.width, pos);
+			ctx.stroke();
+		}
+
+		Object.values(players).forEach((player) => {
+			const isMe = player.id === myPlayerId;
+			const x = player.x * scale;
+			const y = player.y * scale;
+			const radius = player.radius * scale;
+
+			ctx.beginPath();
+			ctx.fillStyle = player.color;
+			ctx.arc(x, y, radius, 0, Math.PI * 2);
+			ctx.fill();
+
+			ctx.strokeStyle = isMe ? "#111" : "#444";
+			ctx.lineWidth = isMe ? 3 : 1.5;
+			ctx.stroke();
+
+			ctx.fillStyle = "#1d1d1d";
+			ctx.font = isMe ? "bold 12px Arial" : "12px Arial";
+			ctx.textAlign = "center";
+			ctx.fillText(isMe ? "YOU" : player.name, x, y - radius - 6);
+		});
+	}, [players, myPlayerId]);
+
+	const leaderboard = useMemo(() => {
+		return Object.values(players)
+			.sort((a, b) => b.mass - a.mass)
+			.slice(0, 5);
+	}, [players]);
+
+	const joinGame = async () => {
+		if (!gameRoom.connection || !displayName.trim()) return;
+
+		setErrorMessage(null);
+		const result = await gameRoom.connection.join(displayName.trim());
+		if (!result) {
+			setStatus("Room full. Finding a new room...");
+			const nextRoom = await matchmaker.connection?.findGame();
+			if (nextRoom) {
+				setRoomId(nextRoom);
+				return;
+			}
+			setErrorMessage("No room available. Try again.");
+			return;
+		}
+
+		setMyPlayerId(result.playerId);
+		setPlayers((prev) => ({ ...prev, [result.playerId]: result.player }));
+		setStatus("Joined the game");
+	};
+
+	const playerCount = Object.keys(players).length;
+
+	return (
+		<div className="app-shell">
+			<header className="header">
+				<div>
+					<p className="eyebrow">Rivet multiplayer example</p>
+					<h1>Multiplayer Game</h1>
+					<p className="subhead">A real-time Agar.io style arena with Rivet Actors.</p>
+				</div>
+				<div className="status">
+					<span className={gameRoom.connection ? "connected" : "disconnected"}>
+						{gameRoom.connection ? "Connected" : "Disconnected"}
+					</span>
+					<span>{status}</span>
+				</div>
+			</header>
+
+			<section className="hud">
+				<div>
+					<p>Room</p>
+					<strong>{roomId ?? "-"}</strong>
+				</div>
+				<div>
+					<p>Players</p>
+					<strong>
+						{playerCount}/{maxPlayers}
+					</strong>
+				</div>
+				<div>
+					<p>Your status</p>
+					<strong>{myPlayerId ? "Alive" : "Spectating"}</strong>
+				</div>
+			</section>
+
+			<section className="play-area">
+				<div className="canvas-shell">
+					<canvas ref={canvasRef} width={720} height={720} />
+					{!myPlayerId && (
+						<div className="overlay">
+							<p>Enter a name to join the arena.</p>
+						</div>
+					)}
+				</div>
+				<aside className="sidebar">
+					<div className="panel">
+						<h3>Join the match</h3>
+						<label htmlFor="player-name">Name</label>
+						<input
+							id="player-name"
+							value={displayName}
+							onChange={(event) => setDisplayName(event.target.value)}
+							placeholder="Pilot name"
+						/>
+						<button
+							onClick={joinGame}
+							disabled={!gameRoom.connection || !displayName.trim()}
+						>
+							{myPlayerId ? "Respawn" : "Join"}
+						</button>
+						{errorMessage && <p className="error">{errorMessage}</p>}
+					</div>
+					<div className="panel">
+						<h3>Leaderboard</h3>
+						{leaderboard.length === 0 ? (
+							<p className="muted">Waiting for players...</p>
+						) : (
+							<ul>
+								{leaderboard.map((player) => (
+									<li key={player.id} className={player.id === myPlayerId ? "me" : ""}>
+										<span>{player.name}</span>
+										<span>{Math.round(player.mass)}</span>
+									</li>
+								))}
+							</ul>
+						)}
+					</div>
+					<div className="panel">
+						<h3>Controls</h3>
+						<p>Move with WASD or arrow keys.</p>
+						<p>Eat smaller circles to grow.</p>
+						<p>Rooms auto-scale when they reach 10 players.</p>
+					</div>
+				</aside>
+			</section>
+		</div>
+	);
+}
diff --git a/examples/multiplayer-game/frontend/main.tsx b/examples/multiplayer-game/frontend/main.tsx
new file mode 100644
index 0000000000..2efcb334fc
--- /dev/null
+++ b/examples/multiplayer-game/frontend/main.tsx
@@ -0,0 +1,12 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App.tsx";
+
+const root = document.getElementById("root");
+if (!root) throw new Error("Root element not found");
+
+createRoot(root).render(
+	<StrictMode>
+		<App />
+	</StrictMode>,
+);
diff --git a/examples/multiplayer-game/index.html b/examples/multiplayer-game/index.html
new file mode 100644
index 0000000000..e0dc9d057f
--- /dev/null
+++ b/examples/multiplayer-game/index.html
@@ -0,0 +1,261 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Multiplayer Game</title>
+	<style>
+		@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap");
+
+		:root {
+			--bg: #f3efe9;
+			--panel: #ffffff;
+			--ink: #1f1a17;
+			--muted: #6b625a;
+			--accent: #ff7a59;
+			--accent-dark: #d54d30;
+			--accent-soft: #fff2ec;
+			--border: #e2dbd4;
+			--shadow: rgba(20, 16, 12, 0.1);
+		}
+
+		* {
+			box-sizing: border-box;
+		}
+
+		body {
+			margin: 0;
+			font-family: "Space Grotesk", "Segoe UI", sans-serif;
+			background: radial-gradient(circle at top, #fff9f3 0%, var(--bg) 60%);
+			color: var(--ink);
+			min-height: 100vh;
+			padding: 32px 20px 48px;
+		}
+
+		.app-shell {
+			max-width: 1200px;
+			margin: 0 auto;
+			display: flex;
+			flex-direction: column;
+			gap: 24px;
+		}
+
+		.header {
+			display: flex;
+			justify-content: space-between;
+			align-items: flex-start;
+			gap: 24px;
+			flex-wrap: wrap;
+		}
+
+		.eyebrow {
+			text-transform: uppercase;
+			letter-spacing: 0.2em;
+			font-size: 12px;
+			color: var(--muted);
+			margin: 0 0 6px;
+		}
+
+		h1 {
+			font-size: 36px;
+			margin: 0 0 8px;
+		}
+
+		.subhead {
+			margin: 0;
+			color: var(--muted);
+			max-width: 420px;
+		}
+
+		.status {
+			display: flex;
+			flex-direction: column;
+			gap: 6px;
+			font-size: 14px;
+		}
+
+		.status span {
+			display: inline-flex;
+			align-items: center;
+			gap: 8px;
+			font-weight: 600;
+		}
+
+		.status .connected::before,
+		.status .disconnected::before {
+			content: "";
+			display: inline-block;
+			width: 10px;
+			height: 10px;
+			border-radius: 50%;
+			background: #d54d30;
+		}
+
+		.status .connected::before {
+			background: #2aa36b;
+		}
+
+		.hud {
+			display: grid;
+			grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+			gap: 16px;
+		}
+
+		.hud div {
+			background: var(--panel);
+			border-radius: 16px;
+			padding: 16px 18px;
+			border: 1px solid var(--border);
+			box-shadow: 0 12px 24px var(--shadow);
+		}
+
+		.hud p {
+			margin: 0 0 6px;
+			font-size: 13px;
+			color: var(--muted);
+		}
+
+		.hud strong {
+			font-size: 20px;
+		}
+
+		.play-area {
+			display: grid;
+			grid-template-columns: minmax(0, 1fr) 320px;
+			gap: 24px;
+		}
+
+		.canvas-shell {
+			position: relative;
+			background: var(--panel);
+			border-radius: 24px;
+			padding: 20px;
+			border: 1px solid var(--border);
+			box-shadow: 0 18px 30px var(--shadow);
+		}
+
+		canvas {
+			width: 100%;
+			height: auto;
+			display: block;
+			border-radius: 18px;
+			border: 2px solid #1f1a17;
+		}
+
+		.overlay {
+			position: absolute;
+			inset: 20px;
+			background: rgba(255, 255, 255, 0.82);
+			border-radius: 18px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			font-weight: 600;
+			color: var(--muted);
+			text-align: center;
+			padding: 12px;
+		}
+
+		.sidebar {
+			display: flex;
+			flex-direction: column;
+			gap: 16px;
+		}
+
+		.panel {
+			background: var(--panel);
+			border-radius: 18px;
+			padding: 18px;
+			border: 1px solid var(--border);
+			box-shadow: 0 12px 24px var(--shadow);
+			display: flex;
+			flex-direction: column;
+			gap: 10px;
+		}
+
+		.panel h3 {
+			margin: 0;
+			font-size: 18px;
+		}
+
+		label {
+			font-size: 13px;
+			color: var(--muted);
+		}
+
+		input {
+			padding: 10px 12px;
+			border-radius: 10px;
+			border: 1px solid var(--border);
+			font-family: inherit;
+			font-size: 14px;
+		}
+
+		button {
+			padding: 10px 14px;
+			border-radius: 12px;
+			border: none;
+			background: var(--accent);
+			color: #fff;
+			font-weight: 700;
+			cursor: pointer;
+			transition: transform 0.15s ease, background 0.15s ease;
+		}
+
+		button:hover {
+			background: var(--accent-dark);
+			transform: translateY(-1px);
+		}
+
+		button:disabled {
+			background: #d4c7bc;
+			cursor: not-allowed;
+			transform: none;
+		}
+
+		ul {
+			list-style: none;
+			padding: 0;
+			margin: 0;
+			display: flex;
+			flex-direction: column;
+			gap: 8px;
+		}
+
+		li {
+			display: flex;
+			justify-content: space-between;
+			padding: 8px 10px;
+			border-radius: 10px;
+			background: var(--accent-soft);
+			font-size: 14px;
+		}
+
+		li.me {
+			background: #1f1a17;
+			color: #fff;
+		}
+
+		.muted {
+			color: var(--muted);
+			font-size: 14px;
+		}
+
+		.error {
+			margin: 0;
+			color: #c1292e;
+			font-size: 13px;
+		}
+
+		@media (max-width: 980px) {
+			.play-area {
+				grid-template-columns: 1fr;
+			}
+		}
+	</style>
+</head>
+<body>
+	<div id="root"></div>
+	<script type="module" src="/frontend/main.tsx"></script>
+</body>
+</html>
diff --git a/examples/multiplayer-game/package.json b/examples/multiplayer-game/package.json
new file mode 100644
index 0000000000..bc9822d701
--- /dev/null
+++ b/examples/multiplayer-game/package.json
@@ -0,0 +1,47 @@
+{
+	"name": "multiplayer-game",
+	"version": "2.0.21",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"dev": "vite",
+		"check-types": "tsc --noEmit",
+		"test": "vitest run",
+		"build": "vite build && vite build --mode server",
+		"start": "srvx --static=public/ dist/server.js"
+	},
+	"devDependencies": {
+		"@types/node": "^22.13.9",
+		"@types/react": "^18.2.0",
+		"@types/react-dom": "^18.2.0",
+		"@vitejs/plugin-react": "^4.2.0",
+		"tsx": "^3.12.7",
+		"typescript": "^5.5.2",
+		"vite": "^5.0.0",
+		"vite-plugin-srvx": "^1.0.0",
+		"vitest": "^3.1.1"
+	},
+	"dependencies": {
+		"@hono/node-server": "^1.19.7",
+		"@hono/node-ws": "^1.3.0",
+		"@rivetkit/react": "^2.0.38",
+		"hono": "^4.11.3",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"rivetkit": "^2.0.38",
+		"srvx": "^0.10.0"
+	},
+	"stableVersion": "0.8.0",
+	"template": {
+		"technologies": [
+			"react",
+			"typescript"
+		],
+		"tags": [
+			"real-time"
+		],
+		"priority": 500,
+		"frontendPort": 5173
+	},
+	"license": "MIT"
+}
diff --git a/examples/multiplayer-game/src/actors.ts b/examples/multiplayer-game/src/actors.ts
new file mode 100644
index 0000000000..1eebecda63
--- /dev/null
+++ b/examples/multiplayer-game/src/actors.ts
@@ -0,0 +1,246 @@
+import { actor, setup } from "rivetkit";
+import type { GameState, JoinResult, Player, RoomStats } from "./types.ts";
+
+const MAX_PLAYERS = 10;
+const WORLD_SIZE = 1200;
+const START_MASS = 20;
+const SPEED_BASE = 7;
+
+const COLORS = [
+	"#ff6b6b",
+	"#6bc5ff",
+	"#ffd36b",
+	"#8affc1",
+	"#b28dff",
+	"#ff9ad5",
+	"#7bffed",
+	"#ffc48a",
+];
+
+const randomBetween = (min: number, max: number) =>
+	Math.floor(Math.random() * (max - min + 1)) + min;
+
+const radiusFromMass = (mass: number) => Math.max(8, Math.sqrt(mass) * 3.2);
+
+const createPlayer = (id: string, name: string): Player => {
+	const mass = START_MASS;
+	return {
+		id,
+		name,
+		x: randomBetween(80, WORLD_SIZE - 80),
+		y: randomBetween(80, WORLD_SIZE - 80),
+		color: COLORS[Math.floor(Math.random() * COLORS.length)],
+		mass,
+		radius: radiusFromMass(mass),
+		lastUpdate: Date.now(),
+	};
+};
+
+const buildGameState = (roomId: string, maxPlayers: number, players: Record<string, Player>): GameState => ({
+	roomId,
+	maxPlayers,
+	players,
+	updatedAt: Date.now(),
+});
+
+const matchmaker = actor({
+	// Coordinator actor that tracks active game rooms. https://rivet.dev/docs/actors/design-patterns
+	state: {
+		rooms: [] as RoomStats[],
+	},
+	actions: {
+		findGame: async (c) => {
+			const openRoom = c.state.rooms.find(
+				(room) => room.playerCount < room.maxPlayers,
+			);
+			if (openRoom) {
+				return openRoom.roomId;
+			}
+
+			const roomId = `room-${c.state.rooms.length + 1}`;
+			const client = c.client<typeof registry>();
+			await client.gameRoom.create([roomId], {
+				input: { roomId, maxPlayers: MAX_PLAYERS },
+			});
+
+			c.state.rooms.push({
+				roomId,
+				playerCount: 0,
+				createdAt: Date.now(),
+				lastUpdatedAt: Date.now(),
+				maxPlayers: MAX_PLAYERS,
+			});
+
+			return roomId;
+		},
+		listRooms: (c) => c.state.rooms.map((room) => room.roomId),
+		getRoomStats: (c) => c.state.rooms,
+		updateRoomStats: (c, roomId: string, playerCount: number) => {
+			const room = c.state.rooms.find((entry) => entry.roomId === roomId);
+			if (room) {
+				room.playerCount = playerCount;
+				room.lastUpdatedAt = Date.now();
+			} else {
+				c.state.rooms.push({
+					roomId,
+					playerCount,
+					createdAt: Date.now(),
+					lastUpdatedAt: Date.now(),
+					maxPlayers: MAX_PLAYERS,
+				});
+			}
+
+			return { roomId, playerCount };
+		},
+	},
+});
+
+const gameRoom = actor({
+	// Data actor that owns room state and broadcasts changes. https://rivet.dev/docs/actors/state
+	createState: (_c, input: { roomId: string; maxPlayers: number }) => ({
+		roomId: input.roomId,
+		maxPlayers: input.maxPlayers,
+		players: {} as Record<string, Player>,
+	}),
+	connState: {
+		playerId: null as string | null,
+	},
+	onDisconnect: (c, conn) => {
+		const playerId = conn.state.playerId;
+		if (!playerId) return;
+
+		if (c.state.players[playerId]) {
+			delete c.state.players[playerId];
+			c.broadcast("playerLeft", { playerId });
+			c.broadcast("gameState", buildGameState(c.state.roomId, c.state.maxPlayers, c.state.players));
+			void reportRoomCount(c);
+		}
+
+		conn.state.playerId = null;
+	},
+	actions: {
+		join: async (c, name: string): Promise<JoinResult | null> => {
+			const existingId = c.conn.state.playerId;
+			if (existingId && c.state.players[existingId]) {
+				return { playerId: existingId, player: c.state.players[existingId] };
+			}
+
+			if (Object.keys(c.state.players).length >= c.state.maxPlayers) {
+				return null;
+			}
+
+			const playerId = c.conn.id;
+			const player = createPlayer(playerId, name);
+
+			c.conn.state.playerId = playerId;
+			c.state.players[playerId] = player;
+
+			c.broadcast("playerJoined", { playerId, player });
+			c.broadcast("gameState", buildGameState(c.state.roomId, c.state.maxPlayers, c.state.players));
+			await reportRoomCount(c);
+
+			return { playerId, player };
+		},
+		move: async (c, dx: number, dy: number) => {
+			const playerId = c.conn.state.playerId;
+			if (!playerId) return null;
+
+			const player = c.state.players[playerId];
+			if (!player) return null;
+
+			const magnitude = Math.hypot(dx, dy);
+			if (magnitude > 0) {
+				const speed = SPEED_BASE * Math.max(0.4, START_MASS / player.mass);
+				const nx = dx / magnitude;
+				const ny = dy / magnitude;
+				player.x = clamp(player.x + nx * speed, player.radius, WORLD_SIZE - player.radius);
+				player.y = clamp(player.y + ny * speed, player.radius, WORLD_SIZE - player.radius);
+				player.lastUpdate = Date.now();
+			}
+
+			const eaten = resolveCollisions(c.state.players, c.conns);
+			for (const entry of eaten) {
+				c.broadcast("playerEaten", entry);
+			}
+
+			if (c.state.players[playerId]) {
+				c.broadcast("playerMoved", {
+					playerId,
+					x: player.x,
+					y: player.y,
+					mass: player.mass,
+					radius: player.radius,
+				});
+			}
+
+			if (eaten.length > 0) {
+				await reportRoomCount(c);
+			}
+
+			c.broadcast("gameState", buildGameState(c.state.roomId, c.state.maxPlayers, c.state.players));
+
+			return { x: player.x, y: player.y, mass: player.mass, radius: player.radius };
+		},
+		getState: (c) => buildGameState(c.state.roomId, c.state.maxPlayers, c.state.players),
+	},
+});
+
+const clamp = (value: number, min: number, max: number) => Math.max(min, Math.min(value, max));
+
+const resolveCollisions = (
+	players: Record<string, Player>,
+	connections: Map<string, { state: { playerId: string | null } }>,
+) => {
+	const playerIds = Object.keys(players);
+	const ordered = playerIds.sort(
+		(a, b) => players[b].mass - players[a].mass,
+	);
+	const removed = new Set<string>();
+	const eaten: Array<{ eaterId: string; eatenId: string; eaterMass: number }> = [];
+
+	for (let i = 0; i < ordered.length; i++) {
+		const eaterId = ordered[i];
+		if (removed.has(eaterId)) continue;
+		const eater = players[eaterId];
+		if (!eater) continue;
+
+		for (let j = ordered.length - 1; j > i; j--) {
+			const targetId = ordered[j];
+			if (removed.has(targetId)) continue;
+			const target = players[targetId];
+			if (!target) continue;
+
+			const distance = Math.hypot(eater.x - target.x, eater.y - target.y);
+			if (distance < eater.radius && eater.mass > target.mass) {
+				removed.add(targetId);
+				eater.mass += target.mass;
+				eater.radius = radiusFromMass(eater.mass);
+				eaten.push({ eaterId, eatenId: targetId, eaterMass: eater.mass });
+			}
+		}
+	}
+
+	if (removed.size > 0) {
+		for (const targetId of removed) {
+			delete players[targetId];
+			for (const conn of connections.values()) {
+				if (conn.state.playerId === targetId) {
+					conn.state.playerId = null;
+				}
+			}
+		}
+	}
+
+	return eaten;
+};
+
+const reportRoomCount = async (c: { state: { roomId: string; maxPlayers: number; players: Record<string, Player> }; client: <T>() => any }) => {
+	const client = c.client<typeof registry>();
+	await client.matchmaker
+		.getOrCreate(["main"])
+		.updateRoomStats(c.state.roomId, Object.keys(c.state.players).length);
+};
+
+export const registry = setup({
+	use: { matchmaker, gameRoom },
+});
diff --git a/examples/multiplayer-game/src/server.ts b/examples/multiplayer-game/src/server.ts
new file mode 100644
index 0000000000..95c8895f94
--- /dev/null
+++ b/examples/multiplayer-game/src/server.ts
@@ -0,0 +1,6 @@
+import { Hono } from "hono";
+import { registry } from "./actors.ts";
+
+const app = new Hono();
+app.all("/api/rivet/*", (c) => registry.handler(c.req.raw));
+export default app;
diff --git a/examples/multiplayer-game/src/types.ts b/examples/multiplayer-game/src/types.ts
new file mode 100644
index 0000000000..25ee0a4f4c
--- /dev/null
+++ b/examples/multiplayer-game/src/types.ts
@@ -0,0 +1,30 @@
+export type Player = {
+	id: string;
+	name: string;
+	x: number;
+	y: number;
+	color: string;
+	mass: number;
+	radius: number;
+	lastUpdate: number;
+};
+
+export type GameState = {
+	roomId: string;
+	maxPlayers: number;
+	players: Record<string, Player>;
+	updatedAt: number;
+};
+
+export type RoomStats = {
+	roomId: string;
+	playerCount: number;
+	createdAt: number;
+	lastUpdatedAt: number;
+	maxPlayers: number;
+};
+
+export type JoinResult = {
+	playerId: string;
+	player: Player;
+};
diff --git a/examples/multiplayer-game/tsconfig.json b/examples/multiplayer-game/tsconfig.json
new file mode 100644
index 0000000000..6daa5df3fd
--- /dev/null
+++ b/examples/multiplayer-game/tsconfig.json
@@ -0,0 +1,16 @@
+{
+	"compilerOptions": {
+		"target": "esnext",
+		"lib": ["esnext", "dom"],
+		"jsx": "react-jsx",
+		"module": "esnext",
+		"moduleResolution": "bundler",
+		"types": ["node", "vite/client"],
+		"noEmit": true,
+		"strict": true,
+		"skipLibCheck": true,
+		"allowImportingTsExtensions": true,
+		"rewriteRelativeImportExtensions": true
+	},
+	"include": ["src/**/*", "frontend/**/*"]
+}
diff --git a/examples/multiplayer-game/turbo.json b/examples/multiplayer-game/turbo.json
new file mode 100644
index 0000000000..29d4cb2625
--- /dev/null
+++ b/examples/multiplayer-game/turbo.json
@@ -0,0 +1,4 @@
+{
+	"$schema": "https://turbo.build/schema.json",
+	"extends": ["//"]
+}
diff --git a/examples/multiplayer-game/vite.config.ts b/examples/multiplayer-game/vite.config.ts
new file mode 100644
index 0000000000..06dae893f5
--- /dev/null
+++ b/examples/multiplayer-game/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import srvx from "vite-plugin-srvx";
+
+export default defineConfig({
+	plugins: [react(), ...srvx({ entry: "src/server.ts" })],
+});
diff --git a/examples/per-tenant-database/.gitignore b/examples/per-tenant-database/.gitignore
new file mode 100644
index 0000000000..dc6f607390
--- /dev/null
+++ b/examples/per-tenant-database/.gitignore
@@ -0,0 +1,2 @@
+.actorcore
+node_modules
diff --git a/examples/per-tenant-database/README.md b/examples/per-tenant-database/README.md
new file mode 100644
index 0000000000..af4e37705a
--- /dev/null
+++ b/examples/per-tenant-database/README.md
@@ -0,0 +1,33 @@
+# Per-Tenant Database
+
+Example project demonstrating per-company database isolation with Rivet Actor state.
+
+## Getting Started
+
+```sh
+git clone https://github.com/rivet-dev/rivet.git
+cd rivet/examples/per-tenant-database
+pnpm install
+pnpm dev
+```
+
+## Features
+
+- **Per-tenant isolation**: Each company name maps to its own CompanyDatabase actor and state
+- **State as the database**: Employees and projects live in `c.state` for every actor instance
+- **Action-driven updates**: Add and list data through actions like `addEmployee` and `listProjects`
+- **Live switching**: Swap company names in the UI to see fully isolated datasets
+
+## Implementation
+
+The dashboard connects to one CompanyDatabase actor per company. The actor key is the company name, and its state becomes that company database.
+
+See the implementation in [`src/actors.ts`](https://github.com/rivet-dev/rivet/tree/main/examples/per-tenant-database/src/actors.ts) and [`frontend/App.tsx`](https://github.com/rivet-dev/rivet/tree/main/examples/per-tenant-database/frontend/App.tsx).
+
+## Resources
+
+Read more about [state](/docs/actors/state), [actions](/docs/actors/actions), and [events](/docs/actors/events).
+
+## License
+
+MIT
diff --git a/examples/per-tenant-database/frontend/App.tsx b/examples/per-tenant-database/frontend/App.tsx
new file mode 100644
index 0000000000..80dff31641
--- /dev/null
+++ b/examples/per-tenant-database/frontend/App.tsx
@@ -0,0 +1,375 @@
+import { createRivetKit } from "@rivetkit/react";
+import { type FormEvent, useEffect, useMemo, useState } from "react";
+import type {
+	CompanyStats,
+	Employee,
+	Project,
+	ProjectStatus,
+	registry,
+} from "../src/actors.ts";
+
+const { useActor } = createRivetKit<typeof registry>(
+	`${location.origin}/api/rivet`,
+);
+
+const COMPANY_PRESETS = [
+	"Aurora Analytics",
+	"Cedarline Logistics",
+	"Juniper Devices",
+	"Mariner Studio",
+];
+
+const STATUS_LABELS: Record<ProjectStatus, string> = {
+	planning: "Planning",
+	active: "Active",
+	done: "Done",
+};
+
+const formatDate = (timestamp: number) =>
+	new Date(timestamp).toLocaleString();
+
+const getInitials = (name: string) =>
+	name
+		.split(" ")
+		.filter(Boolean)
+		.map((part) => part[0])
+		.join("")
+		.slice(0, 2)
+		.toUpperCase();
+
+export function App() {
+	const [companyName, setCompanyName] = useState<string | null>(null);
+	const [companyInput, setCompanyInput] = useState(COMPANY_PRESETS[0]);
+	const [preset, setPreset] = useState(COMPANY_PRESETS[0]);
+
+	const handlePresetChange = (value: string) => {
+		setPreset(value);
+		setCompanyInput(value);
+	};
+
+	const handleSignIn = () => {
+		const trimmed = companyInput.trim();
+		if (trimmed.length === 0) return;
+		setCompanyName(trimmed);
+	};
+
+	return (
+		<div className="dashboard">
+			<section className="hero">
+				<div className="hero-badge">Per-tenant database demo</div>
+				<h1>Isolate every company with a single Rivet Actor</h1>
+				<p>
+					Each company gets its own CompanyDatabase actor keyed by name. The
+					actor state is the database, so switching companies swaps the
+					entire dataset.
+				</p>
+			</section>
+
+			{companyName ? (
+				<CompanyDashboard
+					companyName={companyName}
+					onSwitch={setCompanyName}
+				/>
+			) : (
+				<section className="card signin-card">
+					<h2 className="signin-title">Sign in to a company</h2>
+					<p className="signin-description">
+						Pick a company or enter a new one. The company name becomes the
+						actor key.
+					</p>
+					<div className="switcher">
+						<label htmlFor="company-preset">Quick pick</label>
+						<select
+							id="company-preset"
+							value={preset}
+							onChange={(event) => handlePresetChange(event.target.value)}
+						>
+							{COMPANY_PRESETS.map((company) => (
+								<option key={company} value={company}>
+									{company}
+								</option>
+							))}
+						</select>
+
+						<label htmlFor="company-input">Company name</label>
+						<input
+							id="company-input"
+							value={companyInput}
+							onChange={(event) => setCompanyInput(event.target.value)}
+							placeholder="Enter company name"
+						/>
+
+						<button type="button" onClick={handleSignIn}>
+							Continue to dashboard
+						</button>
+					</div>
+				</section>
+			)}
+		</div>
+	);
+}
+
+type CompanyDashboardProps = {
+	companyName: string;
+	onSwitch: (companyName: string | null) => void;
+};
+
+function CompanyDashboard({ companyName, onSwitch }: CompanyDashboardProps) {
+	const company = useActor({
+		name: "companyDatabase",
+		key: [companyName],
+	});
+
+	const [employees, setEmployees] = useState<Employee[]>([]);
+	const [projects, setProjects] = useState<Project[]>([]);
+	const [stats, setStats] = useState<CompanyStats | null>(null);
+	const [employeeName, setEmployeeName] = useState("");
+	const [employeeRole, setEmployeeRole] = useState("");
+	const [projectName, setProjectName] = useState("");
+	const [projectStatus, setProjectStatus] = useState<ProjectStatus>(
+		"planning",
+	);
+	const [switchName, setSwitchName] = useState(companyName);
+
+	useEffect(() => {
+		setSwitchName(companyName);
+	}, [companyName]);
+
+	const refreshStats = async () => {
+		if (!company.connection) return;
+		const latestStats = await company.connection.getStats();
+		setStats(latestStats);
+	};
+
+	useEffect(() => {
+		let canceled = false;
+		setEmployees([]);
+		setProjects([]);
+		setStats(null);
+
+		const loadData = async () => {
+			if (!company.connection) return;
+			const [employeeRows, projectRows, latestStats] = await Promise.all([
+				company.connection.listEmployees(),
+				company.connection.listProjects(),
+				company.connection.getStats(),
+			]);
+
+			if (canceled) return;
+			setEmployees(employeeRows);
+			setProjects(projectRows);
+			setStats(latestStats);
+		};
+
+		loadData();
+
+		return () => {
+			canceled = true;
+		};
+	}, [company.connection, companyName]);
+
+	company.useEvent("employeeAdded", (employee: Employee) => {
+		setEmployees((prev) => [...prev, employee]);
+		void refreshStats();
+	});
+
+	company.useEvent("projectAdded", (project: Project) => {
+		setProjects((prev) => [...prev, project]);
+		void refreshStats();
+	});
+
+	const companyInitials = useMemo(() => getInitials(companyName), [companyName]);
+
+	const handleAddEmployee = async (event: FormEvent) => {
+		event.preventDefault();
+		if (!company.connection) return;
+		await company.connection.addEmployee(employeeName, employeeRole);
+		setEmployeeName("");
+		setEmployeeRole("");
+	};
+
+	const handleAddProject = async (event: FormEvent) => {
+		event.preventDefault();
+		if (!company.connection) return;
+		await company.connection.addProject(projectName, projectStatus);
+		setProjectName("");
+	};
+
+	const handleSwitchCompany = () => {
+		const trimmed = switchName.trim();
+		if (!trimmed) return;
+		onSwitch(trimmed);
+	};
+
+	const connectionLabel = company.connection
+		? "Connected to CompanyDatabase actor"
+		: "Connecting to CompanyDatabase actor";
+
+	return (
+		<section className="card">
+			<div className="company-banner">
+				<div className="company-id">
+					<div className="company-badge">{companyInitials}</div>
+					<div>
+						<h2 className="company-name">{companyName}</h2>
+						<p className="company-subtitle">
+							Each company name maps to a unique actor with isolated state.
+						</p>
+					</div>
+				</div>
+				<div className="company-meta">
+					<span className="pill">Actor key: {companyName}</span>
+					<span className="pill">{connectionLabel}</span>
+				</div>
+			</div>
+
+			<div className="data-grid">
+				<div className="panel">
+					<div className="panel-header">
+						<h3>Company stats</h3>
+						<span className="count-chip">Live snapshot</span>
+					</div>
+					{stats ? (
+						<div className="stats-grid">
+							<div className="stat-card">
+								<div className="stat-value">{stats.employee_count}</div>
+								<div>Employees stored</div>
+							</div>
+							<div className="stat-card">
+								<div className="stat-value">{stats.project_count}</div>
+								<div>Projects tracked</div>
+							</div>
+							<div className="stat-card">
+								<div className="stat-value">
+									{formatDate(stats.created_at)}
+								</div>
+								<div>Database created</div>
+							</div>
+							<div className="stat-card">
+								<div className="stat-value">
+									{formatDate(stats.updated_at)}
+								</div>
+								<div>Last updated</div>
+							</div>
+						</div>
+					) : (
+						<div className="empty">Loading stats from actor state.</div>
+					)}
+				</div>
+
+				<div className="panel">
+					<div className="panel-header">
+						<h3>Switch company</h3>
+						<span className="count-chip">Same UI, new tenant</span>
+					</div>
+					<div className="form">
+						<input
+							value={switchName}
+							onChange={(event) => setSwitchName(event.target.value)}
+							placeholder="Enter a different company name"
+						/>
+						<button type="button" onClick={handleSwitchCompany}>
+							Switch company data
+						</button>
+					</div>
+					<div className="status-row">
+						<span>Tip:</span>
+						<span>
+							Add employees or projects, then switch to another company.
+						</span>
+					</div>
+				</div>
+			</div>
+
+			<div className="data-grid">
+				<div className="panel">
+					<div className="panel-header">
+						<h3>Employees</h3>
+						<span className="count-chip">{employees.length} total</span>
+					</div>
+					<form className="form" onSubmit={handleAddEmployee}>
+						<input
+							value={employeeName}
+							onChange={(event) => setEmployeeName(event.target.value)}
+							placeholder="Employee name"
+							required
+						/>
+						<input
+							value={employeeRole}
+							onChange={(event) => setEmployeeRole(event.target.value)}
+							placeholder="Role or team"
+							required
+						/>
+						<button type="submit" disabled={!company.connection}>
+							Add employee
+						</button>
+					</form>
+					<div className="list">
+						{employees.length === 0 ? (
+							<div className="empty">
+								No employees yet. Add a few to this company.
+							</div>
+						) : (
+							employees.map((employee) => (
+								<div key={employee.id} className="list-item">
+									<strong>{employee.name}</strong>
+									<span>{employee.role}</span>
+									<span>
+										Added {formatDate(employee.created_at)}
+									</span>
+								</div>
+							))
+						)}
+					</div>
+				</div>
+
+				<div className="panel">
+					<div className="panel-header">
+						<h3>Projects</h3>
+						<span className="count-chip">{projects.length} total</span>
+					</div>
+					<form className="form" onSubmit={handleAddProject}>
+						<input
+							value={projectName}
+							onChange={(event) => setProjectName(event.target.value)}
+							placeholder="Project name"
+							required
+						/>
+						<select
+							value={projectStatus}
+							onChange={(event) =>
+								setProjectStatus(event.target.value as ProjectStatus)
+							}
+						>
+							{Object.entries(STATUS_LABELS).map(([value, label]) => (
+								<option key={value} value={value}>
+									{label}
+								</option>
+							))}
+						</select>
+						<button type="submit" disabled={!company.connection}>
+							Add project
+						</button>
+					</form>
+					<div className="list">
+						{projects.length === 0 ? (
+							<div className="empty">
+								No projects yet. Add one to see it here.
+							</div>
+						) : (
+							projects.map((project) => (
+								<div key={project.id} className="list-item">
+									<strong>{project.name}</strong>
+									<span>Status: {STATUS_LABELS[project.status]}</span>
+									<span>
+										Added {formatDate(project.created_at)}
+									</span>
+								</div>
+							))
+						)}
+					</div>
+				</div>
+			</div>
+		</section>
+	);
+}
diff --git a/examples/per-tenant-database/frontend/main.tsx b/examples/per-tenant-database/frontend/main.tsx
new file mode 100644
index 0000000000..2efcb334fc
--- /dev/null
+++ b/examples/per-tenant-database/frontend/main.tsx
@@ -0,0 +1,12 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App.tsx";
+
+const root = document.getElementById("root");
+if (!root) throw new Error("Root element not found");
+
+createRoot(root).render(
+	<StrictMode>
+		<App />
+	</StrictMode>,
+);
diff --git a/examples/per-tenant-database/index.html b/examples/per-tenant-database/index.html
new file mode 100644
index 0000000000..a408d8e9fb
--- /dev/null
+++ b/examples/per-tenant-database/index.html
@@ -0,0 +1,340 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Per-Tenant Database Example</title>
+    <style>
+        @import url("https://fonts.googleapis.com/css2?family=Fraunces:wght@500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap");
+
+        :root {
+            color-scheme: light;
+            --ink: #132238;
+            --ink-soft: #2d3b4d;
+            --paper: #f6f1e9;
+            --paper-strong: #ffffff;
+            --accent: #ff7a59;
+            --accent-strong: #ef5a3c;
+            --accent-cool: #3aa7b0;
+            --accent-warm: #f5c86c;
+            --border: rgba(19, 34, 56, 0.12);
+            --shadow: 0 24px 80px rgba(19, 34, 56, 0.12);
+        }
+
+        * {
+            box-sizing: border-box;
+        }
+
+        body {
+            margin: 0;
+            font-family: "Space Grotesk", "Trebuchet MS", sans-serif;
+            color: var(--ink);
+            background: radial-gradient(circle at top left, rgba(245, 200, 108, 0.4), transparent 55%),
+                radial-gradient(circle at 20% 80%, rgba(58, 167, 176, 0.35), transparent 45%),
+                linear-gradient(140deg, #f8efe6 0%, #e9f1f4 55%, #fef6ed 100%);
+            min-height: 100vh;
+        }
+
+        body::before {
+            content: "";
+            position: fixed;
+            inset: 0;
+            background: radial-gradient(circle at 80% 20%, rgba(255, 122, 89, 0.12), transparent 40%);
+            pointer-events: none;
+            z-index: -1;
+        }
+
+        #root {
+            max-width: 1100px;
+            margin: 0 auto;
+            padding: 48px 24px 80px;
+        }
+
+        .hero {
+            display: grid;
+            gap: 16px;
+            margin-bottom: 32px;
+        }
+
+        .hero-badge {
+            width: fit-content;
+            padding: 6px 12px;
+            border-radius: 999px;
+            background: rgba(255, 122, 89, 0.15);
+            color: var(--accent-strong);
+            font-weight: 600;
+            letter-spacing: 0.02em;
+        }
+
+        .hero h1 {
+            font-family: "Fraunces", "Georgia", serif;
+            font-size: clamp(2.4rem, 2.8vw, 3.3rem);
+            margin: 0;
+        }
+
+        .hero p {
+            margin: 0;
+            color: var(--ink-soft);
+            font-size: 1.05rem;
+            max-width: 560px;
+        }
+
+        .card {
+            background: var(--paper-strong);
+            border-radius: 20px;
+            padding: 24px;
+            box-shadow: var(--shadow);
+            border: 1px solid var(--border);
+            animation: rise 0.8s ease both;
+        }
+
+        .signin-card {
+            display: grid;
+            gap: 16px;
+        }
+
+        .signin-title {
+            font-family: "Fraunces", "Georgia", serif;
+            font-size: 1.6rem;
+            margin: 0;
+        }
+
+        .signin-description {
+            margin: 0;
+            color: var(--ink-soft);
+        }
+
+        .switcher {
+            display: grid;
+            gap: 12px;
+        }
+
+        .switcher label {
+            font-weight: 600;
+            font-size: 0.95rem;
+        }
+
+        .switcher input,
+        .switcher select {
+            width: 100%;
+            padding: 10px 12px;
+            border-radius: 12px;
+            border: 1px solid var(--border);
+            font-size: 1rem;
+            background: #fff;
+        }
+
+        .switcher button {
+            padding: 12px 16px;
+            border-radius: 999px;
+            border: none;
+            background: var(--accent);
+            color: #fff;
+            font-weight: 600;
+            cursor: pointer;
+            transition: transform 0.2s ease, background 0.2s ease;
+        }
+
+        .switcher button:hover {
+            background: var(--accent-strong);
+            transform: translateY(-1px);
+        }
+
+        .dashboard {
+            display: grid;
+            gap: 24px;
+        }
+
+        .company-banner {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 16px;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        .company-id {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+
+        .company-badge {
+            width: 56px;
+            height: 56px;
+            border-radius: 18px;
+            background: linear-gradient(135deg, rgba(58, 167, 176, 0.25), rgba(255, 122, 89, 0.3));
+            display: grid;
+            place-items: center;
+            font-weight: 700;
+            font-size: 1.1rem;
+            color: var(--ink);
+        }
+
+        .company-name {
+            font-family: "Fraunces", "Georgia", serif;
+            font-size: 1.8rem;
+            margin: 0;
+        }
+
+        .company-subtitle {
+            margin: 4px 0 0;
+            color: var(--ink-soft);
+        }
+
+        .company-meta {
+            display: flex;
+            gap: 8px;
+            flex-wrap: wrap;
+        }
+
+        .pill {
+            padding: 6px 12px;
+            border-radius: 999px;
+            border: 1px solid var(--border);
+            font-size: 0.85rem;
+            background: rgba(19, 34, 56, 0.04);
+        }
+
+        .data-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+            gap: 20px;
+        }
+
+        .panel {
+            display: grid;
+            gap: 16px;
+        }
+
+        .panel-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        .panel-header h3 {
+            margin: 0;
+            font-size: 1.2rem;
+        }
+
+        .count-chip {
+            padding: 4px 10px;
+            border-radius: 999px;
+            background: rgba(58, 167, 176, 0.15);
+            color: #1c6c73;
+            font-weight: 600;
+            font-size: 0.85rem;
+        }
+
+        .list {
+            display: grid;
+            gap: 10px;
+        }
+
+        .list-item {
+            padding: 12px;
+            border-radius: 12px;
+            border: 1px solid var(--border);
+            background: rgba(255, 255, 255, 0.8);
+            display: grid;
+            gap: 4px;
+        }
+
+        .list-item strong {
+            font-weight: 600;
+        }
+
+        .empty {
+            padding: 16px;
+            border-radius: 12px;
+            background: rgba(19, 34, 56, 0.04);
+            color: var(--ink-soft);
+            font-style: italic;
+        }
+
+        .form {
+            display: grid;
+            gap: 10px;
+        }
+
+        .form input,
+        .form select {
+            width: 100%;
+            padding: 10px 12px;
+            border-radius: 12px;
+            border: 1px solid var(--border);
+            font-size: 0.95rem;
+            background: #fff;
+        }
+
+        .form button {
+            justify-self: start;
+            padding: 8px 16px;
+            border-radius: 999px;
+            border: none;
+            background: var(--accent-cool);
+            color: #fff;
+            font-weight: 600;
+            cursor: pointer;
+        }
+
+        .form button:hover {
+            background: #2f8f97;
+        }
+
+        .stats-grid {
+            display: grid;
+            gap: 12px;
+        }
+
+        .stat-card {
+            padding: 12px;
+            border-radius: 12px;
+            border: 1px solid var(--border);
+            background: rgba(245, 200, 108, 0.2);
+        }
+
+        .stat-value {
+            font-size: 1.5rem;
+            font-weight: 700;
+        }
+
+        .status-row {
+            display: flex;
+            gap: 8px;
+            flex-wrap: wrap;
+            color: var(--ink-soft);
+            font-size: 0.9rem;
+        }
+
+        @keyframes rise {
+            from {
+                opacity: 0;
+                transform: translateY(16px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        @media (max-width: 720px) {
+            .company-banner {
+                align-items: flex-start;
+            }
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+            * {
+                animation: none !important;
+                transition: none !important;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="root"></div>
+    <script type="module" src="/frontend/main.tsx"></script>
+</body>
+</html>
diff --git a/examples/per-tenant-database/package.json b/examples/per-tenant-database/package.json
new file mode 100644
index 0000000000..fdef7d7751
--- /dev/null
+++ b/examples/per-tenant-database/package.json
@@ -0,0 +1,48 @@
+{
+	"name": "per-tenant-database",
+	"version": "2.0.21",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"dev": "vite",
+		"check-types": "tsc --noEmit",
+		"test": "vitest run",
+		"build": "vite build && vite build --mode server",
+		"start": "srvx --static=public/ dist/server.js"
+	},
+	"devDependencies": {
+		"@types/node": "^22.13.9",
+		"@types/react": "^18.2.0",
+		"@types/react-dom": "^18.2.0",
+		"@vitejs/plugin-react": "^4.2.0",
+		"tsx": "^3.12.7",
+		"typescript": "^5.5.2",
+		"vite": "^5.0.0",
+		"vite-plugin-srvx": "^1.0.0",
+		"vitest": "^3.1.1"
+	},
+	"dependencies": {
+		"@hono/node-server": "^1.19.7",
+		"@hono/node-ws": "^1.3.0",
+		"@rivetkit/react": "^2.0.38",
+		"hono": "^4.11.3",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"rivetkit": "^2.0.38",
+		"srvx": "^0.10.0"
+	},
+	"stableVersion": "0.8.0",
+	"template": {
+		"technologies": [
+			"react",
+			"typescript"
+		],
+		"tags": [
+			"state",
+			"multi-tenant"
+		],
+		"priority": 200,
+		"frontendPort": 5173
+	},
+	"license": "MIT"
+}
diff --git a/examples/per-tenant-database/src/actors.ts b/examples/per-tenant-database/src/actors.ts
new file mode 100644
index 0000000000..6950c86025
--- /dev/null
+++ b/examples/per-tenant-database/src/actors.ts
@@ -0,0 +1,104 @@
+import { actor, setup } from "rivetkit";
+
+export type Employee = {
+	id: string;
+	name: string;
+	role: string;
+	created_at: number;
+};
+
+export type ProjectStatus = "planning" | "active" | "done";
+
+export type Project = {
+	id: string;
+	name: string;
+	status: ProjectStatus;
+	created_at: number;
+};
+
+export type CompanyStats = {
+	employee_count: number;
+	project_count: number;
+	created_at: number;
+	updated_at: number;
+};
+
+export type CompanyDatabaseState = {
+	company_name: string;
+	employees: Employee[];
+	projects: Project[];
+	created_at: number;
+	updated_at: number;
+};
+
+const createId = (prefix: string) =>
+	`${prefix}_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 8)}`;
+
+const getCompanyName = (key: unknown) => {
+	if (typeof key === "string" && key.trim()) {
+		return key.trim();
+	}
+
+	return "Unknown Company";
+};
+
+export const companyDatabase = actor({
+	// Persistent state is isolated per company. https://rivet.dev/docs/actors/state
+	createState: (c): CompanyDatabaseState => {
+		const now = Date.now();
+		return {
+			company_name: getCompanyName(c.key[0]),
+			employees: [],
+			projects: [],
+			created_at: now,
+			updated_at: now,
+		};
+	},
+
+	// Callable functions from clients. https://rivet.dev/docs/actors/actions
+	actions: {
+		addEmployee: (c, name: string, role: string) => {
+			const employee: Employee = {
+				id: createId("emp"),
+				name: name.trim() || "New Employee",
+				role: role.trim() || "Generalist",
+				created_at: Date.now(),
+			};
+
+			c.state.employees.push(employee);
+			c.state.updated_at = Date.now();
+			c.broadcast("employeeAdded", employee);
+			return employee;
+		},
+
+		listEmployees: (c) => c.state.employees,
+
+		addProject: (c, name: string, status: ProjectStatus) => {
+			const project: Project = {
+				id: createId("proj"),
+				name: name.trim() || "New Project",
+				status,
+				created_at: Date.now(),
+			};
+
+			c.state.projects.push(project);
+			c.state.updated_at = Date.now();
+			c.broadcast("projectAdded", project);
+			return project;
+		},
+
+		listProjects: (c) => c.state.projects,
+
+		getStats: (c): CompanyStats => ({
+			employee_count: c.state.employees.length,
+			project_count: c.state.projects.length,
+			created_at: c.state.created_at,
+			updated_at: c.state.updated_at,
+		}),
+	},
+});
+
+// Register actors for use. https://rivet.dev/docs/setup
+export const registry = setup({
+	use: { companyDatabase },
+});
diff --git a/examples/per-tenant-database/src/server.ts b/examples/per-tenant-database/src/server.ts
new file mode 100644
index 0000000000..95c8895f94
--- /dev/null
+++ b/examples/per-tenant-database/src/server.ts
@@ -0,0 +1,6 @@
+import { Hono } from "hono";
+import { registry } from "./actors.ts";
+
+const app = new Hono();
+app.all("/api/rivet/*", (c) => registry.handler(c.req.raw));
+export default app;
diff --git a/examples/per-tenant-database/tests/per-tenant-database.test.ts b/examples/per-tenant-database/tests/per-tenant-database.test.ts
new file mode 100644
index 0000000000..bb0fcba4f2
--- /dev/null
+++ b/examples/per-tenant-database/tests/per-tenant-database.test.ts
@@ -0,0 +1,45 @@
+import { setupTest } from "rivetkit/test";
+import { expect, test } from "vitest";
+import { registry } from "../src/actors.ts";
+
+test("Company data is isolated by actor key", async (ctx) => {
+	const { client } = await setupTest(ctx, registry);
+	const alpha = client.companyDatabase.getOrCreate(["Alpha Co"]);
+	const beta = client.companyDatabase.getOrCreate(["Beta Co"]);
+
+	await alpha.addEmployee("Ava", "Engineering");
+	await alpha.addProject("Phoenix", "active");
+	await beta.addEmployee("Ben", "Sales");
+
+	const alphaEmployees = await alpha.listEmployees();
+	const betaEmployees = await beta.listEmployees();
+	const alphaProjects = await alpha.listProjects();
+	const betaProjects = await beta.listProjects();
+
+	expect(alphaEmployees).toHaveLength(1);
+	expect(betaEmployees).toHaveLength(1);
+	expect(alphaEmployees[0].name).toBe("Ava");
+	expect(betaEmployees[0].name).toBe("Ben");
+	expect(alphaProjects).toHaveLength(1);
+	expect(betaProjects).toHaveLength(0);
+});
+
+test("Stats reflect per-company state", async (ctx) => {
+	const { client } = await setupTest(ctx, registry);
+	const company = client.companyDatabase.getOrCreate(["Stats Co"]);
+
+	const initialStats = await company.getStats();
+	expect(initialStats.employee_count).toBe(0);
+	expect(initialStats.project_count).toBe(0);
+
+	await company.addEmployee("Lina", "Finance");
+	await company.addEmployee("Omar", "Support");
+	await company.addProject("Drift", "planning");
+
+	const updatedStats = await company.getStats();
+	expect(updatedStats.employee_count).toBe(2);
+	expect(updatedStats.project_count).toBe(1);
+	expect(updatedStats.updated_at).toBeGreaterThanOrEqual(
+		updatedStats.created_at,
+	);
+});
diff --git a/examples/per-tenant-database/tsconfig.json b/examples/per-tenant-database/tsconfig.json
new file mode 100644
index 0000000000..0551447a84
--- /dev/null
+++ b/examples/per-tenant-database/tsconfig.json
@@ -0,0 +1,16 @@
+{
+	"compilerOptions": {
+		"target": "esnext",
+		"lib": ["esnext", "dom"],
+		"jsx": "react-jsx",
+		"module": "esnext",
+		"moduleResolution": "bundler",
+		"types": ["node", "vite/client"],
+		"noEmit": true,
+		"strict": true,
+		"skipLibCheck": true,
+		"allowImportingTsExtensions": true,
+		"rewriteRelativeImportExtensions": true
+	},
+	"include": ["src/**/*", "frontend/**/*", "tests/**/*"]
+}
diff --git a/examples/per-tenant-database/turbo.json b/examples/per-tenant-database/turbo.json
new file mode 100644
index 0000000000..29d4cb2625
--- /dev/null
+++ b/examples/per-tenant-database/turbo.json
@@ -0,0 +1,4 @@
+{
+	"$schema": "https://turbo.build/schema.json",
+	"extends": ["//"]
+}
diff --git a/examples/per-tenant-database/vite.config.ts b/examples/per-tenant-database/vite.config.ts
new file mode 100644
index 0000000000..06dae893f5
--- /dev/null
+++ b/examples/per-tenant-database/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import srvx from "vite-plugin-srvx";
+
+export default defineConfig({
+	plugins: [react(), ...srvx({ entry: "src/server.ts" })],
+});
diff --git a/examples/ai-agent/vitest.config.ts b/examples/per-tenant-database/vitest.config.ts
similarity index 81%
rename from examples/ai-agent/vitest.config.ts
rename to examples/per-tenant-database/vitest.config.ts
index 5a32eade8e..f913a97abd 100644
--- a/examples/ai-agent/vitest.config.ts
+++ b/examples/per-tenant-database/vitest.config.ts
@@ -1,8 +1,10 @@
 import { defineConfig } from "vitest/config";
 
 export default defineConfig({
+	server: {
+		port: 5173,
+	},
 	test: {
 		include: ["tests/**/*.test.ts"],
-		testTimeout: 30000,
 	},
 });
diff --git a/examples/sandbox-coding-agent-vercel/.gitignore b/examples/sandbox-coding-agent-vercel/.gitignore
new file mode 100644
index 0000000000..e28f3d79db
--- /dev/null
+++ b/examples/sandbox-coding-agent-vercel/.gitignore
@@ -0,0 +1,4 @@
+.actorcore
+node_modules
+dist
+.vercel
diff --git a/examples/sandbox-coding-agent-vercel/README.md b/examples/sandbox-coding-agent-vercel/README.md
new file mode 100644
index 0000000000..d27edf5f8b
--- /dev/null
+++ b/examples/sandbox-coding-agent-vercel/README.md
@@ -0,0 +1,46 @@
+> **Note:** This is the Vercel-optimized version of the [sandbox-coding-agent](../sandbox-coding-agent) example.
+> It uses the `hono/vercel` adapter and is configured for Vercel deployment.
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Frivet-gg%2Frivet%2Ftree%2Fmain%2Fexamples%2Fsandbox-coding-agent-vercel&project-name=sandbox-coding-agent-vercel)
+
+# Sandbox Coding Agent
+
+Example project demonstrating queue-driven Rivet Actor sessions that control a Sandbox Agent coding runtime.
+
+## Getting Started
+
+```sh
+git clone https://github.com/rivet-dev/rivet.git
+cd rivet/examples/sandbox-coding-agent
+pnpm install
+pnpm dev
+```
+
+## Features
+
+- Actor-per-agent pattern with a coordinating manager Rivet Actor
+- Queue-based intake using `c.queue.next` inside the run loop
+- Sandbox Agent SDK sessions per agent with streamed output
+- Persistent history stored in Rivet Actor state
+- Live status updates via events and polling
+
+## Prerequisites
+
+- Sandbox Agent endpoint configured with `SANDBOX_AGENT_URL` and `SANDBOX_AGENT_TOKEN` if you are not running locally
+- API key for the coding agent you choose inside the Sandbox Agent environment, such as `OPENAI_API_KEY` for `codex`
+
+## Implementation
+
+Each AI agent Rivet Actor creates or reuses a Sandbox Agent session, streams turn events, and broadcasts deltas back to the UI.
+
+- **Sandbox agent integration** ([`src/actors.ts`](https://github.com/rivet-dev/rivet/tree/main/examples/sandbox-coding-agent/src/actors.ts))
+- **Frontend orchestration** ([`frontend/App.tsx`](https://github.com/rivet-dev/rivet/tree/main/examples/sandbox-coding-agent/frontend/App.tsx))
+- **Server entry point** ([`src/server.ts`](https://github.com/rivet-dev/rivet/tree/main/examples/sandbox-coding-agent/src/server.ts))
+
+## Resources
+
+Read more about [queues](https://rivet.dev/docs/actors/queues), [run handlers](https://rivet.dev/docs/actors/run), [state](https://rivet.dev/docs/actors/state), and [events](https://rivet.dev/docs/actors/events).
+
+## License
+
+MIT
diff --git a/examples/sandbox-coding-agent-vercel/api/index.ts b/examples/sandbox-coding-agent-vercel/api/index.ts
new file mode 100644
index 0000000000..07a830391f
--- /dev/null
+++ b/examples/sandbox-coding-agent-vercel/api/index.ts
@@ -0,0 +1,3 @@
+import app from "../src/server.ts";
+
+export default app;
diff --git a/examples/sandbox-coding-agent-vercel/frontend/App.tsx b/examples/sandbox-coding-agent-vercel/frontend/App.tsx
new file mode 100644
index 0000000000..4b8bcf2107
--- /dev/null
+++ b/examples/sandbox-coding-agent-vercel/frontend/App.tsx
@@ -0,0 +1,244 @@
+import { createRivetKit } from "@rivetkit/react";
+import { useEffect, useState } from "react";
+import type {
+	AgentInfo,
+	AgentMessage,
+	AgentStatus,
+	registry,
+} from "../src/actors.ts";
+
+const { useActor } = createRivetKit<typeof registry>(
+	`${location.origin}/api/rivet`,
+);
+
+type ResponseEvent = {
+	messageId: string;
+	delta: string;
+	content: string;
+	done: boolean;
+	error?: string;
+};
+
+function formatTime(timestamp: number) {
+	return new Date(timestamp).toLocaleTimeString();
+}
+
+function AgentPanel({ info }: { info: AgentInfo }) {
+	const agent = useActor({
+		name: "agent",
+		key: [info.id],
+	});
+	const [messages, setMessages] = useState<AgentMessage[]>([]);
+	const [status, setStatus] = useState<AgentStatus | null>(null);
+	const [input, setInput] = useState("");
+
+	useEffect(() => {
+		if (!agent.connection) {
+			return;
+		}
+
+		agent.connection.getHistory().then(setMessages);
+		agent.connection.getStatus().then(setStatus);
+	}, [agent.connection]);
+
+	agent.useEvent("messageAdded", (message: AgentMessage) => {
+		setMessages((prev) => {
+			const existingIndex = prev.findIndex((item) => item.id === message.id);
+			if (existingIndex !== -1) {
+				const next = [...prev];
+				next[existingIndex] = message;
+				return next;
+			}
+			return [...prev, message].sort(
+				(a, b) => a.createdAt - b.createdAt,
+			);
+		});
+	});
+
+	agent.useEvent("response", (payload: ResponseEvent) => {
+		setMessages((prev) =>
+			prev.map((message) =>
+				message.id === payload.messageId
+					? { ...message, content: payload.content }
+					: message,
+			),
+		);
+	});
+
+	agent.useEvent("status", (nextStatus: AgentStatus) => {
+		setStatus(nextStatus);
+	});
+
+	const sendMessage = async () => {
+		if (!agent.connection) {
+			return;
+		}
+
+		const trimmed = input.trim();
+		if (!trimmed) {
+			return;
+		}
+
+		await agent.connection.queue.message.send({
+			text: trimmed,
+			sender: "Operator",
+		});
+		setInput("");
+	};
+
+	const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+		if (event.key === "Enter" && !event.shiftKey) {
+			event.preventDefault();
+			sendMessage();
+		}
+	};
+
+	return (
+		<section className="agent-card">
+			<header className="agent-card__header">
+				<div>
+					<p className="agent-card__title">{info.name}</p>
+					<p className="agent-card__meta">{info.id}</p>
+				</div>
+				<div className="agent-card__status">
+					<span
+						className={`status-dot status-dot--${status?.state ?? "idle"}`}
+					/>
+					<span className="status-label">
+						{status?.state ?? "idle"}
+					</span>
+				</div>
+			</header>
+
+			<div className="agent-card__timeline">
+				{messages.length === 0 ? (
+					<p className="agent-card__empty">
+						Send a message to wake this Rivet Actor.
+					</p>
+				) : (
+					messages.map((message) => (
+						<article
+							key={message.id}
+							className={`message message--${message.role}`}
+						>
+							<div className="message__header">
+								<span className="message__sender">{message.sender}</span>
+								<span className="message__time">
+									{formatTime(message.createdAt)}
+								</span>
+							</div>
+							<p className="message__content">{message.content}</p>
+						</article>
+					))
+				)}
+			</div>
+
+			<div className="agent-card__footer">
+				<textarea
+					value={input}
+					onChange={(event) => setInput(event.target.value)}
+					onKeyDown={handleKeyDown}
+					placeholder="Send a message to this agent"
+					rows={2}
+					disabled={!agent.connection}
+				/>
+				<button
+					onClick={sendMessage}
+					disabled={!agent.connection || !input.trim()}
+				>
+					Send
+				</button>
+			</div>
+
+			{status?.state === "error" && status.error ? (
+				<p className="agent-card__error">{status.error}</p>
+			) : null}
+		</section>
+	);
+}
+
+export function App() {
+	const manager = useActor({
+		name: "agentManager",
+		key: ["primary"],
+	});
+	const [agents, setAgents] = useState<AgentInfo[]>([]);
+	const [agentName, setAgentName] = useState("");
+
+	useEffect(() => {
+		if (!manager.connection) {
+			return;
+		}
+
+		manager.connection.listAgents().then(setAgents);
+	}, [manager.connection]);
+
+	const createAgent = async () => {
+		if (!manager.connection) {
+			return;
+		}
+
+		const info = await manager.connection.createAgent(agentName);
+		setAgents((prev) => [...prev, info]);
+		setAgentName("");
+	};
+
+	const handleCreateKeyDown = (
+		event: React.KeyboardEvent<HTMLInputElement>,
+	) => {
+		if (event.key === "Enter") {
+			createAgent();
+		}
+	};
+
+	return (
+		<div className="layout">
+			<header className="hero">
+				<div>
+					<p className="hero__eyebrow">Sandbox Coding Agent</p>
+					<h1>Run coding agents in isolated sandboxes.</h1>
+					<p className="hero__subtitle">
+						Each Rivet Actor streams sandboxed agent output as queue
+						messages arrive.
+					</p>
+				</div>
+				<div className="hero__controls">
+					<label className="control">
+						<span>Agent name</span>
+						<input
+							value={agentName}
+							onChange={(event) => setAgentName(event.target.value)}
+							onKeyDown={handleCreateKeyDown}
+							placeholder="Ops Analyst"
+							disabled={!manager.connection}
+						/>
+					</label>
+					<button
+						onClick={createAgent}
+						disabled={!manager.connection}
+					>
+						Create agent
+					</button>
+				</div>
+			</header>
+
+			<section className="agents">
+				<div className="agents__header">
+					<h2>Active agents</h2>
+					<span className="agents__count">{agents.length}</span>
+				</div>
+				<div className="agents__grid">
+					{agents.length === 0 ? (
+						<p className="agents__empty">
+							No agents yet. Create one to start coding.
+						</p>
+					) : (
+						agents.map((info) => (
+							<AgentPanel key={info.id} info={info} />
+						))
+					)}
+				</div>
+			</section>
+		</div>
+	);
+}
diff --git a/examples/sandbox-coding-agent-vercel/frontend/main.tsx b/examples/sandbox-coding-agent-vercel/frontend/main.tsx
new file mode 100644
index 0000000000..4a245d701b
--- /dev/null
+++ b/examples/sandbox-coding-agent-vercel/frontend/main.tsx
@@ -0,0 +1,14 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App.tsx";
+
+const root = document.getElementById("root");
+if (!root) {
+	throw new Error("Root element not found");
+}
+
+createRoot(root).render(
+	<StrictMode>
+		<App />
+	</StrictMode>,
+);
diff --git a/examples/sandbox-coding-agent-vercel/index.html b/examples/sandbox-coding-agent-vercel/index.html
new file mode 100644
index 0000000000..37ae9788ac
--- /dev/null
+++ b/examples/sandbox-coding-agent-vercel/index.html
@@ -0,0 +1,340 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<title>Sandbox Coding Agent Example</title>
+	<style>
+		@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=Space+Grotesk:wght@400;600;700&display=swap");
+
+		:root {
+			color-scheme: light;
+			--ink: #1a1d22;
+			--muted: #5b6069;
+			--surface: #ffffff;
+			--surface-muted: #f4f6f8;
+			--accent: #1f7a75;
+			--accent-strong: #0c5f5a;
+			--highlight: #f2b93b;
+			--border: rgba(26, 29, 34, 0.12);
+			--shadow: rgba(20, 24, 31, 0.08);
+		}
+
+		* {
+			box-sizing: border-box;
+		}
+
+		body {
+			margin: 0;
+			font-family: "Space Grotesk", "Helvetica Neue", sans-serif;
+			color: var(--ink);
+			background:
+				radial-gradient(circle at top left, #fef1d8 0%, transparent 45%),
+				radial-gradient(circle at 20% 30%, #e0f2f1 0%, transparent 50%),
+				linear-gradient(120deg, #f7f5ef 0%, #f2f7f7 100%);
+			min-height: 100vh;
+		}
+
+		h1,
+		h2,
+		h3,
+		p {
+			margin: 0;
+		}
+
+		button,
+		input,
+		textarea {
+			font-family: inherit;
+		}
+
+		.layout {
+			max-width: 1200px;
+			margin: 0 auto;
+			padding: 32px 20px 48px;
+			display: flex;
+			flex-direction: column;
+			gap: 28px;
+		}
+
+		.hero {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 24px;
+			align-items: center;
+			justify-content: space-between;
+			background: var(--surface);
+			border: 1px solid var(--border);
+			border-radius: 20px;
+			padding: 28px;
+			box-shadow: 0 18px 40px var(--shadow);
+		}
+
+		.hero__eyebrow {
+			text-transform: uppercase;
+			letter-spacing: 0.2em;
+			font-size: 0.75rem;
+			color: var(--accent-strong);
+			margin-bottom: 12px;
+		}
+
+		.hero h1 {
+			font-size: clamp(2.2rem, 3vw, 3.2rem);
+			line-height: 1.1;
+			max-width: 520px;
+		}
+
+		.hero__subtitle {
+			margin-top: 12px;
+			max-width: 520px;
+			color: var(--muted);
+		}
+
+		.hero__controls {
+			flex: 1;
+			min-width: 260px;
+			background: var(--surface-muted);
+			border-radius: 16px;
+			padding: 20px;
+			display: flex;
+			flex-direction: column;
+			gap: 12px;
+		}
+
+		.control {
+			display: flex;
+			flex-direction: column;
+			gap: 6px;
+			font-size: 0.9rem;
+			color: var(--muted);
+		}
+
+		.control input {
+			padding: 10px 12px;
+			border-radius: 10px;
+			border: 1px solid var(--border);
+			font-size: 1rem;
+		}
+
+		.hero__controls button {
+			padding: 12px 16px;
+			border: none;
+			border-radius: 12px;
+			background: var(--accent);
+			color: white;
+			font-weight: 600;
+			cursor: pointer;
+			transition: transform 0.2s ease, box-shadow 0.2s ease;
+		}
+
+		.hero__controls button:hover:not(:disabled) {
+			transform: translateY(-1px);
+			box-shadow: 0 10px 18px rgba(31, 122, 117, 0.25);
+		}
+
+		.hero__controls button:disabled {
+			opacity: 0.6;
+			cursor: not-allowed;
+		}
+
+		.agents {
+			display: flex;
+			flex-direction: column;
+			gap: 16px;
+		}
+
+		.agents__header {
+			display: flex;
+			align-items: center;
+			gap: 12px;
+		}
+
+		.agents__header h2 {
+			font-size: 1.4rem;
+		}
+
+		.agents__count {
+			background: var(--highlight);
+			color: #3f2a00;
+			padding: 4px 10px;
+			border-radius: 999px;
+			font-weight: 600;
+			font-size: 0.9rem;
+		}
+
+		.agents__grid {
+			display: grid;
+			grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+			gap: 18px;
+		}
+
+		.agents__empty {
+			padding: 20px;
+			background: var(--surface-muted);
+			border-radius: 14px;
+			color: var(--muted);
+			border: 1px dashed var(--border);
+		}
+
+		.agent-card {
+			background: var(--surface);
+			border: 1px solid var(--border);
+			border-radius: 16px;
+			padding: 18px;
+			display: flex;
+			flex-direction: column;
+			gap: 14px;
+			min-height: 420px;
+			box-shadow: 0 12px 24px var(--shadow);
+		}
+
+		.agent-card__header {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			gap: 12px;
+		}
+
+		.agent-card__title {
+			font-weight: 600;
+			font-size: 1.1rem;
+		}
+
+		.agent-card__meta {
+			font-size: 0.75rem;
+			color: var(--muted);
+			font-family: "IBM Plex Mono", monospace;
+		}
+
+		.agent-card__status {
+			display: inline-flex;
+			align-items: center;
+			gap: 6px;
+			font-size: 0.85rem;
+			color: var(--muted);
+		}
+
+		.status-dot {
+			width: 10px;
+			height: 10px;
+			border-radius: 50%;
+			background: #9aa1ab;
+		}
+
+		.status-dot--thinking {
+			background: var(--highlight);
+		}
+
+		.status-dot--error {
+			background: #d95040;
+		}
+
+		.status-dot--idle {
+			background: #5bc184;
+		}
+
+		.agent-card__timeline {
+			background: var(--surface-muted);
+			border-radius: 12px;
+			padding: 12px;
+			flex: 1;
+			overflow-y: auto;
+			display: flex;
+			flex-direction: column;
+			gap: 12px;
+		}
+
+		.agent-card__empty {
+			color: var(--muted);
+			font-size: 0.95rem;
+		}
+
+		.message {
+			background: var(--surface);
+			border-radius: 12px;
+			padding: 10px 12px;
+			box-shadow: inset 0 0 0 1px var(--border);
+			display: flex;
+			flex-direction: column;
+			gap: 6px;
+		}
+
+		.message--user {
+			border-left: 4px solid var(--accent);
+		}
+
+		.message--assistant {
+			border-left: 4px solid #f0a33b;
+		}
+
+		.message__header {
+			display: flex;
+			justify-content: space-between;
+			font-size: 0.75rem;
+			color: var(--muted);
+			text-transform: uppercase;
+			letter-spacing: 0.08em;
+		}
+
+		.message__content {
+			margin: 0;
+			white-space: pre-wrap;
+			line-height: 1.4;
+			font-size: 0.95rem;
+		}
+
+		.agent-card__footer {
+			display: flex;
+			gap: 10px;
+			align-items: center;
+		}
+
+		.agent-card__footer textarea {
+			flex: 1;
+			resize: vertical;
+			border-radius: 12px;
+			border: 1px solid var(--border);
+			padding: 10px 12px;
+			background: white;
+		}
+
+		.agent-card__footer button {
+			padding: 10px 16px;
+			border-radius: 12px;
+			border: none;
+			background: var(--accent-strong);
+			color: white;
+			font-weight: 600;
+			cursor: pointer;
+		}
+
+		.agent-card__footer button:disabled {
+			opacity: 0.6;
+			cursor: not-allowed;
+		}
+
+		.agent-card__error {
+			font-size: 0.85rem;
+			color: #b04032;
+			background: #fdebe8;
+			padding: 8px 10px;
+			border-radius: 10px;
+			border: 1px solid #f5c3bb;
+		}
+
+		@media (max-width: 720px) {
+			.hero {
+				padding: 20px;
+			}
+
+			.hero__controls {
+				width: 100%;
+			}
+		}
+	</style>
+</head>
+<body>
+	<div id="root"></div>
+	<script type="module" src="/frontend/main.tsx"></script>
+</body>
+</html>
diff --git a/examples/sandbox-coding-agent-vercel/package.json b/examples/sandbox-coding-agent-vercel/package.json
new file mode 100644
index 0000000000..6fc564a0c1
--- /dev/null
+++ b/examples/sandbox-coding-agent-vercel/package.json
@@ -0,0 +1,46 @@
+{
+	"name": "sandbox-coding-agent-vercel",
+	"version": "2.0.21",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"dev": "vercel dev",
+		"build": "vite build",
+		"check-types": "tsc --noEmit"
+	},
+	"dependencies": {
+		"@hono/node-server": "^1.19.7",
+		"@hono/node-ws": "^1.3.0",
+		"@rivetkit/react": "*",
+		"hono": "^4.11.3",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"rivetkit": "*",
+		"sandbox-agent": "^0.1.5"
+	},
+	"devDependencies": {
+		"@types/node": "^22.13.9",
+		"@types/react": "^18.2.0",
+		"@types/react-dom": "^18.2.0",
+		"@vitejs/plugin-react": "^4.2.0",
+		"tsx": "^3.12.7",
+		"typescript": "^5.5.2",
+		"vite": "^5.0.0",
+		"vitest": "^3.1.1"
+	},
+	"template": {
+		"technologies": [
+			"react",
+			"typescript"
+		],
+		"tags": [
+			"ai",
+			"sandbox",
+			"real-time"
+		],
+		"priority": 120,
+		"frontendPort": 5173
+	},
+	"stableVersion": "0.8.0",
+	"license": "MIT"
+}
diff --git a/examples/sandbox-coding-agent-vercel/src/actors.ts b/examples/sandbox-coding-agent-vercel/src/actors.ts
new file mode 100644
index 0000000000..208d90e1cf
--- /dev/null
+++ b/examples/sandbox-coding-agent-vercel/src/actors.ts
@@ -0,0 +1,314 @@
+import { SandboxAgent } from "sandbox-agent";
+import { actor, setup } from "rivetkit";
+
+export type AgentMessage = {
+	id: string;
+	role: "user" | "assistant";
+	sender: string;
+	content: string;
+	createdAt: number;
+};
+
+export type AgentStatus = {
+	state: "idle" | "thinking" | "error";
+	updatedAt: number;
+	error?: string;
+};
+
+export type AgentInfo = {
+	id: string;
+	name: string;
+	createdAt: number;
+};
+
+export type AgentQueueMessage = {
+	text: string;
+	sender?: string;
+};
+
+type ItemContentPart = {
+	type?: string;
+	text?: string;
+};
+
+type TranscriptItem = {
+	item_id?: string;
+	role?: string;
+	content?: ItemContentPart[];
+};
+
+type ItemEventData = {
+	item?: TranscriptItem;
+};
+
+type ItemDeltaEventData = {
+	item_id?: string;
+	delta?: string;
+};
+
+type StreamEvent = {
+	type: string;
+	data?: unknown;
+};
+
+const buildId = (prefix: string) =>
+	`${prefix}-${Date.now()}-${Math.random().toString(16).slice(2)}`;
+
+const createSandboxClient = async () => {
+	const baseUrl = process.env.SANDBOX_AGENT_URL;
+	if (!baseUrl && process.env.VERCEL) {
+		throw new Error("SANDBOX_AGENT_URL is required when running on Vercel.");
+	}
+	if (baseUrl) {
+		return SandboxAgent.connect({
+			baseUrl,
+			token: process.env.SANDBOX_AGENT_TOKEN,
+		});
+	}
+
+	return SandboxAgent.start();
+};
+
+let sandboxClientPromise: ReturnType<typeof createSandboxClient> | null = null;
+
+const getSandboxClient = () => {
+	if (!sandboxClientPromise) {
+		sandboxClientPromise = createSandboxClient();
+	}
+
+	return sandboxClientPromise;
+};
+
+const extractItem = (data: unknown): TranscriptItem | null => {
+	if (!data || typeof data !== "object") {
+		return null;
+	}
+
+	const item = (data as ItemEventData).item;
+	if (!item || typeof item !== "object") {
+		return null;
+	}
+
+	return item;
+};
+
+const extractDelta = (data: unknown): ItemDeltaEventData | null => {
+	if (!data || typeof data !== "object") {
+		return null;
+	}
+
+	const delta = data as ItemDeltaEventData;
+	return delta;
+};
+
+const extractText = (item: TranscriptItem): string => {
+	if (!Array.isArray(item.content)) {
+		return "";
+	}
+
+	return item.content
+		.map((part) => (part?.type === "text" ? part.text ?? "" : ""))
+		.join("");
+};
+
+export const agent = actor({
+	// Persistent state that survives restarts: https://rivet.dev/docs/actors/state
+	state: {
+		messages: [] as AgentMessage[],
+		status: {
+			state: "idle",
+			updatedAt: Date.now(),
+		} as AgentStatus,
+		sessionId: null as string | null,
+	},
+
+	// The run hook keeps the agent listening for queued messages.
+	run: async (c) => {
+		while (true) {
+			const queued = await c.queue.next("message");
+
+			const body = queued.body as AgentQueueMessage;
+			if (!body?.text || typeof body.text !== "string") {
+				continue;
+			}
+
+			const sender = body.sender?.trim() || "Operator";
+			const userMessage: AgentMessage = {
+				id: buildId("user"),
+				role: "user",
+				sender,
+				content: body.text.trim(),
+				createdAt: Date.now(),
+			};
+
+			c.state.messages.push(userMessage);
+			c.broadcast("messageAdded", userMessage);
+
+			const assistantMessage: AgentMessage = {
+				id: buildId("assistant"),
+				role: "assistant",
+				sender: "Sandbox Agent",
+				content: "",
+				createdAt: Date.now(),
+			};
+
+			c.state.messages.push(assistantMessage);
+			c.broadcast("messageAdded", assistantMessage);
+
+			c.state.status = {
+				state: "thinking",
+				updatedAt: Date.now(),
+			};
+			c.broadcast("status", c.state.status);
+
+			try {
+				const client = await getSandboxClient();
+				const sessionId = c.state.sessionId ?? buildId("session");
+				if (!c.state.sessionId) {
+					const agentId = process.env.SANDBOX_AGENT_AGENT ?? "codex";
+					const permissionMode =
+						process.env.SANDBOX_AGENT_PERMISSION_MODE ?? "bypass";
+
+					await client.createSession(sessionId, {
+						agent: agentId,
+						agentMode: "code",
+						permissionMode,
+					});
+
+					c.state.sessionId = sessionId;
+				}
+
+				const eventStream = await client.streamTurn(sessionId, {
+					message: userMessage.content,
+					sync: false,
+				});
+
+				let content = "";
+				let assistantItemId: string | null = null;
+
+				for await (const rawEvent of eventStream) {
+					const event = rawEvent as StreamEvent;
+					if (c.abortSignal.aborted) {
+						break;
+					}
+
+					if (event.type === "item.started") {
+						const item = extractItem(event.data);
+						if (item?.role === "assistant") {
+							assistantItemId = item.item_id ?? null;
+						}
+					}
+
+					if (event.type === "item.delta") {
+						const deltaData = extractDelta(event.data);
+						if (
+							deltaData?.delta &&
+							(!assistantItemId || deltaData.item_id === assistantItemId)
+						) {
+							content += deltaData.delta;
+							assistantMessage.content = content;
+							c.broadcast("response", {
+								messageId: assistantMessage.id,
+								delta: deltaData.delta,
+								content,
+								done: false,
+							});
+						}
+					}
+
+					if (event.type === "item.completed") {
+						const item = extractItem(event.data);
+						if (
+							item &&
+							item.role === "assistant" &&
+							(!assistantItemId || item.item_id === assistantItemId)
+						) {
+							const finalText = extractText(item);
+							if (finalText) {
+								content = finalText;
+							}
+						}
+					}
+				}
+
+				assistantMessage.content = content || assistantMessage.content;
+				c.broadcast("response", {
+					messageId: assistantMessage.id,
+					delta: "",
+					content: assistantMessage.content,
+					done: true,
+				});
+
+				c.state.status = {
+					state: "idle",
+					updatedAt: Date.now(),
+				};
+				c.broadcast("status", c.state.status);
+			} catch (error) {
+				const errorMessage =
+					error instanceof Error ? error.message : "Unknown error";
+
+				assistantMessage.content =
+					assistantMessage.content ||
+					"I hit a snag while responding. Please try again.";
+
+				c.state.status = {
+					state: "error",
+					updatedAt: Date.now(),
+					error: errorMessage,
+				};
+
+				c.broadcast("response", {
+					messageId: assistantMessage.id,
+					delta: "",
+					content: assistantMessage.content,
+					done: true,
+					error: errorMessage,
+				});
+				c.broadcast("status", c.state.status);
+			}
+		}
+	},
+
+	actions: {
+		// Callable functions from clients: https://rivet.dev/docs/actors/actions
+		getHistory: (c) => c.state.messages,
+		getStatus: (c) => c.state.status,
+	},
+});
+
+export const agentManager = actor({
+	// Persistent state that survives restarts: https://rivet.dev/docs/actors/state
+	state: {
+		agents: [] as AgentInfo[],
+	},
+
+	actions: {
+		// Callable functions from clients: https://rivet.dev/docs/actors/actions
+		createAgent: async (c, name?: string) => {
+			const trimmedName = name?.trim();
+			const agentName =
+				trimmedName || `Agent ${c.state.agents.length + 1}`;
+			const info: AgentInfo = {
+				id: buildId("agent"),
+				name: agentName,
+				createdAt: Date.now(),
+			};
+
+			c.state.agents.push(info);
+
+			const client = c.client<typeof registry>();
+			const handle = client.agent.getOrCreate([info.id]);
+			await handle.getStatus();
+
+			return info;
+		},
+
+		listAgents: (c) => c.state.agents,
+	},
+});
+
+// Register actors for use: https://rivet.dev/docs/setup
+export const registry = setup({
+	use: { agent, agentManager },
+});
diff --git a/examples/sandbox-coding-agent-vercel/src/server.ts b/examples/sandbox-coding-agent-vercel/src/server.ts
new file mode 100644
index 0000000000..8c065a6b5e
--- /dev/null
+++ b/examples/sandbox-coding-agent-vercel/src/server.ts
@@ -0,0 +1,8 @@
+import { Hono } from "hono";
+import { registry } from "./actors.ts";
+
+const app = new Hono();
+
+app.all("/api/rivet/*", (c) => registry.handler(c.req.raw));
+
+export default app;
diff --git a/examples/sandbox-coding-agent-vercel/tsconfig.json b/examples/sandbox-coding-agent-vercel/tsconfig.json
new file mode 100644
index 0000000000..91635880bc
--- /dev/null
+++ b/examples/sandbox-coding-agent-vercel/tsconfig.json
@@ -0,0 +1,27 @@
+{
+	"compilerOptions": {
+		"target": "esnext",
+		"lib": [
+			"esnext",
+			"dom",
+			"dom.iterable"
+		],
+		"jsx": "react-jsx",
+		"module": "esnext",
+		"moduleResolution": "bundler",
+		"types": [
+			"node",
+			"vite/client"
+		],
+		"noEmit": true,
+		"strict": true,
+		"skipLibCheck": true,
+		"allowImportingTsExtensions": true,
+		"rewriteRelativeImportExtensions": true
+	},
+	"include": [
+		"src/**/*",
+		"api/**/*",
+		"frontend/**/*"
+	]
+}
diff --git a/examples/sandbox-coding-agent-vercel/turbo.json b/examples/sandbox-coding-agent-vercel/turbo.json
new file mode 100644
index 0000000000..c3d3d3b9bb
--- /dev/null
+++ b/examples/sandbox-coding-agent-vercel/turbo.json
@@ -0,0 +1,6 @@
+{
+	"$schema": "https://turbo.build/schema.json",
+	"extends": [
+		"//"
+	]
+}
diff --git a/examples/sandbox-coding-agent-vercel/vercel.json b/examples/sandbox-coding-agent-vercel/vercel.json
new file mode 100644
index 0000000000..64a8d9b467
--- /dev/null
+++ b/examples/sandbox-coding-agent-vercel/vercel.json
@@ -0,0 +1,9 @@
+{
+	"framework": "vite",
+	"rewrites": [
+		{
+			"source": "/api/(.*)",
+			"destination": "/api"
+		}
+	]
+}
diff --git a/examples/sandbox-coding-agent-vercel/vite.config.ts b/examples/sandbox-coding-agent-vercel/vite.config.ts
new file mode 100644
index 0000000000..f9f0d5ec2f
--- /dev/null
+++ b/examples/sandbox-coding-agent-vercel/vite.config.ts
@@ -0,0 +1,6 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+	plugins: [react()],
+});
diff --git a/examples/sandbox-coding-agent/.gitignore b/examples/sandbox-coding-agent/.gitignore
new file mode 100644
index 0000000000..dc6f607390
--- /dev/null
+++ b/examples/sandbox-coding-agent/.gitignore
@@ -0,0 +1,2 @@
+.actorcore
+node_modules
diff --git a/examples/sandbox-coding-agent/README.md b/examples/sandbox-coding-agent/README.md
new file mode 100644
index 0000000000..a22c1676f9
--- /dev/null
+++ b/examples/sandbox-coding-agent/README.md
@@ -0,0 +1,41 @@
+# Sandbox Coding Agent
+
+Example project demonstrating queue-driven Rivet Actor sessions that control a Sandbox Agent coding runtime.
+
+## Getting Started
+
+```sh
+git clone https://github.com/rivet-dev/rivet.git
+cd rivet/examples/sandbox-coding-agent
+pnpm install
+pnpm dev
+```
+
+## Features
+
+- Actor-per-agent pattern with a coordinating manager Rivet Actor
+- Queue-based intake using `c.queue.next` inside the run loop
+- Sandbox Agent SDK sessions per agent with streamed output
+- Persistent history stored in Rivet Actor state
+- Live status updates via events and polling
+
+## Prerequisites
+
+- Sandbox Agent endpoint configured with `SANDBOX_AGENT_URL` and `SANDBOX_AGENT_TOKEN` if you are not running locally
+- API key for the coding agent you choose inside the Sandbox Agent environment, such as `OPENAI_API_KEY` for `codex`
+
+## Implementation
+
+Each AI agent Rivet Actor creates or reuses a Sandbox Agent session, streams turn events, and broadcasts deltas back to the UI.
+
+- **Sandbox agent integration** ([`src/actors.ts`](https://github.com/rivet-dev/rivet/tree/main/examples/sandbox-coding-agent/src/actors.ts))
+- **Frontend orchestration** ([`frontend/App.tsx`](https://github.com/rivet-dev/rivet/tree/main/examples/sandbox-coding-agent/frontend/App.tsx))
+- **Server entry point** ([`src/server.ts`](https://github.com/rivet-dev/rivet/tree/main/examples/sandbox-coding-agent/src/server.ts))
+
+## Resources
+
+Read more about [queues](https://rivet.dev/docs/actors/queues), [run handlers](https://rivet.dev/docs/actors/run), [state](https://rivet.dev/docs/actors/state), and [events](https://rivet.dev/docs/actors/events).
+
+## License
+
+MIT
diff --git a/examples/sandbox-coding-agent/frontend/App.tsx b/examples/sandbox-coding-agent/frontend/App.tsx
new file mode 100644
index 0000000000..4b8bcf2107
--- /dev/null
+++ b/examples/sandbox-coding-agent/frontend/App.tsx
@@ -0,0 +1,244 @@
+import { createRivetKit } from "@rivetkit/react";
+import { useEffect, useState } from "react";
+import type {
+	AgentInfo,
+	AgentMessage,
+	AgentStatus,
+	registry,
+} from "../src/actors.ts";
+
+const { useActor } = createRivetKit<typeof registry>(
+	`${location.origin}/api/rivet`,
+);
+
+type ResponseEvent = {
+	messageId: string;
+	delta: string;
+	content: string;
+	done: boolean;
+	error?: string;
+};
+
+function formatTime(timestamp: number) {
+	return new Date(timestamp).toLocaleTimeString();
+}
+
+function AgentPanel({ info }: { info: AgentInfo }) {
+	const agent = useActor({
+		name: "agent",
+		key: [info.id],
+	});
+	const [messages, setMessages] = useState<AgentMessage[]>([]);
+	const [status, setStatus] = useState<AgentStatus | null>(null);
+	const [input, setInput] = useState("");
+
+	useEffect(() => {
+		if (!agent.connection) {
+			return;
+		}
+
+		agent.connection.getHistory().then(setMessages);
+		agent.connection.getStatus().then(setStatus);
+	}, [agent.connection]);
+
+	agent.useEvent("messageAdded", (message: AgentMessage) => {
+		setMessages((prev) => {
+			const existingIndex = prev.findIndex((item) => item.id === message.id);
+			if (existingIndex !== -1) {
+				const next = [...prev];
+				next[existingIndex] = message;
+				return next;
+			}
+			return [...prev, message].sort(
+				(a, b) => a.createdAt - b.createdAt,
+			);
+		});
+	});
+
+	agent.useEvent("response", (payload: ResponseEvent) => {
+		setMessages((prev) =>
+			prev.map((message) =>
+				message.id === payload.messageId
+					? { ...message, content: payload.content }
+					: message,
+			),
+		);
+	});
+
+	agent.useEvent("status", (nextStatus: AgentStatus) => {
+		setStatus(nextStatus);
+	});
+
+	const sendMessage = async () => {
+		if (!agent.connection) {
+			return;
+		}
+
+		const trimmed = input.trim();
+		if (!trimmed) {
+			return;
+		}
+
+		await agent.connection.queue.message.send({
+			text: trimmed,
+			sender: "Operator",
+		});
+		setInput("");
+	};
+
+	const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+		if (event.key === "Enter" && !event.shiftKey) {
+			event.preventDefault();
+			sendMessage();
+		}
+	};
+
+	return (
+		<section className="agent-card">
+			<header className="agent-card__header">
+				<div>
+					<p className="agent-card__title">{info.name}</p>
+					<p className="agent-card__meta">{info.id}</p>
+				</div>
+				<div className="agent-card__status">
+					<span
+						className={`status-dot status-dot--${status?.state ?? "idle"}`}
+					/>
+					<span className="status-label">
+						{status?.state ?? "idle"}
+					</span>
+				</div>
+			</header>
+
+			<div className="agent-card__timeline">
+				{messages.length === 0 ? (
+					<p className="agent-card__empty">
+						Send a message to wake this Rivet Actor.
+					</p>
+				) : (
+					messages.map((message) => (
+						<article
+							key={message.id}
+							className={`message message--${message.role}`}
+						>
+							<div className="message__header">
+								<span className="message__sender">{message.sender}</span>
+								<span className="message__time">
+									{formatTime(message.createdAt)}
+								</span>
+							</div>
+							<p className="message__content">{message.content}</p>
+						</article>
+					))
+				)}
+			</div>
+
+			<div className="agent-card__footer">
+				<textarea
+					value={input}
+					onChange={(event) => setInput(event.target.value)}
+					onKeyDown={handleKeyDown}
+					placeholder="Send a message to this agent"
+					rows={2}
+					disabled={!agent.connection}
+				/>
+				<button
+					onClick={sendMessage}
+					disabled={!agent.connection || !input.trim()}
+				>
+					Send
+				</button>
+			</div>
+
+			{status?.state === "error" && status.error ? (
+				<p className="agent-card__error">{status.error}</p>
+			) : null}
+		</section>
+	);
+}
+
+export function App() {
+	const manager = useActor({
+		name: "agentManager",
+		key: ["primary"],
+	});
+	const [agents, setAgents] = useState<AgentInfo[]>([]);
+	const [agentName, setAgentName] = useState("");
+
+	useEffect(() => {
+		if (!manager.connection) {
+			return;
+		}
+
+		manager.connection.listAgents().then(setAgents);
+	}, [manager.connection]);
+
+	const createAgent = async () => {
+		if (!manager.connection) {
+			return;
+		}
+
+		const info = await manager.connection.createAgent(agentName);
+		setAgents((prev) => [...prev, info]);
+		setAgentName("");
+	};
+
+	const handleCreateKeyDown = (
+		event: React.KeyboardEvent<HTMLInputElement>,
+	) => {
+		if (event.key === "Enter") {
+			createAgent();
+		}
+	};
+
+	return (
+		<div className="layout">
+			<header className="hero">
+				<div>
+					<p className="hero__eyebrow">Sandbox Coding Agent</p>
+					<h1>Run coding agents in isolated sandboxes.</h1>
+					<p className="hero__subtitle">
+						Each Rivet Actor streams sandboxed agent output as queue
+						messages arrive.
+					</p>
+				</div>
+				<div className="hero__controls">
+					<label className="control">
+						<span>Agent name</span>
+						<input
+							value={agentName}
+							onChange={(event) => setAgentName(event.target.value)}
+							onKeyDown={handleCreateKeyDown}
+							placeholder="Ops Analyst"
+							disabled={!manager.connection}
+						/>
+					</label>
+					<button
+						onClick={createAgent}
+						disabled={!manager.connection}
+					>
+						Create agent
+					</button>
+				</div>
+			</header>
+
+			<section className="agents">
+				<div className="agents__header">
+					<h2>Active agents</h2>
+					<span className="agents__count">{agents.length}</span>
+				</div>
+				<div className="agents__grid">
+					{agents.length === 0 ? (
+						<p className="agents__empty">
+							No agents yet. Create one to start coding.
+						</p>
+					) : (
+						agents.map((info) => (
+							<AgentPanel key={info.id} info={info} />
+						))
+					)}
+				</div>
+			</section>
+		</div>
+	);
+}
diff --git a/examples/sandbox-coding-agent/frontend/main.tsx b/examples/sandbox-coding-agent/frontend/main.tsx
new file mode 100644
index 0000000000..4a245d701b
--- /dev/null
+++ b/examples/sandbox-coding-agent/frontend/main.tsx
@@ -0,0 +1,14 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App.tsx";
+
+const root = document.getElementById("root");
+if (!root) {
+	throw new Error("Root element not found");
+}
+
+createRoot(root).render(
+	<StrictMode>
+		<App />
+	</StrictMode>,
+);
diff --git a/examples/sandbox-coding-agent/index.html b/examples/sandbox-coding-agent/index.html
new file mode 100644
index 0000000000..37ae9788ac
--- /dev/null
+++ b/examples/sandbox-coding-agent/index.html
@@ -0,0 +1,340 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<title>Sandbox Coding Agent Example</title>
+	<style>
+		@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=Space+Grotesk:wght@400;600;700&display=swap");
+
+		:root {
+			color-scheme: light;
+			--ink: #1a1d22;
+			--muted: #5b6069;
+			--surface: #ffffff;
+			--surface-muted: #f4f6f8;
+			--accent: #1f7a75;
+			--accent-strong: #0c5f5a;
+			--highlight: #f2b93b;
+			--border: rgba(26, 29, 34, 0.12);
+			--shadow: rgba(20, 24, 31, 0.08);
+		}
+
+		* {
+			box-sizing: border-box;
+		}
+
+		body {
+			margin: 0;
+			font-family: "Space Grotesk", "Helvetica Neue", sans-serif;
+			color: var(--ink);
+			background:
+				radial-gradient(circle at top left, #fef1d8 0%, transparent 45%),
+				radial-gradient(circle at 20% 30%, #e0f2f1 0%, transparent 50%),
+				linear-gradient(120deg, #f7f5ef 0%, #f2f7f7 100%);
+			min-height: 100vh;
+		}
+
+		h1,
+		h2,
+		h3,
+		p {
+			margin: 0;
+		}
+
+		button,
+		input,
+		textarea {
+			font-family: inherit;
+		}
+
+		.layout {
+			max-width: 1200px;
+			margin: 0 auto;
+			padding: 32px 20px 48px;
+			display: flex;
+			flex-direction: column;
+			gap: 28px;
+		}
+
+		.hero {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 24px;
+			align-items: center;
+			justify-content: space-between;
+			background: var(--surface);
+			border: 1px solid var(--border);
+			border-radius: 20px;
+			padding: 28px;
+			box-shadow: 0 18px 40px var(--shadow);
+		}
+
+		.hero__eyebrow {
+			text-transform: uppercase;
+			letter-spacing: 0.2em;
+			font-size: 0.75rem;
+			color: var(--accent-strong);
+			margin-bottom: 12px;
+		}
+
+		.hero h1 {
+			font-size: clamp(2.2rem, 3vw, 3.2rem);
+			line-height: 1.1;
+			max-width: 520px;
+		}
+
+		.hero__subtitle {
+			margin-top: 12px;
+			max-width: 520px;
+			color: var(--muted);
+		}
+
+		.hero__controls {
+			flex: 1;
+			min-width: 260px;
+			background: var(--surface-muted);
+			border-radius: 16px;
+			padding: 20px;
+			display: flex;
+			flex-direction: column;
+			gap: 12px;
+		}
+
+		.control {
+			display: flex;
+			flex-direction: column;
+			gap: 6px;
+			font-size: 0.9rem;
+			color: var(--muted);
+		}
+
+		.control input {
+			padding: 10px 12px;
+			border-radius: 10px;
+			border: 1px solid var(--border);
+			font-size: 1rem;
+		}
+
+		.hero__controls button {
+			padding: 12px 16px;
+			border: none;
+			border-radius: 12px;
+			background: var(--accent);
+			color: white;
+			font-weight: 600;
+			cursor: pointer;
+			transition: transform 0.2s ease, box-shadow 0.2s ease;
+		}
+
+		.hero__controls button:hover:not(:disabled) {
+			transform: translateY(-1px);
+			box-shadow: 0 10px 18px rgba(31, 122, 117, 0.25);
+		}
+
+		.hero__controls button:disabled {
+			opacity: 0.6;
+			cursor: not-allowed;
+		}
+
+		.agents {
+			display: flex;
+			flex-direction: column;
+			gap: 16px;
+		}
+
+		.agents__header {
+			display: flex;
+			align-items: center;
+			gap: 12px;
+		}
+
+		.agents__header h2 {
+			font-size: 1.4rem;
+		}
+
+		.agents__count {
+			background: var(--highlight);
+			color: #3f2a00;
+			padding: 4px 10px;
+			border-radius: 999px;
+			font-weight: 600;
+			font-size: 0.9rem;
+		}
+
+		.agents__grid {
+			display: grid;
+			grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+			gap: 18px;
+		}
+
+		.agents__empty {
+			padding: 20px;
+			background: var(--surface-muted);
+			border-radius: 14px;
+			color: var(--muted);
+			border: 1px dashed var(--border);
+		}
+
+		.agent-card {
+			background: var(--surface);
+			border: 1px solid var(--border);
+			border-radius: 16px;
+			padding: 18px;
+			display: flex;
+			flex-direction: column;
+			gap: 14px;
+			min-height: 420px;
+			box-shadow: 0 12px 24px var(--shadow);
+		}
+
+		.agent-card__header {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			gap: 12px;
+		}
+
+		.agent-card__title {
+			font-weight: 600;
+			font-size: 1.1rem;
+		}
+
+		.agent-card__meta {
+			font-size: 0.75rem;
+			color: var(--muted);
+			font-family: "IBM Plex Mono", monospace;
+		}
+
+		.agent-card__status {
+			display: inline-flex;
+			align-items: center;
+			gap: 6px;
+			font-size: 0.85rem;
+			color: var(--muted);
+		}
+
+		.status-dot {
+			width: 10px;
+			height: 10px;
+			border-radius: 50%;
+			background: #9aa1ab;
+		}
+
+		.status-dot--thinking {
+			background: var(--highlight);
+		}
+
+		.status-dot--error {
+			background: #d95040;
+		}
+
+		.status-dot--idle {
+			background: #5bc184;
+		}
+
+		.agent-card__timeline {
+			background: var(--surface-muted);
+			border-radius: 12px;
+			padding: 12px;
+			flex: 1;
+			overflow-y: auto;
+			display: flex;
+			flex-direction: column;
+			gap: 12px;
+		}
+
+		.agent-card__empty {
+			color: var(--muted);
+			font-size: 0.95rem;
+		}
+
+		.message {
+			background: var(--surface);
+			border-radius: 12px;
+			padding: 10px 12px;
+			box-shadow: inset 0 0 0 1px var(--border);
+			display: flex;
+			flex-direction: column;
+			gap: 6px;
+		}
+
+		.message--user {
+			border-left: 4px solid var(--accent);
+		}
+
+		.message--assistant {
+			border-left: 4px solid #f0a33b;
+		}
+
+		.message__header {
+			display: flex;
+			justify-content: space-between;
+			font-size: 0.75rem;
+			color: var(--muted);
+			text-transform: uppercase;
+			letter-spacing: 0.08em;
+		}
+
+		.message__content {
+			margin: 0;
+			white-space: pre-wrap;
+			line-height: 1.4;
+			font-size: 0.95rem;
+		}
+
+		.agent-card__footer {
+			display: flex;
+			gap: 10px;
+			align-items: center;
+		}
+
+		.agent-card__footer textarea {
+			flex: 1;
+			resize: vertical;
+			border-radius: 12px;
+			border: 1px solid var(--border);
+			padding: 10px 12px;
+			background: white;
+		}
+
+		.agent-card__footer button {
+			padding: 10px 16px;
+			border-radius: 12px;
+			border: none;
+			background: var(--accent-strong);
+			color: white;
+			font-weight: 600;
+			cursor: pointer;
+		}
+
+		.agent-card__footer button:disabled {
+			opacity: 0.6;
+			cursor: not-allowed;
+		}
+
+		.agent-card__error {
+			font-size: 0.85rem;
+			color: #b04032;
+			background: #fdebe8;
+			padding: 8px 10px;
+			border-radius: 10px;
+			border: 1px solid #f5c3bb;
+		}
+
+		@media (max-width: 720px) {
+			.hero {
+				padding: 20px;
+			}
+
+			.hero__controls {
+				width: 100%;
+			}
+		}
+	</style>
+</head>
+<body>
+	<div id="root"></div>
+	<script type="module" src="/frontend/main.tsx"></script>
+</body>
+</html>
diff --git a/examples/sandbox-coding-agent/package.json b/examples/sandbox-coding-agent/package.json
new file mode 100644
index 0000000000..dbdc3113e4
--- /dev/null
+++ b/examples/sandbox-coding-agent/package.json
@@ -0,0 +1,50 @@
+{
+	"name": "sandbox-coding-agent",
+	"version": "2.0.21",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"dev": "vite",
+		"check-types": "tsc --noEmit",
+		"test": "vitest run",
+		"build": "vite build && vite build --mode server",
+		"start": "srvx --static=public/ dist/server.js"
+	},
+	"devDependencies": {
+		"@types/node": "^22.13.9",
+		"@types/react": "^18.2.0",
+		"@types/react-dom": "^18.2.0",
+		"@vitejs/plugin-react": "^4.2.0",
+		"tsx": "^3.12.7",
+		"typescript": "^5.5.2",
+		"vite": "^5.0.0",
+		"vite-plugin-srvx": "^1.0.0",
+		"vitest": "^3.1.1"
+	},
+	"dependencies": {
+		"@hono/node-server": "^1.19.7",
+		"@hono/node-ws": "^1.3.0",
+		"@rivetkit/react": "*",
+		"hono": "^4.11.3",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"rivetkit": "*",
+		"sandbox-agent": "^0.1.5",
+		"srvx": "^0.10.0"
+	},
+	"stableVersion": "0.8.0",
+	"template": {
+		"technologies": [
+			"react",
+			"typescript"
+		],
+		"tags": [
+			"ai",
+			"sandbox",
+			"real-time"
+		],
+		"priority": 120,
+		"frontendPort": 5173
+	},
+	"license": "MIT"
+}
diff --git a/examples/sandbox-coding-agent/src/actors.ts b/examples/sandbox-coding-agent/src/actors.ts
new file mode 100644
index 0000000000..208d90e1cf
--- /dev/null
+++ b/examples/sandbox-coding-agent/src/actors.ts
@@ -0,0 +1,314 @@
+import { SandboxAgent } from "sandbox-agent";
+import { actor, setup } from "rivetkit";
+
+export type AgentMessage = {
+	id: string;
+	role: "user" | "assistant";
+	sender: string;
+	content: string;
+	createdAt: number;
+};
+
+export type AgentStatus = {
+	state: "idle" | "thinking" | "error";
+	updatedAt: number;
+	error?: string;
+};
+
+export type AgentInfo = {
+	id: string;
+	name: string;
+	createdAt: number;
+};
+
+export type AgentQueueMessage = {
+	text: string;
+	sender?: string;
+};
+
+type ItemContentPart = {
+	type?: string;
+	text?: string;
+};
+
+type TranscriptItem = {
+	item_id?: string;
+	role?: string;
+	content?: ItemContentPart[];
+};
+
+type ItemEventData = {
+	item?: TranscriptItem;
+};
+
+type ItemDeltaEventData = {
+	item_id?: string;
+	delta?: string;
+};
+
+type StreamEvent = {
+	type: string;
+	data?: unknown;
+};
+
+const buildId = (prefix: string) =>
+	`${prefix}-${Date.now()}-${Math.random().toString(16).slice(2)}`;
+
+const createSandboxClient = async () => {
+	const baseUrl = process.env.SANDBOX_AGENT_URL;
+	if (!baseUrl && process.env.VERCEL) {
+		throw new Error("SANDBOX_AGENT_URL is required when running on Vercel.");
+	}
+	if (baseUrl) {
+		return SandboxAgent.connect({
+			baseUrl,
+			token: process.env.SANDBOX_AGENT_TOKEN,
+		});
+	}
+
+	return SandboxAgent.start();
+};
+
+let sandboxClientPromise: ReturnType<typeof createSandboxClient> | null = null;
+
+const getSandboxClient = () => {
+	if (!sandboxClientPromise) {
+		sandboxClientPromise = createSandboxClient();
+	}
+
+	return sandboxClientPromise;
+};
+
+const extractItem = (data: unknown): TranscriptItem | null => {
+	if (!data || typeof data !== "object") {
+		return null;
+	}
+
+	const item = (data as ItemEventData).item;
+	if (!item || typeof item !== "object") {
+		return null;
+	}
+
+	return item;
+};
+
+const extractDelta = (data: unknown): ItemDeltaEventData | null => {
+	if (!data || typeof data !== "object") {
+		return null;
+	}
+
+	const delta = data as ItemDeltaEventData;
+	return delta;
+};
+
+const extractText = (item: TranscriptItem): string => {
+	if (!Array.isArray(item.content)) {
+		return "";
+	}
+
+	return item.content
+		.map((part) => (part?.type === "text" ? part.text ?? "" : ""))
+		.join("");
+};
+
+export const agent = actor({
+	// Persistent state that survives restarts: https://rivet.dev/docs/actors/state
+	state: {
+		messages: [] as AgentMessage[],
+		status: {
+			state: "idle",
+			updatedAt: Date.now(),
+		} as AgentStatus,
+		sessionId: null as string | null,
+	},
+
+	// The run hook keeps the agent listening for queued messages.
+	run: async (c) => {
+		while (true) {
+			const queued = await c.queue.next("message");
+
+			const body = queued.body as AgentQueueMessage;
+			if (!body?.text || typeof body.text !== "string") {
+				continue;
+			}
+
+			const sender = body.sender?.trim() || "Operator";
+			const userMessage: AgentMessage = {
+				id: buildId("user"),
+				role: "user",
+				sender,
+				content: body.text.trim(),
+				createdAt: Date.now(),
+			};
+
+			c.state.messages.push(userMessage);
+			c.broadcast("messageAdded", userMessage);
+
+			const assistantMessage: AgentMessage = {
+				id: buildId("assistant"),
+				role: "assistant",
+				sender: "Sandbox Agent",
+				content: "",
+				createdAt: Date.now(),
+			};
+
+			c.state.messages.push(assistantMessage);
+			c.broadcast("messageAdded", assistantMessage);
+
+			c.state.status = {
+				state: "thinking",
+				updatedAt: Date.now(),
+			};
+			c.broadcast("status", c.state.status);
+
+			try {
+				const client = await getSandboxClient();
+				const sessionId = c.state.sessionId ?? buildId("session");
+				if (!c.state.sessionId) {
+					const agentId = process.env.SANDBOX_AGENT_AGENT ?? "codex";
+					const permissionMode =
+						process.env.SANDBOX_AGENT_PERMISSION_MODE ?? "bypass";
+
+					await client.createSession(sessionId, {
+						agent: agentId,
+						agentMode: "code",
+						permissionMode,
+					});
+
+					c.state.sessionId = sessionId;
+				}
+
+				const eventStream = await client.streamTurn(sessionId, {
+					message: userMessage.content,
+					sync: false,
+				});
+
+				let content = "";
+				let assistantItemId: string | null = null;
+
+				for await (const rawEvent of eventStream) {
+					const event = rawEvent as StreamEvent;
+					if (c.abortSignal.aborted) {
+						break;
+					}
+
+					if (event.type === "item.started") {
+						const item = extractItem(event.data);
+						if (item?.role === "assistant") {
+							assistantItemId = item.item_id ?? null;
+						}
+					}
+
+					if (event.type === "item.delta") {
+						const deltaData = extractDelta(event.data);
+						if (
+							deltaData?.delta &&
+							(!assistantItemId || deltaData.item_id === assistantItemId)
+						) {
+							content += deltaData.delta;
+							assistantMessage.content = content;
+							c.broadcast("response", {
+								messageId: assistantMessage.id,
+								delta: deltaData.delta,
+								content,
+								done: false,
+							});
+						}
+					}
+
+					if (event.type === "item.completed") {
+						const item = extractItem(event.data);
+						if (
+							item &&
+							item.role === "assistant" &&
+							(!assistantItemId || item.item_id === assistantItemId)
+						) {
+							const finalText = extractText(item);
+							if (finalText) {
+								content = finalText;
+							}
+						}
+					}
+				}
+
+				assistantMessage.content = content || assistantMessage.content;
+				c.broadcast("response", {
+					messageId: assistantMessage.id,
+					delta: "",
+					content: assistantMessage.content,
+					done: true,
+				});
+
+				c.state.status = {
+					state: "idle",
+					updatedAt: Date.now(),
+				};
+				c.broadcast("status", c.state.status);
+			} catch (error) {
+				const errorMessage =
+					error instanceof Error ? error.message : "Unknown error";
+
+				assistantMessage.content =
+					assistantMessage.content ||
+					"I hit a snag while responding. Please try again.";
+
+				c.state.status = {
+					state: "error",
+					updatedAt: Date.now(),
+					error: errorMessage,
+				};
+
+				c.broadcast("response", {
+					messageId: assistantMessage.id,
+					delta: "",
+					content: assistantMessage.content,
+					done: true,
+					error: errorMessage,
+				});
+				c.broadcast("status", c.state.status);
+			}
+		}
+	},
+
+	actions: {
+		// Callable functions from clients: https://rivet.dev/docs/actors/actions
+		getHistory: (c) => c.state.messages,
+		getStatus: (c) => c.state.status,
+	},
+});
+
+export const agentManager = actor({
+	// Persistent state that survives restarts: https://rivet.dev/docs/actors/state
+	state: {
+		agents: [] as AgentInfo[],
+	},
+
+	actions: {
+		// Callable functions from clients: https://rivet.dev/docs/actors/actions
+		createAgent: async (c, name?: string) => {
+			const trimmedName = name?.trim();
+			const agentName =
+				trimmedName || `Agent ${c.state.agents.length + 1}`;
+			const info: AgentInfo = {
+				id: buildId("agent"),
+				name: agentName,
+				createdAt: Date.now(),
+			};
+
+			c.state.agents.push(info);
+
+			const client = c.client<typeof registry>();
+			const handle = client.agent.getOrCreate([info.id]);
+			await handle.getStatus();
+
+			return info;
+		},
+
+		listAgents: (c) => c.state.agents,
+	},
+});
+
+// Register actors for use: https://rivet.dev/docs/setup
+export const registry = setup({
+	use: { agent, agentManager },
+});
diff --git a/examples/sandbox-coding-agent/src/server.ts b/examples/sandbox-coding-agent/src/server.ts
new file mode 100644
index 0000000000..8c065a6b5e
--- /dev/null
+++ b/examples/sandbox-coding-agent/src/server.ts
@@ -0,0 +1,8 @@
+import { Hono } from "hono";
+import { registry } from "./actors.ts";
+
+const app = new Hono();
+
+app.all("/api/rivet/*", (c) => registry.handler(c.req.raw));
+
+export default app;
diff --git a/examples/sandbox-coding-agent/tsconfig.json b/examples/sandbox-coding-agent/tsconfig.json
new file mode 100644
index 0000000000..0551447a84
--- /dev/null
+++ b/examples/sandbox-coding-agent/tsconfig.json
@@ -0,0 +1,16 @@
+{
+	"compilerOptions": {
+		"target": "esnext",
+		"lib": ["esnext", "dom"],
+		"jsx": "react-jsx",
+		"module": "esnext",
+		"moduleResolution": "bundler",
+		"types": ["node", "vite/client"],
+		"noEmit": true,
+		"strict": true,
+		"skipLibCheck": true,
+		"allowImportingTsExtensions": true,
+		"rewriteRelativeImportExtensions": true
+	},
+	"include": ["src/**/*", "frontend/**/*", "tests/**/*"]
+}
diff --git a/examples/sandbox-coding-agent/turbo.json b/examples/sandbox-coding-agent/turbo.json
new file mode 100644
index 0000000000..29d4cb2625
--- /dev/null
+++ b/examples/sandbox-coding-agent/turbo.json
@@ -0,0 +1,4 @@
+{
+	"$schema": "https://turbo.build/schema.json",
+	"extends": ["//"]
+}
diff --git a/examples/sandbox-coding-agent/vite.config.ts b/examples/sandbox-coding-agent/vite.config.ts
new file mode 100644
index 0000000000..fabe9b5525
--- /dev/null
+++ b/examples/sandbox-coding-agent/vite.config.ts
@@ -0,0 +1,7 @@
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+import srvx from "vite-plugin-srvx";
+
+export default defineConfig({
+	plugins: [react(), ...srvx({ entry: "src/server.ts" })],
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 80de795a85..88f64c73a3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -335,7 +335,7 @@ importers:
     dependencies:
       '@ai-sdk/openai':
         specifier: ^0.0.66
-        version: 0.0.66(zod@3.25.76)
+        version: 0.0.66(zod@4.1.13)
       '@hono/node-server':
         specifier: ^1.19.7
         version: 1.19.7(hono@4.11.3)
@@ -347,9 +347,9 @@ importers:
         version: link:../../rivetkit-typescript/packages/react
       ai:
         specifier: ^4.0.38
-        version: 4.3.19(react@19.1.0)(zod@3.25.76)
+        version: 4.3.19(react@19.1.0)(zod@4.1.13)
       hono:
-        specifier: ^4.0.0
+        specifier: ^4.11.3
         version: 4.11.3
       react:
         specifier: 19.1.0
@@ -363,9 +363,6 @@ importers:
       srvx:
         specifier: ^0.10.0
         version: 0.10.0
-      zod:
-        specifier: ^3.25.69
-        version: 3.25.76
     devDependencies:
       '@types/node':
         specifier: ^22.13.9
@@ -399,7 +396,7 @@ importers:
     dependencies:
       '@ai-sdk/openai':
         specifier: ^0.0.66
-        version: 0.0.66(zod@3.25.76)
+        version: 0.0.66(zod@4.1.13)
       '@hono/node-server':
         specifier: ^1.19.7
         version: 1.19.7(hono@4.11.3)
@@ -411,9 +408,9 @@ importers:
         version: link:../../rivetkit-typescript/packages/react
       ai:
         specifier: ^4.0.38
-        version: 4.3.19(react@19.1.0)(zod@3.25.76)
+        version: 4.3.19(react@19.1.0)(zod@4.1.13)
       hono:
-        specifier: ^4.0.0
+        specifier: ^4.11.3
         version: 4.11.3
       react:
         specifier: 19.1.0
@@ -424,9 +421,6 @@ importers:
       rivetkit:
         specifier: workspace:*
         version: link:../../rivetkit-typescript/packages/rivetkit
-      zod:
-        specifier: ^3.25.69
-        version: 3.25.76
     devDependencies:
       '@types/node':
         specifier: ^22.13.9
@@ -674,6 +668,122 @@ importers:
         specifier: ^4.22.0
         version: 4.44.0(@cloudflare/workers-types@4.20251014.0)
 
+  examples/collaborative-document:
+    dependencies:
+      '@hono/node-server':
+        specifier: ^1.19.7
+        version: 1.19.9(hono@4.11.3)
+      '@hono/node-ws':
+        specifier: ^1.3.0
+        version: 1.3.0(@hono/node-server@1.19.9(hono@4.11.3))(hono@4.11.3)
+      '@rivetkit/react':
+        specifier: workspace:*
+        version: link:../../rivetkit-typescript/packages/react
+      hono:
+        specifier: ^4.11.3
+        version: 4.11.3
+      react:
+        specifier: 19.1.0
+        version: 19.1.0
+      react-dom:
+        specifier: 19.1.0
+        version: 19.1.0(react@19.1.0)
+      rivetkit:
+        specifier: workspace:*
+        version: link:../../rivetkit-typescript/packages/rivetkit
+      srvx:
+        specifier: ^0.10.0
+        version: 0.10.0
+      y-protocols:
+        specifier: ^1.0.6
+        version: 1.0.7(yjs@13.6.29)
+      yjs:
+        specifier: ^13.6.24
+        version: 13.6.29
+    devDependencies:
+      '@types/node':
+        specifier: ^22.13.9
+        version: 22.19.5
+      '@types/react':
+        specifier: ^19
+        version: 19.2.2
+      '@types/react-dom':
+        specifier: ^19
+        version: 19.2.2(@types/react@19.2.2)
+      '@vitejs/plugin-react':
+        specifier: ^4.2.0
+        version: 4.7.0(vite@5.4.20(@types/node@22.19.5)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1))
+      tsx:
+        specifier: ^3.12.7
+        version: 3.14.0
+      typescript:
+        specifier: ^5.5.2
+        version: 5.9.3
+      vite:
+        specifier: ^5.0.0
+        version: 5.4.20(@types/node@22.19.5)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1)
+      vite-plugin-srvx:
+        specifier: ^1.0.0
+        version: 1.0.0(srvx@0.10.0)(vite@5.4.20(@types/node@22.19.5)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1))
+      vitest:
+        specifier: ^3.1.1
+        version: 3.2.4(@types/debug@4.1.12)(@types/node@22.19.5)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1)
+
+  examples/collaborative-document-vercel:
+    dependencies:
+      '@hono/node-server':
+        specifier: ^1.19.7
+        version: 1.19.9(hono@4.11.3)
+      '@hono/node-ws':
+        specifier: ^1.3.0
+        version: 1.3.0(@hono/node-server@1.19.9(hono@4.11.3))(hono@4.11.3)
+      '@rivetkit/react':
+        specifier: workspace:*
+        version: link:../../rivetkit-typescript/packages/react
+      hono:
+        specifier: ^4.11.3
+        version: 4.11.3
+      react:
+        specifier: 19.1.0
+        version: 19.1.0
+      react-dom:
+        specifier: 19.1.0
+        version: 19.1.0(react@19.1.0)
+      rivetkit:
+        specifier: workspace:*
+        version: link:../../rivetkit-typescript/packages/rivetkit
+      y-protocols:
+        specifier: ^1.0.6
+        version: 1.0.7(yjs@13.6.29)
+      yjs:
+        specifier: ^13.6.24
+        version: 13.6.29
+    devDependencies:
+      '@types/node':
+        specifier: ^22.13.9
+        version: 22.19.5
+      '@types/react':
+        specifier: ^19
+        version: 19.2.2
+      '@types/react-dom':
+        specifier: ^19
+        version: 19.2.2(@types/react@19.2.2)
+      '@vitejs/plugin-react':
+        specifier: ^4.2.0
+        version: 4.7.0(vite@5.4.20(@types/node@22.19.5)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1))
+      tsx:
+        specifier: ^3.12.7
+        version: 3.14.0
+      typescript:
+        specifier: ^5.5.2
+        version: 5.9.3
+      vite:
+        specifier: ^5.0.0
+        version: 5.4.20(@types/node@22.19.5)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1)
+      vitest:
+        specifier: ^3.1.1
+        version: 3.2.4(@types/debug@4.1.12)(@types/node@22.19.5)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1)
+
   examples/cross-actor-actions:
     dependencies:
       '@hono/node-server':
@@ -1284,6 +1394,110 @@ importers:
         specifier: ^3.1.1
         version: 3.2.4(@types/debug@4.1.12)(@types/node@22.19.5)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1)
 
+  examples/geo-distributed-database:
+    dependencies:
+      '@hono/node-server':
+        specifier: ^1.19.7
+        version: 1.19.9(hono@4.11.3)
+      '@hono/node-ws':
+        specifier: ^1.3.0
+        version: 1.3.0(@hono/node-server@1.19.9(hono@4.11.3))(hono@4.11.3)
+      '@rivetkit/react':
+        specifier: workspace:*
+        version: link:../../rivetkit-typescript/packages/react
+      hono:
+        specifier: ^4.0.0
+        version: 4.11.3
+      react:
+        specifier: 19.1.0
+        version: 19.1.0
+      react-dom:
+        specifier: 19.1.0
+        version: 19.1.0(react@19.1.0)
+      rivetkit:
+        specifier: workspace:*
+        version: link:../../rivetkit-typescript/packages/rivetkit
+      srvx:
+        specifier: ^0.10.0
+        version: 0.10.0
+    devDependencies:
+      '@types/node':
+        specifier: ^22.13.9
+        version: 22.19.5
+      '@types/react':
+        specifier: ^19
+        version: 19.2.2
+      '@types/react-dom':
+        specifier: ^19
+        version: 19.2.2(@types/react@19.2.2)
+      '@vitejs/plugin-react':
+        specifier: ^4.2.0
+        version: 4.7.0(vite@5.4.20(@types/node@22.19.5)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1))
+      tsx:
+        specifier: ^3.12.7
+        version: 3.14.0
+      typescript:
+        specifier: ^5.5.2
+        version: 5.9.3
+      vite:
+        specifier: ^5.0.0
+        version: 5.4.20(@types/node@22.19.5)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1)
+      vite-plugin-srvx:
+        specifier: ^1.0.0
+        version: 1.0.0(srvx@0.10.0)(vite@5.4.20(@types/node@22.19.5)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1))
+      vitest:
+        specifier: ^3.1.1
+        version: 3.2.4(@types/debug@4.1.12)(@types/node@22.19.5)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1)
+
+  examples/geo-distributed-database-vercel:
+    dependencies:
+      '@hono/node-server':
+        specifier: ^1.19.7
+        version: 1.19.9(hono@4.11.3)
+      '@hono/node-ws':
+        specifier: ^1.3.0
+        version: 1.3.0(@hono/node-server@1.19.9(hono@4.11.3))(hono@4.11.3)
+      '@rivetkit/react':
+        specifier: workspace:*
+        version: link:../../rivetkit-typescript/packages/react
+      hono:
+        specifier: ^4.0.0
+        version: 4.11.3
+      react:
+        specifier: 19.1.0
+        version: 19.1.0
+      react-dom:
+        specifier: 19.1.0
+        version: 19.1.0(react@19.1.0)
+      rivetkit:
+        specifier: workspace:*
+        version: link:../../rivetkit-typescript/packages/rivetkit
+    devDependencies:
+      '@types/node':
+        specifier: ^22.13.9
+        version: 22.19.5
+      '@types/react':
+        specifier: ^19
+        version: 19.2.2
+      '@types/react-dom':
+        specifier: ^19
+        version: 19.2.2(@types/react@19.2.2)
+      '@vitejs/plugin-react':
+        specifier: ^4.2.0
+        version: 4.7.0(vite@5.4.20(@types/node@22.19.5)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1))
+      tsx:
+        specifier: ^3.12.7
+        version: 3.14.0
+      typescript:
+        specifier: ^5.5.2
+        version: 5.9.3
+      vite:
+        specifier: ^5.0.0
+        version: 5.4.20(@types/node@22.19.5)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1)
+      vitest:
+        specifier: ^3.1.1
+        version: 3.2.4(@types/debug@4.1.12)(@types/node@22.19.5)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1)
+
   examples/hello-world:
     dependencies:
       '@hono/node-server':
@@ -1643,7 +1857,7 @@ importers:
         specifier: ^5.2.0
         version: 5.4.20(@types/node@22.19.5)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1)
 
-  examples/multi-region:
+  examples/multi-region-vercel:
     dependencies:
       '@hono/node-server':
         specifier: ^1.19.7
@@ -1666,13 +1880,62 @@ importers:
       rivetkit:
         specifier: workspace:*
         version: link:../../rivetkit-typescript/packages/rivetkit
+    devDependencies:
+      '@types/node':
+        specifier: ^22.13.9
+        version: 22.19.5
+      '@types/react':
+        specifier: ^19
+        version: 19.2.2
+      '@types/react-dom':
+        specifier: ^19
+        version: 19.2.2(@types/react@19.2.2)
+      '@vitejs/plugin-react':
+        specifier: ^4.2.0
+        version: 4.7.0(vite@5.4.20(@types/node@22.19.5)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1))
+      tsx:
+        specifier: ^3.12.7
+        version: 3.14.0
+      typescript:
+        specifier: ^5.5.2
+        version: 5.9.3
+      vite:
+        specifier: ^5.0.0
+        version: 5.4.20(@types/node@22.19.5)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1)
+      vitest:
+        specifier: ^3.1.1
+        version: 3.2.4(@types/debug@4.1.12)(@types/node@22.19.5)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1)
+
+  examples/multiplayer-game:
+    dependencies:
+      '@hono/node-server':
+        specifier: ^1.19.7
+        version: 1.19.9(hono@4.11.3)
+      '@hono/node-ws':
+        specifier: ^1.3.0
+        version: 1.3.0(@hono/node-server@1.19.9(hono@4.11.3))(hono@4.11.3)
+      '@rivetkit/react':
+        specifier: workspace:*
+        version: link:../../rivetkit-typescript/packages/react
+      hono:
+        specifier: ^4.11.3
+        version: 4.11.3
+      react:
+        specifier: 19.1.0
+        version: 19.1.0
+      react-dom:
+        specifier: 19.1.0
+        version: 19.1.0(react@19.1.0)
+      rivetkit:
+        specifier: workspace:*
+        version: link:../../rivetkit-typescript/packages/rivetkit
       srvx:
         specifier: ^0.10.0
         version: 0.10.0
     devDependencies:
       '@types/node':
         specifier: ^22.13.9
-        version: 22.19.1
+        version: 22.19.5
       '@types/react':
         specifier: ^19
         version: 19.2.2
@@ -1681,7 +1944,7 @@ importers:
         version: 19.2.2(@types/react@19.2.2)
       '@vitejs/plugin-react':
         specifier: ^4.2.0
-        version: 4.7.0(vite@5.4.20(@types/node@22.19.1)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1))
+        version: 4.7.0(vite@5.4.20(@types/node@22.19.5)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1))
       tsx:
         specifier: ^3.12.7
         version: 3.14.0
@@ -1690,27 +1953,27 @@ importers:
         version: 5.9.3
       vite:
         specifier: ^5.0.0
-        version: 5.4.20(@types/node@22.19.1)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1)
+        version: 5.4.20(@types/node@22.19.5)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1)
       vite-plugin-srvx:
         specifier: ^1.0.0
-        version: 1.0.0(srvx@0.10.0)(vite@5.4.20(@types/node@22.19.1)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1))
+        version: 1.0.0(srvx@0.10.0)(vite@5.4.20(@types/node@22.19.5)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1))
       vitest:
         specifier: ^3.1.1
-        version: 3.2.4(@types/debug@4.1.12)(@types/node@22.19.1)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1)
+        version: 3.2.4(@types/debug@4.1.12)(@types/node@22.19.5)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1)
 
-  examples/multi-region-vercel:
+  examples/multiplayer-game-vercel:
     dependencies:
       '@hono/node-server':
         specifier: ^1.19.7
-        version: 1.19.7(hono@4.11.3)
+        version: 1.19.9(hono@4.11.3)
       '@hono/node-ws':
         specifier: ^1.3.0
-        version: 1.3.0(@hono/node-server@1.19.7(hono@4.11.3))(hono@4.11.3)
+        version: 1.3.0(@hono/node-server@1.19.9(hono@4.11.3))(hono@4.11.3)
       '@rivetkit/react':
         specifier: workspace:*
         version: link:../../rivetkit-typescript/packages/react
       hono:
-        specifier: ^4.7.4
+        specifier: ^4.11.3
         version: 4.11.3
       react:
         specifier: 19.1.0
@@ -1903,6 +2166,61 @@ importers:
         specifier: ^5
         version: 5.9.2
 
+  examples/per-tenant-database:
+    dependencies:
+      '@hono/node-server':
+        specifier: ^1.19.7
+        version: 1.19.9(hono@4.11.3)
+      '@hono/node-ws':
+        specifier: ^1.3.0
+        version: 1.3.0(@hono/node-server@1.19.9(hono@4.11.3))(hono@4.11.3)
+      '@rivetkit/react':
+        specifier: workspace:*
+        version: link:../../rivetkit-typescript/packages/react
+      hono:
+        specifier: ^4.11.3
+        version: 4.11.3
+      react:
+        specifier: 19.1.0
+        version: 19.1.0
+      react-dom:
+        specifier: 19.1.0
+        version: 19.1.0(react@19.1.0)
+      rivetkit:
+        specifier: workspace:*
+        version: link:../../rivetkit-typescript/packages/rivetkit
+      srvx:
+        specifier: ^0.10.0
+        version: 0.10.0
+    devDependencies:
+      '@types/node':
+        specifier: ^22.13.9
+        version: 22.19.5
+      '@types/react':
+        specifier: ^19
+        version: 19.2.2
+      '@types/react-dom':
+        specifier: ^19
+        version: 19.2.2(@types/react@19.2.2)
+      '@vitejs/plugin-react':
+        specifier: ^4.2.0
+        version: 4.7.0(vite@5.4.20(@types/node@22.19.5)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1))
+      tsx:
+        specifier: ^3.12.7
+        version: 3.14.0
+      typescript:
+        specifier: ^5.5.2
+        version: 5.9.3
+      vite:
+        specifier: ^5.0.0
+        version: 5.4.20(@types/node@22.19.5)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1)
+      vite-plugin-srvx:
+        specifier: ^1.0.0
+        version: 1.0.0(srvx@0.10.0)(vite@5.4.20(@types/node@22.19.5)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1))
+      vitest:
+        specifier: ^3.1.1
+        version: 3.2.4(@types/debug@4.1.12)(@types/node@22.19.5)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1)
+
   examples/queue-sandbox:
     dependencies:
       '@hono/node-server':
@@ -2429,6 +2747,116 @@ importers:
         specifier: ^3.1.1
         version: 3.2.4(@types/debug@4.1.12)(@types/node@22.19.5)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1)
 
+  examples/sandbox-coding-agent:
+    dependencies:
+      '@hono/node-server':
+        specifier: ^1.19.7
+        version: 1.19.9(hono@4.11.3)
+      '@hono/node-ws':
+        specifier: ^1.3.0
+        version: 1.3.0(@hono/node-server@1.19.9(hono@4.11.3))(hono@4.11.3)
+      '@rivetkit/react':
+        specifier: workspace:*
+        version: link:../../rivetkit-typescript/packages/react
+      hono:
+        specifier: ^4.11.3
+        version: 4.11.3
+      react:
+        specifier: 19.1.0
+        version: 19.1.0
+      react-dom:
+        specifier: 19.1.0
+        version: 19.1.0(react@19.1.0)
+      rivetkit:
+        specifier: workspace:*
+        version: link:../../rivetkit-typescript/packages/rivetkit
+      sandbox-agent:
+        specifier: ^0.1.5
+        version: 0.1.5
+      srvx:
+        specifier: ^0.10.0
+        version: 0.10.0
+    devDependencies:
+      '@types/node':
+        specifier: ^22.13.9
+        version: 22.19.5
+      '@types/react':
+        specifier: ^19
+        version: 19.2.2
+      '@types/react-dom':
+        specifier: ^19
+        version: 19.2.2(@types/react@19.2.2)
+      '@vitejs/plugin-react':
+        specifier: ^4.2.0
+        version: 4.7.0(vite@5.4.20(@types/node@22.19.5)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1))
+      tsx:
+        specifier: ^3.12.7
+        version: 3.14.0
+      typescript:
+        specifier: ^5.5.2
+        version: 5.9.3
+      vite:
+        specifier: ^5.0.0
+        version: 5.4.20(@types/node@22.19.5)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1)
+      vite-plugin-srvx:
+        specifier: ^1.0.0
+        version: 1.0.0(srvx@0.10.0)(vite@5.4.20(@types/node@22.19.5)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1))
+      vitest:
+        specifier: ^3.1.1
+        version: 3.2.4(@types/debug@4.1.12)(@types/node@22.19.5)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1)
+
+  examples/sandbox-coding-agent-vercel:
+    dependencies:
+      '@hono/node-server':
+        specifier: ^1.19.7
+        version: 1.19.9(hono@4.11.3)
+      '@hono/node-ws':
+        specifier: ^1.3.0
+        version: 1.3.0(@hono/node-server@1.19.9(hono@4.11.3))(hono@4.11.3)
+      '@rivetkit/react':
+        specifier: workspace:*
+        version: link:../../rivetkit-typescript/packages/react
+      hono:
+        specifier: ^4.11.3
+        version: 4.11.3
+      react:
+        specifier: 19.1.0
+        version: 19.1.0
+      react-dom:
+        specifier: 19.1.0
+        version: 19.1.0(react@19.1.0)
+      rivetkit:
+        specifier: workspace:*
+        version: link:../../rivetkit-typescript/packages/rivetkit
+      sandbox-agent:
+        specifier: ^0.1.5
+        version: 0.1.5
+    devDependencies:
+      '@types/node':
+        specifier: ^22.13.9
+        version: 22.19.5
+      '@types/react':
+        specifier: ^19
+        version: 19.2.2
+      '@types/react-dom':
+        specifier: ^19
+        version: 19.2.2(@types/react@19.2.2)
+      '@vitejs/plugin-react':
+        specifier: ^4.2.0
+        version: 4.7.0(vite@5.4.20(@types/node@22.19.5)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1))
+      tsx:
+        specifier: ^3.12.7
+        version: 3.14.0
+      typescript:
+        specifier: ^5.5.2
+        version: 5.9.3
+      vite:
+        specifier: ^5.0.0
+        version: 5.4.20(@types/node@22.19.5)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1)
+      vitest:
+        specifier: ^3.1.1
+        version: 3.2.4(@types/debug@4.1.12)(@types/node@22.19.5)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1)
+
   examples/scheduling:
     dependencies:
       '@hono/node-server':
@@ -12117,6 +12545,7 @@ packages:
 
   glob@10.4.5:
     resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
+    deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
     hasBin: true
 
   glob@10.5.0:
@@ -12127,6 +12556,7 @@ packages:
   glob@11.0.3:
     resolution: {integrity: sha512-2Nim7dha1KVkaiF4q6Dj+ngPPMdfvLJEOpZk/jKiUAkqKebpGAWQXAq9z1xu9HKu5lWfqw/FASuccEjyznjPaA==}
     engines: {node: 20 || >=22}
+    deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
     hasBin: true
 
   glob@13.0.0:
@@ -12135,11 +12565,12 @@ packages:
 
   glob@7.2.3:
     resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
-    deprecated: Glob versions prior to v9 are no longer supported
+    deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
 
   glob@9.3.5:
     resolution: {integrity: sha512-e1LleDykUz2Iu+MTYdkSsuWX8lvAjAcs0Xef0lNIu0S2wOAzuTxCJtcd9S3cijlwYF18EsU3rzb8jPVobxDh9Q==}
     engines: {node: '>=16 || 14 >=14.17'}
+    deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
 
   global-dirs@0.1.1:
     resolution: {integrity: sha512-NknMLn7F2J7aflwFOlGdNIuCDpN3VGoSoB+aap3KABFWbHVn1TCgFC+np23J8W2BiZbjfEw3BFBycSMv1AFblg==}
@@ -12543,6 +12974,9 @@ packages:
   isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
+  isomorphic.js@0.2.5:
+    resolution: {integrity: sha512-PIeMbHqMt4DnUP3MA/Flc0HElYjMXArsw1qwJZcm9sqR8mq3l8NYizFMty0pWwE/tzIGH3EKK5+jes5mAr85yw==}
+
   isows@1.0.7:
     resolution: {integrity: sha512-I1fSfDCZL5P0v33sVqeTDSpcstAg/N+wF5HS033mogOVIp4B+oHC7oOCsA3axAbBSGTJ8QubbNmnIRN/h8U7hg==}
     peerDependencies:
@@ -12831,6 +13265,11 @@ packages:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
 
+  lib0@0.2.117:
+    resolution: {integrity: sha512-DeXj9X5xDCjgKLU/7RR+/HQEVzuuEUiwldwOGsHK/sfAfELGWEyTcf0x+uOvCvK3O2zPmZePXWL85vtia6GyZw==}
+    engines: {node: '>=16'}
+    hasBin: true
+
   lie@3.3.0:
     resolution: {integrity: sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==}
 
@@ -15016,6 +15455,9 @@ packages:
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
+  sandbox-agent@0.1.5:
+    resolution: {integrity: sha512-iBEC+sSDsvg52y97c+RJEZ4aC/ZR2bduBJHJd4mFS0KQ8OOjNLylU08QnXRg7f4W/XXRnJN/THt6nBt8th0RSQ==}
+
   sass@1.93.2:
     resolution: {integrity: sha512-t+YPtOQHpGW1QWsh1CHQ5cPIr9lbbGZLZnbihP/D/qZj/yuV68m8qarcV17nvkOX81BCrvzAlq2klCQFZghyTg==}
     engines: {node: '>=14.0.0'}
@@ -16762,6 +17204,12 @@ packages:
   xxhash-wasm@1.1.0:
     resolution: {integrity: sha512-147y/6YNh+tlp6nd/2pWq38i9h6mz/EuQ6njIrmW8D1BS5nCqs0P6DG+m6zTGnNz5I+uhZ0SHxBs9BsPrwcKDA==}
 
+  y-protocols@1.0.7:
+    resolution: {integrity: sha512-YSVsLoXxO67J6eE/nV4AtFtT3QEotZf5sK5BHxFBXso7VDUT3Tx07IfA6hsu5Q5OmBdMkQVmFZ9QOA7fikWvnw==}
+    engines: {node: '>=16.0.0', npm: '>=8.0.0'}
+    peerDependencies:
+      yjs: ^13.0.0
+
   y18n@5.0.8:
     resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
     engines: {node: '>=10'}
@@ -16801,6 +17249,10 @@ packages:
   yauzl@2.10.0:
     resolution: {integrity: sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==}
 
+  yjs@13.6.29:
+    resolution: {integrity: sha512-kHqDPdltoXH+X4w1lVmMtddE3Oeqq48nM40FD5ojTd8xYhQpzIDcfE2keMSU5bAgRPJBe225WTUdyUgj1DtbiQ==}
+    engines: {node: '>=16.0.0', npm: '>=8.0.0'}
+
   yn@3.1.1:
     resolution: {integrity: sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==}
     engines: {node: '>=6'}
@@ -16919,27 +17371,20 @@ snapshots:
       '@ai-sdk/provider-utils': 2.2.8(zod@4.1.13)
       zod: 4.1.13
 
-  '@ai-sdk/openai@0.0.66(zod@3.25.76)':
+  '@ai-sdk/openai@0.0.66(zod@4.1.13)':
     dependencies:
       '@ai-sdk/provider': 0.0.24
-      '@ai-sdk/provider-utils': 1.0.20(zod@3.25.76)
-      zod: 3.25.76
+      '@ai-sdk/provider-utils': 1.0.20(zod@4.1.13)
+      zod: 4.1.13
 
-  '@ai-sdk/provider-utils@1.0.20(zod@3.25.76)':
+  '@ai-sdk/provider-utils@1.0.20(zod@4.1.13)':
     dependencies:
       '@ai-sdk/provider': 0.0.24
       eventsource-parser: 1.1.2
       nanoid: 3.3.6
       secure-json-parse: 2.7.0
     optionalDependencies:
-      zod: 3.25.76
-
-  '@ai-sdk/provider-utils@2.2.8(zod@3.25.76)':
-    dependencies:
-      '@ai-sdk/provider': 1.1.3
-      nanoid: 3.3.11
-      secure-json-parse: 2.7.0
-      zod: 3.25.76
+      zod: 4.1.13
 
   '@ai-sdk/provider-utils@2.2.8(zod@4.1.13)':
     dependencies:
@@ -16956,16 +17401,6 @@ snapshots:
     dependencies:
       json-schema: 0.4.0
 
-  '@ai-sdk/react@1.2.12(react@19.1.0)(zod@3.25.76)':
-    dependencies:
-      '@ai-sdk/provider-utils': 2.2.8(zod@3.25.76)
-      '@ai-sdk/ui-utils': 1.2.11(zod@3.25.76)
-      react: 19.1.0
-      swr: 2.3.4(react@19.1.0)
-      throttleit: 2.1.0
-    optionalDependencies:
-      zod: 3.25.76
-
   '@ai-sdk/react@1.2.12(react@19.1.0)(zod@4.1.13)':
     dependencies:
       '@ai-sdk/provider-utils': 2.2.8(zod@4.1.13)
@@ -16976,13 +17411,6 @@ snapshots:
     optionalDependencies:
       zod: 4.1.13
 
-  '@ai-sdk/ui-utils@1.2.11(zod@3.25.76)':
-    dependencies:
-      '@ai-sdk/provider': 1.1.3
-      '@ai-sdk/provider-utils': 2.2.8(zod@3.25.76)
-      zod: 3.25.76
-      zod-to-json-schema: 3.25.1(zod@3.25.76)
-
   '@ai-sdk/ui-utils@1.2.11(zod@4.1.13)':
     dependencies:
       '@ai-sdk/provider': 1.1.3
@@ -23273,18 +23701,6 @@ snapshots:
     dependencies:
       humanize-ms: 1.2.1
 
-  ai@4.3.19(react@19.1.0)(zod@3.25.76):
-    dependencies:
-      '@ai-sdk/provider': 1.1.3
-      '@ai-sdk/provider-utils': 2.2.8(zod@3.25.76)
-      '@ai-sdk/react': 1.2.12(react@19.1.0)(zod@3.25.76)
-      '@ai-sdk/ui-utils': 1.2.11(zod@3.25.76)
-      '@opentelemetry/api': 1.9.0
-      jsondiffpatch: 0.6.0
-      zod: 3.25.76
-    optionalDependencies:
-      react: 19.1.0
-
   ai@4.3.19(react@19.1.0)(zod@4.1.13):
     dependencies:
       '@ai-sdk/provider': 1.1.3
@@ -26445,6 +26861,8 @@ snapshots:
 
   isexe@2.0.0: {}
 
+  isomorphic.js@0.2.5: {}
+
   isows@1.0.7(ws@8.18.3):
     dependencies:
       ws: 8.18.3
@@ -26742,6 +27160,10 @@ snapshots:
       prelude-ls: 1.2.1
       type-check: 0.4.0
 
+  lib0@0.2.117:
+    dependencies:
+      isomorphic.js: 0.2.5
+
   lie@3.3.0:
     dependencies:
       immediate: 3.0.6
@@ -27988,7 +28410,7 @@ snapshots:
   needle@3.3.1:
     dependencies:
       iconv-lite: 0.6.3
-      sax: 1.4.3
+      sax: 1.4.4
     optional: true
 
   negotiator@0.6.3: {}
@@ -29627,6 +30049,8 @@ snapshots:
 
   safer-buffer@2.1.2: {}
 
+  sandbox-agent@0.1.5: {}
+
   sass@1.93.2:
     dependencies:
       chokidar: 4.0.3
@@ -32387,6 +32811,11 @@ snapshots:
 
   xxhash-wasm@1.1.0: {}
 
+  y-protocols@1.0.7(yjs@13.6.29):
+    dependencies:
+      lib0: 0.2.117
+      yjs: 13.6.29
+
   y18n@5.0.8: {}
 
   yallist@3.1.1: {}
@@ -32418,6 +32847,10 @@ snapshots:
       buffer-crc32: 0.2.13
       fd-slicer: 1.1.0
 
+  yjs@13.6.29:
+    dependencies:
+      lib0: 0.2.117
+
   yn@3.1.1: {}
 
   yocto-queue@0.1.0: {}
diff --git a/rivetkit-typescript/packages/rivetkit/src/actor/definition.ts b/rivetkit-typescript/packages/rivetkit/src/actor/definition.ts
index 80e80bb477..2352973ce8 100644
--- a/rivetkit-typescript/packages/rivetkit/src/actor/definition.ts
+++ b/rivetkit-typescript/packages/rivetkit/src/actor/definition.ts
@@ -2,7 +2,7 @@ import type { RegistryConfig } from "@/registry/config";
 import type { Actions, ActorConfig } from "./config";
 import type { ActionContextOf, ActorContext } from "./contexts";
 import type { AnyDatabaseProvider } from "./database";
-import { ActorInstance } from "./instance/mod";
+import type { ActorInstance } from "./instance/mod";
 import { DeepMutable } from "@/utils";
 
 export type AnyActorDefinition = ActorDefinition<
@@ -35,7 +35,10 @@ export class ActorDefinition<
 	}
 
 	instantiate(): ActorInstance<S, CP, CS, V, I, DB> {
-		return new ActorInstance(this.#config);
+		// Lazy import to avoid pulling server-only dependencies (traces, fdb-tuple, etc.)
+		// into browser bundles. This method is only called on the server.
+		const { ActorInstance: ActorInstanceClass } = require("./instance/mod");
+		return new ActorInstanceClass(this.#config);
 	}
 }
 
diff --git a/rivetkit-typescript/packages/rivetkit/tsup.config.ts b/rivetkit-typescript/packages/rivetkit/tsup.config.ts
index 20b6353efd..bc2a55f257 100644
--- a/rivetkit-typescript/packages/rivetkit/tsup.config.ts
+++ b/rivetkit-typescript/packages/rivetkit/tsup.config.ts
@@ -6,9 +6,20 @@ import defaultConfig from "../../../tsup.base.ts";
 export default defineConfig({
 	...defaultConfig,
 	outDir: "dist/tsup/",
+	// Override shims: false to prevent ESM shims (fileURLToPath, etc.) from being
+	// injected into chunks. The shims import Node.js-only modules which break
+	// browser builds when importing from rivetkit/client.
+	// See: https://github.com/egoist/tsup/issues/958
+	shims: false,
 	esbuildOptions(options) {
-		options.external = options.external ?? [];
-		options.external.push("@rivetkit/traces", "@rivetkit/traces/encoding", "@rivetkit/traces/otlp");
+		// Mark @rivetkit workspace packages as external to preserve their dependency chains
+		options.external = [
+			...(options.external || []),
+			"@rivetkit/traces",
+			"@rivetkit/traces/encoding",
+			"@rivetkit/traces/otlp",
+			"@rivetkit/workflow-engine",
+		];
 	},
 	define: {
 		"globalThis.CUSTOM_RIVETKIT_DEVTOOLS_URL": process.env