create-better-t-stack 2.29.4 → 2.31.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-better-t-stack",
-  "version": "2.29.4",
+  "version": "2.31.0",
   "description": "A modern CLI tool for scaffolding end-to-end type-safe TypeScript projects with best practices and customizable configurations",
   "type": "module",
   "license": "MIT",

package/templates/addons/vibe-rules/.bts/rules.md.hbs

@@ -0,0 +1,132 @@
+# Better-T-Stack Project Rules
+
+This is a {{projectName}} project created with Better-T-Stack CLI.
+
+## Project Structure
+
+This is a monorepo with the following structure:
+
+{{#if (or (includes frontend "tanstack-router") (includes frontend "react-router") (includes frontend "tanstack-start")
+(includes frontend "next") (includes frontend "nuxt") (includes frontend "svelte") (includes frontend "solid"))}}
+- **`apps/web/`** - Frontend application{{#if (includes frontend "tanstack-router")}} (React with TanStack Router){{else
+if (includes frontend "react-router")}} (React with React Router){{else if (includes frontend "next")}} (Next.js){{else
+if (includes frontend "nuxt")}} (Nuxt.js){{else if (includes frontend "svelte")}} (SvelteKit){{else if (includes
+frontend "solid")}} (SolidStart){{/if}}
+{{/if}}
+
+{{#if (ne backend "convex")}}
+{{#if (ne backend "none")}}
+- **`apps/server/`** - Backend server{{#if (eq backend "hono")}} (Hono){{else if (eq backend "express")}}
+(Express){{else if (eq backend "fastify")}} (Fastify){{else if (eq backend "elysia")}} (Elysia){{else if (eq backend
+"next")}} (Next.js API){{/if}}
+{{/if}}
+{{else}}
+- **`packages/backend/`** - Convex backend functions
+{{/if}}
+
+{{#if (or (includes frontend "native-nativewind") (includes frontend "native-unistyles"))}}
+- **`apps/native/`** - React Native mobile app{{#if (includes frontend "native-nativewind")}} (with NativeWind){{else if
+(includes frontend "native-unistyles")}} (with Unistyles){{/if}}
+{{/if}}
+
+## Available Scripts
+
+- `{{packageManager}} run dev` - Start all apps in development mode
+{{#if (or (includes frontend "tanstack-router") (includes frontend "react-router") (includes frontend "tanstack-start")
+(includes frontend "next") (includes frontend "nuxt") (includes frontend "svelte") (includes frontend "solid"))}}
+- `{{packageManager}} run dev:web` - Start only the web app
+{{/if}}
+{{#if (ne backend "none")}}
+{{#if (ne backend "convex")}}
+- `{{packageManager}} run dev:server` - Start only the server
+{{/if}}
+{{/if}}
+{{#if (or (includes frontend "native-nativewind") (includes frontend "native-unistyles"))}}
+- `{{packageManager}} run dev:native` - Start only the native app
+{{/if}}
+
+{{#if (and (ne database "none") (ne orm "none") (ne backend "convex"))}}
+## Database Commands
+
+All database operations should be run from the server workspace:
+
+- `{{packageManager}} run db:push` - Push schema changes to database
+- `{{packageManager}} run db:studio` - Open database studio
+- `{{packageManager}} run db:generate` - Generate {{#if (eq orm "drizzle")}}Drizzle{{else if (eq orm
+"prisma")}}Prisma{{else}}{{orm}}{{/if}} files
+- `{{packageManager}} run db:migrate` - Run database migrations
+
+{{#if (eq orm "drizzle")}}
+Database schema files are located in `apps/server/src/db/schema/`
+{{else if (eq orm "prisma")}}
+Database schema is located in `apps/server/prisma/schema.prisma`
+{{else if (eq orm "mongoose")}}
+Database models are located in `apps/server/src/db/models/`
+{{/if}}
+{{/if}}
+
+{{#if (ne api "none")}}
+## API Structure
+
+{{#if (eq api "trpc")}}
+- tRPC routers are in `apps/server/src/routers/`
+- Client-side tRPC utils are in `apps/web/src/utils/trpc.ts`
+{{else if (eq api "orpc")}}
+- oRPC endpoints are in `apps/server/src/api/`
+- Client-side API utils are in `apps/web/src/utils/api.ts`
+{{/if}}
+{{/if}}
+
+{{#if auth}}
+## Authentication
+
+Authentication is enabled in this project:
+{{#if (ne backend "convex")}}
+- Server auth logic is in `apps/server/src/lib/auth.ts`
+{{#if (or (includes frontend "tanstack-router") (includes frontend "react-router") (includes frontend "tanstack-start")
+(includes frontend "next") (includes frontend "nuxt") (includes frontend "svelte") (includes frontend "solid"))}}
+- Web app auth client is in `apps/web/src/lib/auth-client.ts`
+{{/if}}
+{{#if (or (includes frontend "native-nativewind") (includes frontend "native-unistyles"))}}
+- Native app auth client is in `apps/native/src/lib/auth-client.ts`
+{{/if}}
+{{else}}
+{{/if}}
+{{/if}}
+
+## Adding More Features
+
+You can add additional addons or deployment options to your project using:
+
+```bash
+{{#if (eq packageManager "bun")}}bunx{{else if (eq packageManager "pnpm")}}pnpx{{else}}npx{{/if}} create-better-t-stack
+add
+```
+
+Available addons you can add:
+- **Documentation**: Starlight, Fumadocs
+- **Linting**: Biome, Oxlint, Ultracite
+- **Other**: vibe-rules, Turborepo, PWA, Tauri, Husky
+
+You can also add web deployment configurations like Cloudflare Workers support.
+
+## Project Configuration
+
+This project includes a `bts.jsonc` configuration file that stores your Better-T-Stack settings:
+
+- Contains your selected stack configuration (database, ORM, backend, frontend, etc.)
+- Used by the CLI to understand your project structure
+- Safe to delete if not needed
+- Updated automatically when using the `add` command
+
+## Key Points
+
+- This is a {{#if (includes addons "turborepo")}}Turborepo {{/if}}monorepo using {{packageManager}} workspaces
+- Each app has its own `package.json` and dependencies
+- Run commands from the root to execute across all workspaces
+- Run workspace-specific commands with `{{packageManager}} run command-name`
+{{#if (includes addons "turborepo")}}
+- Turborepo handles build caching and parallel execution
+{{/if}}
+- Use `{{#if (eq packageManager "bun")}}bunx{{else if (eq packageManager "pnpm")}}pnpx{{else}}npx{{/if}}
+create-better-t-stack add` to add more features later

package/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}}
 
@@ -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}`);
-});
+});

package/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 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");
-});
+});

package/templates/backend/server/hono/src/index.ts.hbs

@@ -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")}}
+{{/if}}
+{{#if (eq runtime "workers")}}
 export default app;
-  {{/if}}
 {{/if}}
+{{/if}}

package/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({
-    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}
               />

package/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({
-    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,
   },
-}));
+}));

package/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();
+}