diff --git a/src/content/docs/agents/api-reference/agents-api.mdx b/src/content/docs/agents/api-reference/agents-api.mdx
index 4b2ac2b04ec19b8..40cdd084448bf71 100644
--- a/src/content/docs/agents/api-reference/agents-api.mdx
+++ b/src/content/docs/agents/api-reference/agents-api.mdx
@@ -18,7 +18,7 @@ This page provides an overview of the Agent SDK API, including the `Agent` class
 The Agents SDK exposes two main APIs:
 
 - The server-side `Agent` class. An Agent encapsulates all of the logic for an Agent, including how clients can connect to it, how it stores state, the methods it exposes, how to call AI models, and any error handling.
-- The client-side `AgentClient` class, which allows you to connect to an Agent instance from a client-side application. The client APIs also include React hooks, including `useAgent` and `useAgentChat`, and allow you to automatically synchronize state between each unique Agent (running server-side) and your client applications.
+- The client-side `AgentClient` class, which allows you to connect to an Agent instance from a client-side application. The client APIs also include React hooks, including `useAgent` and `useChat`, and allow you to automatically synchronize state between each unique Agent (running server-side) and your client applications.
 
 :::note
 
@@ -635,7 +635,7 @@ For complete MCP client API documentation, including OAuth configuration and adv
 
 The Agents SDK provides a set of client APIs for interacting with Agents from client-side JavaScript code, including:
 
-- React hooks, including `useAgent` and `useAgentChat`, for connecting to Agents from client applications.
+- React hooks, including `useAgent` and `useChat`, for connecting to Agents from client applications.
 - Client-side [state syncing](/agents/api-reference/store-and-sync-state/) that allows you to subscribe to state updates between the Agent and any connected client(s) when calling `this.setState` within your Agent's code.
 - The ability to call remote methods (Remote Procedure Calls; RPC) on the Agent from client-side JavaScript code using the `@callable` method decorator.
 
@@ -804,7 +804,7 @@ function useAgent<State = unknown>(
 
 The Agents SDK exposes an `AIChatAgent` class that extends the `Agent` class and exposes an `onChatMessage` method that simplifies building interactive chat agents.
 
-You can combine this with the `useAgentChat` React hook from the `agents/ai-react` package to manage chat state and messages between a user and your Agent(s).
+You can combine this with the `useChat` React hook from the `agents/react` package to manage chat state and messages between a user and your Agent(s).
 
 #### AIChatAgent
 
@@ -886,7 +886,7 @@ The `AIChatAgent` class provides **automatic resumable streaming** out of the bo
 
 ##### How it works
 
-When you use `AIChatAgent` with `useAgentChat`:
+When you use `AIChatAgent` with `useChat`:
 
 1. **During streaming**: All chunks are automatically persisted to SQLite
 2. **On disconnect**: The stream continues server-side, buffering chunks
@@ -923,9 +923,9 @@ If you don't want automatic resume (for example, for short responses), disable i
 <TypeScriptExample>
 
 ```tsx
-const { messages } = useAgentChat({
-	agent,
-	resume: false, // Disable automatic stream resumption
+const { messages } = useChat({
+	agent: "my-agent",
+	// Stream resumption is enabled by default
 });
 ```
 
@@ -933,134 +933,186 @@ const { messages } = useAgentChat({
 
 ### Chat Agent React API
 
-#### useAgentChat
+#### useChat
 
-React hook for building AI chat interfaces using an Agent.
+Unified React hook for building AI chat interfaces with human-in-the-loop tool approval. This hook replaces the previous two-hook pattern (`useAgent` + `useAgentChat`) with a single, declarative API.
 
 ```ts
-import { useAgentChat } from "agents/ai-react";
-import { useAgent } from "agents/react";
-import type { Message } from "ai";
+import { useChat } from "agents/react";
+import type { UIMessage } from "ai";
+import type { PartySocket } from "partysocket";
+
+// Tool definition for client-side tools
+type Tool<TInput = any, TOutput = any> = {
+	// Tool description for the LLM
+	description?: string;
+	// Client-side execution function (optional)
+	execute?: (input: TInput) => TOutput | Promise<TOutput>;
+	// Whether to require human approval before execution
+	confirm?: boolean;
+};
+
+// Pending tool call awaiting user approval
+type PendingToolCall = {
+	toolCallId: string;
+	toolName: string;
+	input: unknown;
+	messageId: string;
+};
 
-// Options for the useAgentChat hook
-type UseAgentChatOptions = Omit<
-	Parameters<typeof useChat>[0] & {
-		// Agent connection from useAgent
-		agent: ReturnType<typeof useAgent>;
-	},
-	"fetch"
->;
+// Options for the useChat hook
+type UseChatOptions = {
+	// Name of the agent to connect to
+	agent: string;
+	// Name of the specific Agent instance (optional)
+	name?: string;
+	// Client-side tool definitions with confirmation behavior
+	tools?: Record<string, Tool>;
+	// Error handler
+	onError?: (error: Error) => void;
+	// State update callback
+	onStateUpdate?: (state: unknown, source: "server" | "client") => void;
+};
 
 // React hook for building AI chat interfaces using an Agent
-function useAgentChat(options: UseAgentChatOptions): {
+function useChat(options: UseChatOptions): {
 	// Current chat messages
-	messages: Message[];
+	messages: UIMessage[];
+	// Send a message to the agent
+	sendMessage: (message: UIMessage) => void;
 	// Set messages and synchronize with the Agent
-	setMessages: (messages: Message[]) => void;
+	setMessages: (messages: UIMessage[]) => void;
 	// Clear chat history on both client and Agent
 	clearHistory: () => void;
-	// Append a new message to the conversation
-	append: (
-		message: Message,
-		chatRequestOptions?: any,
-	) => Promise<string | null | undefined>;
-	// Reload the last user message
-	reload: (chatRequestOptions?: any) => Promise<string | null | undefined>;
-	// Stop the AI response generation
-	stop: () => void;
-	// Current input text
-	input: string;
-	// Set the input text
-	setInput: React.Dispatch<React.SetStateAction<string>>;
-	// Handle input changes
-	handleInputChange: (
-		e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-	) => void;
-	// Submit the current input
-	handleSubmit: (
-		event?: { preventDefault?: () => void },
-		chatRequestOptions?: any,
-	) => void;
-	// Additional metadata
-	metadata?: Object;
+	// Tool calls awaiting approval
+	pendingToolCalls: PendingToolCall[];
+	// Approve a tool execution
+	approve: (toolCallId: string) => Promise<void>;
+	// Deny a tool execution with optional reason
+	deny: (toolCallId: string, reason?: string) => Promise<void>;
 	// Whether a response is currently being generated
 	isLoading: boolean;
-	// Current status of the chat
-	status: "submitted" | "streaming" | "ready" | "error";
-	// Tool data from the AI response
-	data?: any[];
-	// Set tool data
-	setData: (
-		data: any[] | undefined | ((data: any[] | undefined) => any[] | undefined),
-	) => void;
-	// Unique ID for the chat
-	id: string;
-	// Add a tool result for a specific tool call
-	addToolResult: ({
-		toolCallId,
-		result,
-	}: {
-		toolCallId: string;
-		result: any;
-	}) => void;
+	// Unique session ID
+	sessionId: string;
+	// WebSocket connection to the agent
+	connection: PartySocket;
 	// Current error if any
 	error: Error | undefined;
 };
 ```
 
+:::note
+The `useChat` hook simplifies the human-in-the-loop pattern by:
+- Combining agent connection and chat management in a single hook
+- Automatically detecting tools that require confirmation based on the `confirm` property
+- Providing a simple `approve(id)` and `deny(id)` API instead of manual `addToolResult()` calls
+- Exposing `pendingToolCalls` to track which tools are awaiting approval
+- Handling both client-side and server-side tool execution automatically
+:::
+
 <TypeScriptExample>
 
 ```tsx
-// Example of using useAgentChat in a React component
-import { useAgentChat } from "agents/ai-react";
-import { useAgent } from "agents/react";
-import { useState } from "react";
+// Example of using useChat in a React component
+import { useChat, type PendingToolCall } from "agents/react";
+import { getToolName, isToolUIPart } from "ai";
 
 function ChatInterface() {
-	// Connect to the chat agent
-	const agentConnection = useAgent({
-		agent: "customer-support",
-		name: "session-12345",
-	});
-
-	// Use the useAgentChat hook with the agent connection
 	const {
 		messages,
-		input,
-		handleInputChange,
-		handleSubmit,
+		sendMessage,
+		pendingToolCalls,
+		approve,
+		deny,
+		clearHistory,
 		isLoading,
 		error,
-		clearHistory,
-	} = useAgentChat({
-		agent: agentConnection,
-		initialMessages: [
-			{ role: "system", content: "You're chatting with our AI assistant." },
-			{ role: "assistant", content: "Hello! How can I help you today?" },
-		],
+		sessionId,
+	} = useChat({
+		agent: "customer-support",
+		name: "session-12345",
+		tools: {
+			getWeather: {
+				description: "Get weather for a city",
+				confirm: true, // Requires approval
+			},
+			getCurrentTime: {
+				description: "Get current time",
+				execute: async () => new Date().toISOString(),
+				// No confirm = auto-executes (default when execute is present)
+			},
+		},
+		onError: (error) => console.error("Chat error:", error),
 	});
 
 	return (
 		<div className="chat-container">
+			<div className="session-info">Session: {sessionId}</div>
+
 			<div className="message-history">
-				{messages.map((message, i) => (
-					<div key={i} className={`message ${message.role}`}>
-						{message.role === "user" ? "👤" : "🤖"} {message.content}
+				{messages.map((message) => (
+					<div key={message.id} className={`message ${message.role}`}>
+						{message.parts?.map((part, i) => {
+							if (part.type === "text") {
+								return <div key={i}>{part.text}</div>;
+							}
+
+							if (isToolUIPart(part)) {
+								const toolCallId = part.toolCallId;
+								const toolName = getToolName(part);
+
+								// Check if this tool is pending approval
+								const pending = pendingToolCalls.find(
+									(p: PendingToolCall) => p.toolCallId === toolCallId,
+								);
+
+								if (pending) {
+									return (
+										<div key={toolCallId} className="tool-approval">
+											<p>Approve {toolName}?</p>
+											<button onClick={() => approve(toolCallId)}>Yes</button>
+											<button onClick={() => deny(toolCallId)}>No</button>
+										</div>
+									);
+								}
+
+								// Show tool results
+								if (part.state === "output-available") {
+									return (
+										<div key={toolCallId}>
+											{toolName}: {JSON.stringify(part.output)}
+										</div>
+									);
+								}
+							}
+							return null;
+						})}
 					</div>
 				))}
 
-				{isLoading && <div className="loading">AI is typing...</div>}
+				{isLoading && <div className="loading">AI is responding...</div>}
 				{error && <div className="error">Error: {error.message}</div>}
 			</div>
 
-			<form onSubmit={handleSubmit} className="message-input">
+			<form
+				onSubmit={(e) => {
+					e.preventDefault();
+					const input = e.currentTarget.message.value;
+					if (input.trim()) {
+						sendMessage({
+							role: "user",
+							parts: [{ type: "text", text: input }],
+						});
+						e.currentTarget.reset();
+					}
+				}}
+			>
 				<input
-					value={input}
-					onChange={handleInputChange}
+					name="message"
 					placeholder="Type your message..."
-					disabled={isLoading}
+					disabled={isLoading || pendingToolCalls.length > 0}
 				/>
-				<button type="submit" disabled={isLoading || !input.trim()}>
+				<button type="submit" disabled={isLoading}>
 					Send
 				</button>
 				<button type="button" onClick={clearHistory}>
@@ -1074,6 +1126,51 @@ function ChatInterface() {
 
 </TypeScriptExample>
 
+##### Tool Configuration
+
+Tools are configured using the `Tool` type with `execute` and `confirm` properties:
+
+```ts
+// Client-side tool with approval
+{
+  execute: async (input) => { /* implementation */ },
+  confirm: true  // Requires approval before execution
+}
+
+// Client-side tool without approval (auto-executes)
+{
+  execute: async (input) => { /* implementation */ },
+  // confirm defaults to false when execute is present
+}
+
+// Server-side tool with approval (default)
+{
+  description: "Tool description",
+  confirm: true  // Requires approval, then runs on server
+}
+
+// Server-side tool without approval
+{
+  description: "Tool description",
+  execute: async (input) => { /* implementation */ },
+  confirm: false  // Auto-executes on server
+}
+```
+
+##### Protocol Constants
+
+The SDK exports `TOOL_CONFIRMATION` constants for the human-in-the-loop protocol:
+
+```ts
+import { TOOL_CONFIRMATION } from "agents/react";
+
+// Protocol constants used between client and server
+TOOL_CONFIRMATION.APPROVED; // "Yes, confirmed."
+TOOL_CONFIRMATION.DENIED; // "No, denied."
+```
+
+These constants are sent between client and server to signal user approval or denial of tool execution.
+
 ### Next steps
 
 - [Build a chat Agent](/agents/getting-started/build-a-chat-agent/) using the Agents SDK and deploy it to Workers.
diff --git a/src/content/docs/agents/guides/human-in-the-loop.mdx b/src/content/docs/agents/guides/human-in-the-loop.mdx
index 70c2ea289980017..c03d5183d2d947b 100644
--- a/src/content/docs/agents/guides/human-in-the-loop.mdx
+++ b/src/content/docs/agents/guides/human-in-the-loop.mdx
@@ -86,76 +86,102 @@ class_name = "HumanInTheLoop"
 tag = "v1"
 new_sqlite_classes = ["HumanInTheLoop"]
 
-````
+```
 </WranglerConfig>
 
 ## 3. Define your tools
 
-Create your tool definitions at `src/tools.ts`. Tools can be configured to either require human confirmation or execute automatically:
+Create your tool definitions at `src/tools.ts`. Tools can be configured to either require human confirmation or execute automatically using the `confirm` and `execute` properties:
 
 ```ts
 import { tool } from "ai";
 import { z } from "zod";
-import type { AITool } from "agents/ai-react";
-
-// Server-side tool that requires confirmation (no execute function)
-const getWeatherInformationTool = tool({
-  description:
-    "Get the current weather information for a specific city. Always use this tool when the user asks about weather.",
-  inputSchema: z.object({
-    city: z.string().describe("The name of the city to get weather for")
-  })
-  // no execute function - requires human approval
-});
+import type { Tool } from "agents/react";
 
-// Client-side tool that requires confirmation
-const getLocalTimeTool = tool({
-  description: "Get the local time for a specified location",
-  inputSchema: z.object({ location: z.string() }),
-  execute: async ({ location }) => {
-    console.log(`Getting local time for ${location}`);
-    await new Promise((res) => setTimeout(res, 2000));
-    return "10am";
-  }
+// Tool implementations
+async function getLocalTime(input: { location: string }): Promise<string> {
+  console.log(`Getting local time for ${input.location}`);
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+  return `The current time in ${input.location} is 10:00 AM`;
+}
+
+export async function getWeatherInformation(input: {
+  city: string;
+}): Promise<string> {
+  console.log(`Getting weather for ${input.city}`);
+  await new Promise((resolve) => setTimeout(resolve, 500));
+  const conditions = ["sunny", "cloudy", "rainy", "snowy"];
+  const condition = conditions[Math.floor(Math.random() * conditions.length)];
+  return `The weather in ${input.city} is ${condition}, 72°F`;
+}
+
+async function getLocalNews(input: { location: string }): Promise<string> {
+  console.log(`Getting news for ${input.location}`);
+  await new Promise((resolve) => setTimeout(resolve, 800));
+  return `Breaking: ${input.location} kittens found drinking tea this weekend!`;
+}
+
+// Schemas
+const locationSchema = z.object({
+  location: z.string().describe("The location to query")
 });
 
-// Server-side tool that does NOT require confirmation
-const getLocalNewsTool = tool({
-  description: "Get local news for a specified location",
-  inputSchema: z.object({ location: z.string() }),
-  execute: async ({ location }) => {
-    console.log(`Getting local news for ${location}`);
-    await new Promise((res) => setTimeout(res, 2000));
-    return `${location} kittens found drinking tea this last weekend`;
-  }
+const citySchema = z.object({
+  city: z.string().describe("The city name")
 });
 
-// Export AI SDK tools for server-side use
-export const tools = {
+// Server tools (AI SDK format for AIChatAgent)
+export const serverTools = {
+  getLocalTime: tool({
+    description: "Get the current local time for a location",
+    inputSchema: locationSchema
+  }),
+
+  getWeatherInformation: tool({
+    description:
+      "Get current weather for a city. Use this when users ask about weather.",
+    inputSchema: citySchema
+  }),
+
+  getLocalNews: tool({
+    description: "Get local news headlines for a location",
+    inputSchema: locationSchema,
+    execute: getLocalNews
+  })
+};
+
+// Client tools (useChat format)
+// The confirm and execute properties determine behavior:
+// - execute + confirm: true = user approves, then runs on client
+// - execute + confirm: false = auto-runs on client (default for execute)
+// - no execute + confirm: true = user approves, then runs on server (default for no execute)
+// - no execute + confirm: false = auto-runs on server
+export const clientTools: Record<string, Tool> = {
   getLocalTime: {
-    description: getLocalTimeTool.description,
-    inputSchema: getLocalTimeTool.inputSchema
+    description: "Get the current local time for a location",
+    execute: getLocalTime,
+    confirm: true
   },
-  getWeatherInformation: getWeatherInformationTool,
-  getLocalNews: getLocalNewsTool
-};
 
-// Export AITool format for client-side use
-export const clientTools: Record<string, AITool> = {
-  getLocalTime: getLocalTimeTool as AITool,
   getWeatherInformation: {
-    description: getWeatherInformationTool.description,
-    inputSchema: getWeatherInformationTool.inputSchema
+    description:
+      "Get current weather for a city. Use this when users ask about weather.",
+    confirm: true
   },
+
   getLocalNews: {
-    description: getLocalNewsTool.description,
-    inputSchema: getLocalNewsTool.inputSchema
+    description: "Get local news headlines for a location",
+    execute: getLocalNews
   }
 };
-````
+```
 
 :::note
-Tools **without** an `execute` function require human approval before they can run. The server will handle execution after the user confirms. Tools **with** an `execute` function can either run automatically or require confirmation based on your configuration.
+Tools use the `confirm` property to control approval behavior:
+- `confirm: true` requires human approval before execution
+- `confirm: false` (or omitted with `execute`) runs automatically
+- Tools without `execute` always run on the server after approval
+- Tools with `execute` run on the client
 :::
 
 ## 4. Create utility functions
@@ -164,22 +190,17 @@ Create helper functions at `src/utils.ts` to handle tool confirmations and proce
 
 ```ts
 import type { UIMessage } from "@ai-sdk/react";
-import type { UIMessageStreamWriter, ToolSet } from "ai";
+import type { ToolSet } from "ai";
 import type { z } from "zod";
+import { TOOL_CONFIRMATION } from "agents";
+import { clientTools } from "./tools";
 
-// Approval constants
-export const APPROVAL = {
-  NO: "No, denied.",
-  YES: "Yes, confirmed."
-} as const;
-
-// Tools that require Human-In-The-Loop confirmation
-export const toolsRequiringConfirmation = [
-  "getLocalTime",
-  "getWeatherInformation"
-];
+type InferToolArgs<T> = T extends { inputSchema: infer S }
+  ? S extends z.ZodType
+    ? z.infer<S>
+    : never
+  : never;
 
-// Type guard to check if part has required properties
 function isToolConfirmationPart(part: unknown): part is {
   type: string;
   output: string;
@@ -195,26 +216,113 @@ function isToolConfirmationPart(part: unknown): part is {
   );
 }
 
-// Check if a message contains tool confirmations
+function getToolsRequiringConfirmation(): string[] {
+  return Object.entries(clientTools)
+    .filter(([_, tool]) => {
+      if (tool.confirm !== undefined) return tool.confirm;
+      return !tool.execute;
+    })
+    .map(([name]) => name);
+}
+
+// Checks if message contains tool confirmations
 export function hasToolConfirmation(message: UIMessage): boolean {
-  return (
-    message?.parts?.some(
-      (part) =>
-        part.type?.startsWith("tool-") &&
-        toolsRequiringConfirmation.includes(part.type?.slice("tool-".length)) &&
-        "output" in part
-    ) || false
-  );
+  if (!message?.parts) return false;
+
+  const toolsRequiringConfirmation = getToolsRequiringConfirmation();
+
+  return message.parts.some((part) => {
+    if (!part.type?.startsWith("tool-")) return false;
+    const toolName = part.type.slice("tool-".length);
+    if (!toolsRequiringConfirmation.includes(toolName)) return false;
+    return "output" in part;
+  });
 }
 
-// Weather tool implementation
-export async function getWeatherInformation(args: unknown): Promise<string> {
-  const { city } = args as { city: string };
-  const conditions = ["sunny", "cloudy", "rainy", "snowy"];
-  return `The weather in ${city} is ${
-    conditions[Math.floor(Math.random() * conditions.length)]
-  }.`;
+// Processes tool confirmations and executes approved tools
+export async function processToolCalls<
+  Tools extends ToolSet,
+  ExecutableTools extends {
+    [K in keyof Tools]?: (
+      args: InferToolArgs<Tools[K]>
+    ) => Promise<string>;
+  }
+>(
+  {
+    messages,
+    tools
+  }: {
+    tools: Tools;
+    messages: UIMessage[];
+  },
+  executeFunctions: {
+    [K in keyof ExecutableTools]: (
+      args: InferToolArgs<Tools[K]>
+    ) => Promise<string>;
+  }
+): Promise<UIMessage[]> {
+  const lastMessage = messages[messages.length - 1];
+  if (!lastMessage.parts) return messages;
+
+  const processedParts = await Promise.all(
+    lastMessage.parts.map(async (part) => {
+      if (!isToolConfirmationPart(part) || !part.type.startsWith("tool-")) {
+        return part;
+      }
+
+      const toolName = part.type.replace("tool-", "");
+      const userResponse = part.output;
+
+      if (!(toolName in executeFunctions)) {
+        return part;
+      }
+
+      let result: string;
+
+      if (userResponse === TOOL_CONFIRMATION.APPROVED) {
+        const executeFunc =
+          executeFunctions[toolName as keyof typeof executeFunctions];
+        const toolDef = tools[toolName as keyof Tools];
+
+        if (!executeFunc) {
+          result = "Error: No execute function found for tool";
+        } else {
+          try {
+            const toolInput = part.input ?? {};
+
+            // Validate input against schema if available
+            if (toolDef && "inputSchema" in toolDef && toolDef.inputSchema) {
+              const schema = toolDef.inputSchema as z.ZodType;
+              const parsed = schema.safeParse(toolInput);
+              if (!parsed.success) {
+                result = `Error: Invalid input - ${parsed.error.message}`;
+              } else {
+                result = await executeFunc(parsed.data);
+              }
+            } else {
+              result = await (
+                executeFunc as (args: unknown) => Promise<string>
+              )(toolInput);
+            }
+          } catch (err) {
+            result = `Error: ${err instanceof Error ? err.message : String(err)}`;
+          }
+        }
+      } else if (userResponse === TOOL_CONFIRMATION.DENIED) {
+        result = "Tool execution denied by user";
+      } else {
+        // Custom denial reason
+        result = `Tool execution denied: ${userResponse}`;
+      }
+
+      return { ...part, output: result };
+    })
+  );
+
+  return [...messages.slice(0, -1), { ...lastMessage, parts: processedParts }];
 }
+
+export { getWeatherInformation } from "./tools";
 ```
 
 ## 5. Create your Agent
@@ -227,18 +335,12 @@ import { routeAgentRequest } from "agents";
 import { AIChatAgent } from "agents/ai-chat-agent";
 import {
   convertToModelMessages,
-  createUIMessageStream,
-  createUIMessageStreamResponse,
   type StreamTextOnFinishCallback,
   streamText,
   stepCountIs
 } from "ai";
-import { tools } from "./tools";
-import {
-  processToolCalls,
-  hasToolConfirmation,
-  getWeatherInformation
-} from "./utils";
+import { serverTools, getWeatherInformation } from "./tools";
+import { processToolCalls, hasToolConfirmation } from "./utils";
 
 type Env = {
   OPENAI_API_KEY: string;
@@ -249,47 +351,68 @@ export class HumanInTheLoop extends AIChatAgent<Env> {
     const startTime = Date.now();
     const lastMessage = this.messages[this.messages.length - 1];
 
-    // Check if the last message contains tool confirmations
+    // Check if this is a tool confirmation response
     if (hasToolConfirmation(lastMessage)) {
-      // Process tool confirmations using UI stream
-      const stream = createUIMessageStream({
-        execute: async ({ writer }) => {
-          await processToolCalls(
-            { writer, messages: this.messages, tools },
-            { getWeatherInformation }
-          );
-        }
+      // Process the confirmation - execute server-side tools if approved
+      const updatedMessages = await processToolCalls(
+        { messages: this.messages, tools: serverTools },
+        { getWeatherInformation } // Server-side tool implementations
+      );
+
+      // Update and persist messages with tool results
+      this.messages = updatedMessages;
+      await this.persistMessages(this.messages);
+
+      // Continue the conversation so LLM can respond to the tool result
+      const result = streamText({
+        messages: convertToModelMessages(this.messages),
+        model: openai("gpt-4o"),
+        onFinish,
+        tools: serverTools,
+        stopWhen: stepCountIs(5)
+      });
+
+      return result.toUIMessageStreamResponse({
+        messageMetadata: this.createMetadata(startTime)
       });
-      return createUIMessageStreamResponse({ stream });
     }
 
-    // Normal message flow - stream AI response
+    // Normal message - let LLM respond (may trigger tool calls)
     const result = streamText({
       messages: convertToModelMessages(this.messages),
       model: openai("gpt-4o"),
       onFinish,
-      tools,
+      tools: serverTools,
       stopWhen: stepCountIs(5)
     });
 
     return result.toUIMessageStreamResponse({
-      messageMetadata: ({ part }) => {
-        if (part.type === "start") {
-          return {
-            model: "gpt-4o",
-            createdAt: Date.now(),
-            messageCount: this.messages.length
-          };
-        }
-        if (part.type === "finish") {
-          return {
-            responseTime: Date.now() - startTime,
-            totalTokens: part.totalUsage?.totalTokens
-          };
-        }
-      }
+      messageMetadata: this.createMetadata(startTime)
     });
   }
+
+  // Creates metadata callback for stream responses (optional)
+  private createMetadata(startTime: number) {
+    return ({
+      part
+    }: {
+      part: { type: string; totalUsage?: { totalTokens?: number } };
+    }) => {
+      if (part.type === "start") {
+        return {
+          model: "gpt-4o",
+          createdAt: Date.now(),
+          messageCount: this.messages.length
+        };
+      }
+      if (part.type === "finish") {
+        return {
+          responseTime: Date.now() - startTime,
+          totalTokens: part.totalUsage?.totalTokens
+        };
+      }
+    };
+  }
 }
 
 export default {
@@ -304,15 +427,14 @@ export default {
 
 ## 6. Build the React frontend
 
-Create your React chat interface at `src/app.tsx`:
+Create your React chat interface at `src/app.tsx` using the unified `useChat` hook:
 
 ```tsx
 import type { UIMessage as Message } from "ai";
 import { getToolName, isToolUIPart } from "ai";
 import { clientTools } from "./tools";
-import { APPROVAL, toolsRequiringConfirmation } from "./utils";
-import { useAgentChat, type AITool } from "agents/ai-react";
-import { useAgent } from "agents/react";
+import "./styles.css";
+import { useChat, type PendingToolCall } from "agents/react";
 import { useCallback, useEffect, useRef, useState } from "react";
 
 export default function Chat() {
@@ -322,15 +444,21 @@ export default function Chat() {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, []);
 
-  const agent = useAgent({
-    agent: "human-in-the-loop"
-  });
-
-  const { messages, sendMessage, addToolResult, clearHistory } = useAgentChat({
-    agent,
-    experimental_automaticToolResolution: true,
-    toolsRequiringConfirmation,
-    tools: clientTools satisfies Record<string, AITool>
+  useEffect(() => {
+    scrollToBottom();
+  }, [scrollToBottom]);
+
+  const {
+    messages,
+    sendMessage,
+    pendingToolCalls,
+    approve,
+    deny,
+    clearHistory,
+    sessionId
+  } = useChat({
+    agent: "human-in-the-loop",
+    tools: clientTools
   });
 
   const [input, setInput] = useState("");
@@ -346,20 +474,21 @@ export default function Chat() {
     [input, sendMessage]
   );
 
-  // Scroll to bottom when messages change
   useEffect(() => {
     messages.length > 0 && scrollToBottom();
   }, [messages, scrollToBottom]);
 
-  // Check if there's a pending tool confirmation
-  const pendingToolCallConfirmation = messages.some((m: Message) =>
-    m.parts?.some(
-      (part) => isToolUIPart(part) && part.state === "input-available"
-    )
-  );
+  const hasPendingToolCalls = pendingToolCalls.length > 0;
 
   return (
-    <div className="chat-container">
+    <>
+      <div className="header">
+        <button type="button" onClick={clearHistory} className="clear-history">
+          Clear History
+        </button>
+        <span className="session-id">Session: {sessionId || "Connecting..."}</span>
+      </div>
+
       <div className="messages-wrapper">
         {messages?.map((m: Message) => (
           <div key={m.id} className="message">
@@ -377,11 +506,11 @@ export default function Chat() {
                     const toolCallId = part.toolCallId;
                     const toolName = getToolName(part);
 
-                    // Show tool results for automatic tools
+                    // Show tool results
                     if (part.state === "output-available") {
                       return (
                         <div key={toolCallId} className="tool-invocation">
-                          <span className="tool-name">{toolName}</span>{" "}
+                          <span className="dynamic-info">{toolName}</span>{" "}
                           returned:{" "}
                           <span className="tool-result">
                             {JSON.stringify(part.output, null, 2)}
@@ -390,14 +519,18 @@ export default function Chat() {
                       );
                     }
 
-                    // Render confirmation UI for tools requiring approval
+                    // Show pending tool calls
                     if (part.state === "input-available") {
-                      const tool = clientTools[toolName];
+                      // Check if this tool is in pendingToolCalls
+                      const pending = pendingToolCalls.find(
+                        (p: PendingToolCall) => p.toolCallId === toolCallId
+                      );
 
-                      if (!toolsRequiringConfirmation.includes(toolName)) {
+                      // Not in pending = auto-executing
+                      if (!pending) {
                         return (
                           <div key={toolCallId} className="tool-invocation">
-                            <span className="tool-name">{toolName}</span>{" "}
+                            <span className="dynamic-info">{toolName}</span>{" "}
                             executing...
                           </div>
                         );
@@ -405,8 +538,8 @@ export default function Chat() {
 
                       return (
                         <div key={toolCallId} className="tool-invocation">
-                          Run <span className="tool-name">{toolName}</span> with
-                          args:{" "}
+                          Run <span className="dynamic-info">{toolName}</span>{" "}
+                          with args:{" "}
                           <span className="tool-args">
                             {JSON.stringify(part.input)}
                           </span>
@@ -414,34 +547,16 @@ export default function Chat() {
                             <button
                               type="button"
                               className="button-approve"
-                              onClick={async () => {
-                                const output = tool.execute
-                                  ? await tool.execute(part.input)
-                                  : APPROVAL.YES;
-                                addToolResult({
-                                  tool: toolName,
-                                  output,
-                                  toolCallId
-                                });
-                              }}
+                              onClick={() => approve(toolCallId)}
                             >
-                              Approve
+                              Yes
                             </button>
                             <button
                               type="button"
                               className="button-reject"
-                              onClick={() => {
-                                const output = tool.execute
-                                  ? "User declined to run tool"
-                                  : APPROVAL.NO;
-                                addToolResult({
-                                  tool: toolName,
-                                  output,
-                                  toolCallId
-                                });
-                              }}
+                              onClick={() => deny(toolCallId)}
                             >
-                              Reject
+                              No
                             </button>
                           </div>
                         </div>
@@ -458,18 +573,26 @@ export default function Chat() {
 
       <form onSubmit={handleSubmit}>
         <input
-          disabled={pendingToolCallConfirmation}
+          disabled={hasPendingToolCalls}
           className="chat-input"
           value={input}
           placeholder="Say something..."
           onChange={(e) => setInput(e.target.value)}
         />
       </form>
-    </div>
+    </>
   );
 }
 ```
 
+:::note
+The `useChat` hook simplifies the human-in-the-loop pattern by:
+- Automatically detecting tools that require confirmation based on the `confirm` property
+- Providing a simple `approve(id)` and `deny(id)` API instead of manual `addToolResult()` calls
+- Exposing `pendingToolCalls` to track which tools are awaiting approval
+- Handling both client-side and server-side tool execution automatically
+:::
+
 ## 7. Test locally
 
 Start your development server:
@@ -485,8 +608,8 @@ Your agent is now running at `http://localhost:8787`.
 1. Open `http://localhost:8787` in your browser.
 2. Ask the agent about the weather: "What's the weather in San Francisco?"
 3. The agent will attempt to call the `getWeatherInformation` tool.
-4. You will see an approval prompt with **Approve** and **Reject** buttons.
-5. Click **Approve** to allow the tool execution, or **Reject** to deny it.
+4. You will see an approval prompt with **Yes** and **No** buttons.
+5. Click **Yes** to allow the tool execution, or **No** to deny it.
 6. The agent will respond with the result or acknowledge the rejection.
 
 ### Test automatic tools
@@ -521,18 +644,34 @@ https://human-in-the-loop.your-account.workers.dev
 The human-in-the-loop pattern works by intercepting tool calls before execution:
 
 1. **Tool invocation**: The AI decides to call a tool based on user input.
-2. **Approval check**: The system checks if the tool requires human confirmation.
-3. **Confirmation prompt**: If approval is required, the UI displays the tool name and arguments with Approve/Reject buttons.
-4. **User decision**: The user reviews the action and makes a decision.
-5. **Execution or rejection**: Based on the user's choice, the tool either executes or returns a rejection message.
+2. **Approval check**: The `useChat` hook checks if the tool has `confirm: true`.
+3. **Confirmation prompt**: If approval is required, the UI displays the tool name and arguments with Yes/No buttons.
+4. **User decision**: The user reviews the action by clicking `approve(toolCallId)` or `deny(toolCallId)`.
+5. **Execution or rejection**: Based on the user's choice, the tool either executes (client-side with `execute`, or server-side without) or returns a rejection message using the `TOOL_CONFIRMATION` protocol constants.
 
-### Message streaming with confirmations
+### Simplified API with useChat
 
-The agent uses the Vercel AI SDK's streaming capabilities:
+The new `useChat` hook replaces the previous two-hook pattern (`useAgent` + `useAgentChat`) with a single, declarative API:
 
-- `createUIMessageStream` creates a stream for processing tool confirmations.
-- `streamText` handles normal AI responses with tool calls.
-- The `hasToolConfirmation` function detects when a message contains a tool confirmation response.
+```tsx
+// Old pattern (deprecated)
+const agent = useAgent({ agent: "my-agent" });
+const { messages, sendMessage, addToolResult } = useAgentChat({
+  agent,
+  tools: clientTools,
+  toolsRequiringConfirmation: ["toolA", "toolB"]
+});
+// Manual approval handling
+addToolResult({ tool: "toolA", output: "Yes, confirmed.", toolCallId });
+
+// New pattern (current)
+const { messages, sendMessage, approve, deny, pendingToolCalls } = useChat({
+  agent: "my-agent",
+  tools: clientTools // confirm property defines approval behavior
+});
+// Simple approval handling
+approve(toolCallId);
+```
 
 ### State persistence
 
@@ -546,38 +685,38 @@ Your agent uses [Durable Objects](/durable-objects/) to maintain conversation st
 
 ### Add more tools requiring confirmation
 
-Add new tools to the `toolsRequiringConfirmation` array in `src/utils.ts`:
+Add the `confirm: true` property to tools in `src/tools.ts`:
 
 ```ts
-export const toolsRequiringConfirmation = [
-  "getLocalTime",
-  "getWeatherInformation",
-  "sendEmail", // Add your new tools here
-  "makePurchase"
-];
+export const clientTools: Record<string, Tool> = {
+  sendEmail: {
+    description: "Send an email to a recipient",
+    confirm: true // Requires approval
+  },
+  makePurchase: {
+    description: "Make a purchase",
+    execute: executePurchase,
+    confirm: true // Requires approval even with execute function
+  }
+};
 ```
 
 ### Implement custom tool handlers
 
-For server-side tools requiring confirmation, add execute functions in your agent:
+For server-side tools requiring confirmation, add execute functions in `src/utils.ts`:
 
 ```ts
-if (hasToolConfirmation(lastMessage)) {
-  const stream = createUIMessageStream({
-    execute: async ({ writer }) => {
-      await processToolCalls(
-        { writer, messages: this.messages, tools },
-        {
-          getWeatherInformation,
-          sendEmail: async ({ to, subject, body }) => {
-            // Your email sending logic
-            return `Email sent to ${to}`;
-          }
-        }
-      );
+export async function processToolCalls(
+  { messages, tools },
+  {
+    getWeatherInformation,
+    sendEmail: async ({ to, subject, body }) => {
+      // Your email sending logic
+      return `Email sent to ${to}`;
     }
-  });
-  return createUIMessageStreamResponse({ stream });
+  }
+) {
+  // Processing logic
 }
 ```
 
@@ -586,7 +725,7 @@ if (hasToolConfirmation(lastMessage)) {
 Enhance the confirmation interface with more context:
 
 ```tsx
-if (part.state === "input-available") {
+if (pending) {
   return (
     <div className="tool-approval-card">
       <h3>Action Required</h3>
@@ -595,11 +734,11 @@ if (part.state === "input-available") {
       </p>
       <pre>{JSON.stringify(part.input, null, 2)}</pre>
       <div className="approval-buttons">
-        <button className="approve" onClick={() => handleApprove(part)}>
-          ✓ Approve
+        <button className="approve" onClick={() => approve(toolCallId)}>
+          Approve
         </button>
-        <button className="reject" onClick={() => handleReject(part)}>
-          ✗ Reject
+        <button className="reject" onClick={() => deny(toolCallId)}>
+          Reject
         </button>
       </div>
     </div>
@@ -607,6 +746,18 @@ if (part.state === "input-available") {
 }
 ```
 
+### Custom denial messages
+
+Provide custom denial reasons:
+
+```tsx
+<button
+  onClick={() => deny(toolCallId, "Budget limit exceeded")}
+>
+  Deny
+</button>
+```
+
 ### Use different LLM providers
 
 Replace OpenAI with [Workers AI](/workers-ai/):
@@ -622,7 +773,7 @@ export class HumanInTheLoop extends AIChatAgent<Env> {
       messages: convertToModelMessages(this.messages),
       model: workersai("@cf/meta/llama-3-8b-instruct"),
       onFinish,
-      tools
+      tools: serverTools
     });
 
     return result.toUIMessageStreamResponse();
@@ -634,9 +785,10 @@ export class HumanInTheLoop extends AIChatAgent<Env> {
 
 - **Define clear approval workflows** — Only require confirmation for actions with meaningful consequences (payments, emails, data changes).
 - **Provide detailed context** — Show users exactly what the tool will do, including all arguments.
+- **Use declarative tool configuration** — Set `confirm: true` on tools requiring approval instead of maintaining separate lists.
 - **Implement timeouts** — Consider auto-rejecting tools after a reasonable timeout period.
 - **Handle connection drops** — Ensure the UI can recover if the WebSocket connection is interrupted.
-- **Log all decisions** — Track approval/rejection decisions for audit trails.
+- **Log all decisions** — Track approval and rejection decisions for audit trails.
 - **Graceful degradation** — Provide fallback behavior if tools are rejected.
 
 ## Next steps