franpcode/create-better-t-stack
1
0
Fork 0
mirror of https://github.com/FranP-code/create-better-t-stack.git synced 2025-10-12 23:52:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Aman Varshney
2025-08-10 20:19:55 +05:30
committed by GitHub
parent ea908ddc86
commit f412d8f0c7
18 changed files with 439 additions and 277 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/ripe-peaches-crash.md Normal file
View File

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

10
apps/cli/src/constants.ts
View File

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

25
apps/cli/src/helpers/setup/examples-setup.ts
View File

@@ -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,
});
}

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

@@ -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}}
@@ -85,4 +85,4 @@ app.get("/", (_req, res) => {
const port = process.env.PORT || 3000;
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
});

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

@@ -19,8 +19,7 @@ import { createContext } from "./lib/context";
{{/if}}
{{#if (includes examples "ai")}}
import type { FastifyRequest, FastifyReply } from "fastify";
import { streamText, type Message } from "ai";
import { streamText, type UIMessage, convertToModelMessages } 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');
reply.header('Content-Type', 'text/plain; charset=utf-8');
return reply.send(result.toDataStream());
return result.pipeUIMessageStreamToResponse(reply.raw);
});
{{/if}}
fastify.get('/', async () => {
return 'OK'
})
return 'OK';
});
fastify.listen({ port: 3000 }, (err) => {
if (err) {
@@ -152,4 +149,4 @@ fastify.listen({ port: 3000 }, (err) => {
process.exit(1);
}
console.log("Server running on port 3000");
});
});

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

@@ -21,32 +21,33 @@ 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 { stream } from "hono/streaming";
import { streamText, convertToModelMessages } from "ai";
import { createGoogleGenerativeAI } from "@ai-sdk/google";
{{/if}}
const app = new Hono();
app.use(logger());
app.use("/*", cors({
{{#if (or (eq runtime "bun") (eq runtime "node"))}}
origin: process.env.CORS_ORIGIN || "",
{{/if}}
{{#if (eq runtime "workers")}}
origin: env.CORS_ORIGIN || "",
{{/if}}
allowMethods: ["GET", "POST", "OPTIONS"],
{{#if auth}}
allowHeaders: ["Content-Type", "Authorization"],
credentials: true,
{{/if}}
}));
app.use(
"/*",
cors({
{{#if (or (eq runtime "bun") (eq runtime "node"))}}
origin: process.env.CORS_ORIGIN || "",
{{/if}}
{{#if (eq runtime "workers")}}
origin: env.CORS_ORIGIN || "",
{{/if}}
allowMethods: ["GET", "POST", "OPTIONS"],
{{#if auth}}
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({
router: appRouter,
createContext: (_opts, context) => {
return createContext({ context });
},
}));
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");
c.header("Content-Type", "text/plain; charset=utf-8");
return stream(c, (stream) => stream.pipe(result.toDataStream()));
return result.toUIMessageStreamResponse();
});
{{/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");
c.header("Content-Type", "text/plain; charset=utf-8");
return stream(c, (stream) => stream.pipe(result.toDataStream()));
return result.toUIMessageStreamResponse();
});
{{/if}}
@@ -117,17 +117,20 @@ app.get("/", (c) => {
{{#if (eq runtime "node")}}
import { serve } from "@hono/node-server";
serve({
fetch: app.fetch,
port: 3000,
}, (info) => {
console.log(`Server is running on http://localhost:${info.port}`);
});
serve(
{
fetch: app.fetch,
port: 3000,
},
(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 (eq runtime "workers")}}
export default app;
{{/if}}
{{/if}}
{{#if (eq runtime "workers")}}
export default app;
{{/if}}
{{/if}}

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

@@ -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({
fetch: expoFetch as unknown as typeof globalThis.fetch,
api: generateAPIUrl('/ai'),
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()) {
handleSubmit();
const value = input.trim();
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">
{message.content}
</Text>
<View className="space-y-1">
{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) =>
handleInputChange({
...e,
target: {
...e.target,
value: e.nativeEvent.text,
},
} as unknown as React.ChangeEvent<HTMLInputElement>)
}
onChangeText={setInput}
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}
/>

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

@@ -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({
fetch: expoFetch as unknown as typeof globalThis.fetch,
api: generateAPIUrl("/ai"),
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()) {
handleSubmit();
const value = input.trim();
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) =>
handleInputChange({
...e,
target: {
...e.target,
value: e.nativeEvent.text,
},
} as unknown as React.ChangeEvent<HTMLInputElement>)
}
onChangeText={setInput}
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,
@@ -276,4 +298,4 @@ const styles = StyleSheet.create((theme) => ({
sendButtonDisabled: {
backgroundColor: theme.colors.border,
},
}));
}));

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

@@ -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();
}

15
apps/cli/templates/examples/ai/server/next/src/app/ai/route.ts.hbs Normal file
View File

@@ -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();
}

43
apps/cli/templates/examples/ai/web/nuxt/app/pages/ai.vue → apps/cli/templates/examples/ai/web/nuxt/app/pages/ai.vue.hbs
View File

@@ -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({
api: `${serverUrl}/ai`,
const input = ref('')
const chat = new Chat({
transport: new DefaultChatTransport({
api: `${serverUrl}/ai`,
}),
})
const messagesEndRef = ref<null | HTMLDivElement>(null)
watch(messages, async () => {
await nextTick()
messagesEndRef.value?.scrollIntoView({ behavior: 'smooth' })
})
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"
@@ -60,4 +75,4 @@ function getMessageText(message: any) {
</UButton>
</form>
</div>
</template>
</template>

36
apps/cli/templates/examples/ai/web/react/next/src/app/ai/page.tsx → apps/cli/templates/examples/ai/web/react/next/src/app/ai/page.tsx.hbs
View File

@@ -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({
api: `${process.env.NEXT_PUBLIC_SERVER_URL}/ai`,
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"
@@ -64,4 +84,4 @@ export default function AIPage() {
</form>
</div>
);
}
}

37
apps/cli/templates/examples/ai/web/react/react-router/src/routes/ai.tsx → apps/cli/templates/examples/ai/web/react/react-router/src/routes/ai.tsx.hbs
View File

@@ -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 { messages, input, handleInputChange, handleSubmit } = useChat({
api: `${import.meta.env.VITE_SERVER_URL}/ai`,
const AI: React.FC = () => {
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;

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

@@ -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({
api: `${import.meta.env.VITE_SERVER_URL}/ai`,
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"

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

@@ -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({
api: `${import.meta.env.VITE_SERVER_URL}/ai`,
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"
@@ -66,4 +87,4 @@ function RouteComponent() {
</form>
</div>
);
}
}

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

@@ -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>

107
apps/cli/templates/examples/ai/web/svelte/src/routes/ai/+page.svelte.hbs Normal file
View File

@@ -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>

8
apps/cli/templates/extras/bunfig.toml.hbs
View File

@@ -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}}
{{/if}}