feat: upgrade to ai sdk 5

Author: farazcsk

client/dashboard/package.json

@@ -12,36 +12,42 @@
   },
   "dependencies": {
     "@ai-sdk/openai": "catalog:",
-    "@ai-sdk/react": "^1.2.12",
+    "@ai-sdk/react": "catalog:",
+    "@ai-sdk/ui-utils": "catalog:",
     "@datadog/browser-rum": "^6.20.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@gram/client": "workspace:*",
-    "@openrouter/ai-sdk-provider": "0.7.5",
+    "@openrouter/ai-sdk-provider": "^1.2.0",
     "@polar-sh/checkout": "^0.1.11",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-hover-card": "^1.1.15",
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.7",
     "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-toggle": "^1.1.10",
     "@radix-ui/react-toggle-group": "^1.1.11",
     "@radix-ui/react-tooltip": "^1.2.8",
+    "@radix-ui/react-use-controllable-state": "^1.2.2",
     "@speakeasy-api/moonshine": "1.30.3",
     "@tailwindcss/typography": "^0.5.16",
     "@tailwindcss/vite": "^4.1.13",
     "@tanstack/react-query": "catalog:",
     "@tanstack/react-table": "^8.21.3",
+    "@xyflow/react": "^12.8.6",
     "ai": "catalog:",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -57,10 +63,14 @@
     "react-dom": "^19.1.1",
     "react-error-boundary": "^6.0.0",
     "react-router": "^7.9.1",
+    "react-syntax-highlighter": "^15.6.6",
     "sonner": "^2.0.7",
+    "streamdown": "^1.3.0",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.13",
+    "tokenlens": "^1.3.1",
     "tw-animate-css": "^1.3.8",
+    "use-stick-to-bottom": "^1.1.1",
     "uuid": "^13.0.0",
     "vaul": "^1.1.2",
     "zod": "^3.20.0"
@@ -70,6 +80,7 @@
     "@types/node": "^24.5.2",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "@vitejs/plugin-react": "^5.0.3",
     "eslint": "^9.35.0",
     "eslint-plugin-react-hooks": "^5.1.0",

client/dashboard/src/components/chat/ChatInput.tsx

@@ -0,0 +1,57 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { useState } from "react";
+
+interface ChatInputProps {
+  onSend: (message: string) => void;
+  disabled?: boolean;
+  placeholder?: string;
+  className?: string;
+  initialInput?: string;
+  additionalActions?: React.ReactNode;
+}
+
+export function ChatInput({
+  onSend,
+  disabled,
+  placeholder = "Type a message...",
+  className,
+  initialInput,
+  additionalActions,
+}: ChatInputProps) {
+  const [input, setInput] = useState(initialInput || "");
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (input.trim() && !disabled) {
+      onSend(input);
+      setInput("");
+    }
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className={cn("flex items-center gap-2 border-t p-4", className)}
+    >
+      <textarea
+        value={input}
+        onChange={(e) => setInput(e.target.value)}
+        placeholder={placeholder}
+        disabled={disabled}
+        className="flex-1 resize-none rounded-lg border bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+        rows={1}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" && !e.shiftKey) {
+            e.preventDefault();
+            handleSubmit(e);
+          }
+        }}
+      />
+      {additionalActions}
+      <Button type="submit" disabled={disabled || !input.trim()}>
+        Send
+      </Button>
+    </form>
+  );
+}

client/dashboard/src/components/chat/ChatMessages.tsx

@@ -0,0 +1,71 @@
+import { UIMessage } from "ai";
+import { cn } from "@/lib/utils";
+import { Type } from "@/components/ui/type";
+import { useEffect, useRef } from "react";
+
+interface ChatMessagesProps {
+  messages: UIMessage[];
+  isLoading?: boolean;
+  renderMessage?: (message: UIMessage) => React.ReactNode;
+  className?: string;
+}
+
+export function ChatMessages({
+  messages,
+  isLoading,
+  renderMessage,
+  className,
+}: ChatMessagesProps) {
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+
+  return (
+    <div className={cn("flex flex-col gap-4 p-4 overflow-y-auto", className)}>
+      {messages.map((message) => (
+        <div key={message.id}>
+          {renderMessage ? (
+            renderMessage(message)
+          ) : (
+            <DefaultMessageRenderer message={message} />
+          )}
+        </div>
+      ))}
+      {isLoading && (
+        <div className="flex items-center gap-2 text-muted-foreground">
+          <div className="h-2 w-2 animate-bounce rounded-full bg-current [animation-delay:-0.3s]" />
+          <div className="h-2 w-2 animate-bounce rounded-full bg-current [animation-delay:-0.15s]" />
+          <div className="h-2 w-2 animate-bounce rounded-full bg-current" />
+        </div>
+      )}
+      <div ref={messagesEndRef} />
+    </div>
+  );
+}
+
+function DefaultMessageRenderer({ message }: { message: UIMessage }) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col gap-2 rounded-lg p-4",
+        message.role === "user"
+          ? "ml-auto max-w-[80%] bg-primary text-primary-foreground"
+          : "mr-auto max-w-[80%] bg-muted",
+      )}
+    >
+      <Type variant="small" className="font-medium opacity-70">
+        {message.role === "user" ? "You" : "Assistant"}
+      </Type>
+      <div className="whitespace-pre-wrap">
+        {message.parts.map((part, index) => {
+          if (part.type === "text") {
+            return <span key={index}>{part.text}</span>;
+          }
+          return null;
+        })}
+      </div>
+    </div>
+  );
+}

client/dashboard/src/lib/CustomChatTransport.ts

@@ -0,0 +1,38 @@
+import { streamText, convertToModelMessages, UIMessage, smoothStream } from "ai";
+
+export interface CustomChatTransportConfig {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  model: any;
+  temperature: number;
+  tools: Record<string, { description?: string; inputSchema: unknown }>;
+  systemPrompt: string;
+  onError?: (error: { error: unknown }) => void;
+}
+
+export class CustomChatTransport {
+  private config: CustomChatTransportConfig;
+
+  constructor(config: CustomChatTransportConfig) {
+    this.config = config;
+  }
+
+  async sendMessages({ messages }: { messages: UIMessage[] }) {
+    const result = await streamText({
+      model: this.config.model,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      messages: convertToModelMessages(messages) as any,
+      tools: this.config.tools,
+      temperature: this.config.temperature,
+      system: this.config.systemPrompt,
+      experimental_transform: smoothStream({ delayInMs: 15 }),
+      maxSteps: 5,
+      onError: this.config.onError,
+    });
+
+    return result.toUIMessageStream();
+  }
+
+  updateConfig(config: Partial<CustomChatTransportConfig>) {
+    this.config = { ...this.config, ...config };
+  }
+}

client/dashboard/src/pages/playground/Agentify.tsx

@@ -106,11 +106,12 @@ export const AgentifyProvider = ({
     const example = await fetch(exampleUrl!).then((res) => res.text());
 
     const result = await generateObject({
-      model,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      model: model as any,
       mode: "json",
       prompt: `
 <instructions>
-  You will be given a chat history, a statement of intent, and a basic skeleton of an agent. 
+  You will be given a chat history, a statement of intent, and a basic skeleton of an agent.
   Using the statement of intent and details from the chat history, produce a complete agent in ${lang} using ${framework} that performs the task.
   The agent should use LLM calls and toolsets to solve the generic version of the task as described in the statement of intent, not just the specific example given.
   Note that the toolset provides tools and handles their execution and authentication. For example, any tool call present in the chat history will be available to the agent.
@@ -134,7 +135,7 @@ export const AgentifyProvider = ({
 </values-to-use>
 
 <chat-history>
-  ${messages.map((m) => `${m.role}: ${m.content}`).join("\n\t")}
+  ${messages.map((m) => `${m.role}: ${m.parts.map((p) => (p.type === "text" ? p.text : "")).join("")}`).join("\n\t")}
 </chat-history>
 
 <example-agent>
@@ -227,18 +228,19 @@ export const AgentifyButton = ({
     });
 
     generateObject({
-      model: openrouter.chat("openai/gpt-4o-mini"),
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      model: openrouter.chat("openai/gpt-4o-mini") as any,
       mode: "json",
       prompt: `
           <instructions>
-            You will be given a chat history. 
+            You will be given a chat history.
             Your job is to distill the user's intent from the chat history to produce a few sentences that describe the function the agent should perform, based on the user's intent from the chat history.
             This prompt will be used to generate an agent that can reusably and extensibly solve the task.
             Phrase the prompt as instructions, e.g. "Find all new users from the last 30 days and send them a welcome email".
           </instructions>
 
           <chat-history>
-            ${messages.map((m) => `${m.role}: ${m.content}`).join("\n\t")}
+            ${messages.map((m) => `${m.role}: ${m.parts.map((p) => (p.type === "text" ? p.text : "")).join("")}`).join("\n\t")}
           </chat-history>
           `,
       temperature: 0.5,

client/dashboard/src/pages/playground/ChatContext.tsx

@@ -1,10 +1,10 @@
 import { useRegisterChatTelemetry, useTelemetry } from "@/contexts/Telemetry";
-import { Message, UIMessage } from "ai";
+import { UIMessage } from "ai";
 import { createContext, useContext, useRef, useState } from "react";
 import { useSearchParams } from "react-router";
 import { v7 as uuidv7 } from "uuid";
 
-type AppendFn = (message: Message) => void;
+type AppendFn = (message: { content: string }) => void;
 
 const ChatContext = createContext<{
   id: string;