diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/ai-query-dialog.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/ai-query-dialog.tsx
index 8359ea35fc..1e80621352 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/ai-query-dialog.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/ai-query-dialog.tsx
@@ -1,5 +1,9 @@
 "use client";
 
+import { MarkdownText } from "@/components/assistant-ui/markdown-text";
+import { Thread } from "@/components/assistant-ui/thread";
+import { ToolFallback } from "@/components/assistant-ui/tool-fallback";
+import type { CmdKPreviewProps } from "@/components/cmdk-commands";
 import { Button } from "@/components/ui";
 import {
   Dialog,
@@ -12,20 +16,18 @@ import {
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { SimpleTooltip } from "@/components/ui/simple-tooltip";
+import { Textarea } from "@/components/ui/textarea";
+import { CreateDashboardPreview } from "@/components/commands/create-dashboard/create-dashboard-preview";
 import { useUpdateConfig } from "@/lib/config-update";
-import { cn } from "@/lib/utils";
+import { AssistantRuntimeProvider, type ToolCallContentPartProps } from "@assistant-ui/react";
 import {
-  ArrowCounterClockwiseIcon,
+  ArrowClockwiseIcon,
   CheckIcon,
   CopyIcon,
   FloppyDiskIcon,
   LayoutIcon,
-  PaperPlaneTiltIcon,
   SparkleIcon,
-  SpinnerGapIcon,
-  StopIcon,
   TrashIcon,
-  UserIcon,
   XIcon,
 } from "@phosphor-icons/react";
 import { generateSecureRandomString } from "@stackframe/stack-shared/dist/utils/crypto";
@@ -33,160 +35,66 @@ import {
   runAsynchronously,
   runAsynchronouslyWithAlert,
 } from "@stackframe/stack-shared/dist/utils/promises";
-import type { UIMessage } from "@ai-sdk/react";
 import {
-  memo,
   useCallback,
   useEffect,
   useMemo,
-  useRef,
   useState,
-  type KeyboardEvent,
 } from "react";
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
-import type { CmdKPreviewProps } from "@/components/cmdk-commands";
-import { CreateDashboardPreview } from "@/components/commands/create-dashboard/create-dashboard-preview";
 import { useAdminApp } from "../../use-admin-app";
 import type { AiQueryChat } from "./use-ai-query-chat";
 
-// ─── Chat message rendering ─────────────────────────────────────────
-
-type OrderedPart =
-  | { kind: "text", text: string }
-  | { kind: "tool", id: string, state: string, query: string | null, error: string | null };
-
-function getOrderedParts(message: UIMessage): OrderedPart[] {
-  const parts: OrderedPart[] = [];
-  for (const [idx, part] of message.parts.entries()) {
-    if (part.type === "text") {
-      const text = (part as { type: "text", text: string }).text;
-      if (text.trim()) {
-        parts.push({ kind: "text", text });
-      }
-      continue;
-    }
-    if (!part.type.startsWith("tool-") || !part.type.endsWith("queryAnalytics")) continue;
-    const tp = part as {
-      type: string,
-      state: string,
-      input?: Record<string, unknown>,
-      output?: Record<string, unknown>,
-    };
-    const query =
-      typeof tp.input?.query === "string" ? (tp.input.query as string) : null;
-    const output = tp.output;
-    let errorMessage: string | null = null;
-    if (output && typeof output === "object") {
-      const success = (output as { success?: unknown }).success;
-      if (success === false) {
-        const err = (output as { error?: unknown }).error;
-        errorMessage = typeof err === "string" ? err : "Query failed";
-      }
-    }
-    parts.push({
-      kind: "tool",
-      id: `${message.id}-${idx}`,
-      state: tp.state,
-      query,
-      error: errorMessage,
-    });
-  }
-  return parts;
-}
+function AnalyticsQueryToolCall(
+  props: ToolCallContentPartProps & {
+    currentQuery: string | null,
+    onApplyQuery: (query: string) => void,
+  },
+) {
+  const query = (props.args as { query?: unknown } | undefined)?.query;
+  const queryString = typeof query === "string" ? query : "";
+  const result = props.result as { success?: unknown } | null | undefined;
+  const isSuccessful = props.status.type === "complete" && result?.success !== false;
+  const canApply = isSuccessful && queryString.trim().length > 0 && queryString !== props.currentQuery;
 
-const UserMessageBubble = memo(function UserMessageBubble({
-  content,
-}: {
-  content: string,
-}) {
   return (
-    <div className="flex items-start gap-2">
-      <div className="shrink-0 w-6 h-6 rounded-full bg-muted/50 flex items-center justify-center">
-        <UserIcon className="h-3 w-3 text-muted-foreground" />
-      </div>
-      <div className="flex-1 text-sm text-foreground whitespace-pre-wrap">
-        {content}
-      </div>
-    </div>
+    <ToolFallback
+      {...props}
+      headerAction={canApply ? (
+        <span className="flex items-center" onClick={(e) => e.stopPropagation()}>
+          <SimpleTooltip tooltip="Use this query">
+            <button
+              type="button"
+              onClick={() => props.onApplyQuery(queryString)}
+              className="inline-flex h-5 items-center gap-1 rounded-md px-1.5 text-[10px] font-medium leading-none text-muted-foreground/70 transition-colors hover:transition-none hover:bg-foreground/[0.06] hover:text-foreground"
+              aria-label="Use this query"
+            >
+              <ArrowClockwiseIcon className="h-2.5 w-2.5" />
+              Use query
+            </button>
+          </SimpleTooltip>
+        </span>
+      ) : undefined}
+    />
   );
-});
+}
 
-const AssistantMessageBubble = memo(function AssistantMessageBubble({
-  parts,
-  currentQuery,
-  onRewindToQuery,
-}: {
-  parts: OrderedPart[],
-  currentQuery: string | null,
-  onRewindToQuery: (query: string) => void,
-}) {
+function AiQueryWelcome() {
   return (
-    <div className="flex items-start gap-2">
-      <div className="shrink-0 w-6 h-6 rounded-full bg-purple-500/10 flex items-center justify-center">
-        <SparkleIcon className="h-3 w-3 text-purple-400" />
-      </div>
-      <div className="flex-1 min-w-0 space-y-2">
-        {parts.map((part, idx) => {
-          if (part.kind === "text") {
-            return (
-              <div key={idx} className="prose prose-sm prose-invert max-w-none text-sm text-foreground/90 [&_p]:my-1 [&_ul]:my-1 [&_ol]:my-1">
-                <ReactMarkdown remarkPlugins={[remarkGfm]}>{part.text}</ReactMarkdown>
-              </div>
-            );
-          }
-          const isActiveQuery = part.query != null && part.query === currentQuery;
-          return (
-            <div
-              key={part.id}
-              className={cn(
-                "rounded-md border px-2 py-1.5 text-[11px]",
-                part.error
-                  ? "border-red-500/30 bg-red-500/5 text-red-300"
-                  : part.state === "output-available"
-                    ? "border-emerald-500/20 bg-emerald-500/5 text-emerald-300"
-                    : "border-purple-500/20 bg-purple-500/5 text-purple-200",
-              )}
-            >
-              <div className="flex items-center gap-1.5">
-                {part.state !== "output-available" && !part.error && (
-                  <SpinnerGapIcon className="h-3 w-3 animate-spin" />
-                )}
-                <span className="font-medium">
-                  {part.error
-                    ? "Query failed"
-                    : part.state === "output-available"
-                      ? "Ran query"
-                      : "Building query"}
-                </span>
-                {!isActiveQuery && part.query && part.state === "output-available" && !part.error && (
-                  <>
-                    <div className="flex-1" />
-                    <SimpleTooltip tooltip="Rewind to this query">
-                      <button
-                        type="button"
-                        onClick={() => onRewindToQuery(part.query!)}
-                        className="p-0.5 rounded text-current opacity-60 hover:opacity-100 transition-opacity hover:transition-none"
-                        aria-label="Rewind to this query"
-                      >
-                        <ArrowCounterClockwiseIcon className="h-3 w-3" />
-                      </button>
-                    </SimpleTooltip>
-                  </>
-                )}
-              </div>
-              {part.error && (
-                <p className="mt-1 font-mono text-[10px] opacity-90">
-                  {part.error}
-                </p>
-              )}
-            </div>
-          );
-        })}
+    <div className="flex w-full max-w-[var(--thread-max-width)] flex-grow flex-col">
+      <div className="flex w-full flex-grow flex-col items-center justify-center py-16 px-6">
+        <div className="w-12 h-12 rounded-2xl bg-purple-500/10 flex items-center justify-center mb-4 ring-1 ring-purple-500/20">
+          <SparkleIcon className="w-6 h-6 text-purple-400" weight="duotone" />
+        </div>
+        <h2 className="text-base font-semibold tracking-tight text-foreground mb-1.5">
+          Build an analytics query
+        </h2>
+        <p className="text-xs text-muted-foreground text-center max-w-[300px] leading-relaxed">
+          Ask for a table, segment, trend, or funnel. Try &ldquo;daily signups over the last 30 days&rdquo; or &ldquo;top 10 users by event count this week&rdquo;.
+        </p>
       </div>
     </div>
   );
-});
+}
 
 // ─── Save query sub-dialog ──────────────────────────────────────────
 
@@ -389,52 +297,44 @@ export function AiQueryDialog({
   chat,
   currentQuery,
 }: AiQueryDialogProps) {
-  const [followUpInput, setFollowUpInput] = useState("");
   const [copied, setCopied] = useState(false);
   const [saveOpen, setSaveOpen] = useState(false);
   const [buildOpen, setBuildOpen] = useState(false);
-  const messagesContainerRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  // Auto-scroll to the bottom whenever a new message arrives.
-  useEffect(() => {
-    if (!messagesContainerRef.current) return;
-    messagesContainerRef.current.scrollTop =
-      messagesContainerRef.current.scrollHeight;
-  }, [chat.messages, chat.isResponding]);
+  const [currentQueryDraft, setCurrentQueryDraft] = useState(currentQuery ?? "");
+  const assistantContentComponents = useMemo(() => ({
+    Text: MarkdownText,
+    tools: {
+      Fallback: ToolFallback,
+      by_name: {
+        queryAnalytics: (props: ToolCallContentPartProps) => (
+          <AnalyticsQueryToolCall
+            {...props}
+            currentQuery={currentQuery}
+            onApplyQuery={chat.rewindToQuery}
+          />
+        ),
+      },
+    },
+  }), [chat.rewindToQuery, currentQuery]);
 
-  // Focus the input when the dialog opens so the user can keep typing.
   useEffect(() => {
-    if (open) {
-      requestAnimationFrame(() => inputRef.current?.focus());
-    }
-  }, [open]);
-
-  const handleSend = useCallback(() => {
-    const text = followUpInput.trim();
-    if (!text || chat.isResponding) return;
-    setFollowUpInput("");
-    runAsynchronously(chat.sendMessage({ text }));
-  }, [followUpInput, chat]);
+    setCurrentQueryDraft(currentQuery ?? "");
+  }, [currentQuery]);
 
-  const handleKeyDown = useCallback(
-    (e: KeyboardEvent<HTMLInputElement>) => {
-      if (e.key === "Enter" && !e.shiftKey) {
-        e.preventDefault();
-        handleSend();
-      }
-    },
-    [handleSend],
-  );
+  const applyCurrentQueryDraft = useCallback(() => {
+    if (currentQueryDraft.trim().length === 0 || currentQueryDraft === currentQuery) return;
+    chat.rewindToQuery(currentQueryDraft);
+  }, [chat, currentQuery, currentQueryDraft]);
 
   const handleCopy = useCallback(async () => {
-    if (!currentQuery) return;
-    await navigator.clipboard.writeText(currentQuery);
+    if (!currentQueryDraft) return;
+    await navigator.clipboard.writeText(currentQueryDraft);
     setCopied(true);
     setTimeout(() => setCopied(false), 1500);
-  }, [currentQuery]);
+  }, [currentQueryDraft]);
 
-  const canActOnQuery = Boolean(currentQuery && currentQuery.trim().length > 0);
+  const canActOnQuery = currentQueryDraft.trim().length > 0;
+  const hasUnappliedCurrentQueryEdits = currentQueryDraft.trim().length > 0 && currentQueryDraft !== (currentQuery ?? "");
 
   return (
     <>
@@ -451,7 +351,7 @@ export function AiQueryDialog({
                   <SimpleTooltip tooltip="Clear chat">
                     <button
                       type="button"
-                      onClick={() => chat.setMessages([])}
+                      onClick={chat.clearMessages}
                       className="p-1 rounded text-muted-foreground hover:text-foreground hover:bg-foreground/[0.06] transition-colors hover:transition-none"
                       aria-label="Clear chat"
                     >
@@ -471,136 +371,74 @@ export function AiQueryDialog({
             </div>
           </DialogHeader>
 
-          {/* Current query */}
           <div className="shrink-0 border-b border-border/40 bg-muted/20">
             <div className="flex items-center justify-between px-5 py-2">
               <Label className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
                 Current query
               </Label>
-              {canActOnQuery && (
-                <SimpleTooltip tooltip={copied ? "Copied!" : "Copy SQL"}>
-                  <button
-                    type="button"
-                    onClick={() => runAsynchronously(handleCopy())}
-                    className="p-1 rounded text-muted-foreground hover:text-foreground hover:bg-foreground/[0.06] transition-colors hover:transition-none"
-                  >
-                    {copied ? (
-                      <CheckIcon className="h-3 w-3 text-green-400" />
-                    ) : (
-                      <CopyIcon className="h-3 w-3" />
-                    )}
-                  </button>
-                </SimpleTooltip>
-              )}
+              <div className="flex items-center gap-1">
+                {hasUnappliedCurrentQueryEdits && (
+                  <SimpleTooltip tooltip="Apply query">
+                    <button
+                      type="button"
+                      onClick={applyCurrentQueryDraft}
+                      className="p-1 rounded text-muted-foreground hover:text-foreground hover:bg-foreground/[0.06] transition-colors hover:transition-none"
+                    >
+                      <ArrowClockwiseIcon className="h-3 w-3" />
+                    </button>
+                  </SimpleTooltip>
+                )}
+                {canActOnQuery && (
+                  <SimpleTooltip tooltip={copied ? "Copied!" : "Copy SQL"}>
+                    <button
+                      type="button"
+                      onClick={() => runAsynchronously(handleCopy())}
+                      className="p-1 rounded text-muted-foreground hover:text-foreground hover:bg-foreground/[0.06] transition-colors hover:transition-none"
+                    >
+                      {copied ? (
+                        <CheckIcon className="h-3 w-3 text-green-400" />
+                      ) : (
+                        <CopyIcon className="h-3 w-3" />
+                      )}
+                    </button>
+                  </SimpleTooltip>
+                )}
+              </div>
+            </div>
+            <div className="px-5 pb-3">
+              <Textarea
+                value={currentQueryDraft}
+                onChange={(e) => setCurrentQueryDraft(e.target.value)}
+                onBlur={applyCurrentQueryDraft}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+                    e.preventDefault();
+                    applyCurrentQueryDraft();
+                  }
+                }}
+                placeholder="Ask the AI a question to generate a query."
+                className="min-h-16 max-h-32 resize-y overflow-auto border-border/40 bg-background/70 font-mono text-[11px] text-foreground/90 shadow-none placeholder:italic placeholder:text-muted-foreground"
+              />
             </div>
-            <pre className="px-5 pb-3 whitespace-pre-wrap break-all font-mono text-[11px] text-foreground/90 max-h-32 overflow-auto">
-              {currentQuery?.trim() || (
-                <span className="text-muted-foreground italic">
-                  Ask the AI a question to generate a query.
-                </span>
-              )}
-            </pre>
           </div>
 
-          {/* Chat thread */}
-          <div
-            ref={messagesContainerRef}
-            className="flex-1 min-h-0 overflow-y-auto px-5 py-4 space-y-4"
-          >
-            {chat.messages.length === 0 && (
-              <div className="flex flex-col items-center justify-center h-full text-center gap-2">
-                <div className="w-10 h-10 rounded-full bg-purple-500/10 flex items-center justify-center">
-                  <SparkleIcon className="h-4 w-4 text-purple-400" />
-                </div>
-                <p className="text-sm text-muted-foreground">
-                  Describe what you want to see.
-                </p>
-                <p className="text-[11px] text-muted-foreground/70 max-w-sm">
-                  Try: &ldquo;daily signups over the last 30 days&rdquo; or
-                  &ldquo;top 10 users by event count this week&rdquo;.
-                </p>
-              </div>
-            )}
-
-            {chat.messages.map((message) => {
-              if (message.role === "user") {
-                const text = message.parts
-                  .filter((p): p is { type: "text", text: string } => p.type === "text")
-                  .map((p) => p.text)
-                  .join("");
-                return (
-                  <UserMessageBubble key={message.id} content={text} />
-                );
-              }
-              const parts = getOrderedParts(message);
-              if (parts.length === 0) return null;
-              return (
-                <AssistantMessageBubble
-                  key={message.id}
-                  parts={parts}
-                  currentQuery={currentQuery}
-                  onRewindToQuery={chat.rewindToQuery}
-                />
-              );
-            })}
-
-            {chat.isResponding && (
-              <div className="flex items-center gap-2 text-[11px] text-muted-foreground">
-                <SpinnerGapIcon className="h-3 w-3 animate-spin text-purple-400" />
-                Thinking…
-              </div>
-            )}
-
-            {chat.error && (
-              <div className="rounded-md border border-red-500/30 bg-red-500/5 px-3 py-2 text-[12px] text-red-300">
-                {chat.error.message || "Failed to get a response."}
-              </div>
-            )}
-          </div>
+          {chat.error && (
+            <div className="mx-5 mt-3 shrink-0 rounded-md border border-red-500/30 bg-red-500/5 px-3 py-2 text-[12px] text-red-300">
+              {chat.error.message || "Failed to get a response."}
+            </div>
+          )}
 
-          {/* Input */}
-          <div className="shrink-0 border-t border-border/40 px-5 py-3">
-            <div className="flex items-center gap-2 rounded-md bg-background/60 px-3 py-1.5 ring-1 ring-foreground/[0.08] focus-within:ring-purple-500/30 transition-shadow">
-              <input
-                ref={inputRef}
-                type="text"
-                value={followUpInput}
-                onChange={(e) => setFollowUpInput(e.target.value)}
-                onKeyDown={handleKeyDown}
-                placeholder="Refine the query…"
-                className="flex-1 min-w-0 bg-transparent text-sm outline-none placeholder:text-muted-foreground/60"
-                disabled={chat.isResponding}
+          <div className="flex flex-1 min-h-0 flex-col">
+            <AssistantRuntimeProvider runtime={chat.runtime}>
+              <Thread
+                composerPlaceholder="Refine the query..."
+                runningStatusMessages={["Thinking..."]}
+                assistantContentComponents={assistantContentComponents}
+                welcome={<AiQueryWelcome />}
               />
-              {chat.isResponding ? (
-                <SimpleTooltip tooltip="Stop generating">
-                  <button
-                    type="button"
-                    onClick={() => void chat.stop()}
-                    className="shrink-0 rounded p-0.5 text-muted-foreground hover:text-foreground transition-colors hover:transition-none"
-                    aria-label="Stop generating"
-                  >
-                    <StopIcon weight="fill" className="h-3.5 w-3.5" />
-                  </button>
-                </SimpleTooltip>
-              ) : (
-                <button
-                  type="button"
-                  onClick={handleSend}
-                  disabled={!followUpInput.trim()}
-                  className={cn(
-                    "shrink-0 rounded p-0.5 text-muted-foreground",
-                    "hover:text-purple-400 disabled:opacity-40 disabled:hover:text-muted-foreground",
-                    "transition-colors hover:transition-none",
-                  )}
-                  aria-label="Send"
-                >
-                  <PaperPlaneTiltIcon className="h-3.5 w-3.5" />
-                </button>
-              )}
-            </div>
+            </AssistantRuntimeProvider>
           </div>
 
-          {/* Actions */}
           <DialogFooter className="px-5 py-3 border-t border-border/40 sm:justify-between gap-2">
             <span className="text-[11px] text-muted-foreground">
               Save the query or turn it into a live dashboard.
@@ -633,12 +471,12 @@ export function AiQueryDialog({
       <SaveQueryInlineDialog
         open={saveOpen}
         onOpenChange={setSaveOpen}
-        sqlQuery={currentQuery ?? ""}
+        sqlQuery={currentQueryDraft}
       />
       <BuildDashboardDialog
         open={buildOpen}
         onOpenChange={setBuildOpen}
-        sqlQuery={currentQuery ?? ""}
+        sqlQuery={currentQueryDraft}
       />
     </>
   );
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/page-client.tsx
index 6150348132..18d70181bd 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/page-client.tsx
@@ -165,7 +165,7 @@ function TableContent({ tableId }: { tableId: TableId }) {
   const defaultOrderDir = isAiActive ? undefined : tableConfig.defaultOrderDir;
 
   const handleResetChat = useCallback(() => {
-    chat.setMessages([]);
+    chat.clearMessages();
   }, [chat]);
 
   const aiSearchBar = (
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/use-ai-query-chat.test.ts b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/use-ai-query-chat.test.ts
index 7f2d22df9b..f941edc632 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/use-ai-query-chat.test.ts
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/use-ai-query-chat.test.ts
@@ -1,44 +1,96 @@
-import type { UIMessage } from "@ai-sdk/react";
+import type { ThreadMessage } from "@assistant-ui/react";
 import { describe, expect, it } from "vitest";
 import { extractLatestQuery } from "./use-ai-query-chat";
 
+const fixture = (messages: Array<{
+  id: string,
+  role: "assistant",
+  content: Array<
+    | { type: "text", text: string }
+    | { type: "tool-call", toolCallId: string, toolName: string, args: { query?: string }, argsText?: string, result: unknown }
+  >,
+}>) => messages as unknown as readonly ThreadMessage[];
+
 describe("extractLatestQuery", () => {
   it("ignores failed queryAnalytics tool calls and keeps the last successful query", () => {
-    const messages = [
+    const messages = fixture([
       {
         id: "assistant-1",
         role: "assistant",
-        parts: [
+        content: [
           {
-            type: "tool-queryAnalytics",
+            type: "tool-call",
             toolCallId: "call-1",
-            state: "output-available",
-            input: { query: "SELECT 1" },
-            output: { success: true },
+            toolName: "queryAnalytics",
+            args: { query: "SELECT 1" },
+            argsText: '{"query":"SELECT 1"}',
+            result: { success: true },
           },
         ],
       },
       {
         id: "assistant-2",
         role: "assistant",
-        parts: [
+        content: [
           {
-            type: "tool-queryAnalytics",
+            type: "tool-call",
             toolCallId: "call-2",
-            state: "output-error",
-            input: { query: "SELECT broken" },
-            errorText: "boom",
+            toolName: "queryAnalytics",
+            args: { query: "SELECT broken" },
+            argsText: '{"query":"SELECT broken"}',
+            result: { success: false, error: "boom" },
           },
         ],
       },
-    ] satisfies UIMessage[];
+    ]);
 
     const result = extractLatestQuery(messages);
 
     expect(result).toEqual({
       query: "SELECT 1",
-      state: "output-available",
       toolCallIndex: 2,
     });
   });
+
+  it("returns null while a tool call is still in flight (result == null)", () => {
+    const messages = fixture([
+      {
+        id: "assistant-1",
+        role: "assistant",
+        content: [
+          {
+            type: "tool-call",
+            toolCallId: "call-1",
+            toolName: "queryAnalytics",
+            args: { query: "SELECT 1" },
+            argsText: '{"query":"SELECT 1"}',
+            result: null,
+          },
+        ],
+      },
+    ]);
+
+    expect(extractLatestQuery(messages)).toBeNull();
+  });
+
+  it("ignores tool calls from unrelated tools", () => {
+    const messages = fixture([
+      {
+        id: "assistant-1",
+        role: "assistant",
+        content: [
+          {
+            type: "tool-call",
+            toolCallId: "call-1",
+            toolName: "someOtherTool",
+            args: { query: "SELECT 1" },
+            argsText: '{"query":"SELECT 1"}',
+            result: { success: true },
+          },
+        ],
+      },
+    ]);
+
+    expect(extractLatestQuery(messages)).toBeNull();
+  });
 });
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/use-ai-query-chat.ts b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/use-ai-query-chat.ts
index 72cdfaf1fa..748dc9d3bf 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/use-ai-query-chat.ts
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/use-ai-query-chat.ts
@@ -1,105 +1,76 @@
 "use client";
 
-import { buildStackAuthHeaders } from "@/lib/api-headers";
+import { createAnalyticsQueryChatAdapter } from "@/components/vibe-coding";
 import { getPublicEnvVar } from "@/lib/env";
-import { useChat, type UIMessage } from "@ai-sdk/react";
+import { useLocalThreadRuntime, type AssistantRuntime, type ThreadMessage, type ToolCallContentPart } from "@assistant-ui/react";
 import { useUser } from "@stackframe/stack";
 import { throwErr } from "@stackframe/stack-shared/dist/utils/errors";
-import { convertToModelMessages, DefaultChatTransport } from "ai";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useProjectId } from "../../use-admin-app";
 
-type ToolPart = {
-  type: string,
-  state: string,
-  input?: Record<string, unknown>,
-  output?: Record<string, unknown>,
-};
+const QUERY_ANALYTICS_TOOL = "queryAnalytics";
+
+type QueryToolPart = ToolCallContentPart<{ query?: string }, unknown>;
 
-function isToolPart(part: unknown): part is ToolPart {
-  if (typeof part !== "object" || part === null) return false;
-  const typed = part as { type?: unknown };
-  return typeof typed.type === "string" && typed.type.startsWith("tool-");
+function isQueryAnalyticsToolPart(
+  part: ThreadMessage["content"][number],
+): part is QueryToolPart {
+  return part.type === "tool-call" && part.toolName === QUERY_ANALYTICS_TOOL;
 }
 
-function isSuccessfulQueryToolPart(part: ToolPart): boolean {
-  if (part.state === "output-error") return false;
-  const success = part.output?.success;
-  if (success === false) return false;
-  return part.state === "output-available";
+function isSuccessfulQueryToolPart(part: QueryToolPart): boolean {
+  if (part.result == null) return false;
+  if (
+    typeof part.result === "object"
+    && "success" in part.result
+    && Reflect.get(part.result, "success") === false
+  ) {
+    return false;
+  }
+  return true;
 }
 
-/**
- * Walk backwards through messages / parts and return the most recent
- * `queryAnalytics` tool call. The frontend uses the `query` argument
- * of that call to drive the data grid — the AI is instructed to call
- * the tool any time it wants to commit a new query.
- */
-export function extractLatestQuery(messages: UIMessage[]): {
+export function extractLatestQuery(messages: readonly ThreadMessage[]): {
   query: string,
-  state: string,
   toolCallIndex: number,
 } | null {
   let toolCallIndex = 0;
-  // Count total tool calls across the conversation so we can use the
-  // index as a stable "generation" key — the dialog uses this to know
-  // when the query has been regenerated (for highlight/animation).
   for (const msg of messages) {
     if (msg.role !== "assistant") continue;
-    for (const part of msg.parts) {
-      if (isToolPart(part) && part.type.endsWith("queryAnalytics")) {
-        toolCallIndex += 1;
-      }
+    for (const part of msg.content) {
+      if (isQueryAnalyticsToolPart(part)) toolCallIndex += 1;
     }
   }
 
   for (let i = messages.length - 1; i >= 0; i--) {
     const msg = messages[i]!;
     if (msg.role !== "assistant") continue;
-    for (let j = msg.parts.length - 1; j >= 0; j--) {
-      const part = msg.parts[j]!;
-      if (!isToolPart(part)) continue;
-      if (!part.type.endsWith("queryAnalytics")) continue;
-      // Wait for a successful tool result before surfacing the query
-      // to the grid — otherwise we'd re-run partially streamed or
-      // failed SQL on every chunk / failed turn.
+    for (let j = msg.content.length - 1; j >= 0; j--) {
+      const part = msg.content[j]!;
+      if (!isQueryAnalyticsToolPart(part)) continue;
       if (!isSuccessfulQueryToolPart(part)) continue;
-      const query =
-        typeof part.input?.query === "string" ? (part.input.query as string) : null;
+      const query = typeof part.args.query === "string" ? part.args.query : null;
       if (query && query.trim().length > 0) {
-        return { query, state: part.state, toolCallIndex };
+        return { query, toolCallIndex };
       }
     }
   }
   return null;
 }
 
-export type AiQueryChat = ReturnType<typeof useChat> & {
-  /**
-   * The SQL query the frontend should render in the data grid. Only
-   * updates when an assistant turn COMPLETES, so the grid never
-   * flashes through intermediate inspection queries — the previously
-   * committed query stays visible while the AI is still responding.
-   */
+export type AiQueryChat = {
+  runtime: AssistantRuntime,
+  messages: readonly ThreadMessage[],
+  isResponding: boolean,
+  error: Error | null,
+  sendMessage: (input: { text: string }) => void,
+  clearMessages: () => void,
+  stop: () => void,
   latestQuery: string | null,
-  /** Monotonic counter — increments each time a new query is committed. */
   queryGeneration: number,
-  /** `true` while the AI is thinking or streaming a response. */
-  isResponding: boolean,
-  /** Rewind the active query to a specific SQL string from a previous tool call. */
   rewindToQuery: (query: string) => void,
 };
 
-/**
- * Shared chat hook for the analytics AI query builder. Sends user
- * messages to the unified AI endpoint with the `build-analytics-query`
- * system prompt and the `sql-query` tool, then extracts the latest
- * committed SQL query so the grid can render its results.
- *
- * Call this ONCE at the top of the tables page and pass the result
- * down to both the search bar and the eye dialog, so they share a
- * single conversation thread.
- */
 export function useAiQueryChat(): AiQueryChat {
   const currentUser = useUser();
   const projectId = useProjectId();
@@ -108,46 +79,41 @@ export function useAiQueryChat(): AiQueryChat {
     getPublicEnvVar("NEXT_PUBLIC_STACK_API_URL") ??
     throwErr("NEXT_PUBLIC_BROWSER_STACK_API_URL is not set");
 
-  const transport = useMemo(
-    () =>
-      new DefaultChatTransport({
-        api: `${backendBaseUrl}/api/latest/ai/query/stream`,
-        headers: () => buildStackAuthHeaders(currentUser),
-        prepareSendMessagesRequest: async ({ messages: uiMessages, headers }) => {
-          const modelMessages = await convertToModelMessages(uiMessages);
-          return {
-            body: {
-              systemPrompt: "build-analytics-query",
-              tools: ["sql-query"],
-              quality: "smart",
-              speed: "fast",
-              projectId,
-              messages: modelMessages.map((m) => ({
-                role: m.role,
-                content: m.content,
-              })),
-            },
-            headers,
-          };
-        },
-      }),
-    // The transport only needs to be rebuilt if the backend URL or
-    // project changes; current user is read via closure on each
-    // request, so it's not in the dep list on purpose.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [backendBaseUrl, projectId],
+  const [error, setError] = useState<Error | null>(null);
+
+  const adapter = useMemo(
+    () => createAnalyticsQueryChatAdapter(
+      backendBaseUrl,
+      currentUser ?? undefined,
+      projectId,
+      setError,
+    ),
+    [backendBaseUrl, currentUser, projectId],
   );
 
-  const chat = useChat({ transport });
+  const runtime = useLocalThreadRuntime(adapter, { maxSteps: 1 });
 
-  const isResponding = chat.status === "submitted" || chat.status === "streaming";
+  const [snapshot, setSnapshot] = useState(() => {
+    const s = runtime.thread.getState();
+    return { messages: s.messages, isRunning: s.isRunning };
+  });
+  useEffect(() => {
+    const update = () => {
+      const s = runtime.thread.getState();
+      setSnapshot((prev) =>
+        prev.messages === s.messages && prev.isRunning === s.isRunning
+          ? prev
+          : { messages: s.messages, isRunning: s.isRunning },
+      );
+    };
+    const unsub = runtime.thread.subscribe(update);
+    update();
+    return unsub;
+  }, [runtime]);
+
+  const isResponding = snapshot.isRunning;
+  const messages = snapshot.messages;
 
-  // Keep the committed query stable while the AI is still working —
-  // the grid should show the previous committed query (if any) until
-  // the current turn finishes, so we don't flash intermediate
-  // inspection queries into the grid. On turn completion we pick the
-  // LAST successful `queryAnalytics` tool call, which the prompt
-  // guarantees will be the user-facing final query.
   const [committed, setCommitted] = useState<{
     query: string,
     generation: number,
@@ -160,21 +126,39 @@ export function useAiQueryChat(): AiQueryChat {
     wasRespondingRef.current = isResponding;
     if (!justFinished) return;
 
-    const latest = extractLatestQuery(chat.messages);
+    const latest = extractLatestQuery(messages);
     if (latest == null) return;
     if (latest.toolCallIndex <= lastCommittedGenRef.current) return;
     lastCommittedGenRef.current = latest.toolCallIndex;
     setCommitted({ query: latest.query, generation: latest.toolCallIndex });
-  }, [isResponding, chat.messages]);
+  }, [isResponding, messages]);
 
-  // When the chat is reset (e.g. setMessages([])) we also clear the
-  // committed query so the grid falls back to its default.
   useEffect(() => {
-    if (chat.messages.length === 0 && committed != null) {
+    if (messages.length === 0 && committed != null) {
       lastCommittedGenRef.current = 0;
       setCommitted(null);
     }
-  }, [chat.messages.length, committed]);
+  }, [messages.length, committed]);
+
+  const sendMessage = useCallback(
+    ({ text }: { text: string }) => {
+      setError(null);
+      runtime.thread.append({
+        role: "user",
+        content: [{ type: "text", text }],
+      });
+    },
+    [runtime],
+  );
+
+  const clearMessages = useCallback(() => {
+    setError(null);
+    runtime.thread.import({ messages: [], headId: null });
+  }, [runtime]);
+
+  const stop = useCallback(() => {
+    runtime.thread.cancelRun();
+  }, [runtime]);
 
   const rewindToQuery = useCallback((query: string) => {
     setCommitted((prev) => ({
@@ -184,10 +168,15 @@ export function useAiQueryChat(): AiQueryChat {
   }, []);
 
   return {
-    ...chat,
+    runtime,
+    messages,
+    isResponding,
+    error,
+    sendMessage,
+    clearMessages,
+    stop,
     latestQuery: committed?.query ?? null,
     queryGeneration: committed?.generation ?? 0,
-    isResponding,
     rewindToQuery,
   };
 }
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-drafts/[draftId]/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-drafts/[draftId]/page-client.tsx
index a05cf21aaa..018afca780 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-drafts/[draftId]/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-drafts/[draftId]/page-client.tsx
@@ -251,6 +251,7 @@ export default function PageClient({ draftId }: { draftId: string }) {
                     toolComponents={<EmailDraftUI setCurrentCode={setCurrentCode} />}
                     useOffWhiteLightMode
                     runningStatusMessages={isRunning ? BUILDER_STATUS_MESSAGES : undefined}
+                    composerAttachments
                   />
                 }
               />
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-templates/[templateId]/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-templates/[templateId]/page-client.tsx
index 66f6e3a3c0..c48e92d11a 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-templates/[templateId]/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-templates/[templateId]/page-client.tsx
@@ -296,6 +296,7 @@ export default function PageClient(props: { templateId: string }) {
                 toolComponents={<EmailTemplateUI setCurrentCode={setCurrentCode} />}
                 useOffWhiteLightMode
                 runningStatusMessages={isRunning ? BUILDER_STATUS_MESSAGES : undefined}
+                composerAttachments
               />
             }
           />
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-themes/[themeId]/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-themes/[themeId]/page-client.tsx
index bb76ddbb49..047fd52f00 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-themes/[themeId]/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-themes/[themeId]/page-client.tsx
@@ -150,6 +150,7 @@ export default function PageClient({ themeId }: { themeId: string }) {
                 toolComponents={<EmailThemeUI setCurrentCode={setCurrentCode} />}
                 useOffWhiteLightMode
                 runningStatusMessages={isRunning ? BUILDER_STATUS_MESSAGES : undefined}
+                composerAttachments
               />
             }
           />
diff --git a/apps/dashboard/src/components/assistant-ui/chat-stream.ts b/apps/dashboard/src/components/assistant-ui/chat-stream.ts
new file mode 100644
index 0000000000..cf1ea1aba6
--- /dev/null
+++ b/apps/dashboard/src/components/assistant-ui/chat-stream.ts
@@ -0,0 +1,301 @@
+import { buildStackAuthHeaders, type CurrentUser } from "@/lib/api-headers";
+import type { ChatModelAdapter, ChatModelRunOptions, ChatModelRunResult } from "@assistant-ui/react";
+import type { ChatContent } from "@stackframe/stack-shared/dist/interface/admin-interface";
+import { captureError } from "@stackframe/stack-shared/dist/utils/errors";
+import {
+  convertToModelMessages,
+  DefaultChatTransport,
+  parseJsonEventStream,
+  readUIMessageStream,
+  uiMessageChunkSchema,
+  type UIMessage,
+  type UIMessageChunk,
+} from "ai";
+
+type ContentPart = { type: string };
+type AttachmentLike = { content?: readonly unknown[] };
+type ThreadMessageLikeForBackend = {
+  role: string,
+  content: readonly ContentPart[],
+  attachments?: readonly AttachmentLike[],
+};
+
+const isToolCall = (content: ContentPart): boolean => content.type === "tool-call";
+
+/** Maps thread messages to the backend wire format; merges `attachments` into `content`. */
+export function formatThreadMessagesForBackend(
+  messages: readonly ThreadMessageLikeForBackend[],
+): Array<{ role: string, content: unknown }> {
+  const formatted: Array<{ role: string, content: unknown }> = [];
+  for (const msg of messages) {
+    const textContent = msg.content.filter((c) => !isToolCall(c));
+    const attachmentContent: unknown[] = [];
+    if (msg.attachments) {
+      for (const attachment of msg.attachments) {
+        if (Array.isArray(attachment.content)) {
+          attachmentContent.push(...attachment.content);
+        }
+      }
+    }
+    const combined = [...textContent, ...attachmentContent];
+    if (combined.length > 0) {
+      formatted.push({ role: msg.role, content: combined });
+    }
+  }
+  return formatted;
+}
+
+export type AiStreamRequestBody = {
+  quality: string,
+  speed: string,
+  systemPrompt: string,
+  tools: string[],
+  messages: Array<{ role: string, content: unknown }>,
+  projectId?: string,
+};
+
+/**
+ * Sends a request to the AI streaming endpoint and returns a stream of UIMessageChunks
+ * (as produced by the Vercel AI SDK's `streamText().toUIMessageStreamResponse()`).
+ */
+export async function sendAiStreamRequest(
+  backendBaseUrl: string,
+  currentUser: CurrentUser | undefined,
+  body: AiStreamRequestBody,
+  abortSignal?: AbortSignal,
+): Promise<ReadableStream<UIMessageChunk>> {
+  const authHeaders = await buildStackAuthHeaders(currentUser);
+
+  const response = await fetch(`${backendBaseUrl}/api/latest/ai/query/stream`, {
+    method: "POST",
+    headers: {
+      "content-type": "application/json",
+      accept: "text/event-stream",
+      ...authHeaders,
+    },
+    ...(abortSignal ? { signal: abortSignal } : {}),
+    body: JSON.stringify(body),
+  });
+
+  if (!response.ok || !response.body) {
+    throw new Error(`AI stream request failed: ${response.status} ${response.statusText}`);
+  }
+
+  return parseJsonEventStream({
+    stream: response.body,
+    schema: uiMessageChunkSchema,
+  }).pipeThrough(
+    new TransformStream<
+      { success: true, value: UIMessageChunk, rawValue: unknown } | { success: false, error: unknown, rawValue: unknown },
+      UIMessageChunk
+    >({
+      transform(parseResult, controller) {
+        if (parseResult.success) {
+          controller.enqueue(parseResult.value);
+        }
+      },
+    }),
+  );
+}
+
+/** Maps an AI SDK tool UI part to assistant-ui `tool-call` content (`output-error` → `{ success: false, error }`). */
+function toolPartToChatContent(
+  toolName: string,
+  toolPart: {
+    toolCallId: string,
+    input?: unknown,
+    output?: unknown,
+    state?: string,
+    errorText?: string,
+  },
+): ChatContent[number] {
+  const input = toolPart.input ?? {};
+  const argsText = typeof input === "string" ? input : JSON.stringify(input);
+  const result = toolPart.state === "output-error"
+    ? { success: false, error: toolPart.errorText ?? "Tool errored" }
+    : (toolPart.output ?? null);
+  return {
+    type: "tool-call",
+    toolCallId: toolPart.toolCallId,
+    toolName,
+    args: input,
+    argsText,
+    result,
+  };
+}
+
+/**
+ * Converts a UIMessage's parts (as emitted by `readUIMessageStream`) into our
+ * ChatContent shape — compatible with assistant-ui's `ThreadAssistantContentPart[]`.
+ */
+export function uiPartsToChatContent(parts: UIMessage["parts"]): ChatContent {
+  const result: ChatContent = [];
+  for (const part of parts) {
+    if (part.type === "text") {
+      if (part.text) {
+        result.push({ type: "text", text: part.text });
+      }
+      continue;
+    }
+
+    if (part.type === "dynamic-tool") {
+      const toolPart = part as { toolCallId: string, toolName: string, input?: unknown, output?: unknown, state?: string, errorText?: string };
+      result.push(toolPartToChatContent(toolPart.toolName, toolPart));
+      continue;
+    }
+
+    if (typeof part.type === "string" && part.type.startsWith("tool-")) {
+      const toolName = part.type.slice("tool-".length);
+      const toolPart = part as { toolCallId: string, input?: unknown, output?: unknown, state?: string, errorText?: string };
+      result.push(toolPartToChatContent(toolName, toolPart));
+      continue;
+    }
+  }
+  return result;
+}
+
+export type WireMessage = { role: string, content: unknown };
+
+/**
+ * `DefaultChatTransport` configured for the unified `/api/latest/ai/query/stream`
+ * endpoint. Shared by `useChat`-style callers (analytics, create-dashboard).
+ * `transformMessages` runs after `convertToModelMessages` and can prepend
+ * extra context messages.
+ */
+export function createUnifiedAiTransport(opts: {
+  backendBaseUrl: string,
+  /** Either a value (closed at creation) or a getter called at request time for liveness. */
+  currentUser: CurrentUser | null | (() => CurrentUser | null),
+  systemPrompt: string,
+  tools: string[],
+  quality: "smart" | "fast",
+  speed: "fast" | "slow",
+  projectId: string | undefined,
+  transformMessages?: (messages: WireMessage[]) => Promise<WireMessage[]>,
+}): DefaultChatTransport<UIMessage> {
+  const resolveUser = () =>
+    typeof opts.currentUser === "function" ? opts.currentUser() : opts.currentUser;
+  return new DefaultChatTransport<UIMessage>({
+    api: `${opts.backendBaseUrl}/api/latest/ai/query/stream`,
+    headers: () => buildStackAuthHeaders(resolveUser()),
+    prepareSendMessagesRequest: async ({ messages: uiMessages, headers }) => {
+      const modelMessages = await convertToModelMessages(uiMessages);
+      const userMessages: WireMessage[] = modelMessages.map((m) => ({
+        role: m.role,
+        content: m.content,
+      }));
+      const finalMessages = opts.transformMessages
+        ? await opts.transformMessages(userMessages)
+        : userMessages;
+      return {
+        body: {
+          systemPrompt: opts.systemPrompt,
+          tools: opts.tools,
+          quality: opts.quality,
+          speed: opts.speed,
+          projectId: opts.projectId,
+          messages: finalMessages,
+        },
+        headers,
+      };
+    },
+  });
+}
+
+type RunMessages = ChatModelRunOptions["messages"];
+
+export type UnifiedAiChatAdapterOptions = {
+  backendBaseUrl: string,
+  currentUser: CurrentUser | undefined | (() => CurrentUser | undefined),
+  systemPrompt: string,
+  tools: string[],
+  quality: "smart" | "smartest" | "fast",
+  speed: "fast" | "slow",
+  projectId?: string,
+  transformMessages?: (messages: WireMessage[]) => Promise<WireMessage[]> | WireMessage[],
+  sanitizeContent?: (content: ChatContent) => ChatContent,
+  onRunStart?: () => void,
+  onRunEnd?: () => void,
+  onFinish?: (args: {
+    threadMessages: RunMessages,
+    wireMessages: WireMessage[],
+    assistantContent: ChatContent,
+  }) => void,
+  onError?: (args: { error: Error, threadMessages: RunMessages }) => void,
+};
+
+/**
+ * Shared `ChatModelAdapter` factory for `useLocalRuntime` / `useLocalThreadRuntime`
+ * callers that talk to `/api/latest/ai/query/stream`. Mirrors the wire shape of
+ * `createUnifiedAiTransport` so every surface is reachable from a single place.
+ */
+export function createUnifiedAiChatAdapter(opts: UnifiedAiChatAdapterOptions): ChatModelAdapter {
+  const resolveUser = (): CurrentUser | undefined =>
+    typeof opts.currentUser === "function" ? opts.currentUser() : opts.currentUser;
+
+  return {
+    async *run({ messages, abortSignal }: ChatModelRunOptions): AsyncGenerator<ChatModelRunResult, void> {
+      opts.onRunStart?.();
+      let latest: ChatContent = [];
+      try {
+        const baseWire = formatThreadMessagesForBackend(messages);
+        const wireMessages = opts.transformMessages
+          ? await opts.transformMessages(baseWire)
+          : baseWire;
+
+        const chunkStream = await sendAiStreamRequest(
+          opts.backendBaseUrl,
+          resolveUser(),
+          {
+            quality: opts.quality,
+            speed: opts.speed,
+            systemPrompt: opts.systemPrompt,
+            tools: opts.tools,
+            messages: wireMessages,
+            projectId: opts.projectId,
+          },
+          abortSignal,
+        );
+
+        for await (const uiMessage of readUIMessageStream({ stream: chunkStream })) {
+          if (abortSignal.aborted) return;
+          const raw = uiPartsToChatContent(uiMessage.parts);
+          latest = opts.sanitizeContent ? opts.sanitizeContent(raw) : raw;
+          yield { content: latest };
+        }
+
+        opts.onFinish?.({ threadMessages: messages, wireMessages, assistantContent: latest });
+      } catch (error) {
+        if (abortSignal.aborted) return;
+        const err = error instanceof Error ? error : new Error(String(error));
+        opts.onError?.({ error: err, threadMessages: messages });
+        throw err;
+      } finally {
+        opts.onRunEnd?.();
+      }
+    },
+  };
+}
+
+/**
+ * Classifies raw AI provider errors into user-friendly messages.
+ * Unclassified errors are reported to Sentry via `captureError`.
+ */
+export function getFriendlyAiErrorMessage(error: Error): string {
+  const causeMessage = (error as { cause?: { message?: string } }).cause?.message ?? "";
+  const blob = `${error.message} ${causeMessage}`;
+  if (/maximum context length|context_length_exceeded|too many tokens|context length/i.test(blob)) {
+    return "The conversation got too long. Try starting a new chat or asking a more focused question.";
+  }
+  if (/rate limit|429|quota|too many requests/i.test(blob)) {
+    return "Service is busy. Please try again in a moment.";
+  }
+  if (/timeout|ECONNRESET|fetch failed|network/i.test(blob)) {
+    return "Request timed out. Please try again.";
+  }
+  if (/result too large|limit \d+/i.test(blob)) {
+    return "The query returned too much data. Try narrowing your question or requesting fewer rows.";
+  }
+  captureError("ai-chat", error);
+  return "Something went wrong. Please try again.";
+}
diff --git a/apps/dashboard/src/components/assistant-ui/thread.tsx b/apps/dashboard/src/components/assistant-ui/thread.tsx
index af27c79e4b..2a9a7261e4 100644
--- a/apps/dashboard/src/components/assistant-ui/thread.tsx
+++ b/apps/dashboard/src/components/assistant-ui/thread.tsx
@@ -27,7 +27,10 @@ import {
   MAX_IMAGE_MB_PER_FILE,
 } from "@stackframe/stack-shared/dist/ai/image-limits";
 import { runAsynchronously } from "@stackframe/stack-shared/dist/utils/promises";
-import { createContext, useContext, useEffect, useMemo, useRef, useState, type FC } from "react";
+import { createContext, useContext, useEffect, useMemo, useRef, useState, type ComponentProps, type FC, type ReactNode } from "react";
+
+type AssistantContentComponents = ComponentProps<typeof MessagePrimitive.Content>["components"];
+const AssistantContentComponentsContext = createContext<AssistantContentComponents | undefined>(undefined);
 
 const HideMessageActionsContext = createContext(false);
 const HasRunningStatusContext = createContext(false);
@@ -62,60 +65,60 @@ export const Thread: FC<{
   runningStatusMessages?: string[],
   composerAttachments?: boolean,
   attachmentAdapter?: AttachmentAdapter,
-}> = ({ useOffWhiteLightMode = false, composerPlaceholder, hideMessageActions = false, runningStatusMessages, composerAttachments = false, attachmentAdapter }) => {
+  /** Custom welcome / empty-state node. Defaults to the email-template welcome. */
+  welcome?: ReactNode,
+  /** Overrides for the assistant message content slots (Text / tools / etc.). */
+  assistantContentComponents?: AssistantContentComponents,
+  autoFocusComposer?: boolean,
+}> = ({ useOffWhiteLightMode = false, composerPlaceholder, hideMessageActions = false, runningStatusMessages, composerAttachments = false, attachmentAdapter, welcome, assistantContentComponents, autoFocusComposer = true }) => {
   return (
     <HideMessageActionsContext.Provider value={hideMessageActions}>
       <HasRunningStatusContext.Provider value={!!runningStatusMessages}>
-        <ComposerAttachmentAdapterContext.Provider value={attachmentAdapter ?? null}>
-          <ComposerAttachmentsEnabledContext.Provider value={composerAttachments}>
-            <ThreadPrimitive.Root
-              className={cn(
-          "box-border flex h-0 flex-grow flex-col overflow-hidden",
-          useOffWhiteLightMode ? "bg-slate-50/90 dark:bg-background" : "bg-background",
-        )}
-              style={{
-                ["--thread-max-width" as string]: "100%",
-              }}
-            >
-              <ThreadPrimitive.Viewport
-                className={cn(
-            "flex h-full flex-col items-center overflow-y-auto scroll-smooth px-3",
-            useOffWhiteLightMode ? "bg-slate-50/90 dark:bg-inherit" : "bg-inherit",
-          )}
+        <AssistantContentComponentsContext.Provider value={assistantContentComponents}>
+          <ComposerAttachmentAdapterContext.Provider value={attachmentAdapter ?? null}>
+            <ComposerAttachmentsEnabledContext.Provider value={composerAttachments}>
+              <ThreadPrimitive.Root
+                className="box-border flex h-0 flex-grow flex-col overflow-hidden bg-transparent"
+                style={{
+                  ["--thread-max-width" as string]: "100%",
+                }}
               >
-                <ThreadWelcome />
-
-                <ThreadPrimitive.Messages
-                  components={{
-                    UserMessage: UserMessage,
-                    EditComposer: EditComposer,
-                    AssistantMessage: AssistantMessage,
-                  }}
-                />
-
-                {runningStatusMessages && (
-                  <ThreadPrimitive.If running>
-                    <ThreadRunningStatus messages={runningStatusMessages} />
+                <ThreadPrimitive.Viewport
+                  className="flex h-full flex-col items-center overflow-y-auto scroll-smooth px-3 bg-inherit"
+                >
+                  {welcome ? (
+                    <ThreadPrimitive.Empty>{welcome}</ThreadPrimitive.Empty>
+                  ) : (
+                    <ThreadWelcome />
+                  )}
+
+                  <ThreadPrimitive.Messages
+                    components={{
+                      UserMessage: UserMessage,
+                      EditComposer: EditComposer,
+                      AssistantMessage: AssistantMessage,
+                    }}
+                  />
+
+                  {runningStatusMessages && (
+                    <ThreadPrimitive.If running>
+                      <ThreadRunningStatus messages={runningStatusMessages} />
+                    </ThreadPrimitive.If>
+                  )}
+
+                  <ThreadPrimitive.If empty={false}>
+                    <div className="min-h-6 flex-grow" />
                   </ThreadPrimitive.If>
-                )}
-
-                <ThreadPrimitive.If empty={false}>
-                  <div className="min-h-6 flex-grow" />
-                </ThreadPrimitive.If>
-
-                <div className={cn(
-            "sticky bottom-0 mt-2 flex w-full max-w-[var(--thread-max-width)] flex-col items-center justify-end bg-gradient-to-t to-transparent pt-6 pb-3",
-            useOffWhiteLightMode
-              ? "from-slate-50/90 via-slate-50/90 dark:from-background dark:via-background"
-              : "from-background via-background",
-          )}>
-                  <ThreadScrollToBottom />
-                  <Composer placeholder={composerPlaceholder} />
-                </div>
-              </ThreadPrimitive.Viewport>
-            </ThreadPrimitive.Root>
-          </ComposerAttachmentsEnabledContext.Provider>
-        </ComposerAttachmentAdapterContext.Provider>
+
+                  <div className="sticky bottom-0 mt-2 flex w-full max-w-[var(--thread-max-width)] flex-col items-center justify-end pt-6 pb-3">
+                    <ThreadScrollToBottom />
+                    <Composer placeholder={composerPlaceholder} autoFocus={autoFocusComposer} />
+                  </div>
+                </ThreadPrimitive.Viewport>
+              </ThreadPrimitive.Root>
+            </ComposerAttachmentsEnabledContext.Provider>
+          </ComposerAttachmentAdapterContext.Provider>
+        </AssistantContentComponentsContext.Provider>
       </HasRunningStatusContext.Provider>
     </HideMessageActionsContext.Provider>
   );
@@ -439,6 +442,7 @@ const ComposerAttachmentsAddButton: FC = () => {
   return (
     <TooltipIconButton
       tooltip={tooltipText}
+      side="top"
       onClick={handleClick}
       className={cn(
         "h-7 w-7 rounded-lg text-muted-foreground hover:bg-foreground/[0.05] hover:text-foreground",
@@ -460,7 +464,8 @@ const ComposerAnimatedInput: FC<{
   deleteSpeed: number,
   pauseAfterType: number,
   pauseAfterDelete: number,
-}> = ({ prefix, suffixes, typeSpeed, deleteSpeed, pauseAfterType, pauseAfterDelete }) => {
+  autoFocus?: boolean,
+}> = ({ prefix, suffixes, typeSpeed, deleteSpeed, pauseAfterType, pauseAfterDelete, autoFocus = true }) => {
   const [suffixText, setSuffixText] = useState("");
   const stateRef = useRef({
     suffixIndex: 0,
@@ -519,28 +524,28 @@ const ComposerAnimatedInput: FC<{
   return (
     <ComposerPrimitive.Input
       rows={1}
-      autoFocus
+      autoFocus={autoFocus}
       placeholder={prefix + suffixText}
       className={COMPOSER_INPUT_CLASS}
     />
   );
 };
 
-const ComposerStaticInput: FC<{ placeholder?: string }> = ({ placeholder }) => {
+const ComposerStaticInput: FC<{ placeholder?: string, autoFocus?: boolean }> = ({ placeholder, autoFocus = true }) => {
   return (
     <ComposerPrimitive.Input
       rows={1}
-      autoFocus
+      autoFocus={autoFocus}
       placeholder={placeholder ?? "Describe what you want..."}
       className={COMPOSER_INPUT_CLASS}
     />
   );
 };
 
-const Composer: FC<{ placeholder?: ComposerPlaceholder }> = ({ placeholder }) => {
+const Composer: FC<{ placeholder?: ComposerPlaceholder, autoFocus?: boolean }> = ({ placeholder, autoFocus = true }) => {
   const attachmentsEnabled = useComposerAttachmentsEnabled();
   return (
-    <ComposerPrimitive.Root className="group/composer relative flex w-full flex-col rounded-2xl border border-border/20 dark:border-foreground/[0.08] bg-white dark:bg-background/90 backdrop-blur-xl shadow-sm dark:shadow-lg ring-1 ring-foreground/[0.04] transition-all duration-150 hover:transition-none focus-within:ring-2 focus-within:ring-blue-500/20 focus-within:border-blue-500/30">
+    <ComposerPrimitive.Root className="group/composer relative flex w-full flex-col rounded-2xl border border-border/20 dark:border-foreground/[0.08] bg-background/95 dark:bg-background/80 shadow-sm ring-1 ring-foreground/[0.04] transition-all duration-150 hover:transition-none focus-within:ring-2 focus-within:ring-blue-500/20 focus-within:border-blue-500/30">
       {attachmentsEnabled && <ComposerAttachmentsRow />}
       {typeof placeholder === "object" ? (
         <ComposerAnimatedInput
@@ -550,9 +555,10 @@ const Composer: FC<{ placeholder?: ComposerPlaceholder }> = ({ placeholder }) =>
           deleteSpeed={placeholder.deleteSpeed ?? 40}
           pauseAfterType={placeholder.pauseAfterType ?? 2000}
           pauseAfterDelete={placeholder.pauseAfterDelete ?? 400}
+          autoFocus={autoFocus}
         />
       ) : (
-        <ComposerStaticInput placeholder={placeholder} />
+        <ComposerStaticInput placeholder={placeholder} autoFocus={autoFocus} />
       )}
       <div className="flex items-center justify-between px-3 pb-2.5 gap-2">
         <div className="flex items-center gap-1">
@@ -704,6 +710,8 @@ const EditComposer: FC = () => {
 
 const AssistantMessage: FC = () => {
   const hasRunningStatus = useContext(HasRunningStatusContext);
+  const overrideComponents = useContext(AssistantContentComponentsContext);
+  const contentComponents: AssistantContentComponents = overrideComponents ?? { Text: MarkdownText };
   return (
     <MessagePrimitive.Root className="flex flex-col relative w-full max-w-[var(--thread-max-width)] py-4 group">
       <div className="flex items-start gap-3">
@@ -723,7 +731,7 @@ const AssistantMessage: FC = () => {
         </div>
         <div className="flex-1 min-w-0 space-y-2">
           <div className="text-foreground break-words leading-relaxed text-sm">
-            <MessagePrimitive.Content components={{ Text: MarkdownText }} />
+            <MessagePrimitive.Content components={contentComponents} />
           </div>
           <MessageError />
           <AssistantActionBar />
diff --git a/apps/dashboard/src/components/assistant-ui/tool-fallback.tsx b/apps/dashboard/src/components/assistant-ui/tool-fallback.tsx
new file mode 100644
index 0000000000..f55ef236ed
--- /dev/null
+++ b/apps/dashboard/src/components/assistant-ui/tool-fallback.tsx
@@ -0,0 +1,120 @@
+"use client";
+
+import { cn } from "@/components/ui";
+import { type ToolCallContentPartProps } from "@assistant-ui/react";
+import { CaretDownIcon, DatabaseIcon, SpinnerGapIcon } from "@phosphor-icons/react";
+import { useState, type ReactNode } from "react";
+
+/**
+ * Shared assistant-ui tool fallback. Renders a collapsible card for any
+ * tool call streamed from the unified AI endpoint (sql-query, docs, etc.).
+ */
+export function ToolFallback({
+  toolName,
+  args,
+  result,
+  status,
+  argsText,
+  headerAction,
+}: ToolCallContentPartProps & { headerAction?: ReactNode }) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const isRunning = status.type === "running" || status.type === "requires-action";
+  const isComplete = status.type === "complete";
+  const isIncomplete = status.type === "incomplete";
+
+  const typed = (result ?? undefined) as { success?: boolean, result?: unknown[], error?: string, rowCount?: number } | undefined;
+  const hasOutput = typed !== undefined;
+  const isSuccess = hasOutput && typed.success !== false && !isIncomplete;
+  const errorMessage = hasOutput && typed.success === false
+    ? typed.error
+    : isIncomplete
+      ? (status.error as { message?: string } | undefined)?.message
+      : undefined;
+
+  const label = toolName === "queryAnalytics" ? "Analytics Query" : toolName;
+  const queryArg = (args as { query?: string } | undefined)?.query ?? (argsText ? argsText : undefined);
+
+  return (
+    <div
+      className={cn(
+        "my-2 rounded-lg overflow-hidden transition-all duration-200 ease-out",
+        "bg-foreground/[0.03] ring-1 ring-foreground/[0.08]",
+        isExpanded && "ring-purple-500/20",
+      )}
+    >
+      <button
+        type="button"
+        onClick={() => setIsExpanded(prev => !prev)}
+        className={cn(
+          "w-full flex items-center gap-2 px-3 py-2 text-left",
+          "hover:bg-foreground/[0.02] transition-colors",
+        )}
+      >
+        <DatabaseIcon className="h-3.5 w-3.5 text-purple-400 shrink-0" />
+        <span className="text-[12px] font-medium text-foreground/80 flex-1">{label}</span>
+        {isRunning ? (
+          <SpinnerGapIcon className="h-3 w-3 text-purple-400 animate-spin shrink-0" />
+        ) : isComplete && isSuccess && typed.rowCount !== undefined ? (
+          <span className="text-[10px] text-green-400/80 shrink-0">
+            {typed.rowCount} {typed.rowCount === 1 ? "row" : "rows"}
+          </span>
+        ) : !isSuccess && (isIncomplete || hasOutput) ? (
+          <span className="text-[10px] text-red-400/80 shrink-0">Error</span>
+        ) : null}
+        {headerAction ? (
+          <span className="flex shrink-0 items-center">
+            {headerAction}
+          </span>
+        ) : null}
+        <div className={cn("flex shrink-0 items-center transition-transform duration-200", !isExpanded && "-rotate-90")}>
+          <CaretDownIcon className="h-3 w-3 text-muted-foreground/50" />
+        </div>
+      </button>
+
+      <div
+        className={cn(
+          "grid transition-all duration-200 ease-out",
+          isExpanded ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0",
+        )}
+      >
+        <div className="overflow-hidden">
+          <div className="px-3 pb-3 pt-1 space-y-2 border-t border-foreground/[0.06]">
+            {queryArg && (
+              <div>
+                <span className="text-[9px] font-medium text-muted-foreground/60 uppercase tracking-wider">
+                  Query
+                </span>
+                <pre className="mt-1 text-[10px] font-mono text-foreground/70 bg-foreground/[0.03] rounded px-2 py-1.5 overflow-x-auto whitespace-pre-wrap break-all">
+                  {queryArg}
+                </pre>
+              </div>
+            )}
+            {hasOutput && isSuccess && (
+              <div>
+                <span className="text-[9px] font-medium text-muted-foreground/60 uppercase tracking-wider">Result</span>
+                <pre className="mt-1 text-[10px] font-mono text-foreground/70 bg-foreground/[0.03] rounded px-2 py-1.5 overflow-x-auto max-h-[200px] overflow-y-auto whitespace-pre-wrap break-all">
+                  {JSON.stringify(typed.result ?? typed, null, 2)}
+                </pre>
+              </div>
+            )}
+            {errorMessage && (
+              <div>
+                <span className="text-[9px] font-medium text-muted-foreground/60 uppercase tracking-wider">Error</span>
+                <div className="mt-1 text-[11px] text-red-400/90 bg-red-500/[0.08] rounded px-2 py-1.5">
+                  {errorMessage}
+                </div>
+              </div>
+            )}
+            {isRunning && (
+              <div className="flex items-center gap-2 text-[11px] text-muted-foreground/60 py-1">
+                <SpinnerGapIcon className="h-3 w-3 animate-spin" />
+                <span>Running query...</span>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/components/assistant-ui/tooltip-icon-button.tsx b/apps/dashboard/src/components/assistant-ui/tooltip-icon-button.tsx
index 9213190e79..9e01a6e18e 100644
--- a/apps/dashboard/src/components/assistant-ui/tooltip-icon-button.tsx
+++ b/apps/dashboard/src/components/assistant-ui/tooltip-icon-button.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { ComponentPropsWithoutRef, forwardRef } from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
 import {
   Tooltip,
@@ -35,7 +36,9 @@ export const TooltipIconButton = forwardRef<
             <span className="sr-only">{tooltip}</span>
           </Button>
         </TooltipTrigger>
-        <TooltipContent side={side}>{tooltip}</TooltipContent>
+        <TooltipPrimitive.Portal>
+          <TooltipContent side={side} collisionPadding={8}>{tooltip}</TooltipContent>
+        </TooltipPrimitive.Portal>
       </Tooltip>
     </TooltipProvider>
   );
diff --git a/apps/dashboard/src/components/commands/ai-chat-shared.tsx b/apps/dashboard/src/components/commands/ai-chat-shared.tsx
deleted file mode 100644
index 75723abb4b..0000000000
--- a/apps/dashboard/src/components/commands/ai-chat-shared.tsx
+++ /dev/null
@@ -1,558 +0,0 @@
-import { cn } from "@/components/ui";
-import { buildStackAuthHeaders, type CurrentUser } from "@/lib/api-headers";
-import { getPublicEnvVar } from "@/lib/env";
-import type { UIMessage } from "@ai-sdk/react";
-import { ArrowSquareOutIcon, CaretDownIcon, CheckIcon, CopyIcon, DatabaseIcon, SparkleIcon, SpinnerGapIcon, UserIcon } from "@phosphor-icons/react";
-import { captureError, throwErr } from "@stackframe/stack-shared/dist/utils/errors";
-import { runAsynchronously } from "@stackframe/stack-shared/dist/utils/promises";
-import { convertToModelMessages, DefaultChatTransport } from "ai";
-import { memo, useCallback, useEffect, useRef, useState } from "react";
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
-
-
-export function createAskAiTransport({
-  currentUser,
-  projectId,
-}: {
-  currentUser: CurrentUser | null,
-  projectId: string | undefined,
-}): DefaultChatTransport<UIMessage> {
-  const backendBaseUrl = getPublicEnvVar("NEXT_PUBLIC_STACK_API_URL") ?? throwErr("NEXT_PUBLIC_STACK_API_URL is not set");
-  return new DefaultChatTransport<UIMessage>({
-    api: `${backendBaseUrl}/api/latest/ai/query/stream`,
-    headers: () => buildStackAuthHeaders(currentUser),
-    prepareSendMessagesRequest: async ({ messages: uiMessages, headers }) => {
-      const modelMessages = await convertToModelMessages(uiMessages);
-      return {
-        body: {
-          systemPrompt: "command-center-ask-ai",
-          tools: ["docs", "sql-query"],
-          quality: "smart",
-          speed: "slow",
-          projectId,
-          messages: modelMessages.map(m => ({
-            role: m.role,
-            content: m.content,
-          })),
-        },
-        headers,
-      };
-    },
-  });
-}
-
-// Memoized copy button for performance
-export const CopyButton = memo(function CopyButton({ text, className, size = "sm" }: {
-  text: string,
-  className?: string,
-  size?: "sm" | "xs",
-}) {
-  const [copied, setCopied] = useState(false);
-
-  const handleCopy = useCallback(async () => {
-    await navigator.clipboard.writeText(text);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 1500);
-  }, [text]);
-
-  const iconSize = size === "xs" ? "h-2.5 w-2.5" : "h-3 w-3";
-
-  return (
-    <button
-      onClick={(e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        runAsynchronously(handleCopy());
-      }}
-      className={cn(
-        "shrink-0 rounded transition-colors hover:transition-none",
-        size === "xs" ? "p-0.5" : "p-1",
-        copied
-          ? "text-green-400"
-          : "text-muted-foreground/50 hover:text-muted-foreground hover:bg-foreground/[0.08]",
-        className
-      )}
-      title={copied ? "Copied!" : "Copy"}
-      type="button"
-    >
-      {copied ? <CheckIcon className={iconSize} /> : <CopyIcon className={iconSize} />}
-    </button>
-  );
-});
-
-// Truncate URL for display while keeping full URL for copy
-export function truncateUrl(url: string, maxLength = 50): string {
-  if (url.length <= maxLength) return url;
-  const match = url.match(/^https?:\/\/([^/?#]+)(\/[^?#]*)?(\?[^#]*)?(#.*)?$/);
-  if (match) {
-    const host = match[1];
-    const path = (match[2] || "") + (match[3] || "");
-    if (path.length > 30) {
-      return host + path.slice(0, 20) + "..." + path.slice(-10);
-    }
-  }
-  return url.slice(0, maxLength - 3) + "...";
-}
-
-// Inline code with smart copy button
-export const InlineCode = memo(function InlineCode({ children }: { children?: React.ReactNode }) {
-  const text = String(children || "");
-  const isUrl = /^https?:\/\//.test(text);
-  const isCommand = /^(npm|npx|pnpm|yarn|curl|git|docker|cd|mkdir|ls|brew|apt|pip)/.test(text);
-  const isPath = /^[./~]/.test(text) && text.includes("/");
-  const showCopy = isUrl || isCommand || isPath || text.length > 15;
-
-  // For very long URLs, show truncated version
-  const displayText = isUrl && text.length > 60 ? truncateUrl(text, 55) : text;
-
-  return (
-    <code className={cn(
-      "inline-flex items-center gap-1 max-w-full rounded px-1.5 py-0.5",
-      "bg-foreground/[0.06] text-[11px] font-mono leading-relaxed",
-      "break-all"
-    )}>
-      <span className={cn(
-        "min-w-0",
-        isUrl ? "text-blue-400" : "text-foreground/90"
-      )}>
-        {displayText}
-      </span>
-      {showCopy && <CopyButton text={text} size="xs" />}
-    </code>
-  );
-});
-
-// Code block with language label and copy
-export const CodeBlock = memo(function CodeBlock({ children, className }: {
-  children?: React.ReactNode,
-  className?: string,
-}) {
-  const text = String(children || "").replace(/\n$/, "");
-  const language = className?.replace("language-", "").toUpperCase() ?? "";
-
-  return (
-    <div className="relative group my-2.5 rounded-lg bg-foreground/[0.04] ring-1 ring-foreground/[0.06] overflow-hidden">
-      {/* Header with language and copy */}
-      <div className="flex items-center justify-between px-3 py-1.5 border-b border-foreground/[0.06] bg-foreground/[0.02]">
-        <span className="text-[9px] font-medium text-muted-foreground/60 uppercase tracking-wider">
-          {language || "CODE"}
-        </span>
-        <CopyButton text={text} size="xs" />
-      </div>
-      {/* Code content */}
-      <div className="overflow-x-auto">
-        <pre className="p-3 text-[11px] font-mono leading-relaxed">
-          <code className="text-foreground/90">{children}</code>
-        </pre>
-      </div>
-    </div>
-  );
-});
-
-// Smart link component with copy and external icon
-export const SmartLink = memo(function SmartLink({ href, children }: {
-  href?: string,
-  children?: React.ReactNode,
-}) {
-  const displayText = String(children || href || "");
-  const isFullUrl = href?.startsWith("http");
-  const isDocsLink = href?.includes("docs.stack-auth.com");
-
-  // Truncate long URLs for display
-  const truncatedDisplay = displayText.length > 55 ? truncateUrl(displayText, 50) : displayText;
-
-  return (
-    <span className="inline-flex items-center gap-1 max-w-full">
-      <a
-        href={href}
-        className={cn(
-          "inline-flex items-center gap-1 text-blue-400 hover:text-blue-300",
-          "hover:underline underline-offset-2 transition-colors hover:transition-none",
-          "break-all"
-        )}
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <span className="min-w-0">{truncatedDisplay}</span>
-        {isFullUrl && !isDocsLink && (
-          <ArrowSquareOutIcon className="shrink-0 h-2.5 w-2.5 opacity-60" />
-        )}
-      </a>
-      {isFullUrl && href && <CopyButton text={href} size="xs" />}
-    </span>
-  );
-});
-
-export type ToolInvocationPart = Extract<UIMessage["parts"][number], { type: `tool-${string}` }>;
-
-
-// Expandable tool invocation card
-export const ToolInvocationCard = memo(function ToolInvocationCard({
-  invocation,
-}: {
-  invocation: ToolInvocationPart,
-}) {
-  const [isExpanded, setIsExpanded] = useState(false);
-  const isLoading = invocation.state === "input-streaming" || invocation.state === "input-available";
-  const hasResult = invocation.state === "output-available";
-  const hasError = invocation.state === "output-error";
-
-  // Extract tool name from type (e.g., "tool-queryAnalytics" → "queryAnalytics")
-  const toolName = invocation.type.replace(/^tool-/, "");
-
-  // Format the tool name for display
-  const getToolDisplay = () => {
-    if (toolName === "queryAnalytics") {
-      return { label: "Analytics Query", icon: DatabaseIcon };
-    }
-    return { label: toolName, icon: DatabaseIcon };
-  };
-
-  const { label, icon: Icon } = getToolDisplay();
-
-  const input = invocation.input as { query?: string } | undefined;
-  const queryArg = input?.query;
-  const result = invocation.output as { success?: boolean, result?: unknown[], error?: string, rowCount?: number };
-
-  return (
-    <div
-      className={cn(
-        "my-2 rounded-lg overflow-hidden transition-all duration-200 ease-out",
-        "bg-foreground/[0.03] ring-1 ring-foreground/[0.08]",
-        isExpanded && "ring-purple-500/20"
-      )}
-    >
-      {/* Header - always visible */}
-      <button
-        type="button"
-        onClick={() => setIsExpanded(!isExpanded)}
-        className={cn(
-          "w-full flex items-center gap-2 px-3 py-2 text-left",
-          "hover:bg-foreground/[0.02] transition-colors"
-        )}
-      >
-        <Icon className="h-3.5 w-3.5 text-purple-400 shrink-0" />
-        <span className="text-[12px] font-medium text-foreground/80 flex-1">
-          {label}
-        </span>
-        {isLoading ? (
-          <SpinnerGapIcon className="h-3 w-3 text-purple-400 animate-spin shrink-0" />
-        ) : hasError ? (
-          <span className="text-[10px] text-red-400/80 shrink-0">Error</span>
-        ) : hasResult && result.success ? (
-          <span className="text-[10px] text-green-400/80 shrink-0">
-            {result.rowCount} {result.rowCount === 1 ? "row" : "rows"}
-          </span>
-        ) : hasResult && !result.success ? (
-          <span className="text-[10px] text-red-400/80 shrink-0">Error</span>
-        ) : null}
-        <div className={cn(
-          "transition-transform duration-200",
-          isExpanded && "rotate-0",
-          !isExpanded && "-rotate-90"
-        )}>
-          <CaretDownIcon className="h-3 w-3 text-muted-foreground/50" />
-        </div>
-      </button>
-
-      {/* Expandable content */}
-      <div
-        className={cn(
-          "grid transition-all duration-200 ease-out",
-          isExpanded ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
-        )}
-      >
-        <div className="overflow-hidden">
-          <div className="px-3 pb-3 pt-1 space-y-2 border-t border-foreground/[0.06]">
-            {/* Query */}
-            {queryArg && (
-              <div>
-                <div className="flex items-center justify-between mb-1">
-                  <span className="text-[9px] font-medium text-muted-foreground/60 uppercase tracking-wider">
-                    Query
-                  </span>
-                  <CopyButton text={queryArg} size="xs" />
-                </div>
-                <pre className="text-[10px] font-mono text-foreground/70 bg-foreground/[0.03] rounded px-2 py-1.5 overflow-x-auto whitespace-pre-wrap break-all">
-                  {queryArg}
-                </pre>
-              </div>
-            )}
-
-            {/* Result */}
-            {hasResult && (
-              <div>
-                <div className="flex items-center justify-between mb-1">
-                  <span className="text-[9px] font-medium text-muted-foreground/60 uppercase tracking-wider">
-                    {result.success ? "Result" : "Error"}
-                  </span>
-                  {result.success && result.result && (
-                    <CopyButton text={JSON.stringify(result.result, null, 2)} size="xs" />
-                  )}
-                </div>
-                {result.success ? (
-                  <pre className="text-[10px] font-mono text-foreground/70 bg-foreground/[0.03] rounded px-2 py-1.5 overflow-x-auto max-h-[200px] overflow-y-auto whitespace-pre-wrap break-all">
-                    {JSON.stringify(result.result, null, 2)}
-                  </pre>
-                ) : (
-                  <div className="text-[11px] text-red-400/90 bg-red-500/[0.08] rounded px-2 py-1.5">
-                    {result.error || "Query failed"}
-                  </div>
-                )}
-              </div>
-            )}
-
-            {/* Error state from SDK */}
-            {hasError && invocation.errorText && (
-              <div>
-                <div className="flex items-center justify-between mb-1">
-                  <span className="text-[9px] font-medium text-muted-foreground/60 uppercase tracking-wider">
-                    Error
-                  </span>
-                </div>
-                <div className="text-[11px] text-red-400/90 bg-red-500/[0.08] rounded px-2 py-1.5">
-                  {invocation.errorText}
-                </div>
-              </div>
-            )}
-
-            {/* Loading state */}
-            {isLoading && (
-              <div className="flex items-center gap-2 text-[11px] text-muted-foreground/60 py-1">
-                <SpinnerGapIcon className="h-3 w-3 animate-spin" />
-                <span>Running query...</span>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-});
-
-// Memoized markdown components for consistent rendering
-export const markdownComponents = {
-  p: ({ children }: { children?: React.ReactNode }) => (
-    <p className="text-[13px] text-foreground/90 mb-2.5 last:mb-0 leading-relaxed">
-      {children}
-    </p>
-  ),
-  ul: ({ children }: { children?: React.ReactNode }) => (
-    <ul className="text-[13px] text-foreground/90 mb-2.5 pl-4 space-y-1 list-disc marker:text-muted-foreground/40">
-      {children}
-    </ul>
-  ),
-  ol: ({ children }: { children?: React.ReactNode }) => (
-    <ol className="text-[13px] text-foreground/90 mb-2.5 pl-4 space-y-1.5 list-decimal marker:text-muted-foreground/60">
-      {children}
-    </ol>
-  ),
-  li: ({ children }: { children?: React.ReactNode }) => (
-    <li className="leading-relaxed pl-0.5">{children}</li>
-  ),
-  code: ({ children, className }: { children?: React.ReactNode, className?: string }) => {
-    if (className) {
-      return <CodeBlock className={className}>{children}</CodeBlock>;
-    }
-    return <InlineCode>{children}</InlineCode>;
-  },
-  pre: ({ children }: { children?: React.ReactNode }) => <>{children}</>,
-  strong: ({ children }: { children?: React.ReactNode }) => (
-    <strong className="font-semibold text-foreground">{children}</strong>
-  ),
-  em: ({ children }: { children?: React.ReactNode }) => (
-    <em className="italic text-foreground/80">{children}</em>
-  ),
-  a: SmartLink,
-  table: ({ children }: { children?: React.ReactNode }) => (
-    <div className="overflow-x-auto my-2.5 rounded-lg ring-1 ring-foreground/[0.08]">
-      <table className="w-full text-[11px]">{children}</table>
-    </div>
-  ),
-  thead: ({ children }: { children?: React.ReactNode }) => (
-    <thead className="bg-foreground/[0.04] border-b border-foreground/[0.08]">{children}</thead>
-  ),
-  tbody: ({ children }: { children?: React.ReactNode }) => (
-    <tbody className="divide-y divide-foreground/[0.04]">{children}</tbody>
-  ),
-  tr: ({ children }: { children?: React.ReactNode }) => <tr>{children}</tr>,
-  th: ({ children }: { children?: React.ReactNode }) => (
-    <th className="px-2.5 py-1.5 text-left font-semibold text-foreground/90 whitespace-nowrap">
-      {children}
-    </th>
-  ),
-  td: ({ children }: { children?: React.ReactNode }) => (
-    <td className="px-2.5 py-1.5 text-foreground/70">{children}</td>
-  ),
-  h1: ({ children }: { children?: React.ReactNode }) => (
-    <h1 className="text-base font-semibold text-foreground mt-3 mb-2 first:mt-0">{children}</h1>
-  ),
-  h2: ({ children }: { children?: React.ReactNode }) => (
-    <h2 className="text-[13px] font-semibold text-foreground mt-3 mb-1.5 first:mt-0">{children}</h2>
-  ),
-  h3: ({ children }: { children?: React.ReactNode }) => (
-    <h3 className="text-[13px] font-semibold text-foreground mt-2.5 mb-1 first:mt-0">{children}</h3>
-  ),
-  blockquote: ({ children }: { children?: React.ReactNode }) => (
-    <blockquote className="border-l-2 border-purple-500/40 pl-3 my-2 text-foreground/70 italic">
-      {children}
-    </blockquote>
-  ),
-  hr: () => <hr className="my-3 border-foreground/[0.06]" />,
-};
-
-// Helper to count words in a string
-export function countWords(text: string): number {
-  return text.split(/\s+/).filter(Boolean).length;
-}
-
-// Helper to get first N words from text
-export function getFirstNWords(text: string, n: number): string {
-  const words = text.split(/(\s+)/); // Split but keep whitespace
-  let wordCount = 0;
-  let result = "";
-  for (const part of words) {
-    if (part.trim()) {
-      wordCount++;
-      if (wordCount > n) break;
-    }
-    result += part;
-  }
-  return result;
-}
-
-// Helper to extract text content from UIMessage parts
-export function getMessageContent(message: UIMessage): string {
-  return message.parts
-    .filter((part): part is { type: "text", text: string } => part.type === "text")
-    .map(part => part.text)
-    .join("");
-}
-
-// Helper to extract tool invocations from UIMessage parts
-export function getToolInvocations(message: UIMessage): ToolInvocationPart[] {
-  return message.parts.filter(
-    (part): part is ToolInvocationPart => part.type.startsWith("tool-")
-  );
-}
-
-// Memoized user message component
-export const UserMessage = memo(function UserMessage({ content }: { content: string }) {
-  return (
-    <div className="flex gap-2.5 justify-end">
-      <div className="min-w-0 rounded-xl px-3.5 py-2 max-w-[80%] bg-blue-500/10 text-foreground">
-        <p className="text-[13px] leading-relaxed break-words">{content}</p>
-      </div>
-      <div className="shrink-0 w-6 h-6 mt-0.5 rounded-full bg-blue-500/10 flex items-center justify-center">
-        <UserIcon className="h-3 w-3 text-blue-400" />
-      </div>
-    </div>
-  );
-});
-
-// Memoized assistant message component
-export const AssistantMessage = memo(function AssistantMessage({
-  content,
-  toolInvocations,
-}: {
-  content: string,
-  toolInvocations?: ToolInvocationPart[],
-}) {
-  const hasToolInvocations = toolInvocations && toolInvocations.length > 0;
-  const hasContent = content.trim().length > 0;
-
-  return (
-    <div className="flex gap-2.5 justify-start">
-      <div className="shrink-0 w-6 h-6 mt-0.5 rounded-full bg-purple-500/10 flex items-center justify-center">
-        <SparkleIcon className="h-3 w-3 text-purple-400" />
-      </div>
-      <div className="min-w-0 max-w-[calc(100%-2rem)] flex flex-col gap-1">
-        {/* Tool invocations */}
-        {hasToolInvocations && (
-          <div className="space-y-1">
-            {toolInvocations.map((invocation) => (
-              <ToolInvocationCard
-                key={invocation.toolCallId}
-                invocation={invocation}
-              />
-            ))}
-          </div>
-        )}
-
-        {/* Text content */}
-        {hasContent && (
-          <div className="rounded-xl px-3.5 py-2 bg-foreground/[0.02]">
-            <div className="min-w-0 overflow-hidden">
-              <ReactMarkdown
-                remarkPlugins={[remarkGfm]}
-                components={markdownComponents}
-              >
-                {content}
-              </ReactMarkdown>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-});
-
-// Word streaming hook - handles the progressive word reveal animation
-export function useWordStreaming(content: string) {
-  const [displayedWordCount, setDisplayedWordCount] = useState(0);
-  const targetWordCount = content ? countWords(content) : 0;
-  const previousContentRef = useRef("");
-
-  useEffect(() => {
-    if (!content) {
-      setDisplayedWordCount(0);
-      previousContentRef.current = "";
-      return;
-    }
-    if (!content.startsWith(previousContentRef.current)) {
-      setDisplayedWordCount(0);
-    }
-    previousContentRef.current = content;
-  }, [content]);
-
-  useEffect(() => {
-    if (targetWordCount === 0 || displayedWordCount >= targetWordCount) {
-      return;
-    }
-    const timeoutId = setTimeout(() => {
-      setDisplayedWordCount(prev => Math.min(prev + 1, targetWordCount));
-    }, 15);
-    return () => clearTimeout(timeoutId);
-  }, [displayedWordCount, targetWordCount]);
-
-  return {
-    displayedWordCount,
-    targetWordCount,
-    getDisplayContent: (text: string) => getFirstNWords(text, displayedWordCount),
-    isRevealing: displayedWordCount < targetWordCount,
-  };
-}
-
-
-// Classifies raw AI provider errors into user-friendly messages.
-// The raw error is captured to Sentry separately via captureError — never shown to the user.
-export function getFriendlyAiErrorMessage(error: Error): string {
-  const causeMessage = (error as { cause?: { message?: string } }).cause?.message ?? "";
-  const blob = `${error.message} ${causeMessage}`;
-  if (/maximum context length|context_length_exceeded|too many tokens|context length/i.test(blob)) {
-    return "The conversation got too long. Try starting a new chat or asking a more focused question.";
-  }
-  if (/rate limit|429|quota|too many requests/i.test(blob)) {
-    return "Service is busy. Please try again in a moment.";
-  }
-  if (/timeout|ECONNRESET|fetch failed|network/i.test(blob)) {
-    return "Request timed out. Please try again.";
-  }
-  if (/result too large|limit \d+/i.test(blob)) {
-    return "The query returned too much data. Try narrowing your question or requesting fewer rows.";
-  }
-  // Unclassified — this is unexpected, report it
-  captureError("ask-ai", error);
-  return "Something went wrong. Please try again.";
-}
diff --git a/apps/dashboard/src/components/commands/ask-ai.tsx b/apps/dashboard/src/components/commands/ask-ai.tsx
index 49d5cec4f8..09a8caabb9 100644
--- a/apps/dashboard/src/components/commands/ask-ai.tsx
+++ b/apps/dashboard/src/components/commands/ask-ai.tsx
@@ -1,260 +1,111 @@
-import { cn } from "@/components/ui";
+import { createUnifiedAiChatAdapter, getFriendlyAiErrorMessage } from "@/components/assistant-ui/chat-stream";
+import { ImageAttachmentAdapter } from "@/components/assistant-ui/image-attachment-adapter";
+import { MarkdownText } from "@/components/assistant-ui/markdown-text";
+import { Thread } from "@/components/assistant-ui/thread";
+import { ToolFallback } from "@/components/assistant-ui/tool-fallback";
 import { useDebouncedAction } from "@/hooks/use-debounced-action";
-import { useChat, type UIMessage } from "@ai-sdk/react";
-import { PaperPlaneTiltIcon, SparkleIcon, SpinnerGapIcon } from "@phosphor-icons/react";
+import { getPublicEnvVar } from "@/lib/env";
+import {
+  AssistantRuntimeProvider,
+  useLocalRuntime,
+  useThreadRuntime,
+  type ChatModelAdapter,
+} from "@assistant-ui/react";
 import { useUser } from "@stackframe/stack";
-import { runAsynchronously } from "@stackframe/stack-shared/dist/utils/promises";
+import { throwErr } from "@stackframe/stack-shared/dist/utils/errors";
 import { usePathname } from "next/navigation";
-import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
 import { CmdKPreviewProps } from "../cmdk-commands";
-import {
-  AssistantMessage,
-  createAskAiTransport,
-  getFriendlyAiErrorMessage,
-  getMessageContent,
-  getToolInvocations,
-  UserMessage,
-  useWordStreaming
-} from "./ai-chat-shared";
 
+const RUNNING_STATUS_MESSAGES = ["Thinking..."];
 
-/**
- * AI Chat Preview Component
- *
- * Displays an AI chat conversation. Sends the initial query on mount
- * and supports follow-up questions.
- */
-export function AIChatPreview({ query, ...rest }: CmdKPreviewProps) {
-  return <AIChatPreviewInner key={query} query={query} {...rest} />;
+export function AIChatPreview(props: CmdKPreviewProps) {
+  return <AIChatPreviewInner {...props} />;
 }
 
-
 const AIChatPreviewInner = memo(function AIChatPreview({
   query,
   registerOnFocus,
   unregisterOnFocus,
-  onBlur,
 }: CmdKPreviewProps) {
-  const [followUpInput, setFollowUpInput] = useState("");
-  const messagesContainerRef = useRef<HTMLDivElement>(null);
-  const followUpInputRef = useRef<HTMLInputElement>(null);
-  const lastMessageCountRef = useRef(0);
-  const isNearBottomRef = useRef(true);
   const currentUser = useUser();
   const pathname = usePathname();
   const projectId = pathname.startsWith("/projects/") ? pathname.split("/")[2] : undefined;
 
-  const trimmedQuery = query.trim();
+  const backendBaseUrl = getPublicEnvVar("NEXT_PUBLIC_STACK_API_URL")
+    ?? throwErr("NEXT_PUBLIC_STACK_API_URL is not set");
 
-  const {
-    messages,
-    status,
-    sendMessage,
-    error: aiError,
-  } = useChat({
-    transport: createAskAiTransport({ currentUser, projectId }),
-  });
+  const [runError, setRunError] = useState<string | null>(null);
 
-  const aiLoading = status === "submitted" || status === "streaming";
+  const chatAdapter = useMemo<ChatModelAdapter>(() => createUnifiedAiChatAdapter({
+    backendBaseUrl,
+    currentUser: currentUser ?? undefined,
+    systemPrompt: "command-center-ask-ai",
+    tools: ["docs", "sql-query"],
+    quality: "smart",
+    speed: "slow",
+    projectId,
+    onRunStart: () => setRunError(null),
+    onError: ({ error }) => setRunError(getFriendlyAiErrorMessage(error)),
+  }), [backendBaseUrl, currentUser, projectId]);
 
-  // Send initial query on mount (once) with debounce
-  useDebouncedAction({
-    action: async () => {
-      await sendMessage({ text: trimmedQuery });
-    },
-    delayMs: 400,
-    skip: !trimmedQuery,
+  const attachmentAdapter = useMemo(() => new ImageAttachmentAdapter(), []);
+
+  const runtime = useLocalRuntime(chatAdapter, {
+    adapters: { attachments: attachmentAdapter },
   });
 
-  // Word streaming for the last assistant message
-  const lastAssistantMessage = messages.slice(1).reverse().find((m: UIMessage) => m.role === "assistant");
-  const lastAssistantContent = lastAssistantMessage ? getMessageContent(lastAssistantMessage) : "";
-  const { displayedWordCount, getDisplayContent, isRevealing } = useWordStreaming(lastAssistantContent);
-  const isStreaming = aiLoading && lastAssistantMessage;
+  const assistantContentComponents = useMemo(() => ({
+    Text: MarkdownText,
+    tools: { Fallback: ToolFallback },
+  }), []);
+
+  const containerRef = useRef<HTMLDivElement>(null);
 
-  // Focus handler registration
   useEffect(() => {
     const focusHandler = () => {
-      followUpInputRef.current?.focus();
-      followUpInputRef.current?.select();
+      const textarea = containerRef.current?.querySelector<HTMLTextAreaElement>("textarea");
+      textarea?.focus();
     };
     registerOnFocus(focusHandler);
     return () => unregisterOnFocus(focusHandler);
   }, [registerOnFocus, unregisterOnFocus]);
 
-  // Track if user is near the bottom of the scroll container
-  const handleScroll = useCallback(() => {
-    if (!messagesContainerRef.current) return;
-    const { scrollTop, scrollHeight, clientHeight } = messagesContainerRef.current;
-    isNearBottomRef.current = scrollHeight - scrollTop - clientHeight < 100;
-  }, []);
-
-  // Auto-scroll when new messages are added or when already at bottom
-  useEffect(() => {
-    if (!messagesContainerRef.current) return;
-
-    const container = messagesContainerRef.current;
-    const messageCount = messages.length;
-
-    if (messageCount > lastMessageCountRef.current) {
-      container.scrollTop = container.scrollHeight;
-      isNearBottomRef.current = true;
-    } else if (aiLoading && isNearBottomRef.current) {
-      container.scrollTop = container.scrollHeight;
-    }
-
-    lastMessageCountRef.current = messageCount;
-  }, [messages, aiLoading]);
-
-  // Handle follow-up questions
-  const handleFollowUp = useCallback(() => {
-    const input = followUpInput.trim();
-    if (!input || aiLoading) return;
-    setFollowUpInput("");
-    // runAsynchronously intentionally used instead of runAsynchronouslyWithAlert:
-    // sendMessage errors are already surfaced to the user via the aiError state below.
-    runAsynchronously(sendMessage({ text: input }));
-    requestAnimationFrame(() => {
-      followUpInputRef.current?.focus();
-    });
-  }, [followUpInput, sendMessage, aiLoading]);
-
-  // Handle follow-up input keyboard
-  const handleFollowUpKeyDown = useCallback(
-    (e: React.KeyboardEvent<HTMLInputElement>) => {
-      if (e.nativeEvent.isComposing) return;
-      if (e.key === "Enter" && !e.shiftKey) {
-        e.preventDefault();
-        e.stopPropagation();
-        runAsynchronously(handleFollowUp());
-      } else if (e.key === "ArrowLeft") {
-        const input = e.currentTarget;
-        if (input.selectionStart === 0 && input.selectionEnd === 0) {
-          e.preventDefault();
-          e.stopPropagation();
-          onBlur();
-        }
-      } else if (e.key === "ArrowUp" || e.key === "ArrowDown") {
-        e.preventDefault();
-        e.stopPropagation();
-        const container = messagesContainerRef.current;
-        if (container) {
-          const scrollAmount = e.key === "ArrowUp" ? -100 : 100;
-          container.scrollBy({ top: scrollAmount, behavior: "smooth" });
-        }
-      }
-    },
-    [handleFollowUp, onBlur]
-  );
-
-  // Determine what to show in the loading state
-  const showLoadingIndicator = messages.length === 0 || (aiLoading && !messages.some((m: UIMessage) => m.role === "assistant" && getMessageContent(m)));
-
   return (
-    <div className="flex flex-col h-full w-full">
-      {/* Messages - skip the first user message (the initial query) */}
-      <div
-        ref={messagesContainerRef}
-        onScroll={handleScroll}
-        className="flex-1 overflow-y-auto overscroll-contain px-4 py-3 space-y-4"
-        style={{ scrollbarGutter: "stable" }}
-      >
-        {messages.slice(1).map((message: UIMessage, index: number, arr: UIMessage[]) => {
-          const messageContent = getMessageContent(message);
-          const toolInvocations = message.role === "assistant" ? getToolInvocations(message) : [];
-
-          // For the last assistant message, apply word-by-word streaming
-          const isLastAssistant = message.role === "assistant" &&
-            index === arr.length - 1 - (arr[arr.length - 1]?.role === "user" ? 1 : 0);
-          const displayContent = message.role === "assistant" && isLastAssistant
-            ? getDisplayContent(messageContent)
-            : messageContent;
-
-          // Don't render if no content to show yet AND no tool invocations
-          if (message.role === "assistant" && isLastAssistant && !displayContent && toolInvocations.length === 0) {
-            return null;
-          }
-
-          if (message.role === "user") {
-            return <UserMessage key={message.id || index} content={messageContent} />;
-          }
-          return (
-            <AssistantMessage
-              key={message.id || index}
-              content={displayContent}
-              toolInvocations={toolInvocations}
-            />
-          );
-        })}
-
-        {/* Loading indicator */}
-        {showLoadingIndicator && (
-          <div className="flex gap-2.5 justify-start">
-            <div className="shrink-0 w-6 h-6 rounded-full bg-purple-500/10 flex items-center justify-center">
-              <SparkleIcon className="h-3 w-3 text-purple-400" />
-            </div>
-            <div className="bg-foreground/[0.02] rounded-xl px-3.5 py-2">
-              <div className="flex items-center gap-2 text-[13px] text-muted-foreground">
-                <SpinnerGapIcon className="h-3.5 w-3.5 animate-spin" />
-                <span>Thinking...</span>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* Streaming indicator */}
-        {isStreaming && displayedWordCount > 0 && (
-          <div className="flex items-center gap-1.5 text-[10px] text-muted-foreground/50 pl-8">
-            <span className="inline-flex gap-0.5">
-              <span className="w-1 h-1 rounded-full bg-purple-400/60 animate-pulse" />
-              <span className="w-1 h-1 rounded-full bg-purple-400/60 animate-pulse" style={{ animationDelay: "150ms" }} />
-              <span className="w-1 h-1 rounded-full bg-purple-400/60 animate-pulse" style={{ animationDelay: "300ms" }} />
-            </span>
-          </div>
-        )}
-
-        {/* Error display */}
-        {aiError && (
-          <div className="flex items-start gap-2 text-[12px] text-red-400/90 px-3 py-2 bg-red-500/[0.08] rounded-lg ring-1 ring-red-500/20">
+    <AssistantRuntimeProvider runtime={runtime}>
+      <AskAiAutoSend query={query} />
+      <div ref={containerRef} className="flex flex-col h-full w-full">
+        {runError && (
+          <div className="mx-3 mt-2 flex items-start gap-2 text-[12px] text-red-400/90 px-3 py-2 bg-red-500/[0.08] rounded-lg ring-1 ring-red-500/20 shrink-0">
             <span className="shrink-0 mt-0.5">⚠</span>
-            <span>{getFriendlyAiErrorMessage(aiError)}</span>
+            <span>{runError}</span>
           </div>
         )}
+        <Thread
+          composerPlaceholder="Ask a follow-up question..."
+          runningStatusMessages={RUNNING_STATUS_MESSAGES}
+          assistantContentComponents={assistantContentComponents}
+          composerAttachments
+          attachmentAdapter={attachmentAdapter}
+          autoFocusComposer={false}
+        />
       </div>
-
-      {/* Follow-up input */}
-      <div className="shrink-0 border-t border-foreground/[0.05] px-3.5 py-2.5">
-        <div className="flex items-center gap-2 rounded-lg bg-foreground/[0.03] px-3 py-1.5 ring-1 ring-foreground/[0.05] focus-within:ring-purple-500/25 transition-shadow">
-          <input
-            ref={followUpInputRef}
-            type="text"
-            value={followUpInput}
-            onChange={(e) => setFollowUpInput(e.target.value)}
-            onKeyDown={handleFollowUpKeyDown}
-            placeholder="Ask a follow-up question..."
-            className="flex-1 bg-transparent text-[13px] outline-none placeholder:text-muted-foreground/40"
-            autoComplete="off"
-            autoCorrect="off"
-            spellCheck={false}
-          />
-          <button
-            onClick={() => runAsynchronously(handleFollowUp())}
-            disabled={!followUpInput.trim() || aiLoading}
-            className={cn(
-              "p-1 rounded transition-colors hover:transition-none",
-              followUpInput.trim() && !aiLoading
-                ? "text-purple-400 hover:text-purple-300 hover:bg-purple-500/10"
-                : "text-muted-foreground/25 cursor-not-allowed"
-            )}
-            type="button"
-          >
-            <PaperPlaneTiltIcon className="h-3.5 w-3.5" />
-          </button>
-        </div>
-        <p className="text-[9px] text-muted-foreground/40 mt-1.5 text-center">
-          Enter to send
-        </p>
-      </div>
-    </div>
+    </AssistantRuntimeProvider>
   );
 });
+
+function AskAiAutoSend({ query }: { query: string }) {
+  const threadRuntime = useThreadRuntime();
+  const trimmed = query.trim();
+  useDebouncedAction({
+    action: async () => {
+      threadRuntime.append({
+        role: "user",
+        content: [{ type: "text", text: trimmed }],
+      });
+    },
+    delayMs: 1000,
+    skip: !trimmed,
+  });
+  return null;
+}
diff --git a/apps/dashboard/src/components/commands/create-dashboard/create-dashboard-preview.tsx b/apps/dashboard/src/components/commands/create-dashboard/create-dashboard-preview.tsx
index 6691a3bf4e..adddbf2251 100644
--- a/apps/dashboard/src/components/commands/create-dashboard/create-dashboard-preview.tsx
+++ b/apps/dashboard/src/components/commands/create-dashboard/create-dashboard-preview.tsx
@@ -4,9 +4,9 @@ import { useAdminApp, useProjectId } from "@/app/(main)/(protected)/projects/[pr
 import { useRouter } from "@/components/router";
 import { Button } from "@/components/ui";
 import { useDebouncedAction } from "@/hooks/use-debounced-action";
+import { createUnifiedAiTransport } from "@/components/assistant-ui/chat-stream";
 import { buildDashboardMessages } from "@/lib/ai-dashboard/shared-prompt";
 import type { AppId } from "@/lib/apps-frontend";
-import { buildStackAuthHeaders } from "@/lib/api-headers";
 import { useUpdateConfig } from "@/lib/config-update";
 import { getPublicEnvVar } from "@/lib/env";
 import { cn } from "@/lib/utils";
@@ -18,7 +18,6 @@ import { typedEntries } from "@stackframe/stack-shared/dist/utils/objects";
 import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
 import { generateUuid } from "@stackframe/stack-shared/dist/utils/uuids";
 import { useChat, type UIMessage } from "@ai-sdk/react";
-import { convertToModelMessages, DefaultChatTransport } from "ai";
 import { memo, useCallback, useMemo, useRef, useState } from "react";
 import { CmdKPreviewProps } from "../../cmdk-commands";
 import { DashboardSandboxHost } from "./dashboard-sandbox-host";
@@ -118,15 +117,15 @@ const CreateDashboardPreviewInner = memo(function CreateDashboardPreviewInner({
 
   const finalizedRef = useRef(false);
 
-  const transport = useMemo(() => new DefaultChatTransport({
-    api: `${browserBaseUrl}/api/latest/ai/query/stream`,
-    headers: () => buildStackAuthHeaders(currentUserRef.current),
-    prepareSendMessagesRequest: async ({ messages: uiMessages, headers }) => {
-      const modelMessages = await convertToModelMessages(uiMessages);
-      const userMessages = modelMessages.map(m => ({
-        role: m.role as string,
-        content: m.content as unknown,
-      }));
+  const transport = useMemo(() => createUnifiedAiTransport({
+    backendBaseUrl: browserBaseUrl,
+    currentUser: () => currentUserRef.current,
+    systemPrompt: "create-dashboard",
+    tools: ["update-dashboard"],
+    quality: "smart",
+    speed: "slow",
+    projectId: projectIdRef.current,
+    transformMessages: async (userMessages) => {
       const contextMessages = await buildDashboardMessages(
         backendBaseUrlRef.current,
         currentUserRef.current,
@@ -134,17 +133,7 @@ const CreateDashboardPreviewInner = memo(function CreateDashboardPreviewInner({
         undefined,
         enabledAppIdsRef.current,
       );
-      return {
-        body: {
-          systemPrompt: "create-dashboard",
-          tools: ["update-dashboard"],
-          quality: "smart",
-          speed: "slow",
-          projectId: projectIdRef.current,
-          messages: [...contextMessages, ...userMessages],
-        },
-        headers,
-      };
+      return [...contextMessages, ...userMessages];
     },
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }), [browserBaseUrl]);
@@ -225,7 +214,7 @@ const CreateDashboardPreviewInner = memo(function CreateDashboardPreviewInner({
 
   useDebouncedAction({
     action: generateDashboard,
-    delayMs: 500,
+    delayMs: 1000,
     skip: !projectId || !prompt,
   });
 
diff --git a/apps/dashboard/src/components/commands/run-query.tsx b/apps/dashboard/src/components/commands/run-query.tsx
index f737995667..9c5f20f6b0 100644
--- a/apps/dashboard/src/components/commands/run-query.tsx
+++ b/apps/dashboard/src/components/commands/run-query.tsx
@@ -42,7 +42,7 @@ import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/
 import { memo, useCallback, useMemo, useState } from "react";
 import { CmdKPreviewProps } from "../cmdk-commands";
 
-const DEBOUNCE_MS = 400;
+const DEBOUNCE_MS = 1000;
 
 // Component for displaying dates with relative time (specific to command palette)
 function DateValue({ value }: { value: string }) {
diff --git a/apps/dashboard/src/components/stack-companion/ai-chat-widget.tsx b/apps/dashboard/src/components/stack-companion/ai-chat-widget.tsx
index 8c7e643bbc..4b6b376f7b 100644
--- a/apps/dashboard/src/components/stack-companion/ai-chat-widget.tsx
+++ b/apps/dashboard/src/components/stack-companion/ai-chat-widget.tsx
@@ -1,6 +1,11 @@
 'use client';
 
 import { cn } from "@/components/ui";
+import { createUnifiedAiChatAdapter, getFriendlyAiErrorMessage } from "@/components/assistant-ui/chat-stream";
+import { ImageAttachmentAdapter } from "@/components/assistant-ui/image-attachment-adapter";
+import { MarkdownText } from "@/components/assistant-ui/markdown-text";
+import { Thread } from "@/components/assistant-ui/thread";
+import { ToolFallback } from "@/components/assistant-ui/tool-fallback";
 import {
   createConversation,
   deleteConversation,
@@ -9,27 +14,52 @@ import {
   replaceConversationMessages,
   type ConversationSummary,
 } from "@/lib/ai-conversations";
-import { buildStackAuthHeaders } from "@/lib/api-headers";
 import { getPublicEnvVar } from "@/lib/env";
-import { useChat, type UIMessage } from "@ai-sdk/react";
-import { ArrowCounterClockwiseIcon, ArrowLeftIcon, ChatCircleDotsIcon, PaperPlaneTiltIcon, PlusIcon, SparkleIcon, SpinnerGapIcon, TrashIcon } from "@phosphor-icons/react";
+import {
+  AssistantRuntimeProvider,
+  useLocalRuntime,
+  type ChatModelAdapter,
+  type ThreadAssistantContentPart,
+  type ThreadMessage,
+  type ThreadMessageLike,
+} from "@assistant-ui/react";
+import { ArrowCounterClockwiseIcon, ArrowLeftIcon, ChatCircleDotsIcon, PlusIcon, SparkleIcon, SpinnerGapIcon, TrashIcon } from "@phosphor-icons/react";
 import { useUser } from "@stackframe/stack";
 import { throwErr } from "@stackframe/stack-shared/dist/utils/errors";
-import { runAsynchronously, runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
-import { convertToModelMessages, DefaultChatTransport } from "ai";
+import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
 import { usePathname } from "next/navigation";
-import { useCallback, useEffect, useRef, useState } from "react";
-import {
-  AssistantMessage,
-  getMessageContent,
-  getToolInvocations,
-  UserMessage,
-  useWordStreaming,
-} from "../commands/ai-chat-shared";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+type StoredPart = {
+  type: string,
+  text?: string,
+  image?: string,
+  toolCallId?: string,
+  toolName?: string,
+  input?: unknown,
+  output?: unknown,
+  args?: unknown,
+  argsText?: string,
+  result?: unknown,
+  state?: string,
+  isError?: boolean,
+};
+
+type StoredMessage = {
+  id?: string,
+  role: "user" | "assistant" | "system" | "tool",
+  content: unknown,
+};
 
 type ViewMode =
   | { view: 'list' }
-  | { view: 'chat', conversationId: string | null, initialMessages: UIMessage[] };
+  | { view: 'chat', conversationId: string | null, initialMessages: ThreadMessageLike[] };
+
+type ThreadLikeContentArray = Exclude<ThreadMessageLike["content"], string>;
+type ThreadLikeContentPart = ThreadLikeContentArray[number];
+type ThreadLikeToolArgs = Extract<ThreadLikeContentPart, { type: "tool-call" }> extends { args?: infer A } ? NonNullable<A> : never;
+
+const RUNNING_STATUS_MESSAGES = ["Thinking..."];
 
 function formatRelativeTime(dateString: string): string {
   const date = new Date(dateString);
@@ -45,6 +75,83 @@ function formatRelativeTime(dateString: string): string {
   return date.toLocaleDateString();
 }
 
+function convertStoredPartsToThreadContent(rawParts: unknown): ThreadLikeContentPart[] {
+  if (!Array.isArray(rawParts)) return [];
+  const result: ThreadLikeContentPart[] = [];
+  for (const candidate of rawParts as unknown[]) {
+    if (!candidate || typeof candidate !== "object") continue;
+    const raw = candidate as StoredPart;
+    if (typeof raw.type !== "string") continue;
+
+    if (raw.type === "text" && typeof raw.text === "string") {
+      result.push({ type: "text", text: raw.text });
+      continue;
+    }
+
+    if (raw.type === "image" && typeof raw.image === "string") {
+      result.push({ type: "image", image: raw.image });
+      continue;
+    }
+
+    if (raw.type === "tool-call") {
+      const args = ((raw.args ?? raw.input ?? {}) as unknown) as ThreadLikeToolArgs;
+      result.push({
+        type: "tool-call",
+        toolCallId: raw.toolCallId,
+        toolName: raw.toolName ?? "tool",
+        args,
+        argsText: raw.argsText ?? (typeof (raw.args ?? raw.input) === "string"
+          ? String(raw.args ?? raw.input)
+          : JSON.stringify(raw.args ?? raw.input ?? {})),
+        result: raw.result ?? raw.output,
+        isError: raw.isError ?? raw.state === "output-error",
+      });
+      continue;
+    }
+
+    if (raw.type === "dynamic-tool" || raw.type.startsWith("tool-")) {
+      const toolName = raw.type === "dynamic-tool"
+        ? (raw.toolName ?? "tool")
+        : raw.type.slice("tool-".length);
+      const rawInput = raw.input ?? raw.args ?? {};
+      const args = ((typeof rawInput === "object" ? rawInput : {}) as unknown) as ThreadLikeToolArgs;
+      result.push({
+        type: "tool-call",
+        toolCallId: raw.toolCallId,
+        toolName,
+        args,
+        argsText: typeof rawInput === "string" ? rawInput : JSON.stringify(rawInput),
+        result: raw.output ?? raw.result,
+        isError: raw.state === "output-error" || raw.isError,
+      });
+      continue;
+    }
+  }
+  return result;
+}
+
+function storedMessagesToThreadMessages(stored: readonly StoredMessage[]): ThreadMessageLike[] {
+  const out: ThreadMessageLike[] = [];
+  for (const m of stored) {
+    if (m.role !== "user" && m.role !== "assistant") continue;
+    const content = convertStoredPartsToThreadContent(m.content);
+    if (content.length === 0) continue;
+    out.push({
+      id: m.id,
+      role: m.role,
+      content,
+    });
+  }
+  return out;
+}
+
+function getMessageText(message: ThreadMessage | ThreadMessageLike): string {
+  if (typeof message.content === "string") return message.content;
+  return message.content
+    .map(p => p.type === "text" ? p.text : "")
+    .join("");
+}
+
 function ConversationList({
   projectId,
   onSelectConversation,
@@ -199,11 +306,7 @@ export function AIChatWidget() {
         const conversations = await listConversations(currentUser, projectId);
         if (conversations.length > 0) {
           const conv = await getConversation(currentUser, conversations[0].id);
-          const initialMessages: UIMessage[] = conv.messages.map((msg) => ({
-            id: msg.id,
-            role: msg.role,
-            parts: msg.content as UIMessage["parts"],
-          }));
+          const initialMessages = storedMessagesToThreadMessages(conv.messages as StoredMessage[]);
           setViewMode({ view: 'chat', conversationId: conversations[0].id, initialMessages });
           setConversationKey(prev => prev + 1);
         }
@@ -216,11 +319,7 @@ export function AIChatWidget() {
 
   const handleSelectConversation = useCallback(async (id: string) => {
     const conv = await getConversation(currentUser, id);
-    const initialMessages: UIMessage[] = conv.messages.map((msg) => ({
-      id: msg.id,
-      role: msg.role,
-      parts: msg.content as UIMessage["parts"],
-    }));
+    const initialMessages = storedMessagesToThreadMessages(conv.messages as StoredMessage[]);
     setConversationKey(prev => prev + 1);
     setViewMode({ view: 'chat', conversationId: id, initialMessages });
   }, [currentUser]);
@@ -285,62 +384,23 @@ function AIChatWidgetInner({
 }: {
   projectId: string | undefined,
   conversationId: string | null,
-  initialMessages: UIMessage[],
+  initialMessages: ThreadMessageLike[],
   onConversationCreated: (id: string) => void,
   onBackToList: () => void,
   onNewChat: () => void,
 }) {
-  const [followUpInput, setFollowUpInput] = useState("");
-  const messagesContainerRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const followUpInputRef = useRef<HTMLInputElement>(null);
-  const lastMessageCountRef = useRef(0);
-  const isNearBottomRef = useRef(true);
   const currentUser = useUser();
   const conversationIdRef = useRef(initialConversationId);
-  const prevStatusRef = useRef<string>("");
   const isSavingRef = useRef(false);
-  const pendingMessagesRef = useRef<{ messages: Array<{ role: string; content: unknown }>; title: string } | null>(null);
-
-  const backendBaseUrl = getPublicEnvVar("NEXT_PUBLIC_BROWSER_STACK_API_URL") ?? getPublicEnvVar("NEXT_PUBLIC_STACK_API_URL") ?? throwErr("NEXT_PUBLIC_BROWSER_STACK_API_URL is not set");
-
-  const hasInitialMessages = initialMessages.length > 0;
-  const [input, setInput] = useState("");
-  const [conversationStarted, setConversationStarted] = useState(hasInitialMessages);
-
-  const {
-    messages,
-    status,
-    sendMessage,
-    error: aiError,
-  } = useChat({
-    messages: hasInitialMessages ? initialMessages : undefined,
-    transport: new DefaultChatTransport({
-      api: `${backendBaseUrl}/api/latest/ai/query/stream`,
-      headers: () => buildStackAuthHeaders(currentUser),
-      prepareSendMessagesRequest: async ({ messages: uiMessages, headers }) => {
-        const modelMessages = await convertToModelMessages(uiMessages);
-        return {
-          body: {
-            systemPrompt: "command-center-ask-ai",
-            tools: ["docs", "sql-query"],
-            quality: "smart",
-            speed: "slow",
-            projectId,
-            messages: modelMessages.map(m => ({
-              role: m.role,
-              content: m.content,
-            })),
-          },
-          headers,
-        };
-      },
-    }),
-  });
+  const pendingMessagesRef = useRef<{ messages: Array<{ role: string, content: unknown }>, title: string } | null>(null);
+  const [isRunning, setIsRunning] = useState(false);
+  const [runError, setRunError] = useState<string | null>(null);
 
-  const aiLoading = status === "submitted" || status === "streaming";
+  const backendBaseUrl = getPublicEnvVar("NEXT_PUBLIC_BROWSER_STACK_API_URL")
+    ?? getPublicEnvVar("NEXT_PUBLIC_STACK_API_URL")
+    ?? throwErr("NEXT_PUBLIC_BROWSER_STACK_API_URL is not set");
 
-  const doSave = useCallback(async (messagesToSave: Array<{ role: string; content: unknown }>, title: string) => {
+  const doSave = useCallback(async (messagesToSave: Array<{ role: string, content: unknown }>, title: string) => {
     isSavingRef.current = true;
     try {
       if (conversationIdRef.current) {
@@ -364,349 +424,130 @@ function AIChatWidgetInner({
     }
   }, [currentUser, projectId, onConversationCreated]);
 
-  // Save conversation when streaming completes
-  useEffect(() => {
-    const prevStatus = prevStatusRef.current;
-    prevStatusRef.current = status;
-
-    const completedOk = (prevStatus === "streaming" || prevStatus === "submitted") && status === "ready";
-    const completedWithError = (prevStatus === "streaming" || prevStatus === "submitted") && status === "error";
-
-    if (
-      (completedOk || completedWithError) &&
-      messages.length > 0
-    ) {
-      // On error, only save user messages (strip any partial/failed assistant turn)
-      const safeMessages = completedWithError
-        ? messages.filter(m => m.role === "user")
-        : messages;
-      if (safeMessages.length === 0) return;
-
-      const messagesToSave = safeMessages.map(m => ({
-        role: m.role,
-        content: m.parts,
-      }));
-      const firstUserMessage = messages.find(m => m.role === "user");
-      const title = firstUserMessage
-        ? getMessageContent(firstUserMessage).slice(0, 50) || "New conversation"
-        : "New conversation";
-
-      if (isSavingRef.current) {
-        pendingMessagesRef.current = { messages: messagesToSave, title };
-        return;
-      }
-
-      runAsynchronouslyWithAlert(doSave(messagesToSave, title));
-    }
-  }, [status, messages, doSave]);
-
-  // Word streaming for the last assistant message
-  const lastAssistantMessage = messages.slice().reverse().find((m: UIMessage) => m.role === "assistant");
-  const lastAssistantContent = lastAssistantMessage ? getMessageContent(lastAssistantMessage) : "";
-  const { displayedWordCount, getDisplayContent, isRevealing } = useWordStreaming(lastAssistantContent);
-  const isStreaming = aiLoading && lastAssistantMessage;
-
-  // Auto-focus input on mount
-  useEffect(() => {
-    if (!conversationStarted) {
-      inputRef.current?.focus();
-    } else {
-      followUpInputRef.current?.focus();
+  const persist = useCallback((priorMessages: readonly ThreadMessage[], finalAssistantContent: ThreadAssistantContentPart[]) => {
+    const allWire: Array<{ role: string, content: unknown }> = priorMessages.map(m => ({
+      role: m.role,
+      content: m.content,
+    }));
+    if (finalAssistantContent.length > 0) {
+      allWire.push({ role: "assistant", content: finalAssistantContent });
     }
-  }, [conversationStarted]);
-
-  // Track if user is near the bottom of the scroll container
-  const handleScroll = useCallback(() => {
-    if (!messagesContainerRef.current) return;
-    const { scrollTop, scrollHeight, clientHeight } = messagesContainerRef.current;
-    isNearBottomRef.current = scrollHeight - scrollTop - clientHeight < 100;
-  }, []);
-
-  // Auto-scroll when new messages are added or when already at bottom
-  useEffect(() => {
-    if (!messagesContainerRef.current) return;
 
-    const container = messagesContainerRef.current;
-    const messageCount = messages.length;
+    const firstUserMessage = priorMessages.find(m => m.role === "user");
+    const title = firstUserMessage
+      ? getMessageText(firstUserMessage).slice(0, 50) || "New conversation"
+      : "New conversation";
 
-    if (messageCount > lastMessageCountRef.current) {
-      container.scrollTop = container.scrollHeight;
-      isNearBottomRef.current = true;
-    } else if (aiLoading && isNearBottomRef.current) {
-      container.scrollTop = container.scrollHeight;
+    if (isSavingRef.current) {
+      pendingMessagesRef.current = { messages: allWire, title };
+      return;
     }
-
-    lastMessageCountRef.current = messageCount;
-  }, [messages, aiLoading]);
-
-  // Handle initial question submit
-  const handleSubmit = useCallback(() => {
-    if (!input.trim() || aiLoading) return;
-    setConversationStarted(true);
-    runAsynchronously(sendMessage({ text: input.trim() }));
-    setInput("");
-    requestAnimationFrame(() => {
-      followUpInputRef.current?.focus();
-    });
-  }, [input, aiLoading, sendMessage]);
-
-  // Handle initial input keyboard
-  const handleInputKeyDown = useCallback(
-    (e: React.KeyboardEvent<HTMLInputElement>) => {
-      if (e.nativeEvent.isComposing) return;
-      if (e.key === "Enter" && !e.shiftKey) {
-        e.preventDefault();
-        handleSubmit();
-      }
+    runAsynchronouslyWithAlert(doSave(allWire, title));
+  }, [doSave]);
+
+  const chatAdapter = useMemo<ChatModelAdapter>(() => createUnifiedAiChatAdapter({
+    backendBaseUrl,
+    currentUser: currentUser ?? undefined,
+    systemPrompt: "command-center-ask-ai",
+    tools: ["docs", "sql-query"],
+    quality: "smart",
+    speed: "slow",
+    projectId,
+    onRunStart: () => {
+      setRunError(null);
+      setIsRunning(true);
     },
-    [handleSubmit]
-  );
-
-  // Handle follow-up questions
-  const handleFollowUp = useCallback(() => {
-    const text = followUpInput.trim();
-    if (!text || aiLoading) return;
-    setFollowUpInput("");
-    runAsynchronously(sendMessage({ text }));
-    requestAnimationFrame(() => {
-      followUpInputRef.current?.focus();
-    });
-  }, [followUpInput, sendMessage, aiLoading]);
-
-  // Handle follow-up input keyboard
-  const handleFollowUpKeyDown = useCallback(
-    (e: React.KeyboardEvent<HTMLInputElement>) => {
-      if (e.nativeEvent.isComposing) return;
-      if (e.key === "Enter" && !e.shiftKey) {
-        e.preventDefault();
-        e.stopPropagation();
-        handleFollowUp();
-      } else if (e.key === "ArrowUp" || e.key === "ArrowDown") {
-        e.preventDefault();
-        e.stopPropagation();
-        const container = messagesContainerRef.current;
-        if (container) {
-          const scrollAmount = e.key === "ArrowUp" ? -100 : 100;
-          container.scrollBy({ top: scrollAmount, behavior: "smooth" });
-        }
-      }
+    onRunEnd: () => setIsRunning(false),
+    onFinish: ({ threadMessages, assistantContent }) => {
+      persist(threadMessages, assistantContent as ThreadAssistantContentPart[]);
     },
-    [handleFollowUp]
-  );
+    onError: ({ error, threadMessages }) => {
+      setRunError(getFriendlyAiErrorMessage(error));
+      persist(threadMessages.filter(m => m.role === "user"), []);
+    },
+  }), [backendBaseUrl, currentUser, projectId, persist]);
 
-  // Determine what to show in the loading state
-  const showLoadingIndicator = conversationStarted && (messages.length === 0 || (aiLoading && !messages.some((m: UIMessage) => m.role === "assistant" && getMessageContent(m))));
+  const attachmentAdapter = useMemo(() => new ImageAttachmentAdapter(), []);
 
-  // Initial state - show input
-  if (!conversationStarted) {
-    return (
-      <div className="flex flex-col h-full">
-        {/* Back button */}
-        <div className="px-3 py-2 border-b border-foreground/[0.05]">
-          <button
-            onClick={onBackToList}
-            className="flex items-center gap-1 text-[11px] text-muted-foreground/60 hover:text-muted-foreground transition-colors"
-            type="button"
-          >
-            <ArrowLeftIcon className="h-3 w-3" />
-            <span>Back to history</span>
-          </button>
-        </div>
-
-        <div className="flex-1 flex flex-col items-center justify-center px-6 gap-4">
-          <div className="w-10 h-10 rounded-full bg-purple-500/10 flex items-center justify-center">
-            <SparkleIcon className="h-5 w-5 text-purple-400" />
-          </div>
-          <div className="text-center space-y-1.5">
-            <h3 className="text-sm font-semibold text-foreground">Ask AI</h3>
-            <p className="text-xs text-muted-foreground/70 max-w-[240px]">
-              Get AI-powered answers about Stack Auth, your project, and analytics
-            </p>
-          </div>
-        </div>
+  const runtime = useLocalRuntime(chatAdapter, {
+    initialMessages,
+    adapters: { attachments: attachmentAdapter },
+  });
 
-        <div className="shrink-0 border-t border-foreground/[0.05] px-3.5 py-2.5">
-          <div className="flex items-center gap-2 rounded-lg bg-foreground/[0.03] px-3 py-1.5 ring-1 ring-foreground/[0.05] focus-within:ring-purple-500/25 transition-shadow">
-            <input
-              ref={inputRef}
-              type="text"
-              value={input}
-              onChange={(e) => setInput(e.target.value)}
-              onKeyDown={handleInputKeyDown}
-              aria-label="Initial prompt"
-              placeholder="Ask a question..."
-              className="flex-1 bg-transparent text-[13px] outline-none placeholder:text-muted-foreground/40"
-              autoComplete="off"
-              autoCorrect="off"
-              spellCheck={false}
-            />
-            <button
-              onClick={handleSubmit}
-              disabled={!input.trim() || aiLoading}
-              aria-label="Send message"
-              title="Send message"
-              className={cn(
-                "p-1 rounded transition-colors hover:transition-none",
-                input.trim() && !aiLoading
-                  ? "text-purple-400 hover:text-purple-300 hover:bg-purple-500/10"
-                  : "text-muted-foreground/25 cursor-not-allowed"
-              )}
-              type="button"
-            >
-              <PaperPlaneTiltIcon className="h-3.5 w-3.5" />
-            </button>
-          </div>
-          <p className="text-[9px] text-muted-foreground/40 mt-1.5 text-center">
-            Enter to send
-          </p>
-        </div>
-      </div>
-    );
-  }
+  const assistantContentComponents = useMemo(() => ({
+    Text: MarkdownText,
+    tools: { Fallback: ToolFallback },
+  }), []);
 
-  // Conversation view
   return (
-    <div className="flex flex-col h-full">
-      {/* Back button */}
-      <div className="px-3 py-2 border-b border-foreground/[0.05] flex items-center justify-between">
-        <button
-          onClick={onBackToList}
-          disabled={aiLoading}
-          className={cn(
-            "flex items-center gap-1 text-[11px] transition-colors",
-            aiLoading
-              ? "text-muted-foreground/25 cursor-not-allowed"
-              : "text-muted-foreground/60 hover:text-muted-foreground"
-          )}
-          type="button"
-        >
-          <ArrowLeftIcon className="h-3 w-3" />
-          <span>Back to history</span>
-        </button>
-      </div>
-
-      {/* Messages */}
-      <div
-        ref={messagesContainerRef}
-        onScroll={handleScroll}
-        className="flex-1 overflow-y-auto overscroll-contain px-4 py-3 space-y-4"
-        style={{ scrollbarGutter: "stable" }}
-      >
-        {messages.map((message: UIMessage, index: number, arr: UIMessage[]) => {
-          const messageContent = getMessageContent(message);
-          const toolInvocations = message.role === "assistant" ? getToolInvocations(message) : [];
-
-          // For the last assistant message, apply word-by-word streaming
-          const isLastAssistant = message.role === "assistant" &&
-            index === arr.length - 1 - (arr[arr.length - 1]?.role === "user" ? 1 : 0);
-          const displayContent = message.role === "assistant" && isLastAssistant && aiLoading
-            ? getDisplayContent(messageContent)
-            : messageContent;
-
-          // Don't render if no content to show yet AND no tool invocations
-          if (message.role === "assistant" && isLastAssistant && !displayContent && toolInvocations.length === 0) {
-            return null;
-          }
-
-          if (message.role === "user") {
-            return <UserMessage key={message.id || index} content={messageContent} />;
-          }
-          return (
-            <AssistantMessage
-              key={message.id || index}
-              content={displayContent}
-              toolInvocations={toolInvocations}
-            />
-          );
-        })}
-
-        {/* Loading indicator */}
-        {showLoadingIndicator && (
-          <div className="flex gap-2.5 justify-start">
-            <div className="shrink-0 w-6 h-6 rounded-full bg-purple-500/10 flex items-center justify-center">
-              <SparkleIcon className="h-3 w-3 text-purple-400" />
-            </div>
-            <div className="bg-foreground/[0.02] rounded-xl px-3.5 py-2">
-              <div className="flex items-center gap-2 text-[13px] text-muted-foreground">
-                <SpinnerGapIcon className="h-3.5 w-3.5 animate-spin" />
-                <span>Thinking...</span>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* Streaming indicator */}
-        {isStreaming && displayedWordCount > 0 && (
-          <div className="flex items-center gap-1.5 text-[10px] text-muted-foreground/50 pl-8">
-            <span className="inline-flex gap-0.5">
-              <span className="w-1 h-1 rounded-full bg-purple-400/60 animate-pulse" />
-              <span className="w-1 h-1 rounded-full bg-purple-400/60 animate-pulse" style={{ animationDelay: "150ms" }} />
-              <span className="w-1 h-1 rounded-full bg-purple-400/60 animate-pulse" style={{ animationDelay: "300ms" }} />
-            </span>
-          </div>
-        )}
-
-        {/* Error display */}
-        {aiError && (
-          <div className="flex items-start gap-2 text-[12px] text-red-400/90 px-3 py-2 bg-red-500/[0.08] rounded-lg ring-1 ring-red-500/20">
-            <span className="shrink-0 mt-0.5">⚠</span>
-            <span>{aiError.message || "Failed to get response. Please try again."}</span>
-          </div>
-        )}
-      </div>
-
-      {/* Follow-up input + new conversation button */}
-      <div className="shrink-0 border-t border-foreground/[0.05] px-3.5 py-2.5">
-        <div className="flex items-center gap-2 rounded-lg bg-foreground/[0.03] px-3 py-1.5 ring-1 ring-foreground/[0.05] focus-within:ring-purple-500/25 transition-shadow">
-          <input
-            ref={followUpInputRef}
-            type="text"
-            value={followUpInput}
-            onChange={(e) => setFollowUpInput(e.target.value)}
-            onKeyDown={handleFollowUpKeyDown}
-            aria-label="Follow-up question"
-            placeholder="Ask a follow-up question..."
-            className="flex-1 bg-transparent text-[13px] outline-none placeholder:text-muted-foreground/40"
-            autoComplete="off"
-            autoCorrect="off"
-            spellCheck={false}
-          />
+    <AssistantRuntimeProvider runtime={runtime}>
+      <div className="flex flex-col h-full">
+        <div className="px-3 py-2 border-b border-black/[0.06] dark:border-foreground/[0.06] bg-white dark:bg-background/40 flex items-center justify-between shrink-0">
           <button
-            onClick={() => handleFollowUp()}
-            disabled={!followUpInput.trim() || aiLoading}
-            aria-label="Send message"
-            title="Send message"
+            onClick={onBackToList}
+            disabled={isRunning}
             className={cn(
-              "p-1 rounded transition-colors hover:transition-none",
-              followUpInput.trim() && !aiLoading
-                ? "text-purple-400 hover:text-purple-300 hover:bg-purple-500/10"
-                : "text-muted-foreground/25 cursor-not-allowed"
+              "flex items-center gap-1 text-[11px] transition-colors",
+              isRunning
+                ? "text-muted-foreground/25 cursor-not-allowed"
+                : "text-muted-foreground/60 hover:text-muted-foreground",
             )}
             type="button"
           >
-            <PaperPlaneTiltIcon className="h-3.5 w-3.5" />
+            <ArrowLeftIcon className="h-3 w-3" />
+            <span>Back to history</span>
           </button>
-        </div>
-        <div className="flex items-center justify-between mt-1.5">
           <button
             onClick={onNewChat}
-            disabled={aiLoading}
+            disabled={isRunning}
             className={cn(
-              "flex items-center gap-1 text-[9px] transition-colors hover:transition-none",
-              aiLoading
+              "flex items-center gap-1 text-[11px] transition-colors",
+              isRunning
                 ? "text-muted-foreground/25 cursor-not-allowed"
-                : "text-muted-foreground/40 hover:text-muted-foreground/70"
+                : "text-muted-foreground/60 hover:text-muted-foreground",
             )}
             type="button"
           >
-            <ArrowCounterClockwiseIcon className="h-2.5 w-2.5" />
+            <ArrowCounterClockwiseIcon className="h-3 w-3" />
             <span>New conversation</span>
           </button>
-          <p className="text-[9px] text-muted-foreground/40">
-            Enter to send
-          </p>
         </div>
+
+        {runError && (
+          <div className="mx-3 mt-2 flex items-start gap-2 text-[12px] text-red-400/90 px-3 py-2 bg-red-500/[0.08] rounded-lg ring-1 ring-red-500/20 shrink-0">
+            <span className="shrink-0 mt-0.5">⚠</span>
+            <span>{runError}</span>
+          </div>
+        )}
+
+        <Thread
+          composerPlaceholder="Ask a question..."
+          runningStatusMessages={RUNNING_STATUS_MESSAGES}
+          assistantContentComponents={assistantContentComponents}
+          welcome={<AskAiWelcome />}
+          composerAttachments
+          attachmentAdapter={attachmentAdapter}
+        />
+      </div>
+    </AssistantRuntimeProvider>
+  );
+}
+
+function AskAiWelcome() {
+  return (
+    <div className="flex w-full max-w-[var(--thread-max-width)] flex-grow flex-col">
+      <div className="flex w-full flex-grow flex-col items-center justify-center py-16 px-6">
+        <div className="w-12 h-12 rounded-2xl bg-purple-500/10 flex items-center justify-center mb-4 ring-1 ring-purple-500/20">
+          <SparkleIcon className="w-6 h-6 text-purple-400" weight="duotone" />
+        </div>
+        <h2 className="text-base font-semibold tracking-tight text-foreground mb-1.5">
+          Ask AI
+        </h2>
+        <p className="text-xs text-muted-foreground text-center max-w-[260px] leading-relaxed">
+          Get AI-powered answers about Stack Auth, your project, and analytics.
+        </p>
       </div>
     </div>
   );
 }
+
diff --git a/apps/dashboard/src/components/vibe-coding/chat-adapters.ts b/apps/dashboard/src/components/vibe-coding/chat-adapters.ts
index d05baf31e7..19b35348da 100644
--- a/apps/dashboard/src/components/vibe-coding/chat-adapters.ts
+++ b/apps/dashboard/src/components/vibe-coding/chat-adapters.ts
@@ -1,23 +1,15 @@
+import { createUnifiedAiChatAdapter, type WireMessage } from "@/components/assistant-ui/chat-stream";
 import { buildDashboardMessages } from "@/lib/ai-dashboard/shared-prompt";
 import { buildStackAuthHeaders, type CurrentUser } from "@/lib/api-headers";
 import type { AppId } from "@/lib/apps-frontend";
 import {
   type ChatModelAdapter,
-  type ChatModelRunOptions,
-  type ChatModelRunResult,
   type ExportedMessageRepository,
   type ThreadHistoryAdapter,
 } from "@assistant-ui/react";
 import { StackAdminApp } from "@stackframe/stack";
 import { ChatContent } from "@stackframe/stack-shared/dist/interface/admin-interface";
 import type { EditableMetadata } from "@stackframe/stack-shared/dist/utils/jsx-editable-transpiler";
-import {
-  parseJsonEventStream,
-  readUIMessageStream,
-  uiMessageChunkSchema,
-  type UIMessage,
-  type UIMessageChunk,
-} from "ai";
 
 export type ToolCallContent = Extract<ChatContent[number], { type: "tool-call" }>;
 
@@ -25,30 +17,6 @@ const isToolCall = (content: { type: string }): content is ToolCallContent => {
   return content.type === "tool-call";
 };
 
-/** Maps thread messages to the backend wire format; merges `attachments` into `content`. */
-function formatThreadMessagesForBackend(
-  messages: readonly { role: string, content: readonly { type: string }[], attachments?: readonly { content?: readonly unknown[] }[] }[],
-): Array<{ role: string, content: unknown }> {
-  const formatted: Array<{ role: string, content: unknown }> = [];
-  for (const msg of messages) {
-    const textContent = msg.content.filter((c) => !isToolCall(c));
-    const attachmentContent: unknown[] = [];
-    if (msg.attachments) {
-      for (const attachment of msg.attachments) {
-        if (Array.isArray(attachment.content)) {
-          attachmentContent.push(...attachment.content);
-        }
-      }
-    }
-    const combined = [...textContent, ...attachmentContent];
-    if (combined.length > 0) {
-      formatted.push({ role: msg.role, content: combined });
-    }
-  }
-  return formatted;
-}
-
-/** Normalizes model JSX: strip fences, decode basic entities, fix `;` vs `,` between object props. */
 function sanitizeGeneratedCode(code: string): string {
   let result = code.trim();
 
@@ -81,42 +49,6 @@ function stripCodeFences(code: string): string {
   return lines.join("\n");
 }
 
-/**
- * Sends a request to the AI query endpoint and returns the parsed content.
- */
-async function sendAiRequest(
-  backendBaseUrl: string,
-  currentUser: CurrentUser | undefined,
-  body: {
-    quality: string,
-    speed: string,
-    systemPrompt: string,
-    tools: string[],
-    messages: Array<{ role: string, content: unknown }>,
-    projectId?: string,
-  },
-  abortSignal?: AbortSignal,
-): Promise<ChatContent> {
-  const authHeaders = await buildStackAuthHeaders(currentUser);
-
-  const response = await fetch(`${backendBaseUrl}/api/latest/ai/query/generate`, {
-    method: "POST",
-    headers: { "content-type": "application/json", ...authHeaders },
-    ...(abortSignal ? { signal: abortSignal } : {}),
-    body: JSON.stringify(body),
-  });
-
-  if (!response.ok) {
-    throw new Error(`AI request failed: ${response.status} ${response.statusText}`);
-  }
-
-  const json = await response.json() as { content?: ChatContent };
-  return Array.isArray(json.content) ? json.content : [];
-}
-
-/**
- * Sanitizes tool call content in AI response and returns the sanitized content.
- */
 function sanitizeAiContent(content: ChatContent): ChatContent {
   return content.map((item) => {
     if (item.type === "tool-call" && typeof item.args?.content === "string") {
@@ -126,197 +58,6 @@ function sanitizeAiContent(content: ChatContent): ChatContent {
   });
 }
 
-/**
- * Sends a request to the AI streaming endpoint and returns a stream of UIMessageChunks
- * (as produced by the Vercel AI SDK's `streamText().toUIMessageStreamResponse()`).
- */
-async function sendAiStreamRequest(
-  backendBaseUrl: string,
-  currentUser: CurrentUser | undefined,
-  body: {
-    quality: string,
-    speed: string,
-    systemPrompt: string,
-    tools: string[],
-    messages: Array<{ role: string, content: unknown }>,
-    projectId?: string,
-  },
-  abortSignal?: AbortSignal,
-): Promise<ReadableStream<UIMessageChunk>> {
-  const authHeaders = await buildStackAuthHeaders(currentUser);
-
-  const response = await fetch(`${backendBaseUrl}/api/latest/ai/query/stream`, {
-    method: "POST",
-    headers: {
-      "content-type": "application/json",
-      accept: "text/event-stream",
-      ...authHeaders,
-    },
-    ...(abortSignal ? { signal: abortSignal } : {}),
-    body: JSON.stringify(body),
-  });
-
-  if (!response.ok || !response.body) {
-    throw new Error(`AI stream request failed: ${response.status} ${response.statusText}`);
-  }
-
-  return parseJsonEventStream({
-    stream: response.body,
-    schema: uiMessageChunkSchema,
-  }).pipeThrough(
-    new TransformStream<
-      { success: true, value: UIMessageChunk, rawValue: unknown } | { success: false, error: unknown, rawValue: unknown },
-      UIMessageChunk
-    >({
-      transform(parseResult, controller) {
-        if (parseResult.success) {
-          controller.enqueue(parseResult.value);
-        }
-      },
-    }),
-  );
-}
-
-/**
- * Converts a UIMessage's parts (as emitted by `readUIMessageStream`) into our
- * ChatContent shape so the existing tool UI / sanitizer pipeline keeps working.
- */
-function uiPartsToChatContent(parts: UIMessage["parts"]): ChatContent {
-  const result: ChatContent = [];
-  for (const part of parts) {
-    if (part.type === "text") {
-      if (part.text) {
-        result.push({ type: "text", text: part.text });
-      }
-      continue;
-    }
-
-    if (part.type === "dynamic-tool") {
-      const toolPart = part as { toolCallId: string, toolName: string, input?: unknown, output?: unknown };
-      const input = toolPart.input ?? {};
-      result.push({
-        type: "tool-call",
-        toolCallId: toolPart.toolCallId,
-        toolName: toolPart.toolName,
-        args: input,
-        argsText: typeof input === "string" ? input : JSON.stringify(input),
-        result: toolPart.output ?? null,
-      });
-      continue;
-    }
-
-    if (typeof part.type === "string" && part.type.startsWith("tool-")) {
-      const toolName = part.type.slice("tool-".length);
-      const toolPart = part as { toolCallId: string, input?: unknown, output?: unknown };
-      const input = toolPart.input ?? {};
-      result.push({
-        type: "tool-call",
-        toolCallId: toolPart.toolCallId,
-        toolName,
-        args: input,
-        argsText: typeof input === "string" ? input : JSON.stringify(input),
-        result: toolPart.output ?? null,
-      });
-      continue;
-    }
-  }
-  return result;
-}
-
-/**
- * Streaming dashboard generation: yields progressively updated ChatContent as the AI
- * streams text and tool-call input. Each yield represents the full current state of
- * the assistant message (not an incremental delta).
- */
-export async function* streamDashboardCode(
-  backendBaseUrl: string,
-  currentUser: CurrentUser | undefined,
-  messages: Array<{ role: string, content: unknown }>,
-  options?: {
-    currentTsxSource?: string,
-    abortSignal?: AbortSignal,
-    enabledAppIds?: AppId[],
-    projectId?: string,
-  },
-): AsyncGenerator<ChatContent, void, undefined> {
-  const contextMessages = await buildDashboardMessages(
-    backendBaseUrl,
-    currentUser,
-    messages,
-    options?.currentTsxSource,
-    options?.enabledAppIds,
-  );
-
-  // Only give the agent the sql-query tool when we know which project to scope it to.
-  // Without projectId, the tool would fall back to the internal project — wrong target.
-  const tools = options?.projectId
-    ? ["update-dashboard", "sql-query"]
-    : ["update-dashboard"];
-
-  const chunkStream = await sendAiStreamRequest(
-    backendBaseUrl,
-    currentUser,
-    {
-      quality: "smart",
-      speed: "slow",
-      systemPrompt: "create-dashboard",
-      tools,
-      messages: [...contextMessages, ...messages],
-      projectId: options?.projectId,
-    },
-    options?.abortSignal,
-  );
-
-  for await (const message of readUIMessageStream({ stream: chunkStream })) {
-    if (options?.abortSignal?.aborted) return;
-    yield sanitizeAiContent(uiPartsToChatContent(message.parts));
-  }
-}
-
-/**
- * One-shot dashboard generation: builds context, calls AI, returns the tool call content.
- * Used by both the cmd+K preview and the dashboard chat adapter.
- */
-export async function generateDashboardCode(
-  backendBaseUrl: string,
-  currentUser: CurrentUser | undefined,
-  messages: Array<{ role: string, content: unknown }>,
-  options?: {
-    currentTsxSource?: string,
-    abortSignal?: AbortSignal,
-    enabledAppIds?: AppId[],
-    projectId?: string,
-  },
-): Promise<{ content: ChatContent, toolCall: ToolCallContent | undefined }> {
-  const contextMessages = await buildDashboardMessages(
-    backendBaseUrl,
-    currentUser,
-    messages,
-    options?.currentTsxSource,
-    options?.enabledAppIds,
-  );
-  const tools = options?.projectId
-    ? ["update-dashboard", "sql-query"]
-    : ["update-dashboard"];
-  const rawContent = await sendAiRequest(
-    backendBaseUrl,
-    currentUser,
-    {
-      quality: "smart",
-      speed: "slow",
-      systemPrompt: "create-dashboard",
-      tools,
-      messages: [...contextMessages, ...messages],
-      projectId: options?.projectId,
-    },
-    options?.abortSignal,
-  );
-
-  const toolCall = rawContent.find(isToolCall);
-
-  return { content: rawContent, toolCall };
-}
-
 const CONTEXT_MAP = {
   "email-theme": { systemPrompt: "email-assistant-theme", tools: ["create-email-theme"] },
   "email-template": { systemPrompt: "email-assistant-template", tools: ["create-email-template"] },
@@ -332,54 +73,62 @@ export function createChatAdapter(
   onRunStart?: () => void,
   onRunEnd?: () => void,
 ): ChatModelAdapter {
-  return {
-    async run({ messages, abortSignal }: ChatModelRunOptions) {
-      onRunStart?.();
-      try {
-        const formattedMessages = formatThreadMessagesForBackend(messages);
-
-        const { systemPrompt, tools } = CONTEXT_MAP[contextType];
-
-        const contextMessages: Array<{ role: string, content: unknown }> = [];
-        if (getCurrentSource) {
-          const src = getCurrentSource();
-          if (src.length > 0) {
-            contextMessages.push({ role: "user", content: `Here is the current source:\n\`\`\`tsx\n${src}\n\`\`\`` });
-            contextMessages.push({ role: "assistant", content: "Got it, I have the current source code." });
-          }
-        }
-
-        const rawContent = await sendAiRequest(
-          backendBaseUrl,
-          currentUser,
-          {
-            quality: "smartest",
-            speed: "fast",
-            systemPrompt,
-            tools: [...tools],
-            messages: [...contextMessages, ...formattedMessages],
-          },
-          abortSignal,
-        );
-
-        const sanitizedContent = sanitizeAiContent(rawContent);
-
-        const toolCall = sanitizedContent.find(isToolCall);
-        if (toolCall) {
-          onToolCall(toolCall);
-        }
+  const { systemPrompt, tools } = CONTEXT_MAP[contextType];
 
-        return { content: sanitizedContent };
-      } catch (error) {
-        if (abortSignal.aborted) {
-          return {};
+  return createUnifiedAiChatAdapter({
+    backendBaseUrl,
+    currentUser,
+    systemPrompt,
+    tools: [...tools],
+    quality: "smartest",
+    speed: "fast",
+    sanitizeContent: sanitizeAiContent,
+    transformMessages: (messages) => {
+      const contextMessages: WireMessage[] = [];
+      if (getCurrentSource) {
+        const src = getCurrentSource();
+        if (src.length > 0) {
+          contextMessages.push({ role: "user", content: `Here is the current source:\n\`\`\`tsx\n${src}\n\`\`\`` });
+          contextMessages.push({ role: "assistant", content: "Got it, I have the current source code." });
         }
-        throw new Error("Failed to get AI response. Please try again.");
-      } finally {
-        onRunEnd?.();
       }
+      return [...contextMessages, ...messages];
     },
-  };
+    onRunStart,
+    onRunEnd,
+    onFinish: ({ assistantContent }) => {
+      const toolCall = assistantContent.find(isToolCall);
+      if (toolCall) {
+        onToolCall(toolCall);
+      }
+    },
+    onError: () => {
+      throw new Error("Failed to get AI response. Please try again.");
+    },
+  });
+}
+
+export function createAnalyticsQueryChatAdapter(
+  backendBaseUrl: string,
+  currentUser: CurrentUser | undefined,
+  projectId: string | undefined,
+  onError?: (error: Error) => void,
+): ChatModelAdapter {
+  return createUnifiedAiChatAdapter({
+    backendBaseUrl,
+    currentUser,
+    systemPrompt: "build-analytics-query",
+    tools: ["sql-query"],
+    quality: "smart",
+    speed: "fast",
+    projectId,
+    sanitizeContent: sanitizeAiContent,
+    onError: () => {
+      const wrapped = new Error("Failed to get AI response. Please try again.");
+      onError?.(wrapped);
+      throw wrapped;
+    },
+  });
 }
 
 export function createDashboardChatAdapter(
@@ -392,44 +141,43 @@ export function createDashboardChatAdapter(
   onRunStart?: () => void,
   onRunEnd?: () => void,
 ): ChatModelAdapter {
-  return {
-    async *run({ messages, abortSignal }: ChatModelRunOptions): AsyncGenerator<ChatModelRunResult, void> {
-      onRunStart?.();
-      try {
-        const formattedMessages = formatThreadMessagesForBackend(messages);
-
-        let latestContent: ChatContent = [];
-        for await (const content of streamDashboardCode(
-          backendBaseUrl,
-          currentUser,
-          formattedMessages,
-          {
-            currentTsxSource,
-            abortSignal,
-            enabledAppIds,
-            projectId,
-          },
-        )) {
-          latestContent = content;
-          yield { content };
-        }
+  const tools = projectId
+    ? ["update-dashboard", "sql-query"]
+    : ["update-dashboard"];
 
-        const finalToolCall = latestContent.find(
-          (item): item is ToolCallContent => isToolCall(item) && item.toolName === "updateDashboard",
-        );
-        if (finalToolCall) {
-          onToolCall(finalToolCall);
-        }
-      } catch (error) {
-        if (abortSignal.aborted) {
-          return;
-        }
-        throw new Error("Failed to get AI response. Please try again.");
-      } finally {
-        onRunEnd?.();
+  return createUnifiedAiChatAdapter({
+    backendBaseUrl,
+    currentUser,
+    systemPrompt: "create-dashboard",
+    tools,
+    quality: "smart",
+    speed: "slow",
+    projectId,
+    sanitizeContent: sanitizeAiContent,
+    transformMessages: async (messages) => {
+      const contextMessages = await buildDashboardMessages(
+        backendBaseUrl,
+        currentUser,
+        messages,
+        currentTsxSource,
+        enabledAppIds,
+      );
+      return [...contextMessages, ...messages];
+    },
+    onRunStart,
+    onRunEnd,
+    onFinish: ({ assistantContent }) => {
+      const finalToolCall = assistantContent.find(
+        (item): item is ToolCallContent => isToolCall(item) && item.toolName === "updateDashboard",
+      );
+      if (finalToolCall) {
+        onToolCall(finalToolCall);
       }
     },
-  };
+    onError: () => {
+      throw new Error("Failed to get AI response. Please try again.");
+    },
+  });
 }
 
 export async function applyWysiwygEdit(
diff --git a/apps/dashboard/src/components/vibe-coding/index.ts b/apps/dashboard/src/components/vibe-coding/index.ts
index 445a3b856b..bf911ccf3d 100644
--- a/apps/dashboard/src/components/vibe-coding/index.ts
+++ b/apps/dashboard/src/components/vibe-coding/index.ts
@@ -1,5 +1,5 @@
 export { default as AssistantChat, type AssistantComposerApi } from './assistant-chat';
-export { createChatAdapter, createDashboardChatAdapter, createHistoryAdapter } from './chat-adapters';
+export { createAnalyticsQueryChatAdapter, createChatAdapter, createDashboardChatAdapter, createHistoryAdapter } from './chat-adapters';
 export { default as CodeEditor } from './code-editor';
 export { default as VibeCodeLayout, type ViewportMode, type WysiwygDebugInfo } from './vibe-code-layout';