feat(cli): upgrade to ai sdk v5 (#487)

.changeset/ripe-peaches-crash.md

@@ -0,0 +1,5 @@
+---
+"create-better-t-stack": minor
+---
+
+Upgrade to AI SDK v5

apps/cli/src/constants.ts

@@ -87,11 +87,11 @@ export const dependencyVersionMap = {
 
 	turbo: "^2.5.4",
 
-	ai: "^4.3.16",
+	ai: "^5.0.9",
-	"@ai-sdk/google": "^1.2.3",
+	"@ai-sdk/google": "^2.0.3",
-	"@ai-sdk/vue": "^1.2.8",
+	"@ai-sdk/vue": "^2.0.9",
-	"@ai-sdk/svelte": "^2.1.9",
+	"@ai-sdk/svelte": "^3.0.9",
-	"@ai-sdk/react": "^1.2.12",
+	"@ai-sdk/react": "^2.0.9",
 
 	"@orpc/server": "^1.5.0",
 	"@orpc/client": "^1.5.0",

apps/cli/src/helpers/setup/examples-setup.ts

@@ -17,33 +17,44 @@ export async function setupExamples(config: ProjectConfig) {
 	}
 
 	if (examples.includes("ai")) {
-		const clientDir = path.join(projectDir, "apps/web");
+		const webClientDir = path.join(projectDir, "apps/web");
+		const nativeClientDir = path.join(projectDir, "apps/native");
 		const serverDir = path.join(projectDir, "apps/server");
-		const clientDirExists = await fs.pathExists(clientDir);
+
+		const webClientDirExists = await fs.pathExists(webClientDir);
+		const nativeClientDirExists = await fs.pathExists(nativeClientDir);
 		const serverDirExists = await fs.pathExists(serverDir);
 
 		const hasNuxt = frontend.includes("nuxt");
 		const hasSvelte = frontend.includes("svelte");
-		const hasReact =
+		const hasReactWeb =
 			frontend.includes("react-router") ||
 			frontend.includes("tanstack-router") ||
 			frontend.includes("next") ||
-			frontend.includes("tanstack-start") ||
+			frontend.includes("tanstack-start");
+		const hasReactNative =
 			frontend.includes("native-nativewind") ||
 			frontend.includes("native-unistyles");
 
-		if (clientDirExists) {
+		if (webClientDirExists) {
 			const dependencies: AvailableDependencies[] = ["ai"];
 			if (hasNuxt) {
 				dependencies.push("@ai-sdk/vue");
 			} else if (hasSvelte) {
 				dependencies.push("@ai-sdk/svelte");
-			} else if (hasReact) {
+			} else if (hasReactWeb) {
 				dependencies.push("@ai-sdk/react");
 			}
 			await addPackageDependency({
 				dependencies,
-				projectDir: clientDir,
+				projectDir: webClientDir,
+			});
+		}
+
+		if (nativeClientDirExists && hasReactNative) {
+			await addPackageDependency({
+				dependencies: ["ai", "@ai-sdk/react"],
+				projectDir: nativeClientDir,
 			});
 		}
 

apps/cli/templates/backend/server/express/src/index.ts.hbs

@@ -14,7 +14,7 @@ import { createContext } from "./lib/context";
 import cors from "cors";
 import express from "express";
 {{#if (includes examples "ai")}}
-import { streamText } from "ai";
+import { streamText, type UIMessage, convertToModelMessages } from "ai";
 import { google } from "@ai-sdk/google";
 {{/if}}
 {{#if auth}}
@@ -44,16 +44,16 @@ app.use(
   "/trpc",
   createExpressMiddleware({
     router: appRouter,
-    createContext
+    createContext,
   })
 );
 {{/if}}
 
 {{#if (eq api "orpc")}}
 const handler = new RPCHandler(appRouter);
-app.use('/rpc{*path}', async (req, res, next) => {
+app.use("/rpc{*path}", async (req, res, next) => {
   const { matched } = await handler.handle(req, res, {
-    prefix: '/rpc',
+    prefix: "/rpc",
     {{#if auth}}
     context: await createContext({ req }),
     {{else}}
@@ -65,16 +65,16 @@ app.use('/rpc{*path}', async (req, res, next) => {
 });
 {{/if}}
 
-app.use(express.json())
+app.use(express.json());
 
 {{#if (includes examples "ai")}}
 app.post("/ai", async (req, res) => {
-  const { messages = [] } = req.body || {};
+  const { messages = [] } = (req.body || {}) as { messages: UIMessage[] };
   const result = streamText({
     model: google("gemini-1.5-flash"),
-    messages,
+    messages: convertToModelMessages(messages),
   });
-  result.pipeDataStreamToResponse(res);
+  result.pipeUIMessageStreamToResponse(res);
 });
 {{/if}}
 

apps/cli/templates/backend/server/fastify/src/index.ts.hbs

@@ -19,8 +19,7 @@ import { createContext } from "./lib/context";
 {{/if}}
 
 {{#if (includes examples "ai")}}
-import type { FastifyRequest, FastifyReply } from "fastify";
+import { streamText, type UIMessage, convertToModelMessages } from "ai";
-import { streamText, type Message } from "ai";
 import { google } from "@ai-sdk/google";
 {{/if}}
 
@@ -99,7 +98,7 @@ fastify.route({
       response.headers.forEach((value, key) => reply.header(key, value));
       reply.send(response.body ? await response.text() : null);
     } catch (error) {
-      fastify.log.error("Authentication Error:", error);
+      fastify.log.error({ err: error }, "Authentication Error:");
       reply.status(500).send({
         error: "Internal authentication error",
         code: "AUTH_FAILURE"
@@ -125,26 +124,24 @@ fastify.register(fastifyTRPCPlugin, {
 {{#if (includes examples "ai")}}
 interface AiRequestBody {
   id?: string;
-  messages: Message[];
+  messages: UIMessage[];
 }
 
 fastify.post('/ai', async function (request, reply) {
+  // there are some issues with the ai sdk and fastify, docs: https://ai-sdk.dev/cookbook/api-servers/fastify
   const { messages } = request.body as AiRequestBody;
   const result = streamText({
     model: google('gemini-1.5-flash'),
-    messages,
+    messages: convertToModelMessages(messages),
   });
 
-  reply.header('X-Vercel-AI-Data-Stream', 'v1');
+  return result.pipeUIMessageStreamToResponse(reply.raw);
-  reply.header('Content-Type', 'text/plain; charset=utf-8');
-
-  return reply.send(result.toDataStream());
 });
 {{/if}}
 
 fastify.get('/', async () => {
-  return 'OK'
+  return 'OK';
-})
+});
 
 fastify.listen({ port: 3000 }, (err) => {
   if (err) {

apps/cli/templates/backend/server/hono/src/index.ts.hbs

@@ -21,20 +21,20 @@ import { Hono } from "hono";
 import { cors } from "hono/cors";
 import { logger } from "hono/logger";
 {{#if (and (includes examples "ai") (or (eq runtime "bun") (eq runtime "node")))}}
-import { streamText } from "ai";
+import { streamText, convertToModelMessages } from "ai";
 import { google } from "@ai-sdk/google";
-import { stream } from "hono/streaming";
 {{/if}}
 {{#if (and (includes examples "ai") (eq runtime "workers"))}}
-import { streamText } from "ai";
+import { streamText, convertToModelMessages } from "ai";
-import { stream } from "hono/streaming";
 import { createGoogleGenerativeAI } from "@ai-sdk/google";
 {{/if}}
 
 const app = new Hono();
 
 app.use(logger());
-app.use("/*", cors({
+app.use(
+  "/*",
+  cors({
     {{#if (or (eq runtime "bun") (eq runtime "node"))}}
     origin: process.env.CORS_ORIGIN || "",
     {{/if}}
@@ -46,7 +46,8 @@ app.use("/*", cors({
     allowHeaders: ["Content-Type", "Authorization"],
     credentials: true,
     {{/if}}
-}));
+  })
+);
 
 {{#if auth}}
 app.on(["POST", "GET"], "/api/auth/**", (c) => auth.handler(c.req.raw));
@@ -69,44 +70,43 @@ app.use("/rpc/*", async (c, next) => {
 {{/if}}
 
 {{#if (eq api "trpc")}}
-app.use("/trpc/*", trpcServer({
+app.use(
+  "/trpc/*",
+  trpcServer({
     router: appRouter,
     createContext: (_opts, context) => {
       return createContext({ context });
     },
-}));
+  })
+);
 {{/if}}
 
 {{#if (and (includes examples "ai") (or (eq runtime "bun") (eq runtime "node")))}}
 app.post("/ai", async (c) => {
   const body = await c.req.json();
-  const messages = body.messages || [];
+  const uiMessages = body.messages || [];
   const result = streamText({
     model: google("gemini-1.5-flash"),
-    messages,
+    messages: convertToModelMessages(uiMessages),
   });
 
-  c.header("X-Vercel-AI-Data-Stream", "v1");
+  return result.toUIMessageStreamResponse();
-  c.header("Content-Type", "text/plain; charset=utf-8");
-  return stream(c, (stream) => stream.pipe(result.toDataStream()));
 });
 {{/if}}
 
 {{#if (and (includes examples "ai") (eq runtime "workers"))}}
 app.post("/ai", async (c) => {
   const body = await c.req.json();
-  const messages = body.messages || [];
+  const uiMessages = body.messages || [];
   const google = createGoogleGenerativeAI({
     apiKey: env.GOOGLE_GENERATIVE_AI_API_KEY,
   });
   const result = streamText({
     model: google("gemini-1.5-flash"),
-    messages,
+    messages: convertToModelMessages(uiMessages),
   });
 
-  c.header("X-Vercel-AI-Data-Stream", "v1");
+  return result.toUIMessageStreamResponse();
-  c.header("Content-Type", "text/plain; charset=utf-8");
-  return stream(c, (stream) => stream.pipe(result.toDataStream()));
 });
 {{/if}}
 
@@ -117,17 +117,20 @@ app.get("/", (c) => {
 {{#if (eq runtime "node")}}
 import { serve } from "@hono/node-server";
 
-serve({
+serve(
+  {
     fetch: app.fetch,
     port: 3000,
-}, (info) => {
+  },
+  (info) => {
     console.log(`Server is running on http://localhost:${info.port}`);
-});
+  }
+);
 {{else}}
-  {{#if (eq runtime "bun")}}
+{{#if (eq runtime "bun")}}
 export default app;
-  {{/if}}
+{{/if}}
-  {{#if (eq runtime "workers")}}
+{{#if (eq runtime "workers")}}
-export default app;
+export default app;
-  {{/if}}
+{{/if}}
 {{/if}}

apps/cli/templates/examples/ai/native/nativewind/app/(drawer)/ai.tsx.hbs

@@ -1,4 +1,4 @@
-import { useRef, useEffect } from "react";
+import { useRef, useEffect, useState } from "react";
 import {
   View,
   Text,
@@ -9,11 +9,11 @@ import {
   Platform,
 } from "react-native";
 import { useChat } from "@ai-sdk/react";
+import { DefaultChatTransport } from "ai";
 import { fetch as expoFetch } from "expo/fetch";
 import { Ionicons } from "@expo/vector-icons";
 import { Container } from "@/components/container";
 
-// Utility function to generate API URLs
 const generateAPIUrl = (relativePath: string) => {
   const serverUrl = process.env.EXPO_PUBLIC_SERVER_URL;
   if (!serverUrl) {
@@ -25,11 +25,13 @@ const generateAPIUrl = (relativePath: string) => {
 };
 
 export default function AIScreen() {
-  const { messages, input, handleInputChange, handleSubmit, error } = useChat({
+  const [input, setInput] = useState("");
+  const { messages, error, sendMessage } = useChat({
+    transport: new DefaultChatTransport({
       fetch: expoFetch as unknown as typeof globalThis.fetch,
       api: generateAPIUrl('/ai'),
+    }),
     onError: error => console.error(error, 'AI Chat Error'),
-    maxSteps: 5,
   });
 
   const scrollViewRef = useRef<ScrollView>(null);
@@ -39,8 +41,10 @@ export default function AIScreen() {
   }, [messages]);
 
   const onSubmit = () => {
-    if (input.trim()) {
+    const value = input.trim();
-      handleSubmit();
+    if (value) {
+      sendMessage({ text: value });
+      setInput("");
     }
   };
 
@@ -100,9 +104,28 @@ export default function AIScreen() {
                     <Text className="text-sm font-semibold mb-1 text-foreground">
                       {message.role === "user" ? "You" : "AI Assistant"}
                     </Text>
-                    <Text className="text-foreground leading-relaxed">
+                    <View className="space-y-1">
-                      {message.content}
+                      {message.parts.map((part, i) => {
+                        if (part.type === 'text') {
+                          return (
+                            <Text
+                              key={`${message.id}-${i}`}
+                              className="text-foreground leading-relaxed"
+                            >
+                              {part.text}
                             </Text>
+                          );
+                        }
+                        return (
+                          <Text
+                            key={`${message.id}-${i}`}
+                            className="text-foreground leading-relaxed"
+                          >
+                            {JSON.stringify(part)}
+                          </Text>
+                        );
+                      })}
+                    </View>
                   </View>
                 ))}
               </View>
@@ -113,21 +136,13 @@ export default function AIScreen() {
             <View className="flex-row items-end space-x-2">
               <TextInput
                 value={input}
-                onChange={(e) =>
+                onChangeText={setInput}
-                  handleInputChange({
-                    ...e,
-                    target: {
-                      ...e.target,
-                      value: e.nativeEvent.text,
-                    },
-                  } as unknown as React.ChangeEvent<HTMLInputElement>)
-                }
                 placeholder="Type your message..."
                 placeholderTextColor="#6b7280"
                 className="flex-1 border border-border rounded-md px-3 py-2 text-foreground bg-background min-h-[40px] max-h-[120px]"
                 onSubmitEditing={(e) => {
-                  handleSubmit(e);
                   e.preventDefault();
+                  onSubmit();
                 }}
                 autoFocus={true}
               />

apps/cli/templates/examples/ai/native/unistyles/app/(drawer)/ai.tsx.hbs

@@ -1,4 +1,4 @@
-import { useRef, useEffect } from "react";
+import React, { useRef, useEffect, useState } from "react";
 import {
   View,
   Text,
@@ -9,6 +9,7 @@ import {
   Platform,
 } from "react-native";
 import { useChat } from "@ai-sdk/react";
+import { DefaultChatTransport } from "ai";
 import { fetch as expoFetch } from "expo/fetch";
 import { Ionicons } from "@expo/vector-icons";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
@@ -18,21 +19,22 @@ const generateAPIUrl = (relativePath: string) => {
   const serverUrl = process.env.EXPO_PUBLIC_SERVER_URL;
   if (!serverUrl) {
     throw new Error(
-      "EXPO_PUBLIC_SERVER_URL environment variable is not defined",
+      "EXPO_PUBLIC_SERVER_URL environment variable is not defined"
     );
   }
-
   const path = relativePath.startsWith("/") ? relativePath : `/${relativePath}`;
   return serverUrl.concat(path);
 };
 
 export default function AIScreen() {
   const { theme } = useUnistyles();
-  const { messages, input, handleInputChange, handleSubmit, error } = useChat({
+  const [input, setInput] = useState("");
+  const { messages, error, sendMessage } = useChat({
+    transport: new DefaultChatTransport({
       fetch: expoFetch as unknown as typeof globalThis.fetch,
       api: generateAPIUrl("/ai"),
+    }),
     onError: (error) => console.error(error, "AI Chat Error"),
-    maxSteps: 5,
   });
 
   const scrollViewRef = useRef<ScrollView>(null);
@@ -42,8 +44,10 @@ export default function AIScreen() {
   }, [messages]);
 
   const onSubmit = () => {
-    if (input.trim()) {
+    const value = input.trim();
-      handleSubmit();
+    if (value) {
+      sendMessage({ text: value });
+      setInput("");
     }
   };
 
@@ -100,7 +104,28 @@ export default function AIScreen() {
                     <Text style={styles.messageRole}>
                       {message.role === "user" ? "You" : "AI Assistant"}
                     </Text>
-                    <Text style={styles.messageContent}>{message.content}</Text>
+                    <View style={styles.messageContentWrapper}>
+                      {message.parts.map((part, i) => {
+                        if (part.type === "text") {
+                          return (
+                            <Text
+                              key={`${message.id}-${i}`}
+                              style={styles.messageContent}
+                            >
+                              {part.text}
+                            </Text>
+                          );
+                        }
+                        return (
+                          <Text
+                            key={`${message.id}-${i}`}
+                            style={styles.messageContent}
+                          >
+                            {JSON.stringify(part)}
+                          </Text>
+                        );
+                      })}
+                    </View>
                   </View>
                 ))}
               </View>
@@ -111,21 +136,13 @@ export default function AIScreen() {
             <View style={styles.inputContainer}>
               <TextInput
                 value={input}
-                onChange={(e) =>
+                onChangeText={setInput}
-                  handleInputChange({
-                    ...e,
-                    target: {
-                      ...e.target,
-                      value: e.nativeEvent.text,
-                    },
-                  } as unknown as React.ChangeEvent<HTMLInputElement>)
-                }
                 placeholder="Type your message..."
                 placeholderTextColor={theme.colors.border}
                 style={styles.textInput}
                 onSubmitEditing={(e) => {
-                  handleSubmit(e);
                   e.preventDefault();
+                  onSubmit();
                 }}
                 autoFocus={true}
               />
@@ -141,7 +158,9 @@ export default function AIScreen() {
                   name="send"
                   size={20}
                   color={
-                    input.trim() ? theme.colors.background : theme.colors.border
+                    input.trim()
+                      ? theme.colors.background
+                      : theme.colors.border
                   }
                 />
               </TouchableOpacity>
@@ -230,6 +249,9 @@ const styles = StyleSheet.create((theme) => ({
     marginBottom: theme.spacing.sm,
     color: theme.colors.typography,
   },
+  messageContentWrapper: {
+    gap: theme.spacing.xs,
+  },
   messageContent: {
     color: theme.colors.typography,
     lineHeight: 20,

apps/cli/templates/examples/ai/server/next/src/app/ai/route.ts

@@ -1,15 +0,0 @@
-import { google } from '@ai-sdk/google';
-import { streamText } from 'ai';
-
-export const maxDuration = 30;
-
-export async function POST(req: Request) {
-  const { messages } = await req.json();
-
-  const result = streamText({
-    model: google('gemini-2.0-flash'),
-    messages,
-  });
-
-  return result.toDataStreamResponse();
-}

apps/cli/templates/examples/ai/server/next/src/app/ai/route.ts.hbs

@@ -0,0 +1,15 @@
+import { google } from '@ai-sdk/google';
+import { streamText, type UIMessage, convertToModelMessages } from 'ai';
+
+export const maxDuration = 30;
+
+export async function POST(req: Request) {
+  const { messages }: { messages: UIMessage[] } = await req.json();
+
+  const result = streamText({
+    model: google('gemini-2.0-flash'),
+    messages: convertToModelMessages(messages),
+  });
+
+  return result.toUIMessageStreamResponse();
+}

apps/cli/templates/examples/ai/web/nuxt/app/pages/ai.vue.hbs

@@ -1,20 +1,35 @@
 <script setup lang="ts">
-import { useChat } from '@ai-sdk/vue'
+import { Chat } from '@ai-sdk/vue'
+import { DefaultChatTransport } from 'ai'
 import { nextTick, ref, watch } from 'vue'
 
 const config = useRuntimeConfig()
 const serverUrl = config.public.serverURL
 
-const { messages, input, handleSubmit } = useChat({
+const input = ref('')
+const chat = new Chat({
+  transport: new DefaultChatTransport({
     api: `${serverUrl}/ai`,
+  }),
 })
 
 const messagesEndRef = ref<null | HTMLDivElement>(null)
 
-watch(messages, async () => {
+watch(
+  () => chat.messages,
+  async () => {
     await nextTick()
     messagesEndRef.value?.scrollIntoView({ behavior: 'smooth' })
-})
+  }
+)
+
+const handleSubmit = (e: Event) => {
+  e.preventDefault()
+  const text = input.value.trim()
+  if (!text) return
+  chat.sendMessage({ text })
+  input.value = ''
+}
 
 function getMessageText(message: any) {
   return message.parts
@@ -27,11 +42,11 @@ function getMessageText(message: any) {
 <template>
   <div class="grid grid-rows-[1fr_auto] overflow-hidden w-full mx-auto p-4">
     <div class="overflow-y-auto space-y-4 pb-4">
-      <div v-if="messages.length === 0" class="text-center text-muted-foreground mt-8">
+      <div v-if="chat.messages.length === 0" class="text-center text-muted-foreground mt-8">
         Ask me anything to get started!
       </div>
       <div
-        v-for="message in messages"
+        v-for="message in chat.messages"
         :key="message.id"
         :class="[
           'p-3 rounded-lg',
@@ -39,14 +54,14 @@ function getMessageText(message: any) {
         ]"
       >
         <p class="text-sm font-semibold mb-1">
-          {{ message.role === 'user' ? 'You' : 'AI Assistant' }}
+          \{{ message.role === 'user' ? 'You' : 'AI Assistant' }}
         </p>
-        <div class="whitespace-pre-wrap">{{ getMessageText(message) }}</div>
+        <div class="whitespace-pre-wrap">\{{ getMessageText(message) }}</div>
       </div>
-      <div ref="messagesEndRef" />
+      <div ref="messagesEndRef"></div>
     </div>
 
-    <form @submit.prevent="handleSubmit" class="w-full flex items-center space-x-2 pt-2 border-t">
+    <form @submit="handleSubmit" class="w-full flex items-center space-x-2 pt-2 border-t">
       <UInput
         name="prompt"
         v-model="input"

apps/cli/templates/examples/ai/web/react/next/src/app/ai/page.tsx.hbs

@@ -1,15 +1,18 @@
-"use client"
+"use client";
 
 import { useChat } from "@ai-sdk/react";
+import { DefaultChatTransport } from "ai";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Send } from "lucide-react";
-import { useRef, useEffect } from "react";
+import { useRef, useEffect, useState } from "react";
-
 
 export default function AIPage() {
-  const { messages, input, handleInputChange, handleSubmit } = useChat({
+  const [input, setInput] = useState("");
+  const { messages, sendMessage } = useChat({
+    transport: new DefaultChatTransport({
       api: `${process.env.NEXT_PUBLIC_SERVER_URL}/ai`,
+    }),
   });
 
   const messagesEndRef = useRef<HTMLDivElement>(null);
@@ -18,6 +21,14 @@ export default function AIPage() {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
 
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const text = input.trim();
+    if (!text) return;
+    sendMessage({ text });
+    setInput("");
+  };
+
   return (
     <div className="grid grid-rows-[1fr_auto] overflow-hidden w-full mx-auto p-4">
       <div className="overflow-y-auto space-y-4 pb-4">
@@ -38,7 +49,16 @@ export default function AIPage() {
               <p className="text-sm font-semibold mb-1">
                 {message.role === "user" ? "You" : "AI Assistant"}
               </p>
-              <div className="whitespace-pre-wrap">{message.content}</div>
+              {message.parts?.map((part, index) => {
+                if (part.type === "text") {
+                  return (
+                    <div key={index} className="whitespace-pre-wrap">
+                      {part.text}
+                    </div>
+                  );
+                }
+                return null;
+              })}
             </div>
           ))
         )}
@@ -52,7 +72,7 @@ export default function AIPage() {
         <Input
           name="prompt"
           value={input}
-          onChange={handleInputChange}
+          onChange={(e) => setInput(e.target.value)}
           placeholder="Type your message..."
           className="flex-1"
           autoComplete="off"

apps/cli/templates/examples/ai/web/react/react-router/src/routes/ai.tsx.hbs

@@ -1,12 +1,16 @@
+import React, { useRef, useEffect, useState } from "react";
 import { useChat } from "@ai-sdk/react";
+import { DefaultChatTransport } from "ai";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Send } from "lucide-react";
-import { useRef, useEffect } from "react";
 
-export default function AI() {
+const AI: React.FC = () => {
-  const { messages, input, handleInputChange, handleSubmit } = useChat({
+  const [input, setInput] = useState("");
+  const { messages, sendMessage } = useChat({
+    transport: new DefaultChatTransport({
       api: `${import.meta.env.VITE_SERVER_URL}/ai`,
+    }),
   });
 
   const messagesEndRef = useRef<HTMLDivElement>(null);
@@ -15,6 +19,14 @@ export default function AI() {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
 
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const text = input.trim();
+    if (!text) return;
+    sendMessage({ text });
+    setInput("");
+  };
+
   return (
     <div className="grid grid-rows-[1fr_auto] overflow-hidden w-full mx-auto p-4">
       <div className="overflow-y-auto space-y-4 pb-4">
@@ -35,7 +47,16 @@ export default function AI() {
               <p className="text-sm font-semibold mb-1">
                 {message.role === "user" ? "You" : "AI Assistant"}
               </p>
-              <div className="whitespace-pre-wrap">{message.content}</div>
+              {message.parts?.map((part, index) => {
+                if (part.type === "text") {
+                  return (
+                    <div key={index} className="whitespace-pre-wrap">
+                      {part.text}
+                    </div>
+                  );
+                }
+                return null;
+              })}
             </div>
           ))
         )}
@@ -49,7 +70,7 @@ export default function AI() {
         <Input
           name="prompt"
           value={input}
-          onChange={handleInputChange}
+          onChange={(e) => setInput(e.target.value)}
           placeholder="Type your message..."
           className="flex-1"
           autoComplete="off"
@@ -61,4 +82,6 @@ export default function AI() {
       </form>
     </div>
   );
-}
+};
+
+export default AI;

apps/cli/templates/examples/ai/web/react/tanstack-router/src/routes/ai.tsx.hbs

@@ -1,17 +1,21 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { useChat } from "@ai-sdk/react";
+import { DefaultChatTransport } from "ai";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Send } from "lucide-react";
-import { useRef, useEffect } from "react";
+import { useRef, useEffect, useState } from "react";
 
 export const Route = createFileRoute("/ai")({
   component: RouteComponent,
 });
 
 function RouteComponent() {
-  const { messages, input, handleInputChange, handleSubmit } = useChat({
+  const [input, setInput] = useState("");
+  const { messages, sendMessage } = useChat({
+    transport: new DefaultChatTransport({
       api: `${import.meta.env.VITE_SERVER_URL}/ai`,
+    }),
   });
 
   const messagesEndRef = useRef<HTMLDivElement>(null);
@@ -20,6 +24,14 @@ function RouteComponent() {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
 
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const text = input.trim();
+    if (!text) return;
+    sendMessage({ text });
+    setInput("");
+  };
+
   return (
     <div className="grid grid-rows-[1fr_auto] overflow-hidden w-full mx-auto p-4">
       <div className="overflow-y-auto space-y-4 pb-4">
@@ -40,7 +52,16 @@ function RouteComponent() {
               <p className="text-sm font-semibold mb-1">
                 {message.role === "user" ? "You" : "AI Assistant"}
               </p>
-              <div className="whitespace-pre-wrap">{message.content}</div>
+              {message.parts?.map((part, index) => {
+                if (part.type === "text") {
+                  return (
+                    <div key={index} className="whitespace-pre-wrap">
+                      {part.text}
+                    </div>
+                  );
+                }
+                return null;
+              })}
             </div>
           ))
         )}
@@ -54,7 +75,7 @@ function RouteComponent() {
         <Input
           name="prompt"
           value={input}
-          onChange={handleInputChange}
+          onChange={(e) => setInput(e.target.value)}
           placeholder="Type your message..."
           className="flex-1"
           autoComplete="off"

apps/cli/templates/examples/ai/web/react/tanstack-start/src/routes/ai.tsx.hbs

@@ -1,17 +1,21 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { useChat } from "@ai-sdk/react";
+import { DefaultChatTransport } from "ai";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Send } from "lucide-react";
-import { useRef, useEffect } from "react";
+import { useRef, useEffect, useState } from "react";
 
 export const Route = createFileRoute("/ai")({
   component: RouteComponent,
 });
 
 function RouteComponent() {
-  const { messages, input, handleInputChange, handleSubmit } = useChat({
+  const [input, setInput] = useState("");
+  const { messages, sendMessage } = useChat({
+    transport: new DefaultChatTransport({
       api: `${import.meta.env.VITE_SERVER_URL}/ai`,
+    }),
   });
 
   const messagesEndRef = useRef<HTMLDivElement>(null);
@@ -20,6 +24,14 @@ function RouteComponent() {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
 
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const text = input.trim();
+    if (!text) return;
+    sendMessage({ text });
+    setInput("");
+  };
+
   return (
     <div className="grid grid-rows-[1fr_auto] overflow-hidden w-full mx-auto p-4">
       <div className="overflow-y-auto space-y-4 pb-4">
@@ -40,7 +52,16 @@ function RouteComponent() {
               <p className="text-sm font-semibold mb-1">
                 {message.role === "user" ? "You" : "AI Assistant"}
               </p>
-              <div className="whitespace-pre-wrap">{message.content}</div>
+              {message.parts?.map((part, index) => {
+                if (part.type === "text") {
+                  return (
+                    <div key={index} className="whitespace-pre-wrap">
+                      {part.text}
+                    </div>
+                  );
+                }
+                return null;
+              })}
             </div>
           ))
         )}
@@ -54,7 +75,7 @@ function RouteComponent() {
         <Input
           name="prompt"
           value={input}
-          onChange={handleInputChange}
+          onChange={(e) => setInput(e.target.value)}
           placeholder="Type your message..."
           className="flex-1"
           autoComplete="off"

apps/cli/templates/examples/ai/web/svelte/src/routes/ai/+page.svelte

@@ -1,98 +0,0 @@
-<script lang="ts">
-	import { PUBLIC_SERVER_URL } from '$env/static/public';
-	import { Chat } from '@ai-sdk/svelte';
-
-	const chat = new Chat({
-		api: `${PUBLIC_SERVER_URL}/ai`,
-	});
-
-	let messagesEndElement: HTMLDivElement | null = null;
-
-	$effect(() => {
-		const messageCount = chat.messages.length;
-		if (messageCount > 0) {
-			setTimeout(() => {
-				messagesEndElement?.scrollIntoView({ behavior: 'smooth' });
-			}, 0);
-		}
-	});
-
-</script>
-
-<div class="mx-auto grid h-full w-full max-w-2xl grid-rows-[1fr_auto] overflow-hidden p-4">
-	<div class="mb-4 space-y-4 overflow-y-auto pb-4">
-		{#if chat.messages.length === 0}
-			<div class="mt-8 text-center text-neutral-500">Ask the AI anything to get started!</div>
-		{/if}
-
-		{#each chat.messages as message (message.id)}
-			<div
-				class="w-fit max-w-[85%] rounded-lg p-3 text-sm md:text-base"
-				class:ml-auto={message.role === 'user'}
-				class:bg-indigo-600={message.role === 'user'}
-				class:text-white={message.role === 'user'}
-				class:bg-neutral-700={message.role === 'assistant'}
-				class:text-neutral-100={message.role === 'assistant'}
-			>
-				<p
-					class="mb-1 text-xs font-semibold uppercase tracking-wide"
-					class:text-indigo-200={message.role === 'user'}
-					class:text-neutral-400={message.role === 'assistant'}
-				>
-					{message.role === 'user' ? 'You' : 'AI Assistant'}
-				</p>
-				<div class="whitespace-pre-wrap break-words">
-					{#each message.parts as part, partIndex (partIndex)}
-						{#if part.type === 'text'}
-							{part.text}
-						{:else if part.type === 'tool-invocation'}
-							<pre class="mt-2 rounded bg-neutral-800 p-2 text-xs text-neutral-300"
-								>{JSON.stringify(part.toolInvocation, null, 2)}</pre
-							>
-						{/if}
-					{/each}
-				</div>
-			</div>
-		{/each}
-		<div bind:this={messagesEndElement}></div>
-	</div>
-
-	<form
-		onsubmit={chat.handleSubmit}
-		class="flex w-full items-center space-x-2 border-t border-neutral-700 pt-4"
-	>
-		<input
-			name="prompt"
-			bind:value={chat.input}
-			placeholder="Type your message..."
-			class="flex-1 rounded border border-neutral-600 bg-neutral-800 px-3 py-2 text-neutral-100 placeholder-neutral-500 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 disabled:opacity-50"
-			autocomplete="off"
-			onkeydown={(e) => {
-				if (e.key === 'Enter' && !e.shiftKey) {
-					e.preventDefault();
-					chat.handleSubmit(e);
-				}
-			}}
-		/>
-		<button
-			type="submit"
-			disabled={!chat.input.trim()}
-			class="inline-flex h-10 w-10 items-center justify-center rounded bg-indigo-600 text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-neutral-900 disabled:cursor-not-allowed disabled:opacity-50"
-			aria-label="Send message"
-		>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					width="18"
-					height="18"
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					stroke-width="2"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-				>
-					<path d="m22 2-7 20-4-9-9-4Z" /><path d="M22 2 11 13" />
-				</svg>
-		</button>
-	</form>
-</div>

apps/cli/templates/examples/ai/web/svelte/src/routes/ai/+page.svelte.hbs

@@ -0,0 +1,107 @@
+<script lang="ts">
+	import { PUBLIC_SERVER_URL } from "$env/static/public";
+	import { Chat } from "@ai-sdk/svelte";
+	import { DefaultChatTransport } from "ai";
+
+	let input = $state("");
+	const chat = new Chat({
+		transport: new DefaultChatTransport({
+			api: `${PUBLIC_SERVER_URL}/ai`,
+		}),
+	});
+
+	let messagesEndElement: HTMLDivElement | null = null;
+
+	$effect(() => {
+		if (chat.messages.length > 0) {
+			setTimeout(() => {
+				messagesEndElement?.scrollIntoView({ behavior: "smooth" });
+			}, 0);
+		}
+	});
+
+	function handleSubmit(e: Event) {
+		e.preventDefault();
+		const text = input.trim();
+		if (!text) return;
+		chat.sendMessage({ text });
+		input = "";
+	}
+</script>
+
+<div
+	class="mx-auto grid h-full w-full max-w-2xl grid-rows-[1fr_auto] overflow-hidden p-4"
+>
+	<div class="mb-4 space-y-4 overflow-y-auto pb-4">
+		{#if chat.messages.length === 0}
+			<div class="mt-8 text-center text-neutral-500">
+				Ask me anything to get started!
+			</div>
+		{/if}
+
+		{#each chat.messages as message (message.id)}
+			<div
+				class="p-3 rounded-lg w-fit max-w-[85%] text-sm md:text-base"
+				class:ml-auto={message.role === "user"}
+				class:bg-primary={message.role === "user"}
+				class:bg-secondary={message.role === "assistant"}
+			>
+				<p
+					class="mb-1 text-sm font-semibold"
+					class:text-indigo-600={message.role === "user"}
+					class:text-neutral-400={message.role === "assistant"}
+				>
+					{message.role === "user" ? "You" : "AI Assistant"}
+				</p>
+				<div class="whitespace-pre-wrap break-words">
+					{#each message.parts as part, partIndex (partIndex)}
+						{#if part.type === "text"}
+							{part.text}
+						{/if}
+					{/each}
+				</div>
+			</div>
+		{/each}
+		<div bind:this={messagesEndElement}></div>
+	</div>
+
+	<form
+		onsubmit={handleSubmit}
+		class="w-full flex items-center space-x-2 pt-2 border-t"
+	>
+		<input
+			name="prompt"
+			bind:value={input}
+			placeholder="Type your message..."
+			class="flex-1 rounded border border-neutral-600 bg-neutral-800 px-3 py-2 text-neutral-100 placeholder-neutral-500 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 disabled:opacity-50"
+			autocomplete="off"
+			onkeydown={(e) => {
+				if (e.key === "Enter" && !e.shiftKey) {
+					e.preventDefault();
+					handleSubmit(e);
+				}
+			}}
+		/>
+		<button
+			type="submit"
+			disabled={!input.trim()}
+			class="inline-flex h-10 w-10 items-center justify-center rounded bg-indigo-600 text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-neutral-900 disabled:cursor-not-allowed disabled:opacity-50"
+			aria-label="Send message"
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="18"
+				height="18"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<path d="m22 2-7 20-4-9-9-4Z" />
+				<path d="M22 2 11 13" />
+			</svg>
+		</button>
+	</form>
+</div>

apps/cli/templates/extras/bunfig.toml.hbs

@@ -1,7 +1,7 @@
-{{#if (or (includes frontend "nuxt") (includes frontend "native-nativewind"))}}
+[install]
-# [install]
+{{#if (or (or (includes frontend "nuxt") (includes frontend "native-nativewind")) (includes frontend
+"native-unistyles"))}}
 # linker = "isolated"
 {{else}}
-[install]
 linker = "isolated"
 {{/if}}