feat: add ai chat example and update flags structure

apps/cli/template/base/apps/native/metro.config.js

@@ -2,7 +2,7 @@
 const { getDefaultConfig } = require("expo/metro-config");
 const { FileStore } = require("metro-cache");
 const { withNativeWind } = require("nativewind/metro");
-const path = require("path");
+const path = require("node:path");
 
 const config = withTurborepoManagedCache(
   withMonorepoPaths(

apps/cli/template/base/apps/web/src/routes/__root.tsx

@@ -46,9 +46,11 @@ function RootComponent() {
     <>
       <HeadContent />
       <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
-        <Header />
-        {isFetching && <Loader />}
-        <Outlet />
+        <div className="grid grid-rows-[auto_1fr] h-svh">
+          <Header />
+          {isFetching && <Loader />}
+          <Outlet />
+        </div>
         <Toaster richColors />
       </ThemeProvider>
       <TanStackRouterDevtools position="bottom-left" />

apps/cli/template/examples/ai/apps/web/src/routes/ai.tsx

@@ -0,0 +1,69 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { useChat } from "@ai-sdk/react";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Send } from "lucide-react";
+import { useRef, useEffect } 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 messagesEndRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+
+  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">
+        {messages.length === 0 ? (
+          <div className="text-center text-muted-foreground mt-8">
+            Ask me anything to get started!
+          </div>
+        ) : (
+          messages.map((message) => (
+            <div
+              key={message.id}
+              className={`p-3 rounded-lg ${
+                message.role === "user"
+                  ? "bg-primary/10 ml-8"
+                  : "bg-secondary/20 mr-8"
+              }`}
+            >
+              <p className="text-sm font-semibold mb-1">
+                {message.role === "user" ? "You" : "AI Assistant"}
+              </p>
+              <div className="whitespace-pre-wrap">{message.content}</div>
+            </div>
+          ))
+        )}
+        <div ref={messagesEndRef} />
+      </div>
+
+      <form
+        onSubmit={handleSubmit}
+        className="w-full flex items-center space-x-2 pt-2 border-t"
+      >
+        <Input
+          name="prompt"
+          value={input}
+          onChange={handleInputChange}
+          placeholder="Type your message..."
+          className="flex-1"
+          autoComplete="off"
+          autoFocus
+        />
+        <Button type="submit" size="icon">
+          <Send size={18} />
+        </Button>
+      </form>
+    </div>
+  );
+}

apps/cli/template/with-auth/apps/web/src/components/auth-forms.tsx

@@ -1,13 +0,0 @@
-import { useState } from "react";
-import SignInForm from "./sign-in-form";
-import SignUpForm from "./sign-up-form";
-
-export default function AuthForms() {
-  const [showSignIn, setShowSignIn] = useState(false);
-
-  return showSignIn ? (
-    <SignInForm onSwitchToSignUp={() => setShowSignIn(false)} />
-  ) : (
-    <SignUpForm onSwitchToSignIn={() => setShowSignIn(true)} />
-  );
-}

apps/cli/template/with-auth/apps/web/src/components/sign-in-form.tsx

@@ -55,7 +55,7 @@ export default function SignInForm({
 	}
 
 	return (
-		<div className="mx-auto mt-10 max-w-md p-6">
+		<div className="mx-auto w-full mt-10 max-w-md p-6">
 			<h1 className="mb-6 text-center text-3xl font-bold">Welcome Back</h1>
 
 			<form

apps/cli/template/with-auth/apps/web/src/components/sign-up-form.tsx

@@ -58,7 +58,7 @@ export default function SignUpForm({
 	}
 
 	return (
-		<div className="mx-auto mt-10 max-w-md p-6">
+		<div className="mx-auto w-full mt-10 max-w-md p-6">
 			<h1 className="mb-6 text-center text-3xl font-bold">Create Account</h1>
 
 			<form

apps/cli/template/with-auth/apps/web/src/routes/login.tsx

@@ -1,11 +1,18 @@
+import SignInForm from "@/components/sign-in-form";
+import SignUpForm from "@/components/sign-up-form";
 import { createFileRoute } from "@tanstack/react-router";
-import AuthForms from "@/components/auth-forms";
+import { useState } from "react";
 
 export const Route = createFileRoute("/login")({
   component: RouteComponent,
 });
 
 function RouteComponent() {
-  return (
-    <AuthForms />);
+  const [showSignIn, setShowSignIn] = useState(false);
+
+  return showSignIn ? (
+    <SignInForm onSwitchToSignUp={() => setShowSignIn(false)} />
+  ) : (
+    <SignUpForm onSwitchToSignIn={() => setShowSignIn(true)} />
+  );
 }

apps/cli/template/with-drizzle-sqlite/apps/server/src/db/index.ts

@@ -1,9 +1,9 @@
 import { drizzle } from "drizzle-orm/libsql";
+import { createClient } from "@libsql/client";
 
-export const db = drizzle({
-  connection: {
-    url: process.env.TURSO_CONNECTION_URL || "",
-    authToken: process.env.TURSO_AUTH_TOKEN,
-  },
-  // logger: true,
+const client = createClient({
+  url: process.env.TURSO_CONNECTION_URL || "",
+  authToken: process.env.TURSO_AUTH_TOKEN,
 });
+
+export const db = drizzle({ client });