diff --git a/apps/dev-playground/client/src/routes/agent.route.tsx b/apps/dev-playground/client/src/routes/agent.route.tsx
index 6762a1a38..09d5fce57 100644
--- a/apps/dev-playground/client/src/routes/agent.route.tsx
+++ b/apps/dev-playground/client/src/routes/agent.route.tsx
@@ -1,47 +1,14 @@
 import { getPluginClientConfig } from "@databricks/appkit-ui/js";
 import { Button } from "@databricks/appkit-ui/react";
+import { ChatInput, Conversation } from "@databricks/appkit-ui/react/chat";
 import { createFileRoute } from "@tanstack/react-router";
-import { useCallback, useEffect, useRef, useState } from "react";
+import type { UIMessage, UIMessageChunk } from "ai";
+import { useCallback, useRef, useState } from "react";
 
 export const Route = createFileRoute("/agent")({
   component: AgentRoute,
 });
 
-interface SSEEvent {
-  type: string;
-  delta?: string;
-  item_id?: string;
-  item?: {
-    type?: string;
-    id?: string;
-    call_id?: string;
-    name?: string;
-    arguments?: string;
-    output?: string;
-    status?: string;
-  };
-  content?: string;
-  data?: Record<string, unknown>;
-  error?: string;
-  sequence_number?: number;
-  output_index?: number;
-  approval_id?: string;
-  stream_id?: string;
-  tool_name?: string;
-  args?: unknown;
-  annotations?: {
-    readOnly?: boolean;
-    destructive?: boolean;
-    idempotent?: boolean;
-  };
-}
-
-interface ChatMessage {
-  id: number;
-  role: "user" | "assistant";
-  content: string;
-}
-
 interface PendingApproval {
   approvalId: string;
   streamId: string;
@@ -136,43 +103,26 @@ function useAutocomplete(enabled: boolean) {
   };
 }
 
+// Joins all text parts; a message can have multiple if the agent
+// reopens text after a tool call.
+function messageBodyText(message: UIMessage): string {
+  let body = "";
+  for (const part of message.parts) {
+    if (part.type === "text") body += part.text;
+  }
+  return body;
+}
+
 function AgentRoute() {
-  const [messages, setMessages] = useState<ChatMessage[]>([]);
-  const [events, setEvents] = useState<AgentEvent[]>([]);
-  const [input, setInput] = useState("");
-  const [isLoading, setIsLoading] = useState(false);
-  const [threadId, setThreadId] = useState<string | null>(null);
   const [pendingApprovals, setPendingApprovals] = useState<PendingApproval[]>(
     [],
   );
-
-  const decideApproval = useCallback(
-    async (approvalId: string, decision: "approve" | "deny") => {
-      const approval = pendingApprovals.find(
-        (a) => a.approvalId === approvalId,
-      );
-      if (!approval) return;
-      try {
-        await fetch("/api/agents/approve", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({
-            streamId: approval.streamId,
-            approvalId,
-            decision,
-          }),
-        });
-      } finally {
-        setPendingApprovals((prev) =>
-          prev.filter((a) => a.approvalId !== approvalId),
-        );
-      }
-    },
-    [pendingApprovals],
-  );
-  const messagesEndRef = useRef<HTMLDivElement>(null);
+  // Raw chunk log for the debug panel; ids keep React keys stable.
+  const [streamLog, setStreamLog] = useState<
+    Array<{ id: number; chunk: UIMessageChunk }>
+  >([]);
+  const nextChunkIdRef = useRef(0);
   const inputRef = useRef<HTMLTextAreaElement>(null);
-  const msgIdCounter = useRef(0);
 
   const agentConfig = getPluginClientConfig<{
     agents?: string[];
@@ -187,381 +137,394 @@ function AgentRoute() {
     clear: clearSuggestion,
   } = useAutocomplete(hasAutocomplete);
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: scroll on new messages
-  useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [messages]);
-
-  const sendMessage = useCallback(async () => {
-    if (!input.trim() || isLoading) return;
-
-    clearSuggestion();
-    const userMessage = input.trim();
-    setInput("");
-    setMessages((prev) => [
-      ...prev,
-      { id: ++msgIdCounter.current, role: "user", content: userMessage },
-    ]);
-    setEvents([]);
-    setIsLoading(true);
-
-    try {
-      const response = await fetch("/api/agents/chat", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          message: userMessage,
-          ...(threadId && { threadId }),
-        }),
-      });
-
-      if (!response.ok) {
-        const error = await response.json();
-        setMessages((prev) => [
-          ...prev,
-          {
-            id: ++msgIdCounter.current,
-            role: "assistant",
-            content: `Error: ${error.error}`,
-          },
-        ]);
-        return;
-      }
-
-      const reader = response.body?.getReader();
-      if (!reader) return;
-
-      const decoder = new TextDecoder();
-      let assistantContent = "";
-      let buffer = "";
-
-      while (true) {
-        const { done, value } = await reader.read();
-        if (done) break;
-
-        buffer += decoder.decode(value, { stream: true });
-        const lines = buffer.split("\n");
-        buffer = lines.pop() ?? "";
-
-        for (const line of lines) {
-          if (!line.startsWith("data: ")) continue;
-          const data = line.slice(6).trim();
-          if (!data || data === "[DONE]") continue;
-
-          try {
-            const event: SSEEvent = JSON.parse(data);
-            if (!event.type) continue;
-            setEvents((prev) => [...prev, event]);
-
-            if (
-              event.type === "appkit.approval_pending" &&
-              event.approval_id &&
-              event.stream_id &&
-              event.tool_name
-            ) {
-              setPendingApprovals((prev) => [
-                ...prev,
-                {
-                  approvalId: event.approval_id as string,
-                  streamId: event.stream_id as string,
-                  toolName: event.tool_name as string,
-                  args: event.args,
-                },
-              ]);
-            }
-            if (event.type === "appkit.metadata" && event.data?.threadId) {
-              setThreadId(event.data.threadId as string);
-            }
-
-            if (event.type === "response.output_text.delta" && event.delta) {
-              assistantContent += event.delta;
-              setMessages((prev) => {
-                const updated = [...prev];
-                const last = updated[updated.length - 1];
-                if (last?.role === "assistant") {
-                  updated[updated.length - 1] = {
-                    ...last,
-                    content: assistantContent,
-                  };
-                } else {
-                  updated.push({
-                    id: ++msgIdCounter.current,
-                    role: "assistant",
-                    content: assistantContent,
-                  });
-                }
-                return updated;
-              });
-            }
-          } catch {
-            // skip malformed events
-          }
-        }
+  const decideApproval = useCallback(
+    async (
+      approvalId: string,
+      streamId: string,
+      decision: "approve" | "deny",
+    ) => {
+      try {
+        await fetch("/api/agents/approve", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ streamId, approvalId, decision }),
+        });
+      } finally {
+        setPendingApprovals((prev) =>
+          prev.filter((a) => a.approvalId !== approvalId),
+        );
       }
-    } catch (err) {
-      setMessages((prev) => [
-        ...prev,
-        {
-          id: ++msgIdCounter.current,
-          role: "assistant",
-          content: `Error: ${err instanceof Error ? err.message : "Unknown error"}`,
-        },
-      ]);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [input, isLoading, threadId, clearSuggestion]);
-
-  const handleInputChange = (value: string) => {
-    setInput(value);
-    requestSuggestion(value);
-  };
-
-  const acceptSuggestion = () => {
-    if (!suggestion) return;
-    const newValue = input + suggestion;
-    setInput(newValue);
-    clearSuggestion();
-    inputRef.current?.focus();
-  };
+    },
+    [],
+  );
 
   return (
     <div className="min-h-screen bg-background">
       <div className="max-w-7xl mx-auto px-6 py-12">
-        <div className="mb-8 flex items-end justify-between">
-          <div>
-            <h1 className="text-3xl font-bold mb-2">Agent Chat</h1>
-            <p className="text-base text-muted-foreground">
-              AI agent with auto-discovered tools from all AppKit plugins.
-              {threadId && (
-                <span className="ml-2 text-xs font-mono opacity-60">
-                  Thread: {threadId.slice(0, 8)}...
-                </span>
-              )}
-            </p>
-          </div>
-          {hasAutocomplete && (
-            <span className="text-xs text-muted-foreground bg-muted px-2 py-1 rounded">
-              Autocomplete enabled
-            </span>
-          )}
-        </div>
-
-        <div className="flex gap-6 h-[700px]">
-          <div className="flex-1 flex flex-col border rounded-lg bg-card min-w-0">
-            <div className="flex-1 overflow-y-auto p-4 space-y-4">
-              {messages.length === 0 && (
-                <div className="text-center text-muted-foreground py-20">
-                  <p className="text-lg">
-                    Send a message to start a conversation
-                  </p>
-                  <p className="text-sm mt-2">
-                    The agent can use analytics, files, genie, and lakebase
-                    tools.
-                    {hasAutocomplete && " Start typing for inline suggestions."}
-                  </p>
-                </div>
-              )}
-
-              {messages.map((msg) => (
-                <div
-                  key={msg.id}
-                  className={`flex ${msg.role === "user" ? "justify-end" : "justify-start"}`}
-                >
-                  <div
-                    className={`max-w-[85%] rounded-lg px-4 py-2 ${
-                      msg.role === "user"
-                        ? "bg-primary text-primary-foreground"
-                        : "bg-muted"
-                    }`}
-                  >
-                    <p className="whitespace-pre-wrap text-sm">{msg.content}</p>
+        <Conversation
+          api="/api/agents/chat"
+          onData={(part) => {
+            if (part.type === "data-approval-pending") {
+              const payload = part.data as PendingApproval;
+              setPendingApprovals((prev) =>
+                prev.some((p) => p.approvalId === payload.approvalId)
+                  ? prev
+                  : [...prev, payload],
+              );
+            }
+          }}
+          onStreamPart={(chunk) =>
+            setStreamLog((prev) => [
+              ...prev,
+              { id: nextChunkIdRef.current++, chunk },
+            ])
+          }
+        >
+          {({
+            id: chatId,
+            messages,
+            status,
+            error,
+            sendMessage,
+            stop,
+            containerRef,
+          }) => {
+            const isLoading = status === "submitted" || status === "streaming";
+            // Show "Thinking..." until the assistant has produced visible
+            // text — the assistant message stub appears immediately on `start`.
+            const lastMessage = messages[messages.length - 1];
+            const lastAssistantHasText =
+              lastMessage?.role === "assistant" &&
+              messageBodyText(lastMessage).length > 0;
+            const showThinking =
+              isLoading &&
+              pendingApprovals.length === 0 &&
+              !lastAssistantHasText;
+
+            return (
+              <>
+                <div className="mb-8 flex items-end justify-between">
+                  <div>
+                    <h1 className="text-3xl font-bold mb-2">Agent Chat</h1>
+                    <p className="text-base text-muted-foreground">
+                      AI agent with auto-discovered tools from all plugins.
+                      <span className="ml-2 text-xs font-mono opacity-60">
+                        Chat: {chatId.slice(0, 8)}...
+                      </span>
+                    </p>
                   </div>
+                  {hasAutocomplete && (
+                    <span className="text-xs text-muted-foreground bg-muted px-2 py-1 rounded">
+                      Autocomplete enabled
+                    </span>
+                  )}
                 </div>
-              ))}
-
-              {pendingApprovals.map((approval) => (
-                <div key={approval.approvalId} className="flex justify-start">
-                  <div className="max-w-[80%] rounded-lg border border-orange-500/60 bg-orange-500/10 px-4 py-3">
-                    <div className="mb-2 flex items-center gap-2">
-                      <span className="rounded bg-orange-600 px-2 py-0.5 text-xs font-semibold uppercase tracking-wide text-white">
-                        Destructive tool — approval required
-                      </span>
-                    </div>
-                    <div className="text-sm">
-                      <strong>{approval.toolName}</strong>
-                      <pre className="mt-1 max-h-52 overflow-auto whitespace-pre-wrap break-words rounded bg-background p-2 text-xs">
-                        {JSON.stringify(approval.args, null, 2)}
-                      </pre>
+
+                <div className="flex gap-6 h-[700px]">
+                  <div className="flex-1 flex flex-col border rounded-lg bg-card min-w-0">
+                    <div
+                      ref={containerRef}
+                      className="flex-1 overflow-y-auto p-4 space-y-4"
+                    >
+                      {messages.length === 0 && (
+                        <div className="text-center text-muted-foreground py-20">
+                          <p className="text-lg">
+                            Send a message to start a conversation
+                          </p>
+                          <p className="text-sm mt-2">
+                            The agent can use analytics, files, genie, and
+                            lakebase tools.
+                            {hasAutocomplete &&
+                              " Start typing for inline suggestions."}
+                          </p>
+                        </div>
+                      )}
+
+                      {messages.map((msg) => {
+                        const body = messageBodyText(msg);
+                        if (!body) return null;
+                        return (
+                          <div
+                            key={msg.id}
+                            className={`flex ${
+                              msg.role === "user"
+                                ? "justify-end"
+                                : "justify-start"
+                            }`}
+                          >
+                            <div
+                              className={`max-w-[85%] rounded-lg px-4 py-2 ${
+                                msg.role === "user"
+                                  ? "bg-primary text-primary-foreground"
+                                  : "bg-muted"
+                              }`}
+                            >
+                              <p className="whitespace-pre-wrap text-sm">
+                                {body}
+                              </p>
+                            </div>
+                          </div>
+                        );
+                      })}
+
+                      {pendingApprovals.map((approval) => (
+                        <div
+                          key={approval.approvalId}
+                          className="flex justify-start"
+                        >
+                          <div className="max-w-[80%] rounded-lg border border-orange-500/60 bg-orange-500/10 px-4 py-3">
+                            <div className="mb-2 flex items-center gap-2">
+                              <span className="rounded bg-orange-600 px-2 py-0.5 text-xs font-semibold uppercase tracking-wide text-white">
+                                Destructive tool — approval required
+                              </span>
+                            </div>
+                            <div className="text-sm">
+                              <strong>{approval.toolName}</strong>
+                              <pre className="mt-1 max-h-52 overflow-auto whitespace-pre-wrap break-words rounded bg-background p-2 text-xs">
+                                {JSON.stringify(approval.args, null, 2)}
+                              </pre>
+                            </div>
+                            <div className="mt-3 flex justify-end gap-2">
+                              <Button
+                                type="button"
+                                variant="outline"
+                                size="sm"
+                                onClick={() =>
+                                  decideApproval(
+                                    approval.approvalId,
+                                    approval.streamId,
+                                    "deny",
+                                  )
+                                }
+                              >
+                                Deny
+                              </Button>
+                              <Button
+                                type="button"
+                                size="sm"
+                                onClick={() =>
+                                  decideApproval(
+                                    approval.approvalId,
+                                    approval.streamId,
+                                    "approve",
+                                  )
+                                }
+                              >
+                                Approve
+                              </Button>
+                            </div>
+                          </div>
+                        </div>
+                      ))}
+
+                      {showThinking && (
+                        <div className="flex justify-start">
+                          <div className="bg-muted rounded-lg px-4 py-2">
+                            <p className="text-sm text-muted-foreground animate-pulse">
+                              Thinking...
+                            </p>
+                          </div>
+                        </div>
+                      )}
+
+                      {error && (
+                        <div className="flex justify-start">
+                          <div className="max-w-[85%] rounded-lg border border-red-500/60 bg-red-500/10 px-4 py-2">
+                            <p className="text-sm">Error: {error.message}</p>
+                          </div>
+                        </div>
+                      )}
                     </div>
-                    <div className="mt-3 flex justify-end gap-2">
-                      <Button
-                        type="button"
-                        variant="outline"
-                        size="sm"
-                        onClick={() =>
-                          decideApproval(approval.approvalId, "deny")
-                        }
-                      >
-                        Deny
-                      </Button>
-                      <Button
-                        type="button"
-                        size="sm"
-                        onClick={() =>
-                          decideApproval(approval.approvalId, "approve")
-                        }
+
+                    <div className="border-t p-4">
+                      {hasAutocomplete && (suggestion || isAutocompleting) && (
+                        <div className="flex items-center gap-2 mb-2 text-xs text-muted-foreground">
+                          {isAutocompleting && (
+                            <span className="animate-pulse">Thinking...</span>
+                          )}
+                          {suggestion && (
+                            <span>
+                              Press{" "}
+                              <kbd className="px-1.5 py-0.5 rounded bg-muted border text-[10px] font-mono">
+                                Tab
+                              </kbd>{" "}
+                              to accept suggestion
+                            </span>
+                          )}
+                        </div>
+                      )}
+                      <ChatInput
+                        onSubmit={(message) => {
+                          // Cancel pending autocomplete so its debounced
+                          // request doesn't fire on stale input.
+                          clearSuggestion();
+                          return sendMessage(message);
+                        }}
+                        status={status}
+                        stop={stop}
                       >
-                        Approve
-                      </Button>
+                        {({
+                          value,
+                          onChange,
+                          submit,
+                          isStreaming,
+                          canSubmit,
+                          handleKeyDown,
+                        }) => (
+                          <form onSubmit={submit} className="flex gap-2">
+                            <div className="flex-1 relative">
+                              <div
+                                aria-hidden
+                                className="absolute inset-0 px-3 py-2 text-sm pointer-events-none whitespace-pre-wrap break-words overflow-hidden"
+                              >
+                                <span className="invisible">{value}</span>
+                                <span className="text-muted-foreground/40">
+                                  {suggestion}
+                                </span>
+                              </div>
+                              <textarea
+                                ref={inputRef}
+                                value={value}
+                                onChange={(e) => {
+                                  onChange(e.target.value);
+                                  requestSuggestion(e.target.value);
+                                }}
+                                onKeyDown={(e) => {
+                                  if (e.key === "Tab" && suggestion) {
+                                    e.preventDefault();
+                                    onChange(value + suggestion);
+                                    clearSuggestion();
+                                    inputRef.current?.focus();
+                                    return;
+                                  }
+                                  if (e.key === "Escape" && suggestion) {
+                                    clearSuggestion();
+                                    return;
+                                  }
+                                  // Don't submit while a suggestion is shown.
+                                  if (suggestion) return;
+                                  handleKeyDown(e);
+                                }}
+                                placeholder="Ask a question..."
+                                disabled={isStreaming}
+                                rows={1}
+                                className="w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50 resize-none"
+                              />
+                            </div>
+                            {isStreaming ? (
+                              <Button
+                                type="button"
+                                variant="outline"
+                                onClick={stop}
+                                className="self-end"
+                              >
+                                Stop
+                              </Button>
+                            ) : (
+                              <Button
+                                type="submit"
+                                disabled={!canSubmit}
+                                className="self-end"
+                              >
+                                Send
+                              </Button>
+                            )}
+                          </form>
+                        )}
+                      </ChatInput>
                     </div>
                   </div>
-                </div>
-              ))}
-
-              {isLoading &&
-                pendingApprovals.length === 0 &&
-                messages[messages.length - 1]?.role === "user" && (
-                  <div className="flex justify-start">
-                    <div className="bg-muted rounded-lg px-4 py-2">
-                      <p className="text-sm text-muted-foreground animate-pulse">
-                        Thinking...
-                      </p>
-                    </div>
-                  </div>
-                )}
-
-              <div ref={messagesEndRef} />
-            </div>
 
-            <div className="border-t p-4">
-              {hasAutocomplete && (suggestion || isAutocompleting) && (
-                <div className="flex items-center gap-2 mb-2 text-xs text-muted-foreground">
-                  {isAutocompleting && (
-                    <span className="animate-pulse">Thinking...</span>
-                  )}
-                  {suggestion && (
-                    <span>
-                      Press{" "}
-                      <kbd className="px-1.5 py-0.5 rounded bg-muted border text-[10px] font-mono">
-                        Tab
-                      </kbd>{" "}
-                      to accept suggestion
-                    </span>
-                  )}
-                </div>
-              )}
-              <form
-                onSubmit={(e) => {
-                  e.preventDefault();
-                  sendMessage();
-                }}
-                className="flex gap-2"
-              >
-                <div className="flex-1 relative">
-                  <div
-                    aria-hidden
-                    className="absolute inset-0 px-3 py-2 text-sm pointer-events-none whitespace-pre-wrap break-words overflow-hidden"
-                  >
-                    <span className="invisible">{input}</span>
-                    <span className="text-muted-foreground/40">
-                      {suggestion}
-                    </span>
-                  </div>
-                  <textarea
-                    ref={inputRef}
-                    value={input}
-                    onChange={(e) => handleInputChange(e.target.value)}
-                    onKeyDown={(e) => {
-                      if (e.key === "Tab" && suggestion) {
-                        e.preventDefault();
-                        acceptSuggestion();
-                      }
-                      if (e.key === "Escape" && suggestion) {
-                        clearSuggestion();
-                      }
-                      if (e.key === "Enter" && !e.shiftKey && !suggestion) {
-                        e.preventDefault();
-                        sendMessage();
-                      }
-                    }}
-                    placeholder="Ask a question..."
-                    disabled={isLoading}
-                    rows={1}
-                    className="w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50 resize-none"
-                  />
+                  <EventStreamPanel chunks={streamLog} />
                 </div>
-                <Button
-                  type="submit"
-                  disabled={isLoading || !input.trim()}
-                  className="self-end"
-                >
-                  Send
-                </Button>
-              </form>
-            </div>
-          </div>
+              </>
+            );
+          }}
+        </Conversation>
+      </div>
+    </div>
+  );
+}
 
-          <div className="w-80 shrink-0 flex flex-col border rounded-lg bg-card">
-            <div className="px-3 py-2 border-b">
-              <h3 className="text-sm font-semibold text-muted-foreground">
-                Event Stream
-              </h3>
-            </div>
-            <div className="flex-1 overflow-y-auto p-3 space-y-1">
-              {events.length === 0 && (
-                <p className="text-xs text-muted-foreground/50 text-center py-8">
-                  Events will appear here
-                </p>
-              )}
-              {events.map((event, i) => {
-                let detail: string;
-                switch (event.type) {
-                  case "response.output_text.delta":
-                    detail = event.delta?.slice(0, 60) ?? "";
-                    break;
-                  case "response.output_item.added":
-                  case "response.output_item.done":
-                    detail =
-                      event.item?.type === "function_call"
-                        ? `${event.item.name}(${(event.item.arguments ?? "").slice(0, 40)})`
-                        : event.item?.type === "function_call_output"
-                          ? (event.item.output?.slice(0, 60) ?? "")
-                          : (event.item?.status ?? event.item?.type ?? "");
-                    break;
-                  case "response.completed":
-                    detail = "done";
-                    break;
-                  case "error":
-                    detail = event.error ?? "unknown";
-                    break;
-                  case "appkit.metadata":
-                    detail = JSON.stringify(event.data).slice(0, 60);
-                    break;
-                  case "appkit.thinking":
-                    detail = event.content?.slice(0, 60) ?? "";
-                    break;
-                  default:
-                    detail = JSON.stringify(event).slice(0, 60);
-                }
-                return (
-                  <div
-                    key={`${event.type}-${i}`}
-                    className="font-mono text-xs text-muted-foreground"
-                  >
-                    <span className="inline-block w-24 text-right mr-2 opacity-50">
-                      {event.type
-                        .replace("response.", "")
-                        .replace("appkit.", "")}
-                    </span>
-                    <span className="opacity-80 break-all">{detail}</span>
-                  </div>
-                );
-              })}
+// Debug panel: one row per chunk, no coalescing.
+function EventStreamPanel({
+  chunks,
+}: {
+  chunks: Array<{ id: number; chunk: UIMessageChunk }>;
+}) {
+  return (
+    <div className="w-80 shrink-0 flex flex-col border rounded-lg bg-card">
+      <div className="px-3 py-2 border-b flex items-center justify-between">
+        <h3 className="text-sm font-semibold text-muted-foreground">
+          Event Stream
+        </h3>
+        <span className="text-[10px] font-mono text-muted-foreground/60">
+          {chunks.length} chunk{chunks.length === 1 ? "" : "s"}
+        </span>
+      </div>
+      <div className="flex-1 overflow-y-auto p-3 space-y-1">
+        {chunks.length === 0 && (
+          <p className="text-xs text-muted-foreground/50 text-center py-8">
+            Events will appear here
+          </p>
+        )}
+        {chunks.map(({ id, chunk }) => {
+          const { label, detail } = describeChunk(chunk);
+          return (
+            <div key={id} className="font-mono text-xs text-muted-foreground">
+              <span className="inline-block w-24 text-right mr-2 opacity-50">
+                {label}
+              </span>
+              <span className="opacity-80 break-all">{detail}</span>
             </div>
-          </div>
-        </div>
+          );
+        })}
       </div>
     </div>
   );
 }
+
+function describeChunk(chunk: UIMessageChunk): {
+  label: string;
+  detail: string;
+} {
+  const c = chunk as Record<string, unknown> & { type: string };
+  if (c.type === "text-delta") {
+    return { label: "text-Δ", detail: String(c.delta ?? "").slice(0, 80) };
+  }
+  if (c.type === "reasoning-delta") {
+    return {
+      label: "reasoning-Δ",
+      detail: String(c.delta ?? "").slice(0, 80),
+    };
+  }
+  if (c.type === "tool-input-available") {
+    return {
+      label: `tool→ ${String(c.toolName ?? "?")}`,
+      detail: safeStringify(c.input).slice(0, 80),
+    };
+  }
+  if (c.type === "tool-output-available") {
+    return {
+      label: `tool← ${String(c.toolName ?? "?")}`,
+      detail: safeStringify(c.output).slice(0, 80),
+    };
+  }
+  if (c.type.startsWith("data-")) {
+    return {
+      label: c.type.replace(/^data-/, "data:"),
+      detail: safeStringify(c.data).slice(0, 80),
+    };
+  }
+  return { label: c.type, detail: "" };
+}
+
+function safeStringify(value: unknown): string {
+  if (typeof value === "string") return value;
+  if (value === undefined) return "";
+  try {
+    return JSON.stringify(value) ?? "";
+  } catch {
+    return String(value);
+  }
+}
diff --git a/docs/docs/api/appkit-ui/chat/ChatInput.mdx b/docs/docs/api/appkit-ui/chat/ChatInput.mdx
new file mode 100644
index 000000000..460bfc655
--- /dev/null
+++ b/docs/docs/api/appkit-ui/chat/ChatInput.mdx
@@ -0,0 +1,37 @@
+# ChatInput
+
+Render-prop component that owns the input string, debounces submit, handles `Enter` / `Shift+Enter` / IME composition, and forwards an `isStreaming` flag for stop-button toggles. Wire `onSubmit`, `status`, and `stop` from `useChat` / `Conversation`; the render prop returns a `submit` callback you can attach to either a form `onSubmit` or a button `onClick`.
+
+
+## ChatInput
+
+Render-prop component that owns the input string, debounces submit,
+handles `Enter` / `Shift+Enter` / IME composition, and forwards an
+`isStreaming` flag for stop-button toggles. Wire `onSubmit`, `status`,
+and `stop` from `useChat` / `Conversation`; the render prop returns a
+`submit` callback you can attach to either a form `onSubmit` or a
+button `onClick`.
+
+
+**Source:** [`packages/appkit-ui/src/react/chat/headless/chat-input.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/chat/headless/chat-input.tsx)
+
+
+### Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `onSubmit` | `(message?: (Omit<TMessage, "id" \| "role"> & { id?: TMessage["id"] \| undefined; role?: TMessage["role"] \| undefined; } & { text?: undefined; files?: undefined; messageId?: string \| undefined; }) \| { ...; } \| { ...; } \| undefined, options?: ChatRequestOptions \| undefined) => Promise<...>` | ✓ | - | Pass `sendMessage` straight through from `useChat` / `Conversation`. |
+| `status` | `enum` | ✓ | - | Pass `status` from the chat helpers — drives `isStreaming`. |
+| `stop` | `() => void` | ✓ | - | Pass `stop` from the chat helpers — exposed back to the render prop. |
+| `children` | `(props: ChatInputRenderProps) => ReactNode` | ✓ | - | Render prop receiving the input state and submit/stop handlers. |
+
+
+
+### Usage
+
+```tsx
+import { ChatInput } from '@databricks/appkit-ui';
+
+<ChatInput /* props */ />
+```
+
diff --git a/docs/docs/api/appkit-ui/chat/Conversation.mdx b/docs/docs/api/appkit-ui/chat/Conversation.mdx
new file mode 100644
index 000000000..c70e8f348
--- /dev/null
+++ b/docs/docs/api/appkit-ui/chat/Conversation.mdx
@@ -0,0 +1,41 @@
+# Conversation
+
+Render-prop convenience over `useChat` + `useScrollToBottom`. Streams Responses-API SSE from an AppKit `agents()`-backed endpoint, captures the server-allocated `threadId` for multi-turn continuity, and auto-sticks the scroll container to the bottom while the user is at the bottom. Drop down to the underlying hooks for non-standard layouts (split panes, virtualized lists, external send buttons).
+
+
+## Conversation
+
+Render-prop convenience over `useChat` + `useScrollToBottom`. Streams
+Responses-API SSE from an AppKit `agents()`-backed endpoint, captures
+the server-allocated `threadId` for multi-turn continuity, and
+auto-sticks the scroll container to the bottom while the user is at
+the bottom. Drop down to the underlying hooks for non-standard
+layouts (split panes, virtualized lists, external send buttons).
+
+
+**Source:** [`packages/appkit-ui/src/react/chat/headless/conversation.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/chat/headless/conversation.tsx)
+
+
+### Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `children` | `(props: ConversationRenderProps<TMessage>) => ReactNode` | ✓ | - | Render prop receiving merged `useChat` + `useScrollToBottom` state. |
+| `api` | `string` | ✓ | - | Chat endpoint URL (e.g. "/api/agents/chat"). |
+| `id` | `string` |  | - | Stable chat id. Defaults to a fresh UUID per mount. |
+| `messages` | `TMessage[]` |  | - | Initial messages (e.g. when hydrating from history). |
+| `headers` | `Resolvable<Record<string, string> \| Headers>` |  | - | Extra fetch headers forwarded to the transport. |
+| `onData` | `ChatOnDataCallback<TMessage>` |  | - | Fires for every `data-*` chunk (e.g. `data-approval-pending`). |
+| `onStreamPart` | `((chunk: UIMessageChunk) => void)` |  | - | Fires synchronously for every chunk. Unaffected by render throttling. |
+| `onError` | `((error: Error) => void)` |  | - | Called on stream errors. |
+
+
+
+### Usage
+
+```tsx
+import { Conversation } from '@databricks/appkit-ui';
+
+<Conversation /* props */ />
+```
+
diff --git a/docs/docs/api/appkit-ui/chat/_category_.json b/docs/docs/api/appkit-ui/chat/_category_.json
new file mode 100644
index 000000000..2653a3b0a
--- /dev/null
+++ b/docs/docs/api/appkit-ui/chat/_category_.json
@@ -0,0 +1,4 @@
+{
+  "label": "Chat primitives",
+  "position": 7
+}
diff --git a/docs/docs/api/appkit-ui/chat/index.md b/docs/docs/api/appkit-ui/chat/index.md
new file mode 100644
index 000000000..63b5596f5
--- /dev/null
+++ b/docs/docs/api/appkit-ui/chat/index.md
@@ -0,0 +1,302 @@
+---
+sidebar_position: 6
+---
+
+# Chat primitives
+
+Headless React building blocks for talking to the AppKit [`agents`](../../plugins/agents.md) plugin from the browser. The primitives are an opinionated wrapper over the [Vercel AI SDK](https://sdk.vercel.ai/) (`@ai-sdk/react`, `ai`) that translates the agents plugin's Responses-API SSE wire format into the SDK's `UIMessageChunk` protocol — so you get streaming text, reasoning, tool calls, approval gates, and thread continuity without writing a server-side adapter.
+
+Everything ships from a single subpath import:
+
+```ts
+import {
+  Conversation,
+  ChatInput,
+  ResponsesApiTransport,
+  useChat,
+  useScrollToBottom,
+} from "@databricks/appkit-ui/react/chat";
+```
+
+`@ai-sdk/react` and `ai` are **optional peer dependencies**. Install them in your app if you use these primitives:
+
+```bash
+pnpm add @ai-sdk/react ai
+```
+
+## Quick start
+
+The smallest end-to-end chat against an `agents()`-backed AppKit server:
+
+```tsx
+import {
+  ChatInput,
+  Conversation,
+} from "@databricks/appkit-ui/react/chat";
+
+export function Chat() {
+  return (
+    <Conversation api="/api/agents/chat">
+      {({ messages, status, sendMessage, stop, containerRef }) => (
+        <div className="flex flex-col h-[600px] border rounded-lg">
+          <div ref={containerRef} className="flex-1 overflow-y-auto p-4 space-y-2">
+            {messages.map((m) => (
+              <div key={m.id} className={m.role === "user" ? "text-right" : "text-left"}>
+                {m.parts.map((p, i) =>
+                  p.type === "text" ? <p key={i}>{p.text}</p> : null,
+                )}
+              </div>
+            ))}
+          </div>
+          <ChatInput onSubmit={sendMessage} status={status} stop={stop}>
+            {({ value, onChange, submit, isStreaming, canSubmit, handleKeyDown }) => (
+              <form onSubmit={submit} className="border-t p-3 flex gap-2">
+                <input
+                  value={value}
+                  onChange={(e) => onChange(e.target.value)}
+                  onKeyDown={handleKeyDown}
+                  disabled={isStreaming}
+                  placeholder="Ask a question…"
+                  className="flex-1"
+                />
+                <button type="submit" disabled={!canSubmit}>Send</button>
+              </form>
+            )}
+          </ChatInput>
+        </div>
+      )}
+    </Conversation>
+  );
+}
+```
+
+That single component:
+
+- Posts to `POST /api/agents/chat` (the agents plugin's default route).
+- Streams Responses-API SSE back, translates each event to a `UIMessageChunk` on the fly, and feeds the AI SDK reducer.
+- Captures the server-allocated `threadId` from `appkit.metadata` events and replays it on every subsequent request — multi-turn conversations Just Work, no wiring required.
+- Auto-sticks the scroll container to the bottom as long as the user hasn't scrolled up.
+
+## How it fits together
+
+```
+┌──────────────────────────────────────────────────────────┐
+│  <Conversation>                                          │
+│   ├─ useChat()             ── stable id + threadId ref   │
+│   │   └─ ResponsesApiTransport                           │
+│   │        ├─ prepareSendMessagesRequest                 │
+│   │        │   → { message, threadId?, ...extras }       │
+│   │        └─ processResponseStream                      │
+│   │            SSE bytes → text → events → UIChunks      │
+│   └─ useScrollToBottom()   ── containerRef + auto-stick  │
+│                                                          │
+│  <ChatInput>                                             │
+│   value / submit / canSubmit / handleKeyDown / stop      │
+└──────────────────────────────────────────────────────────┘
+```
+
+The `Conversation` component is a thin render-prop convenience over `useChat` + `useScrollToBottom`. Reach for the underlying hooks when you need a non-standard layout (split panes, virtualized lists, etc).
+
+## `useChat`
+
+A minimal wrapper around the AI SDK's `useChat` that wires up `ResponsesApiTransport` and stabilizes the chat `id` and `threadId` across re-renders.
+
+```ts
+const chat = useChat<AgentUIMessage>({
+  api: "/api/agents/chat",
+  onData: (part) => { /* react to data-* parts */ },
+  onError: (err) => console.error(err),
+});
+```
+
+### Options
+
+| Option         | Type                                    | Required | Description |
+|----------------|-----------------------------------------|----------|-------------|
+| `api`          | `string`                                | ✓        | Chat endpoint URL (typically `/api/agents/chat`). |
+| `id`           | `string`                                |          | Stable chat id. Defaults to a fresh UUID per mount. |
+| `messages`     | `TMessage[]`                            |          | Initial messages (e.g. when hydrating from history). |
+| `headers`      | fetch headers / accessor                |          | Extra request headers forwarded to the transport. |
+| `onData`       | `(part) => void`                        |          | Fires for every `data-*` chunk. Use this to react to AppKit-specific data parts like `data-approval-pending`. |
+| `onStreamPart` | `(chunk: UIMessageChunk) => void`       |          | Fires synchronously for every translated chunk before the reducer sees it. Ideal for debug panels and stream logs — unaffected by render throttling. |
+| `onError`      | `(error: Error) => void`                |          | Network, transport, or server-side stream errors. |
+
+### Returns
+
+The full [`UseChatHelpers`](https://sdk.vercel.ai/docs/reference/ai-sdk-ui/use-chat) surface (`messages`, `status`, `error`, `sendMessage`, `stop`, …) plus a stable `id`.
+
+### Thread continuity
+
+The first SSE event of a new conversation carries an `appkit.metadata` payload with the server-allocated `threadId`. The hook stashes it in a ref, then `ResponsesApiTransport` echoes it on subsequent requests — even if the transport is re-created mid-session (e.g. because `headers` is passed as an inline object literal). You don't need to manage thread ids yourself.
+
+## `useScrollToBottom`
+
+Tracks whether a scroll container is at the bottom and exposes an imperative `scrollToBottom`. When `trigger` changes and the user was already at the bottom, the container auto-sticks — preserving the typical chat "follow latest" behavior without overriding manual scroll-up.
+
+```ts
+const { containerRef, isAtBottom, scrollToBottom } =
+  useScrollToBottom<HTMLDivElement>({ trigger: messages });
+```
+
+| Option      | Type      | Default | Description |
+|-------------|-----------|---------|-------------|
+| `threshold` | `number`  | `50`    | Pixels from the bottom that still count as "at bottom". |
+| `trigger`   | `unknown` | —       | Reactive value (usually `messages`) that triggers an auto-stick when the user is at the bottom. |
+
+`scrollToBottom(behavior)` defaults to `"smooth"`. The auto-stick path uses `"instant"` to avoid piling up smooth-scroll animations under throttled streaming re-renders.
+
+## `<Conversation>`
+
+Render-prop component that combines `useChat` and `useScrollToBottom` for the common case. Accepts every `useChat` option as a top-level prop and exposes both hooks' return values to its `children` callback.
+
+```tsx
+<Conversation<AgentUIMessage>
+  api="/api/agents/chat"
+  onData={(part) => {/* … */}}
+>
+  {({ messages, status, sendMessage, stop, containerRef, isAtBottom, scrollToBottom }) => (
+    /* … */
+  )}
+</Conversation>
+```
+
+If you need to drive the chat from outside the render tree (e.g. an external "Send" button), drop down to `useChat` directly.
+
+## `<ChatInput>`
+
+Render-prop component that owns the input string, debounces submit, handles `Enter`/`Shift+Enter`/IME composition, and forwards an `isStreaming` flag for stop-button toggles.
+
+```tsx
+<ChatInput<AgentUIMessage> onSubmit={sendMessage} status={status} stop={stop}>
+  {({ value, onChange, submit, isStreaming, stop, canSubmit, handleKeyDown }) => (
+    <form onSubmit={submit}>
+      <textarea
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        onKeyDown={handleKeyDown}
+        disabled={isStreaming}
+      />
+      {isStreaming
+        ? <button type="button" onClick={stop}>Stop</button>
+        : <button type="submit" disabled={!canSubmit}>Send</button>}
+    </form>
+  )}
+</ChatInput>
+```
+
+| Prop       | Type                                      | Description |
+|------------|-------------------------------------------|-------------|
+| `onSubmit` | `UseChatHelpers<TMessage>["sendMessage"]` | Pass `sendMessage` straight through from `useChat` / `Conversation`. |
+| `status`   | `ChatStatus`                              | Pass `status` from the chat helpers — drives `isStreaming`. |
+| `stop`     | `() => void`                              | Pass `stop` from the chat helpers — exposed back to the render prop for stop buttons. |
+
+The render prop returns a `submit` callback you can wire to either a form `onSubmit` or a button `onClick`. `Enter` submits (unless `Shift` is held or an IME is composing); the input clears on successful submit.
+
+## Typed messages
+
+Pass a `UIMessage` subtype to type `messages[].parts`, `onData`, and `sendMessage` end-to-end:
+
+```ts
+import type { UIMessage } from "ai";
+
+type MyMessage = UIMessage<unknown, {
+  "approval-pending": { approvalId: string; toolName: string };
+}>;
+
+const chat = useChat<MyMessage>({ api: "/api/agents/chat" });
+```
+
+The data-parts map must be a `type` (not `interface`) to satisfy the SDK's `Record<string, unknown>` constraint.
+
+## Approval gates
+
+When the agents plugin emits an `appkit.approval_pending` SSE event (a destructive tool is paused on the server-side approval gate), the transport surfaces it as a `data-approval-pending` chunk. Subscribe via `onData`:
+
+```tsx
+<Conversation
+  api="/api/agents/chat"
+  onData={(part) => {
+    if (part.type === "data-approval-pending") {
+      const { approvalId, streamId, toolName, args } = part.data;
+      // Render an approval card; POST the decision back to the plugin:
+      // fetch("/api/agents/approve", {
+      //   method: "POST",
+      //   body: JSON.stringify({ streamId, approvalId, decision: "approve" }),
+      // });
+    }
+  }}
+>
+  {/* … */}
+</Conversation>
+```
+
+The chunk `id` is the `approvalId`, so duplicate events (re-renders, reconnects) collapse cleanly.
+
+## `ResponsesApiTransport`
+
+The `Conversation` / `useChat` flow is enough for almost every consumer. Drop down to the transport directly if you're composing it with a different React hook surface (e.g. plain `@ai-sdk/react`'s `useChat`) or you need to extend `prepareSendMessagesRequest` to carry attachments, agent ids, or other custom body fields.
+
+```ts
+import { ResponsesApiTransport } from "@databricks/appkit-ui/react/chat";
+import { useChat } from "@ai-sdk/react";
+
+const threadIdRef = useRef<string | undefined>(undefined);
+
+const transport = useMemo(
+  () =>
+    new ResponsesApiTransport({
+      api: "/api/agents/chat",
+      getThreadId: () => threadIdRef.current,
+      onThreadId: (tid) => { threadIdRef.current = tid; },
+    }),
+  [],
+);
+
+const chat = useChat({ transport });
+```
+
+### Constructor options
+
+Extends `HttpChatTransportInitOptions` (everything except `prepareSendMessagesRequest`, which is owned by the transport) with:
+
+| Option         | Type                                | Description |
+|----------------|-------------------------------------|-------------|
+| `getThreadId`  | `() => string \| undefined`         | Read the persisted server thread id. Held outside the transport so re-creation doesn't fork the conversation. |
+| `onThreadId`   | `(id: string) => void`              | Persist the server thread id snooped from the first `appkit.metadata` event. |
+| `onStreamPart` | `(chunk: UIMessageChunk) => void`   | Synchronous tap fired before each chunk reaches the SDK reducer. |
+
+### Wire format
+
+`prepareSendMessagesRequest` builds:
+
+```json
+{
+  "message": "<latest user-message text>",
+  "threadId": "<server-allocated id, omitted on first request>",
+  "...extras": "any non-reserved fields you pass via `body`"
+}
+```
+
+`message` and `threadId` are reserved — values you pass via the `body` option for those keys are ignored. Any other fields you set on `body` are passed through (useful for routing to a specific agent: `body: { agent: "support" }`).
+
+### Event translation
+
+| Server (`ResponseStreamEvent`)                        | Client (`UIMessageChunk`)                            |
+|-------------------------------------------------------|------------------------------------------------------|
+| `response.output_item.added` (`type: message`)        | `text-start`                                         |
+| `response.output_text.delta`                          | `text-delta`                                         |
+| `response.output_item.done` (`type: message`)         | `text-end`                                           |
+| `response.output_item.added` (`function_call`)        | `tool-input-available`                               |
+| `response.output_item.added` (`function_call_output`) | `tool-output-available`                              |
+| `appkit.thinking`                                     | `reasoning-start` (lazy) + `reasoning-delta`         |
+| `appkit.metadata`                                     | `message-metadata` (and captures `threadId`)         |
+| `appkit.approval_pending`                             | `data-approval-pending`                              |
+| `error` / `response.failed`                           | `error` + `finish`                                   |
+| `response.completed`                                  | `finish`                                             |
+
+A defensive `finish` is emitted in the transform's `flush` callback so the SDK leaves the streaming state even if the server's terminal event is lost (disconnect, timeout).
+
+## Limitations
+
+- **Text-only user messages.** The agents plugin's `chatRequestSchema` accepts `message: string` only. The transport `console.warn`s and drops non-text parts (images, files) from the latest user message. Subclass `ResponsesApiTransport` and override `prepareSendMessagesRequest` to carry attachments via a parallel field, or use a different server endpoint.
+- **Beta peer dependencies.** This release is pinned to `@ai-sdk/react@~4.0.0-beta` and `ai@~7.0.0-beta`. The wire-translator may need adjustments when the AI SDK reaches stable.
diff --git a/docs/static/appkit-ui/styles.gen.css b/docs/static/appkit-ui/styles.gen.css
index a2192039d..eae0a8edf 100644
--- a/docs/static/appkit-ui/styles.gen.css
+++ b/docs/static/appkit-ui/styles.gen.css
@@ -219,6 +219,9 @@
   .pointer-events-none {
     pointer-events: none;
   }
+  .collapse {
+    visibility: collapse;
+  }
   .invisible {
     visibility: hidden;
   }
@@ -645,6 +648,9 @@
   .h-\[200px\] {
     height: 200px;
   }
+  .h-\[600px\] {
+    height: 600px;
+  }
   .h-\[calc\(100\%-1px\)\] {
     height: calc(100% - 1px);
   }
@@ -1531,12 +1537,18 @@
   .text-center {
     text-align: center;
   }
+  .text-end {
+    text-align: end;
+  }
   .text-left {
     text-align: left;
   }
   .text-right {
     text-align: right;
   }
+  .text-start {
+    text-align: start;
+  }
   .align-middle {
     vertical-align: middle;
   }
@@ -1903,6 +1915,9 @@
   .\[--cell-size\:--spacing\(8\)\] {
     --cell-size: calc(var(--spacing) * 8);
   }
+  .paused {
+    animation-play-state: paused;
+  }
   .running {
     animation-play-state: running;
   }
diff --git a/knip.json b/knip.json
index 4fb87b388..4b9a92566 100644
--- a/knip.json
+++ b/knip.json
@@ -8,7 +8,12 @@
   ],
   "workspaces": {
     "packages/appkit-ui": {
-      "ignoreDependencies": ["tailwindcss", "tw-animate-css"]
+      "ignoreDependencies": [
+        "@ai-sdk/react",
+        "ai",
+        "tailwindcss",
+        "tw-animate-css"
+      ]
     }
   },
   "ignore": [
diff --git a/packages/appkit-ui/package.json b/packages/appkit-ui/package.json
index 4147bbf4e..5d0593b2a 100644
--- a/packages/appkit-ui/package.json
+++ b/packages/appkit-ui/package.json
@@ -39,6 +39,10 @@
       "development": "./src/react/beta.ts",
       "default": "./dist/react/beta.js"
     },
+    "./react/chat": {
+      "development": "./src/react/chat/index.ts",
+      "default": "./dist/react/chat/index.js"
+    },
     "./package.json": "./package.json",
     "./styles.css": {
       "development": "./src/react/styles/globals.css",
@@ -103,13 +107,25 @@
     "vaul": "1.1.2"
   },
   "peerDependencies": {
+    "@ai-sdk/react": "~4.0.0-beta",
+    "ai": "~7.0.0-beta",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "recharts": "^2.0.0 || ^3.0.0"
   },
+  "peerDependenciesMeta": {
+    "@ai-sdk/react": {
+      "optional": true
+    },
+    "ai": {
+      "optional": true
+    }
+  },
   "devDependencies": {
+    "@ai-sdk/react": "4.0.0-beta.76",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.2",
+    "ai": "7.0.0-beta.76",
     "react": "19.2.0",
     "react-dom": "19.2.0",
     "recharts": "2.15.4",
@@ -122,6 +138,7 @@
       "./js/beta": "./dist/js/beta.js",
       "./react": "./dist/react/index.js",
       "./react/beta": "./dist/react/beta.js",
+      "./react/chat": "./dist/react/chat/index.js",
       "./package.json": "./package.json",
       "./styles.css": "./dist/styles.css"
     }
diff --git a/packages/appkit-ui/src/react/chat/headless/chat-input.tsx b/packages/appkit-ui/src/react/chat/headless/chat-input.tsx
new file mode 100644
index 000000000..aa70945c8
--- /dev/null
+++ b/packages/appkit-ui/src/react/chat/headless/chat-input.tsx
@@ -0,0 +1,80 @@
+import type { UseChatHelpers } from "@ai-sdk/react";
+import type { ChatStatus, UIMessage } from "ai";
+import { type FormEvent, type ReactNode, useCallback, useState } from "react";
+
+export interface ChatInputRenderProps {
+  value: string;
+  onChange: (value: string) => void;
+  submit: (e?: FormEvent) => void;
+  isStreaming: boolean;
+  stop: () => void;
+  canSubmit: boolean;
+  handleKeyDown: (
+    e: React.KeyboardEvent<HTMLTextAreaElement | HTMLInputElement>,
+  ) => void;
+}
+
+export interface ChatInputProps<TMessage extends UIMessage = UIMessage> {
+  /** Pass `sendMessage` straight through from `useChat` / `Conversation`. */
+  onSubmit: UseChatHelpers<TMessage>["sendMessage"];
+  /** Pass `status` from the chat helpers — drives `isStreaming`. */
+  status: ChatStatus;
+  /** Pass `stop` from the chat helpers — exposed back to the render prop. */
+  stop: () => void;
+  /** Render prop receiving the input state and submit/stop handlers. */
+  children: (props: ChatInputRenderProps) => ReactNode;
+}
+
+/**
+ * Render-prop component that owns the input string, debounces submit,
+ * handles `Enter` / `Shift+Enter` / IME composition, and forwards an
+ * `isStreaming` flag for stop-button toggles. Wire `onSubmit`, `status`,
+ * and `stop` from `useChat` / `Conversation`; the render prop returns a
+ * `submit` callback you can attach to either a form `onSubmit` or a
+ * button `onClick`.
+ */
+export function ChatInput<TMessage extends UIMessage = UIMessage>({
+  onSubmit,
+  status,
+  stop,
+  children,
+}: ChatInputProps<TMessage>) {
+  const [value, setValue] = useState("");
+  const isStreaming = status === "streaming";
+
+  const submit = useCallback(
+    (e?: FormEvent) => {
+      e?.preventDefault();
+      // Mirror the button's `canSubmit` gate so the Enter-key path
+      // can't queue a send mid-stream.
+      if (isStreaming) return;
+      const trimmed = value.trim();
+      if (!trimmed) return;
+      onSubmit({ text: trimmed });
+      setValue("");
+    },
+    [value, onSubmit, isStreaming],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLTextAreaElement | HTMLInputElement>) => {
+      if (e.key === "Enter") {
+        if (e.nativeEvent.isComposing) return;
+        if (e.shiftKey) return;
+        e.preventDefault();
+        submit();
+      }
+    },
+    [submit],
+  );
+
+  return children({
+    value,
+    onChange: setValue,
+    submit,
+    isStreaming,
+    stop,
+    canSubmit: value.trim().length > 0 && !isStreaming,
+    handleKeyDown,
+  });
+}
diff --git a/packages/appkit-ui/src/react/chat/headless/conversation.tsx b/packages/appkit-ui/src/react/chat/headless/conversation.tsx
new file mode 100644
index 000000000..953e85765
--- /dev/null
+++ b/packages/appkit-ui/src/react/chat/headless/conversation.tsx
@@ -0,0 +1,41 @@
+import type { UIMessage } from "ai";
+import type { ReactNode } from "react";
+import {
+  type UseChatOptions,
+  type UseChatReturn,
+  useChat,
+} from "../hooks/use-chat";
+import {
+  type UseScrollToBottomReturn,
+  useScrollToBottom,
+} from "../hooks/use-scroll-to-bottom";
+
+export type ConversationRenderProps<TMessage extends UIMessage = UIMessage> =
+  UseChatReturn<TMessage> &
+    Pick<
+      UseScrollToBottomReturn<HTMLDivElement>,
+      "containerRef" | "isAtBottom" | "scrollToBottom"
+    >;
+
+export interface ConversationProps<TMessage extends UIMessage = UIMessage>
+  extends UseChatOptions<TMessage> {
+  /** Render prop receiving merged `useChat` + `useScrollToBottom` state. */
+  children: (props: ConversationRenderProps<TMessage>) => ReactNode;
+}
+
+/**
+ * Render-prop convenience over `useChat` + `useScrollToBottom`. Streams
+ * Responses-API SSE from an AppKit `agents()`-backed endpoint, captures
+ * the server-allocated `threadId` for multi-turn continuity, and
+ * auto-sticks the scroll container to the bottom while the user is at
+ * the bottom. Drop down to the underlying hooks for non-standard
+ * layouts (split panes, virtualized lists, external send buttons).
+ */
+export function Conversation<TMessage extends UIMessage = UIMessage>({
+  children,
+  ...chatOptions
+}: ConversationProps<TMessage>) {
+  const chat = useChat<TMessage>(chatOptions);
+  const scroll = useScrollToBottom({ trigger: chat.messages });
+  return children({ ...chat, ...scroll });
+}
diff --git a/packages/appkit-ui/src/react/chat/headless/index.ts b/packages/appkit-ui/src/react/chat/headless/index.ts
new file mode 100644
index 000000000..c739470b3
--- /dev/null
+++ b/packages/appkit-ui/src/react/chat/headless/index.ts
@@ -0,0 +1,2 @@
+export * from "./chat-input";
+export * from "./conversation";
diff --git a/packages/appkit-ui/src/react/chat/hooks/index.ts b/packages/appkit-ui/src/react/chat/hooks/index.ts
new file mode 100644
index 000000000..3e1c312f1
--- /dev/null
+++ b/packages/appkit-ui/src/react/chat/hooks/index.ts
@@ -0,0 +1,2 @@
+export * from "./use-chat";
+export * from "./use-scroll-to-bottom";
diff --git a/packages/appkit-ui/src/react/chat/hooks/use-chat.ts b/packages/appkit-ui/src/react/chat/hooks/use-chat.ts
new file mode 100644
index 000000000..93d2f648d
--- /dev/null
+++ b/packages/appkit-ui/src/react/chat/hooks/use-chat.ts
@@ -0,0 +1,80 @@
+import { type UseChatHelpers, useChat as useAiChat } from "@ai-sdk/react";
+import type {
+  ChatOnDataCallback,
+  HttpChatTransportInitOptions,
+  UIMessage,
+  UIMessageChunk,
+} from "ai";
+import { useMemo, useRef, useState } from "react";
+import { ResponsesApiTransport } from "../lib/responses-api-transport";
+import { generateId } from "../lib/utils";
+
+export interface UseChatOptions<TMessage extends UIMessage = UIMessage> {
+  /** Chat endpoint URL (e.g. "/api/agents/chat"). */
+  api: string;
+  /** Stable chat id. Defaults to a fresh UUID per mount. */
+  id?: string;
+  /** Initial messages (e.g. when hydrating from history). */
+  messages?: TMessage[];
+  /** Extra fetch headers forwarded to the transport. */
+  headers?: HttpChatTransportInitOptions<TMessage>["headers"];
+  /** Fires for every `data-*` chunk (e.g. `data-approval-pending`). */
+  onData?: ChatOnDataCallback<TMessage>;
+  /** Fires synchronously for every chunk. Unaffected by render throttling. */
+  onStreamPart?: (chunk: UIMessageChunk) => void;
+  /** Called on stream errors. */
+  onError?: (error: Error) => void;
+}
+
+export type UseChatReturn<TMessage extends UIMessage = UIMessage> =
+  UseChatHelpers<TMessage> & { id: string };
+
+export function useChat<TMessage extends UIMessage = UIMessage>(
+  options: UseChatOptions<TMessage>,
+): UseChatReturn<TMessage> {
+  const { api, id: providedId, messages, onData, onError } = options;
+
+  const [id] = useState(() => providedId ?? generateId());
+  const initialMessagesRef = useRef<TMessage[]>(messages ?? []);
+
+  // Ref'd so the transport memo stays stable when consumers pass inline
+  // objects/callbacks. The transport reads them lazily on each request.
+  const onStreamPartRef = useRef(options.onStreamPart);
+  onStreamPartRef.current = options.onStreamPart;
+  const headersRef = useRef(options.headers);
+  headersRef.current = options.headers;
+
+  const threadIdRef = useRef<string | undefined>(undefined);
+
+  const transport = useMemo(
+    () =>
+      new ResponsesApiTransport<TMessage>({
+        api,
+        // Resolve the live ref each request so the transport memo stays
+        // stable even when consumers pass inline header objects/functions.
+        headers: async () => {
+          const h = headersRef.current;
+          if (typeof h === "function") return await h();
+          return h ?? {};
+        },
+        getThreadId: () => threadIdRef.current,
+        onThreadId: (tid) => {
+          threadIdRef.current = tid;
+        },
+        onStreamPart: (part) => onStreamPartRef.current?.(part),
+      }),
+    [api],
+  );
+
+  const chat = useAiChat<TMessage>({
+    id,
+    messages: initialMessagesRef.current,
+    experimental_throttle: 100,
+    generateId,
+    transport,
+    onData,
+    onError,
+  });
+
+  return { ...chat, id };
+}
diff --git a/packages/appkit-ui/src/react/chat/hooks/use-scroll-to-bottom.ts b/packages/appkit-ui/src/react/chat/hooks/use-scroll-to-bottom.ts
new file mode 100644
index 000000000..b8615fc8c
--- /dev/null
+++ b/packages/appkit-ui/src/react/chat/hooks/use-scroll-to-bottom.ts
@@ -0,0 +1,62 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+export interface UseScrollToBottomOptions {
+  /** Pixels from the bottom that still count as "at bottom". Default 50. */
+  threshold?: number;
+  /** Reactive value that triggers an auto-scroll when isAtBottom is true. */
+  trigger?: unknown;
+}
+
+export interface UseScrollToBottomReturn<T extends HTMLElement> {
+  containerRef: React.RefObject<T | null>;
+  isAtBottom: boolean;
+  scrollToBottom: (behavior?: ScrollBehavior) => void;
+}
+
+/**
+ * Sticks a scroll container to the bottom on `trigger` changes, unless
+ * the user has scrolled up.
+ */
+export function useScrollToBottom<T extends HTMLElement = HTMLDivElement>({
+  threshold = 50,
+  trigger,
+}: UseScrollToBottomOptions = {}): UseScrollToBottomReturn<T> {
+  const containerRef = useRef<T | null>(null);
+  const [isAtBottom, setIsAtBottom] = useState(true);
+
+  const handleScroll = useCallback(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    setIsAtBottom(el.scrollHeight - el.scrollTop - el.clientHeight < threshold);
+  }, [threshold]);
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    el.addEventListener("scroll", handleScroll, { passive: true });
+    handleScroll();
+    return () => el.removeEventListener("scroll", handleScroll);
+  }, [handleScroll]);
+
+  useEffect(() => {
+    // `trigger` is referenced only to opt the effect into a re-run when
+    // its identity changes (e.g. on every new message during streaming).
+    void trigger;
+    if (isAtBottom && containerRef.current) {
+      // `instant` here so streaming re-renders don't queue smooth animations.
+      containerRef.current.scrollTo({
+        top: containerRef.current.scrollHeight,
+        behavior: "instant",
+      });
+    }
+  }, [trigger, isAtBottom]);
+
+  const scrollToBottom = useCallback((behavior: ScrollBehavior = "smooth") => {
+    containerRef.current?.scrollTo({
+      top: containerRef.current.scrollHeight,
+      behavior,
+    });
+  }, []);
+
+  return { containerRef, isAtBottom, scrollToBottom };
+}
diff --git a/packages/appkit-ui/src/react/chat/index.ts b/packages/appkit-ui/src/react/chat/index.ts
new file mode 100644
index 000000000..f1e0ead37
--- /dev/null
+++ b/packages/appkit-ui/src/react/chat/index.ts
@@ -0,0 +1,3 @@
+export * from "./headless";
+export * from "./hooks";
+export * from "./lib/responses-api-transport";
diff --git a/packages/appkit-ui/src/react/chat/lib/responses-api-transport.test.ts b/packages/appkit-ui/src/react/chat/lib/responses-api-transport.test.ts
new file mode 100644
index 000000000..bae4bac72
--- /dev/null
+++ b/packages/appkit-ui/src/react/chat/lib/responses-api-transport.test.ts
@@ -0,0 +1,569 @@
+import type { UIMessage, UIMessageChunk } from "ai";
+import type { ResponseStreamEvent } from "shared";
+import { describe, expect, test } from "vitest";
+import { ResponsesApiTransport } from "./responses-api-transport";
+
+// Exposes the protected `processResponseStream` for direct testing.
+class TestableTransport<T extends UIMessage> extends ResponsesApiTransport<T> {
+  public process(
+    stream: ReadableStream<Uint8Array>,
+  ): ReadableStream<UIMessageChunk> {
+    return this.processResponseStream(stream);
+  }
+}
+
+function encodeSseStream(
+  events: ResponseStreamEvent[],
+): ReadableStream<Uint8Array> {
+  const encoder = new TextEncoder();
+  const body = events
+    .map((e, i) => `id: ${i}\nevent: ${e.type}\ndata: ${JSON.stringify(e)}\n\n`)
+    .join("");
+  return new ReadableStream<Uint8Array>({
+    start(controller) {
+      controller.enqueue(encoder.encode(body));
+      controller.close();
+    },
+  });
+}
+
+async function translate(
+  events: ResponseStreamEvent[],
+  onStreamPart?: (chunk: UIMessageChunk) => void,
+): Promise<UIMessageChunk[]> {
+  const transport = new TestableTransport<UIMessage>({
+    api: "/test",
+    onStreamPart,
+  });
+  const out = transport.process(encodeSseStream(events));
+  const reader = out.getReader();
+  const chunks: UIMessageChunk[] = [];
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    chunks.push(value);
+  }
+  return chunks;
+}
+
+// Replaces random ids with deterministic placeholders for easier assertions.
+// Server-allocated ids are preserved.
+function normalize(chunks: UIMessageChunk[]): UIMessageChunk[] {
+  let reasoningCounter = 0;
+  const reasoningMap = new Map<string, string>();
+  const slot = (id: string): string => {
+    if (!reasoningMap.has(id)) {
+      reasoningCounter++;
+      reasoningMap.set(id, `reasoning_${reasoningCounter}`);
+    }
+    return reasoningMap.get(id) as string;
+  };
+  return chunks.map((c) => {
+    if (c.type === "start") {
+      return { ...c, messageId: c.messageId ? "msg_start" : c.messageId };
+    }
+    if (
+      c.type === "reasoning-start" ||
+      c.type === "reasoning-delta" ||
+      c.type === "reasoning-end"
+    ) {
+      return { ...c, id: slot(c.id) };
+    }
+    return c;
+  });
+}
+
+const SEQ = (() => {
+  let n = 0;
+  return () => n++;
+})();
+
+const messageItem = (id: string) => ({
+  type: "message" as const,
+  id,
+  status: "in_progress" as const,
+  role: "assistant" as const,
+  content: [],
+});
+
+const messageItemDone = (id: string, text: string) => ({
+  type: "message" as const,
+  id,
+  status: "completed" as const,
+  role: "assistant" as const,
+  content: [{ type: "output_text" as const, text }],
+});
+
+describe("ResponsesApiTransport", () => {
+  test("emits exactly one start chunk on the first event", async () => {
+    const out = await translate([
+      {
+        type: "response.output_item.added",
+        output_index: 0,
+        item: messageItem("msg_a"),
+        sequence_number: SEQ(),
+      },
+      {
+        type: "response.output_text.delta",
+        item_id: "msg_a",
+        output_index: 0,
+        content_index: 0,
+        delta: "hello",
+        sequence_number: SEQ(),
+      },
+      {
+        type: "response.output_text.delta",
+        item_id: "msg_a",
+        output_index: 0,
+        content_index: 0,
+        delta: " world",
+        sequence_number: SEQ(),
+      },
+      {
+        type: "response.output_item.done",
+        output_index: 0,
+        item: messageItemDone("msg_a", "hello world"),
+        sequence_number: SEQ(),
+      },
+      { type: "response.completed", sequence_number: SEQ(), response: {} },
+    ]);
+    const startChunks = out.filter((c) => c.type === "start");
+    expect(startChunks).toHaveLength(1);
+    expect(startChunks[0]).toMatchObject({ type: "start" });
+    expect((startChunks[0] as { messageId?: string }).messageId).toMatch(
+      /^msg_/,
+    );
+  });
+
+  test("text spans mirror server message item ids 1:1", async () => {
+    const out = normalize(
+      await translate([
+        {
+          type: "response.output_item.added",
+          output_index: 0,
+          item: messageItem("msg_a"),
+          sequence_number: SEQ(),
+        },
+        {
+          type: "response.output_text.delta",
+          item_id: "msg_a",
+          output_index: 0,
+          content_index: 0,
+          delta: "he",
+          sequence_number: SEQ(),
+        },
+        {
+          type: "response.output_text.delta",
+          item_id: "msg_a",
+          output_index: 0,
+          content_index: 0,
+          delta: "llo",
+          sequence_number: SEQ(),
+        },
+        {
+          type: "response.output_item.done",
+          output_index: 0,
+          item: messageItemDone("msg_a", "hello"),
+          sequence_number: SEQ(),
+        },
+        { type: "response.completed", sequence_number: SEQ(), response: {} },
+      ]),
+    );
+
+    expect(out).toEqual([
+      { type: "start", messageId: "msg_start" },
+      { type: "text-start", id: "msg_a" },
+      { type: "text-delta", id: "msg_a", delta: "he" },
+      { type: "text-delta", id: "msg_a", delta: "llo" },
+      { type: "text-end", id: "msg_a" },
+      { type: "finish" },
+    ]);
+  });
+
+  test("interleaved text → tool → text uses fresh message ids per text run", async () => {
+    const out = normalize(
+      await translate([
+        {
+          type: "response.output_item.added",
+          output_index: 0,
+          item: messageItem("msg_1"),
+          sequence_number: SEQ(),
+        },
+        {
+          type: "response.output_text.delta",
+          item_id: "msg_1",
+          output_index: 0,
+          content_index: 0,
+          delta: "thinking...",
+          sequence_number: SEQ(),
+        },
+        {
+          type: "response.output_item.done",
+          output_index: 0,
+          item: messageItemDone("msg_1", "thinking..."),
+          sequence_number: SEQ(),
+        },
+        {
+          type: "response.output_item.added",
+          output_index: 1,
+          item: {
+            type: "function_call",
+            id: "fc_1",
+            call_id: "call_1",
+            name: "search",
+            arguments: '{"q":"x"}',
+          },
+          sequence_number: SEQ(),
+        },
+        {
+          type: "response.output_item.done",
+          output_index: 1,
+          item: {
+            type: "function_call",
+            id: "fc_1",
+            call_id: "call_1",
+            name: "search",
+            arguments: '{"q":"x"}',
+          },
+          sequence_number: SEQ(),
+        },
+        {
+          type: "response.output_item.added",
+          output_index: 2,
+          item: {
+            type: "function_call_output",
+            id: "fc_out_1",
+            call_id: "call_1",
+            output: '{"hits":3}',
+          },
+          sequence_number: SEQ(),
+        },
+        {
+          type: "response.output_item.done",
+          output_index: 2,
+          item: {
+            type: "function_call_output",
+            id: "fc_out_1",
+            call_id: "call_1",
+            output: '{"hits":3}',
+          },
+          sequence_number: SEQ(),
+        },
+        {
+          type: "response.output_item.added",
+          output_index: 3,
+          item: messageItem("msg_2"),
+          sequence_number: SEQ(),
+        },
+        {
+          type: "response.output_text.delta",
+          item_id: "msg_2",
+          output_index: 3,
+          content_index: 0,
+          delta: "done",
+          sequence_number: SEQ(),
+        },
+        {
+          type: "response.output_item.done",
+          output_index: 3,
+          item: messageItemDone("msg_2", "done"),
+          sequence_number: SEQ(),
+        },
+        { type: "response.completed", sequence_number: SEQ(), response: {} },
+      ]),
+    );
+
+    expect(out).toEqual([
+      { type: "start", messageId: "msg_start" },
+      { type: "text-start", id: "msg_1" },
+      { type: "text-delta", id: "msg_1", delta: "thinking..." },
+      { type: "text-end", id: "msg_1" },
+      {
+        type: "tool-input-available",
+        toolCallId: "call_1",
+        toolName: "search",
+        input: { q: "x" },
+      },
+      {
+        type: "tool-output-available",
+        toolCallId: "call_1",
+        output: '{"hits":3}',
+      },
+      { type: "text-start", id: "msg_2" },
+      { type: "text-delta", id: "msg_2", delta: "done" },
+      { type: "text-end", id: "msg_2" },
+      { type: "finish" },
+    ]);
+  });
+
+  test("tool-input-available falls back to raw arguments when JSON.parse fails", async () => {
+    const out = await translate([
+      {
+        type: "response.output_item.added",
+        output_index: 0,
+        item: {
+          type: "function_call",
+          id: "fc_1",
+          call_id: "call_1",
+          name: "search",
+          arguments: "not-json",
+        },
+        sequence_number: SEQ(),
+      },
+      { type: "response.completed", sequence_number: SEQ(), response: {} },
+    ]);
+    expect(out).toContainEqual({
+      type: "tool-input-available",
+      toolCallId: "call_1",
+      toolName: "search",
+      input: "not-json",
+    });
+  });
+
+  test("approval_pending becomes a data-approval-pending part keyed by approvalId without closing open spans", async () => {
+    const out = await translate([
+      {
+        type: "response.output_item.added",
+        output_index: 0,
+        item: messageItem("msg_a"),
+        sequence_number: SEQ(),
+      },
+      {
+        type: "response.output_text.delta",
+        item_id: "msg_a",
+        output_index: 0,
+        content_index: 0,
+        delta: "pre",
+        sequence_number: SEQ(),
+      },
+      {
+        type: "appkit.approval_pending",
+        approval_id: "appr_1",
+        stream_id: "stream_1",
+        tool_name: "delete_view",
+        args: { id: 42 },
+        annotations: { effect: "destructive" },
+        sequence_number: SEQ(),
+      },
+    ]);
+    const dataPart = out.find((c) => c.type === "data-approval-pending") as
+      | { id?: string; data?: unknown; type: string }
+      | undefined;
+    expect(dataPart).toBeDefined();
+    expect(dataPart?.id).toBe("appr_1");
+    expect(dataPart?.data).toEqual({
+      approvalId: "appr_1",
+      streamId: "stream_1",
+      toolName: "delete_view",
+      args: { id: 42 },
+      annotations: { effect: "destructive" },
+    });
+    // Open text span must stay open while approval is pending.
+    const textEndBeforeApproval = out
+      .slice(
+        0,
+        out.findIndex((c) => c.type === "data-approval-pending"),
+      )
+      .some((c) => c.type === "text-end");
+    expect(textEndBeforeApproval).toBe(false);
+  });
+
+  test("appkit.thinking opens a reasoning span and closes it before any non-thinking event", async () => {
+    const out = normalize(
+      await translate([
+        {
+          type: "appkit.thinking",
+          content: "let me see...",
+          sequence_number: SEQ(),
+        },
+        {
+          type: "response.output_item.added",
+          output_index: 0,
+          item: messageItem("msg_a"),
+          sequence_number: SEQ(),
+        },
+        {
+          type: "response.output_text.delta",
+          item_id: "msg_a",
+          output_index: 0,
+          content_index: 0,
+          delta: "result",
+          sequence_number: SEQ(),
+        },
+        {
+          type: "response.output_item.done",
+          output_index: 0,
+          item: messageItemDone("msg_a", "result"),
+          sequence_number: SEQ(),
+        },
+        { type: "response.completed", sequence_number: SEQ(), response: {} },
+      ]),
+    );
+
+    expect(out).toEqual([
+      { type: "start", messageId: "msg_start" },
+      { type: "reasoning-start", id: "reasoning_1" },
+      {
+        type: "reasoning-delta",
+        id: "reasoning_1",
+        delta: "let me see...",
+      },
+      { type: "reasoning-end", id: "reasoning_1" },
+      { type: "text-start", id: "msg_a" },
+      { type: "text-delta", id: "msg_a", delta: "result" },
+      { type: "text-end", id: "msg_a" },
+      { type: "finish" },
+    ]);
+  });
+
+  test("appkit.metadata becomes a message-metadata chunk", async () => {
+    const out = await translate([
+      {
+        type: "appkit.metadata",
+        data: { threadId: "thread_42" },
+        sequence_number: SEQ(),
+      },
+      { type: "response.completed", sequence_number: SEQ(), response: {} },
+    ]);
+    expect(out).toContainEqual({
+      type: "message-metadata",
+      messageMetadata: { threadId: "thread_42" },
+    });
+  });
+
+  test("error event closes spans, emits error + finish (idempotent)", async () => {
+    const out = normalize(
+      await translate([
+        {
+          type: "response.output_item.added",
+          output_index: 0,
+          item: messageItem("msg_a"),
+          sequence_number: SEQ(),
+        },
+        {
+          type: "response.output_text.delta",
+          item_id: "msg_a",
+          output_index: 0,
+          content_index: 0,
+          delta: "halfway",
+          sequence_number: SEQ(),
+        },
+        {
+          type: "appkit.thinking",
+          content: "wait",
+          sequence_number: SEQ(),
+        },
+        { type: "error", error: "boom", sequence_number: SEQ() },
+        // A stray response.failed after error must not duplicate finish.
+        { type: "response.failed", sequence_number: SEQ() },
+      ]),
+    );
+    expect(out.filter((c) => c.type === "finish")).toHaveLength(1);
+    expect(out).toContainEqual({ type: "error", errorText: "boom" });
+    expect(out.filter((c) => c.type === "reasoning-end")).toHaveLength(1);
+  });
+
+  test("synthesises a finish chunk when the stream ends without a terminator", async () => {
+    const out = await translate([
+      {
+        type: "response.output_item.added",
+        output_index: 0,
+        item: messageItem("msg_a"),
+        sequence_number: SEQ(),
+      },
+      {
+        type: "response.output_text.delta",
+        item_id: "msg_a",
+        output_index: 0,
+        content_index: 0,
+        delta: "incomplete",
+        sequence_number: SEQ(),
+      },
+      // No terminator: stream ends mid-message.
+    ]);
+    expect(out[out.length - 1]).toEqual({ type: "finish" });
+  });
+
+  test("onStreamPart tap fires for every emitted chunk", async () => {
+    const tapped: UIMessageChunk[] = [];
+    const events: ResponseStreamEvent[] = [
+      {
+        type: "response.output_item.added",
+        output_index: 0,
+        item: messageItem("msg_a"),
+        sequence_number: SEQ(),
+      },
+      {
+        type: "response.output_text.delta",
+        item_id: "msg_a",
+        output_index: 0,
+        content_index: 0,
+        delta: "hi",
+        sequence_number: SEQ(),
+      },
+      { type: "response.completed", sequence_number: SEQ(), response: {} },
+    ];
+    const out = await translate(events, (chunk) => {
+      tapped.push(chunk);
+    });
+    expect(tapped).toEqual(out);
+  });
+
+  test("routes SSEWriter-style error events (no `type` field, only event header) into an error chunk", async () => {
+    // SSEWriter.writeError emits `event: error` + `{ error, code }` body
+    // without a `type` field.
+    const encoder = new TextEncoder();
+    const body = `id: 1\nevent: error\ndata: ${JSON.stringify({
+      error: "stream evicted",
+      code: "STREAM_EVICTED",
+    })}\n\n`;
+    const stream = new ReadableStream<Uint8Array>({
+      start(controller) {
+        controller.enqueue(encoder.encode(body));
+        controller.close();
+      },
+    });
+    const transport = new TestableTransport<UIMessage>({ api: "/test" });
+    const out = transport.process(stream);
+    const reader = out.getReader();
+    const chunks: UIMessageChunk[] = [];
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      chunks.push(value);
+    }
+    expect(chunks.map((c) => c.type)).toEqual(["start", "error", "finish"]);
+    expect(chunks).toContainEqual({
+      type: "error",
+      errorText: "stream evicted",
+    });
+  });
+
+  test("ignores SSE comment lines (heartbeats) and unknown event types", async () => {
+    const encoder = new TextEncoder();
+    const body =
+      `: heartbeat\n\n` +
+      `id: 1\nevent: response.completed\ndata: ${JSON.stringify({
+        type: "response.completed",
+        sequence_number: 0,
+        response: {},
+      })}\n\n` +
+      `: heartbeat\n\n`;
+    const stream = new ReadableStream<Uint8Array>({
+      start(controller) {
+        controller.enqueue(encoder.encode(body));
+        controller.close();
+      },
+    });
+    const transport = new TestableTransport<UIMessage>({ api: "/test" });
+    const out = transport.process(stream);
+    const reader = out.getReader();
+    const chunks: UIMessageChunk[] = [];
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      chunks.push(value);
+    }
+    expect(chunks.map((c) => c.type)).toEqual(["start", "finish"]);
+  });
+});
diff --git a/packages/appkit-ui/src/react/chat/lib/responses-api-transport.ts b/packages/appkit-ui/src/react/chat/lib/responses-api-transport.ts
new file mode 100644
index 000000000..354203885
--- /dev/null
+++ b/packages/appkit-ui/src/react/chat/lib/responses-api-transport.ts
@@ -0,0 +1,312 @@
+import {
+  DefaultChatTransport,
+  type HttpChatTransportInitOptions,
+  type UIMessage,
+  type UIMessageChunk,
+} from "ai";
+import type {
+  ResponseFunctionCallOutput,
+  ResponseFunctionToolCall,
+  ResponseOutputMessage,
+  ResponseStreamEvent,
+} from "shared";
+import { generateId } from "./utils";
+
+/**
+ * `useChat`-compatible transport for AppKit's agents plugin. Translates
+ * the Responses-API SSE wire format into the Vercel AI SDK's
+ * `UIMessageChunk` protocol, and shapes outgoing requests as
+ * `{ message, threadId, ... }`.
+ */
+export interface ResponsesApiTransportOptions<T extends UIMessage>
+  extends Omit<HttpChatTransportInitOptions<T>, "prepareSendMessagesRequest"> {
+  /** Fires synchronously for every translated chunk; unaffected by render throttling. */
+  onStreamPart?: (chunk: UIMessageChunk) => void;
+  /** Returns the server-allocated thread id to echo on subsequent requests. */
+  getThreadId?: () => string | undefined;
+  /** Persists the thread id snooped from the first `appkit.metadata` event. */
+  onThreadId?: (id: string) => void;
+}
+
+/** Reserved body keys the transport derives itself; consumer overrides ignored. */
+const RESERVED_BODY_KEYS = new Set(["message", "threadId"]);
+
+export class ResponsesApiTransport<
+  T extends UIMessage,
+> extends DefaultChatTransport<T> {
+  private onStreamPartTap: ((chunk: UIMessageChunk) => void) | undefined;
+  private onThreadId: ((id: string) => void) | undefined;
+
+  constructor(options: ResponsesApiTransportOptions<T>) {
+    const { onStreamPart, getThreadId, onThreadId, ...rest } = options;
+    super({
+      ...rest,
+      prepareSendMessagesRequest: ({ messages, body }) => {
+        const consumer = (body ?? {}) as Record<string, unknown>;
+        const consumerExtras: Record<string, unknown> = {};
+        for (const [key, value] of Object.entries(consumer)) {
+          if (!RESERVED_BODY_KEYS.has(key)) consumerExtras[key] = value;
+        }
+        const threadId = getThreadId?.();
+        return {
+          body: {
+            message: extractLastUserText(messages),
+            ...(threadId !== undefined && { threadId }),
+            ...consumerExtras,
+          },
+        };
+      },
+    });
+    this.onStreamPartTap = onStreamPart;
+    this.onThreadId = onThreadId;
+  }
+
+  protected processResponseStream(
+    stream: ReadableStream<Uint8Array<ArrayBufferLike>>,
+  ): ReadableStream<UIMessageChunk> {
+    // Cast: `TextDecoderStream` is typed as `BufferSource`; Uint8Array satisfies it at runtime.
+    return (stream as unknown as ReadableStream<BufferSource>)
+      .pipeThrough(new TextDecoderStream())
+      .pipeThrough(sseEventLineParser())
+      .pipeThrough(this.captureThreadIdTap())
+      .pipeThrough(responsesApiToUiChunks(this.onStreamPartTap));
+  }
+
+  /** Forwards the thread id from `appkit.metadata` events to `onThreadId`. */
+  private captureThreadIdTap(): TransformStream<
+    ResponseStreamEvent,
+    ResponseStreamEvent
+  > {
+    const onThreadId = this.onThreadId;
+    return new TransformStream({
+      transform(event, controller) {
+        if (event.type === "appkit.metadata") {
+          const tid = (event.data as { threadId?: unknown } | undefined)
+            ?.threadId;
+          if (typeof tid === "string" && tid.length > 0) {
+            onThreadId?.(tid);
+          }
+        }
+        controller.enqueue(event);
+      },
+    });
+  }
+}
+
+function extractLastUserText<T extends UIMessage>(messages: T[]): string {
+  const last = messages[messages.length - 1];
+  if (!last || last.role !== "user") return "";
+  let text = "";
+  let droppedNonText = false;
+  for (const part of last.parts as Array<{ type: string; text?: unknown }>) {
+    if (part.type === "text" && typeof part.text === "string") {
+      text += part.text;
+    } else {
+      droppedNonText = true;
+    }
+  }
+  if (droppedNonText) {
+    // Agents plugin only accepts plain text; subclass to carry attachments.
+    console.warn(
+      "[ResponsesApiTransport] Dropping non-text parts from user message — agents plugin only accepts plain text.",
+    );
+  }
+  return text;
+}
+
+/**
+ * Splits an SSE text stream into `ResponseStreamEvent`s. Falls back to
+ * the `event:` header when the JSON body lacks a `type` field (e.g.
+ * `SSEWriter.writeError` payloads).
+ */
+function sseEventLineParser(): TransformStream<string, ResponseStreamEvent> {
+  let buffer = "";
+  return new TransformStream({
+    transform(chunk, controller) {
+      buffer += chunk;
+      let separatorIdx: number;
+      // biome-ignore lint/suspicious/noAssignInExpressions: standard SSE buffer drain pattern
+      while ((separatorIdx = buffer.indexOf("\n\n")) !== -1) {
+        const message = buffer.slice(0, separatorIdx);
+        buffer = buffer.slice(separatorIdx + 2);
+        let eventName: string | undefined;
+        const dataLines: string[] = [];
+        for (const line of message.split("\n")) {
+          if (line.length === 0 || line.startsWith(":")) continue;
+          if (line.startsWith("event:")) {
+            eventName = line.slice(6).replace(/^ /, "");
+          } else if (line.startsWith("data:")) {
+            dataLines.push(line.slice(5).replace(/^ /, ""));
+          }
+        }
+        if (dataLines.length === 0) continue;
+        const data = dataLines.join("\n");
+        let parsed: Record<string, unknown>;
+        try {
+          parsed = JSON.parse(data) as Record<string, unknown>;
+        } catch {
+          continue;
+        }
+        if (typeof parsed.type !== "string" && eventName) {
+          parsed.type = eventName;
+        }
+        controller.enqueue(parsed as unknown as ResponseStreamEvent);
+      }
+    },
+  });
+}
+
+/**
+ * Stateful translator: `ResponseStreamEvent` → `UIMessageChunk`.
+ *
+ * Text spans mirror server message item ids 1:1. `appkit.thinking` has
+ * no wrapping events, so the reasoning span is opened lazily and closed
+ * on the next non-thinking event. `appkit.approval_pending` rides as a
+ * `data-*` chunk and does not close any open spans (the agent loop may
+ * resume the same span after the user decides).
+ */
+function responsesApiToUiChunks(
+  tap: ((chunk: UIMessageChunk) => void) | undefined,
+): TransformStream<ResponseStreamEvent, UIMessageChunk> {
+  let startEmitted = false;
+  let currentReasoningId: string | null = null;
+  let finalized = false;
+
+  function emit(
+    controller: TransformStreamDefaultController<UIMessageChunk>,
+    chunk: UIMessageChunk,
+  ): void {
+    tap?.(chunk);
+    controller.enqueue(chunk);
+  }
+
+  function emitStart(
+    controller: TransformStreamDefaultController<UIMessageChunk>,
+  ): void {
+    if (startEmitted) return;
+    startEmitted = true;
+    emit(controller, { type: "start", messageId: `msg_${generateId()}` });
+  }
+
+  function closeReasoning(
+    controller: TransformStreamDefaultController<UIMessageChunk>,
+  ): void {
+    if (!currentReasoningId) return;
+    emit(controller, { type: "reasoning-end", id: currentReasoningId });
+    currentReasoningId = null;
+  }
+
+  function finish(
+    controller: TransformStreamDefaultController<UIMessageChunk>,
+  ): void {
+    if (finalized) return;
+    finalized = true;
+    closeReasoning(controller);
+    emit(controller, { type: "finish" });
+  }
+
+  return new TransformStream({
+    transform(event, controller) {
+      emitStart(controller);
+      switch (event.type) {
+        case "response.output_item.added": {
+          const item = event.item;
+          closeReasoning(controller);
+          if (item.type === "message") {
+            const msg = item as ResponseOutputMessage;
+            emit(controller, { type: "text-start", id: msg.id });
+          } else if (item.type === "function_call") {
+            const fc = item as ResponseFunctionToolCall;
+            let input: unknown;
+            try {
+              input = JSON.parse(fc.arguments);
+            } catch {
+              input = fc.arguments;
+            }
+            emit(controller, {
+              type: "tool-input-available",
+              toolCallId: fc.call_id,
+              toolName: fc.name,
+              input,
+            });
+          } else if (item.type === "function_call_output") {
+            const fco = item as ResponseFunctionCallOutput;
+            emit(controller, {
+              type: "tool-output-available",
+              toolCallId: fco.call_id,
+              output: fco.output,
+            });
+          }
+          return;
+        }
+        case "response.output_item.done": {
+          const item = event.item;
+          if (item.type === "message") {
+            emit(controller, { type: "text-end", id: item.id });
+          }
+          // function_call / function_call_output `done` events have no
+          // client counterpart; they're already emitted on `added`.
+          return;
+        }
+        case "response.output_text.delta":
+          emit(controller, {
+            type: "text-delta",
+            id: event.item_id,
+            delta: event.delta,
+          });
+          return;
+        case "appkit.thinking":
+          if (!currentReasoningId) {
+            currentReasoningId = `reasoning_${generateId()}`;
+            emit(controller, {
+              type: "reasoning-start",
+              id: currentReasoningId,
+            });
+          }
+          emit(controller, {
+            type: "reasoning-delta",
+            id: currentReasoningId,
+            delta: event.content,
+          });
+          return;
+        case "appkit.metadata":
+          closeReasoning(controller);
+          emit(controller, {
+            type: "message-metadata",
+            messageMetadata: event.data,
+          });
+          return;
+        case "appkit.approval_pending":
+          emit(controller, {
+            type: "data-approval-pending",
+            id: event.approval_id,
+            data: {
+              approvalId: event.approval_id,
+              streamId: event.stream_id,
+              toolName: event.tool_name,
+              args: event.args,
+              annotations: event.annotations,
+            },
+          } as UIMessageChunk);
+          return;
+        case "error":
+          if (finalized) return;
+          closeReasoning(controller);
+          emit(controller, { type: "error", errorText: event.error });
+          finalized = true;
+          emit(controller, { type: "finish" });
+          return;
+        case "response.failed":
+          finish(controller);
+          return;
+        case "response.completed":
+          finish(controller);
+          return;
+      }
+    },
+    flush(controller) {
+      // Ensure the SDK leaves the streaming state if the terminal event was lost.
+      finish(controller);
+    },
+  });
+}
diff --git a/packages/appkit-ui/src/react/chat/lib/utils.ts b/packages/appkit-ui/src/react/chat/lib/utils.ts
new file mode 100644
index 000000000..b87bef81d
--- /dev/null
+++ b/packages/appkit-ui/src/react/chat/lib/utils.ts
@@ -0,0 +1,14 @@
+// UUID v4, with a `Math.random` fallback for runtimes without `crypto.randomUUID`.
+export function generateId(): string {
+  if (
+    typeof crypto !== "undefined" &&
+    typeof crypto.randomUUID === "function"
+  ) {
+    return crypto.randomUUID();
+  }
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+    const r = (Math.random() * 16) | 0;
+    const v = c === "x" ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+}
diff --git a/packages/appkit-ui/tsdown.config.ts b/packages/appkit-ui/tsdown.config.ts
index f55a51457..2c9932391 100644
--- a/packages/appkit-ui/tsdown.config.ts
+++ b/packages/appkit-ui/tsdown.config.ts
@@ -9,6 +9,7 @@ export default defineConfig([
       "src/js/beta.ts",
       "src/react/index.ts",
       "src/react/beta.ts",
+      "src/react/chat/index.ts",
     ],
     outDir: "dist",
     platform: "browser",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c576bd74a..48e5a34c0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -499,12 +499,18 @@ importers:
         specifier: 1.1.2
         version: 1.1.2(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
     devDependencies:
+      '@ai-sdk/react':
+        specifier: 4.0.0-beta.76
+        version: 4.0.0-beta.76(react@19.2.0)(zod@4.3.6)
       '@types/react':
         specifier: 19.2.2
         version: 19.2.2
       '@types/react-dom':
         specifier: 19.2.2
         version: 19.2.2(@types/react@19.2.2)
+      ai:
+        specifier: 7.0.0-beta.76
+        version: 7.0.0-beta.76(zod@4.3.6)
       react:
         specifier: 19.2.0
         version: 19.2.0
@@ -576,16 +582,32 @@ packages:
     peerDependencies:
       zod: ^3.25.76 || ^4.1.8
 
+  '@ai-sdk/gateway@4.0.0-beta.43':
+    resolution: {integrity: sha512-EGQe4If6jt1ZhENmwZn8UAeHbEc7DRiK7ff7dwgfNthwso2hdzLbgXzuTO+W/op+oDFQK1pKiAz5RrPsVQWiew==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      zod: ^3.25.76 || ^4.1.8
+
   '@ai-sdk/provider-utils@3.0.19':
     resolution: {integrity: sha512-W41Wc9/jbUVXVwCN/7bWa4IKe8MtxO3EyA0Hfhx6grnmiYlCvpI8neSYWFE0zScXJkgA/YK3BRybzgyiXuu6JA==}
     engines: {node: '>=18'}
     peerDependencies:
       zod: ^3.25.76 || ^4.1.8
 
+  '@ai-sdk/provider-utils@5.0.0-beta.16':
+    resolution: {integrity: sha512-CyMV5go6libw5WaZ4m7nO0uRLTENxbIODiDrTXJNwxYIBR8p5aCGaxt9oj3prbvNkTt0Srh/Gyw+n2pR9hQ5Pg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      zod: ^3.25.76 || ^4.1.8
+
   '@ai-sdk/provider@2.0.0':
     resolution: {integrity: sha512-6o7Y2SeO9vFKB8lArHXehNuusnpddKPk7xqL7T2/b+OvXMRIXUO1rR4wcv1hAFUAT9avGZshty3Wlua/XA7TvA==}
     engines: {node: '>=18'}
 
+  '@ai-sdk/provider@4.0.0-beta.10':
+    resolution: {integrity: sha512-E2O/LCWjqOxAUfpykQR4xLmcGXySIu6L+wYJjav2xiHu38otPq0qIexgH9ZKulBvBWkrtJ3fxz0kzHDlCBkwng==}
+    engines: {node: '>=18'}
+
   '@ai-sdk/react@2.0.115':
     resolution: {integrity: sha512-Etu7gWSEi2dmXss1PoR5CAZGwGShXsF9+Pon1eRO6EmatjYaBMhq1CfHPyYhGzWrint8jJIK2VaAhiMef29qZw==}
     engines: {node: '>=18'}
@@ -596,6 +618,12 @@ packages:
       zod:
         optional: true
 
+  '@ai-sdk/react@4.0.0-beta.76':
+    resolution: {integrity: sha512-M5CMl+wlIZexdN+gJG06WPW6F88JFFzjwC1dEyeVNLztxDnZn8VpJy6WDNEo3QgUWjinWJCOnLDLP9qPBzTSSA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      react: ^18 || ~19.0.1 || ~19.1.2 || ^19.2.1
+
   '@algolia/abtesting@1.12.0':
     resolution: {integrity: sha512-EfW0bfxjPs+C7ANkJDw2TATntfBKsFiy7APh+KO0pQ8A6HYa5I0NjFuCGCXWfzzzLXNZta3QUl3n5Kmm6aJo9Q==}
     engines: {node: '>= 14.0.0'}
@@ -5182,6 +5210,10 @@ packages:
     resolution: {integrity: sha512-fnYhv671l+eTTp48gB4zEsTW/YtRgRPnkI2nT7x6qw5rkI1Lq2hTmQIpHPgyThI0znLK+vX2n9XxKdXZ7BUbbw==}
     engines: {node: '>= 20'}
 
+  '@vercel/oidc@3.2.0':
+    resolution: {integrity: sha512-UycprH3T6n3jH0k44NHMa7pnFHGu/N05MjojYr+Mc6I7obkoLIJujSWwin1pCvdy/eOxrI/l3uDLQsmcrOb4ug==}
+    engines: {node: '>= 20'}
+
   '@vitejs/plugin-react@5.0.4':
     resolution: {integrity: sha512-La0KD0vGkVkSk6K+piWDKRUyg8Rl5iAIKRMH0vMJI0Eg47bq1eOxmoObAaQG37WMW9MSyk7Cs8EIWwJC1PtzKA==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -5337,6 +5369,12 @@ packages:
     peerDependencies:
       zod: ^3.25.76 || ^4.1.8
 
+  ai@7.0.0-beta.76:
+    resolution: {integrity: sha512-yJMCqsnfUi8jnFOvxmXhjMZd0YVSCLk1E5PZpqmGWynvo3uADt1XADYYYRcj0I9Q2wsL4HbCLAKe01I8aswzJg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      zod: ^3.25.76 || ^4.1.8
+
   ajv-formats@2.1.1:
     resolution: {integrity: sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==}
     peerDependencies:
@@ -11972,6 +12010,13 @@ snapshots:
       '@vercel/oidc': 3.0.5
       zod: 4.3.6
 
+  '@ai-sdk/gateway@4.0.0-beta.43(zod@4.3.6)':
+    dependencies:
+      '@ai-sdk/provider': 4.0.0-beta.10
+      '@ai-sdk/provider-utils': 5.0.0-beta.16(zod@4.3.6)
+      '@vercel/oidc': 3.2.0
+      zod: 4.3.6
+
   '@ai-sdk/provider-utils@3.0.19(zod@4.3.6)':
     dependencies:
       '@ai-sdk/provider': 2.0.0
@@ -11979,10 +12024,21 @@ snapshots:
       eventsource-parser: 3.0.6
       zod: 4.3.6
 
+  '@ai-sdk/provider-utils@5.0.0-beta.16(zod@4.3.6)':
+    dependencies:
+      '@ai-sdk/provider': 4.0.0-beta.10
+      '@standard-schema/spec': 1.1.0
+      eventsource-parser: 3.0.6
+      zod: 4.3.6
+
   '@ai-sdk/provider@2.0.0':
     dependencies:
       json-schema: 0.4.0
 
+  '@ai-sdk/provider@4.0.0-beta.10':
+    dependencies:
+      json-schema: 0.4.0
+
   '@ai-sdk/react@2.0.115(react@19.2.0)(zod@4.3.6)':
     dependencies:
       '@ai-sdk/provider-utils': 3.0.19(zod@4.3.6)
@@ -11993,6 +12049,16 @@ snapshots:
     optionalDependencies:
       zod: 4.3.6
 
+  '@ai-sdk/react@4.0.0-beta.76(react@19.2.0)(zod@4.3.6)':
+    dependencies:
+      '@ai-sdk/provider-utils': 5.0.0-beta.16(zod@4.3.6)
+      ai: 7.0.0-beta.76(zod@4.3.6)
+      react: 19.2.0
+      swr: 2.3.8(react@19.2.0)
+      throttleit: 2.1.0
+    transitivePeerDependencies:
+      - zod
+
   '@algolia/abtesting@1.12.0':
     dependencies:
       '@algolia/client-common': 5.46.0
@@ -17578,6 +17644,8 @@ snapshots:
 
   '@vercel/oidc@3.0.5': {}
 
+  '@vercel/oidc@3.2.0': {}
+
   '@vitejs/plugin-react@5.0.4(vite@7.2.4(@types/node@24.7.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.20.6)(yaml@2.8.2))':
     dependencies:
       '@babel/core': 7.28.5
@@ -17802,6 +17870,13 @@ snapshots:
       '@opentelemetry/api': 1.9.0
       zod: 4.3.6
 
+  ai@7.0.0-beta.76(zod@4.3.6):
+    dependencies:
+      '@ai-sdk/gateway': 4.0.0-beta.43(zod@4.3.6)
+      '@ai-sdk/provider': 4.0.0-beta.10
+      '@ai-sdk/provider-utils': 5.0.0-beta.16(zod@4.3.6)
+      zod: 4.3.6
+
   ajv-formats@2.1.1(ajv@8.17.1):
     optionalDependencies:
       ajv: 8.17.1
diff --git a/tools/generate-component-mdx.ts b/tools/generate-component-mdx.ts
index 7d8a57126..28ab15894 100644
--- a/tools/generate-component-mdx.ts
+++ b/tools/generate-component-mdx.ts
@@ -11,6 +11,7 @@ const COMPONENTS_DIR = "packages/appkit-ui/src/react/ui";
 const CHARTS_DIR = "packages/appkit-ui/src/react/charts";
 const TABLE_DIR = "packages/appkit-ui/src/react/table";
 const GENIE_DIR = "packages/appkit-ui/src/react/genie";
+const CHAT_DIR = "packages/appkit-ui/src/react/chat";
 const DOCS_OUTPUT_DIR = "docs/docs/api/appkit-ui";
 
 const FILE_BROWSER_DIR = "packages/appkit-ui/src/react/file-browser";
@@ -21,6 +22,7 @@ const SOURCE_DIRS = [
   { name: "table", path: TABLE_DIR },
   { name: "genie", path: GENIE_DIR },
   { name: "file-browser", path: FILE_BROWSER_DIR },
+  { name: "chat", path: CHAT_DIR },
 ] as const;
 
 const FILE_EXTENSIONS = {
@@ -43,6 +45,7 @@ const PATH_PATTERNS = {
   TABLE_DIR: "src/react/table/",
   GENIE_DIR: "src/react/genie/",
   FILE_BROWSER_DIR: "src/react/file-browser/",
+  CHAT_DIR: "src/react/chat/",
   DATA_TABLE_FILE: "data-table.tsx",
   REACT_TYPES: "@types/react",
 } as const;
@@ -52,6 +55,7 @@ const OUTPUT_SUBDIRS = {
   UI: "ui",
   GENIE: "genie",
   FILES: "files",
+  CHAT: "chat",
   EXAMPLES: "examples",
 } as const;
 
@@ -100,11 +104,17 @@ function stripDocSuffix(name: string): string {
     : name;
 }
 
-type ComponentCategory = "chart" | "table" | "ui" | "genie" | "file-browser";
+type ComponentCategory =
+  | "chart"
+  | "table"
+  | "ui"
+  | "genie"
+  | "file-browser"
+  | "chat";
 
 interface ComponentInfo {
   category: ComponentCategory;
-  subdir: string; // "data", "ui", or "genie"
+  subdir: string; // "data", "ui", "genie", "files", or "chat"
   chartDir?: string; // Only for charts
 }
 
@@ -133,6 +143,10 @@ function categorizeComponent(component: ComponentDoc): ComponentInfo {
     return { category: "file-browser", subdir: OUTPUT_SUBDIRS.FILES };
   }
 
+  if (relativePath.includes(PATH_PATTERNS.CHAT_DIR)) {
+    return { category: "chat", subdir: OUTPUT_SUBDIRS.CHAT };
+  }
+
   return { category: "ui", subdir: OUTPUT_SUBDIRS.UI };
 }
 
@@ -334,7 +348,7 @@ function buildExampleInfo(component: ComponentDoc): ExampleInfo | undefined {
   }
 
   // Genie / Multi-Genie / Chat components — examples next to source files
-  if (info.category === "genie") {
+  if (info.category === "genie" || info.category === "chat") {
     const sourceDir = path.dirname(filePath);
     const examplePath = path.join(
       sourceDir,
@@ -373,7 +387,8 @@ ${buildComponentDetails(component, {
     if (
       subdir === OUTPUT_SUBDIRS.DATA ||
       subdir === OUTPUT_SUBDIRS.GENIE ||
-      subdir === OUTPUT_SUBDIRS.FILES
+      subdir === OUTPUT_SUBDIRS.FILES ||
+      subdir === OUTPUT_SUBDIRS.CHAT
     ) {
       // For data components: show code only (no interactive preview)
       const sourceCode = fs.readFileSync(example.path, MARKDOWN.FILE_ENCODING);
@@ -584,6 +599,21 @@ function main() {
       }
     }
 
+    // Exclude non-component files from chat directory.
+    // Hooks (use-*.ts), the transport class, lib utilities, and barrel
+    // files are documented in the hand-written `chat/index.md` overview.
+    if (info.category === "chat") {
+      const basename = path.basename(filePath);
+      if (
+        basename === "index.ts" ||
+        basename === "utils.ts" ||
+        basename.startsWith("use-") ||
+        basename === "responses-api-transport.ts"
+      ) {
+        return false;
+      }
+    }
+
     return (
       Boolean(displayName) &&
       !excludeList.includes(displayName) &&
@@ -649,16 +679,26 @@ function main() {
   // Create output directory if it doesn't exist
   fs.mkdirSync(outputDir, { recursive: true });
 
-  // Delete only subdirectories (preserve root-level files)
-  // This preserves files like _index.md (category link) and styling.md (manual docs)
-  if (fs.existsSync(outputDir)) {
-    const entries = fs.readdirSync(outputDir, { withFileTypes: true });
-    for (const entry of entries) {
-      if (entry.isDirectory()) {
-        fs.rmSync(path.join(outputDir, entry.name), {
-          recursive: true,
-          force: true,
-        });
+  // Subdirectories owned by the generator. Inside each, only auto-generated
+  // artifacts (*.mdx and the auto-written _category_.json) are deleted on
+  // regen — hand-written files like `index.md` are preserved.
+  const generatedSubdirs = [
+    OUTPUT_SUBDIRS.DATA,
+    OUTPUT_SUBDIRS.UI,
+    OUTPUT_SUBDIRS.GENIE,
+    OUTPUT_SUBDIRS.FILES,
+    OUTPUT_SUBDIRS.CHAT,
+  ];
+  for (const sub of generatedSubdirs) {
+    const subPath = path.join(outputDir, sub);
+    if (!fs.existsSync(subPath)) continue;
+    const files = fs.readdirSync(subPath, { withFileTypes: true });
+    for (const f of files) {
+      if (
+        f.isFile() &&
+        (f.name.endsWith(".mdx") || f.name === FILE_EXTENSIONS.CATEGORY_CONFIG)
+      ) {
+        fs.rmSync(path.join(subPath, f.name), { force: true });
       }
     }
   }
@@ -668,10 +708,12 @@ function main() {
   const uiOutputDir = path.join(outputDir, OUTPUT_SUBDIRS.UI);
   const genieOutputDir = path.join(outputDir, OUTPUT_SUBDIRS.GENIE);
   const filesOutputDir = path.join(outputDir, OUTPUT_SUBDIRS.FILES);
+  const chatOutputDir = path.join(outputDir, OUTPUT_SUBDIRS.CHAT);
   fs.mkdirSync(dataOutputDir, { recursive: true });
   fs.mkdirSync(uiOutputDir, { recursive: true });
   fs.mkdirSync(genieOutputDir, { recursive: true });
   fs.mkdirSync(filesOutputDir, { recursive: true });
+  fs.mkdirSync(chatOutputDir, { recursive: true });
 
   // Create _category_.json files for proper sidebar labels
   fs.writeFileSync(
@@ -722,6 +764,18 @@ function main() {
     )}\n`,
     MARKDOWN.FILE_ENCODING,
   );
+  fs.writeFileSync(
+    path.join(chatOutputDir, FILE_EXTENSIONS.CATEGORY_CONFIG),
+    `${JSON.stringify(
+      {
+        label: "Chat primitives",
+        position: 7,
+      },
+      null,
+      2,
+    )}\n`,
+    MARKDOWN.FILE_ENCODING,
+  );
 
   let count = 0;