Use ChatAgent.stub API; add idempotent schedule

Import ChatAgent type and instantiate useAgent with ChatAgent generic in app.tsx, then switch from agent.call(...) to the agent.stub methods (e.g. stub.addServer, stub.removeServer) to invoke agent RPCs. In server.ts, add a maxPersistedMessages property (100) to the ChatAgent and make scheduled tasks idempotent by passing { idempotent: true } to schedule. These changes align the UI with the agent stub API and improve scheduling and message persistence behavior.

Author: threepointone

src/app.tsx

@@ -4,6 +4,7 @@ import { useAgentChat } from "@cloudflare/ai-chat/react";
 import { isToolUIPart, getToolName } from "ai";
 import type { UIMessage } from "ai";
 import type { MCPServersState } from "agents";
+import type { ChatAgent } from "./server";
 import {
   Button,
   Badge,
@@ -241,7 +242,7 @@ function Chat() {
   const [isAddingServer, setIsAddingServer] = useState(false);
   const mcpPanelRef = useRef<HTMLDivElement>(null);
 
-  const agent = useAgent({
+  const agent = useAgent<ChatAgent>({
     agent: "ChatAgent",
     onOpen: useCallback(() => setConnected(true), []),
     onClose: useCallback(() => setConnected(false), []),
@@ -290,11 +291,11 @@ function Chat() {
     if (!mcpName.trim() || !mcpUrl.trim()) return;
     setIsAddingServer(true);
     try {
-      await agent.call("addServer", [
+      await agent.stub.addServer(
         mcpName.trim(),
         mcpUrl.trim(),
         window.location.origin
-      ]);
+      );
       setMcpName("");
       setMcpUrl("");
     } catch (e) {
@@ -306,7 +307,7 @@ function Chat() {
 
   const handleRemoveServer = async (serverId: string) => {
     try {
-      await agent.call("removeServer", [serverId]);
+      await agent.stub.removeServer(serverId);
     } catch (e) {
       console.error("Failed to remove MCP server:", e);
     }

src/server.ts

@@ -35,6 +35,8 @@ function inlineDataUrls(messages: ModelMessage[]): ModelMessage[] {
 }
 
 export class ChatAgent extends AIChatAgent<Env> {
+  maxPersistedMessages = 100;
+
   onStart() {
     // Configure OAuth popup behavior for MCP servers that require authentication
     this.mcp.configureOAuthCallback({
@@ -161,7 +163,9 @@ If the user asks to schedule a task, use the schedule tool to schedule the task.
                     : null;
             if (!input) return "Invalid schedule type";
             try {
-              this.schedule(input, "executeTask", description);
+              this.schedule(input, "executeTask", description, {
+                idempotent: true
+              });
               return `Task scheduled: "${description}" (${when.type}: ${input})`;
             } catch (error) {
               return `Error scheduling task: ${error}`;