@chat-js/cli 0.4.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@chat-js/cli",
-	"version": "0.4.0",
+	"version": "0.6.0",
 	"description": "CLI for creating and extending ChatJS apps",
 	"license": "Apache-2.0",
 	"repository": {

package/templates/chat-app/app/(auth)/device-login/page.tsx

@@ -0,0 +1,37 @@
+import type { Metadata } from "next";
+import { headers } from "next/headers";
+import { redirect } from "next/navigation";
+import { DeviceLoginPage } from "@/components/device-login-page";
+import { auth } from "@/lib/auth";
+import { config } from "@/lib/config";
+import { toSearchParamRecord } from "@/lib/electron-auth";
+
+export const metadata: Metadata = {
+  title: "Device Login",
+  description: "Sign in for the desktop app",
+};
+
+export default async function DeviceLoginRoute({
+  searchParams,
+}: {
+  searchParams: Promise<Record<string, string | string[] | undefined>>;
+}) {
+  if (!config.desktopApp.enabled) {
+    redirect("/login");
+  }
+
+  const resolvedSearchParams = await searchParams;
+  const query = toSearchParamRecord(resolvedSearchParams);
+  const isCompletedView = query.done === "1";
+  const queryString = new URLSearchParams(query).toString();
+  const currentHref = queryString
+    ? `/device-login?${queryString}`
+    : "/device-login";
+  const session = await auth.api.getSession({ headers: await headers() });
+
+  if (!(session?.user || isCompletedView)) {
+    redirect(`/login?returnTo=${encodeURIComponent(currentHref)}`);
+  }
+
+  return <DeviceLoginPage />;
+}

package/templates/chat-app/app/(auth)/login/page.tsx

@@ -1,8 +1,16 @@
 import { ChevronLeft } from "lucide-react";
 import type { Metadata } from "next";
+import { headers } from "next/headers";
 import Link from "next/link";
+import { ElectronTransferUser } from "@/components/electron-auth-ui";
 import { LoginForm } from "@/components/login-form";
 import { buttonVariants } from "@/components/ui/button";
+import { auth } from "@/lib/auth";
+import { config } from "@/lib/config";
+import {
+  ELECTRON_AUTH_CLIENT_ID,
+  toSearchParamRecord,
+} from "@/lib/electron-auth";
 import { cn } from "@/lib/utils";
 
 export const metadata: Metadata = {
@@ -10,7 +18,19 @@ export const metadata: Metadata = {
   description: "Login to your account",
 };
 
-export default function LoginPage() {
+export default async function LoginPage({
+  searchParams,
+}: {
+  searchParams: Promise<Record<string, string | string[] | undefined>>;
+}) {
+  const resolvedSearchParams = await searchParams;
+  const query = toSearchParamRecord(resolvedSearchParams);
+  const isElectronTransfer =
+    config.desktopApp.enabled && query.client_id === ELECTRON_AUTH_CLIENT_ID;
+  const session = isElectronTransfer
+    ? await auth.api.getSession({ headers: await headers() })
+    : null;
+
   return (
     <div className="container mx-auto flex h-dvh w-screen flex-col items-center justify-center">
       <Link
@@ -24,7 +44,11 @@ export default function LoginPage() {
         Back
       </Link>
       <div className="mx-auto flex w-full flex-col items-center justify-center sm:w-[420px]">
-        <LoginForm className="w-full" />
+        {session?.user && isElectronTransfer ? (
+          <ElectronTransferUser query={query} session={session} />
+        ) : (
+          <LoginForm className="w-full" />
+        )}
       </div>
     </div>
   );

package/templates/chat-app/app/(auth)/register/page.tsx

@@ -1,8 +1,5 @@
 import type { Metadata } from "next";
-import Link from "next/link";
 import { SignupForm } from "@/components/signup-form";
-import { buttonVariants } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
 
 export const metadata: Metadata = {
   title: "Create an account",
@@ -12,15 +9,6 @@ export const metadata: Metadata = {
 export default function RegisterPage() {
   return (
     <div className="container m-auto flex h-dvh w-screen flex-col items-center justify-center px-4">
-      <Link
-        className={cn(
-          buttonVariants({ variant: "ghost" }),
-          "absolute top-4 right-4 md:top-8 md:right-8"
-        )}
-        href="/login"
-      >
-        Login
-      </Link>
       <div className="mx-auto w-full sm:w-[480px]">
         <SignupForm />
       </div>

package/templates/chat-app/app/(chat)/api/chat/filter-reasoning-parts.ts

@@ -5,7 +5,7 @@
  *
  * Note: data-* parts are handled by convertToModelMessages({ convertDataPart: () => undefined })
  */
-export function filterPartsForLLM<T extends { parts: any[] }>(
+export function filterPartsForLLM<T extends { parts: Array<{ type: string }> }>(
   messages: T[]
 ): T[] {
   return messages.map((message) => ({

package/templates/chat-app/app/(chat)/api/chat/route.ts

@@ -25,11 +25,12 @@ import {
   streamFollowupSuggestions,
 } from "@/lib/ai/followup-suggestions";
 import { systemPrompt } from "@/lib/ai/prompts";
+import { getStreamErrorMessage } from "@/lib/ai/stream-errors";
 import { calculateMessagesTokens } from "@/lib/ai/token-utils";
 import { allTools } from "@/lib/ai/tools/tools-definitions";
 import {
-  getPrimarySelectedModelId,
   type ChatMessage,
+  getPrimarySelectedModelId,
   type ToolName,
 } from "@/lib/ai/types";
 import {
@@ -227,7 +228,9 @@ function resolveSelectedModelId({
   }
 
   if (requestSelectedModelId) {
-    if (!selectedModel || typeof selectedModel !== "object") return null;
+    if (!selectedModel || typeof selectedModel !== "object") {
+      return null;
+    }
     const requestedCount = selectedModel[requestSelectedModelId];
     return requestedCount && requestedCount > 0 ? requestSelectedModelId : null;
   }
@@ -480,7 +483,10 @@ async function createChatStream({
       if (!isAnonymous) {
         after(() =>
           Promise.resolve(
-            updateMessageActiveStreamId({ id: messageId, activeStreamId: null })
+            updateMessageActiveStreamId({
+              id: messageId,
+              activeStreamId: null,
+            })
           ).catch((dbError) => {
             log.error(
               { error: dbError },
@@ -491,7 +497,7 @@ async function createChatStream({
       }
 
       log.error({ error }, "onError");
-      return "Oops, an error occured!";
+      return getStreamErrorMessage(error);
     },
   });
 
@@ -794,7 +800,9 @@ async function finalizeMessageAndCredits({
           metadata: {
             ...assistantMessage.metadata,
             parallelGroupId:
-              parallelGroupId ?? assistantMessage.metadata.parallelGroupId ?? null,
+              parallelGroupId ??
+              assistantMessage.metadata.parallelGroupId ??
+              null,
             parallelIndex:
               parallelIndex ?? assistantMessage.metadata.parallelIndex ?? null,
             isPrimaryParallel:

package/templates/chat-app/app/(chat)/layout.tsx

@@ -5,6 +5,7 @@ import { KeyboardShortcuts } from "@/components/keyboard-shortcuts";
 import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
 import type { AppModelId } from "@/lib/ai/app-model-id";
 import { config } from "@/lib/config";
+import { isPlaywrightTestEnvironment } from "@/lib/constants";
 import { ANONYMOUS_LIMITS } from "@/lib/types/anonymous";
 import { ChatModelsProvider } from "@/providers/chat-models-provider";
 import { DefaultModelProvider } from "@/providers/default-model-provider";
@@ -24,7 +25,9 @@ export default async function ChatLayout({
     headers(),
     getChatModels(),
   ]);
-  const session = await auth.api.getSession({ headers: headersRes });
+  const session = isPlaywrightTestEnvironment
+    ? null
+    : await auth.api.getSession({ headers: headersRes });
   const isCollapsed = cookieStore.get("sidebar:state")?.value !== "true";
 
   const cookieModel = cookieStore.get("chat-model")?.value;

package/templates/chat-app/app/api/trpc/[trpc]/route.ts

@@ -9,4 +9,5 @@ const handler = (req: Request) =>
     router: appRouter,
     createContext: createTRPCContext,
   });
+
 export { handler as GET, handler as POST };

package/templates/chat-app/app/globals.css

@@ -245,17 +245,17 @@
 }
 
 :root {
-  --background: hsl(0 0% 97.0392%);
+  --background: hsl(0 0% 100%);
   --foreground: hsl(0 0% 20%);
-  --card: hsl(0 0% 100%);
+  --card: hsl(0 0% 97.0392%);
   --card-foreground: hsl(0 0% 20%);
-  --popover: hsl(0 0% 100%);
+  --popover: hsl(0 0% 97.0392%);
   --popover-foreground: hsl(0 0% 20%);
   --primary: hsl(217.2193 91.2195% 59.8039%);
   --primary-foreground: hsl(0 0% 100%);
-  --secondary: hsl(220 14.2857% 95.8824%);
+  --secondary: hsl(0 0% 97.0392%);
   --secondary-foreground: hsl(215 13.7931% 34.1176%);
-  --muted: hsl(210 20% 98.0392%);
+  --muted: hsl(0 0% 97.0392%);
   --muted-foreground: hsl(220 8.9362% 46.0784%);
   --accent: hsl(204 93.75% 93.7255%);
   --accent-foreground: hsl(224.4444 64.2857% 32.9412%);
@@ -269,7 +269,7 @@
   --chart-3: hsl(224.2781 76.3265% 48.0392%);
   --chart-4: hsl(225.931 70.7317% 40.1961%);
   --chart-5: hsl(224.4444 64.2857% 32.9412%);
-  --sidebar: hsl(210 20% 98.0392%);
+  --sidebar: hsl(0 0% 97.0392%);
   --sidebar-foreground: hsl(0 0% 20%);
   --sidebar-primary: hsl(217.2193 91.2195% 59.8039%);
   --sidebar-primary-foreground: hsl(0 0% 100%);
@@ -383,13 +383,13 @@
 
 .cm-editor,
 .cm-gutters {
-  @apply bg-background! dark:bg-zinc-800! outline-hidden! selection:bg-zinc-900!;
+  @apply bg-card! outline-hidden! selection:bg-zinc-900!;
 }
 
 .ͼo.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground,
 .ͼo.cm-selectionBackground,
 .ͼo.cm-content::selection {
-  @apply bg-zinc-200! dark:bg-zinc-900!;
+  @apply bg-accent!;
 }
 
 .cm-activeLine,
@@ -414,7 +414,7 @@
 }
 
 .suggestion-highlight {
-  @apply bg-blue-200 hover:bg-blue-300 dark:hover:bg-blue-400/50 dark:text-blue-50 dark:bg-blue-500/40;
+  @apply bg-accent text-accent-foreground hover:bg-accent/80;
 }
 
 /* Lexical Editor Styles */

package/templates/chat-app/app/layout.tsx

@@ -7,6 +7,7 @@ import Script from "next/script";
 import "./globals.css";
 import { NuqsAdapter } from "nuqs/adapters/next/app";
 import { Toaster } from "sonner";
+import { ElectronAuthHandler } from "@/components/electron-auth-handler";
 import { ThemeProvider } from "@/components/theme-provider";
 import { config } from "@/lib/config";
 
@@ -78,14 +79,15 @@ export default async function RootLayout({
         <Script id="theme-color-script" strategy="beforeInteractive">
           {THEME_COLOR_SCRIPT}
         </Script>
-        {process.env.NODE_ENV !== "production" ? (
+        {process.env.NODE_ENV === "production" ? null : (
           <Script
             src="https://unpkg.com/react-scan/dist/auto.global.js"
             strategy="beforeInteractive"
           />
-        ) : null}
+        )}
       </head>
       <body className="antialiased">
+        <ElectronAuthHandler />
         <Script
           src="https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js"
           strategy="afterInteractive"

package/templates/chat-app/biome.jsonc

@@ -17,9 +17,9 @@
   },
   "linter": {
     "rules": {
-      "suspicious": {
-        /* Needs more work to fix */
-        "noExplicitAny": "off"
+      "style": {
+        /* Allow mixing interface and type — type is required for intersection/mapped types */
+        "useConsistentTypeDefinitions": "off"
       }
     }
   }

package/templates/chat-app/chat.config.ts

@@ -9,147 +9,150 @@ const isProd = process.env.NODE_ENV === "production";
  * @see https://chatjs.dev/docs/reference/config
  */
 const config = defineConfig({
-	appPrefix: "chatjs",
-	appName: "ChatJS",
-	appTitle: "ChatJS - The prod ready AI chat app",
-	appDescription:
-		"Build and deploy AI chat applications in minutes. ChatJS provides authentication, streaming, tool calling, and all the features you need for production-ready AI conversations.",
-	appUrl: "https://chatjs.dev",
-	organization: {
-		name: "ChatJS",
-		contact: {
-			privacyEmail: "privacy@chatjs.dev",
-			legalEmail: "legal@chatjs.dev",
-		},
-	},
-	services: {
-		hosting: "Vercel",
-		aiProviders: [
-			"OpenAI",
-			"Anthropic",
-			"xAI",
-			"Google",
-			"Meta",
-			"Mistral",
-			"Alibaba",
-			"Amazon",
-			"Cohere",
-			"DeepSeek",
-			"Perplexity",
-			"Vercel",
-			"Inception",
-			"Moonshot",
-			"Morph",
-			"ZAI",
-		],
-		paymentProcessors: [],
-	},
-	features: {
-		attachments: true, // Requires BLOB_READ_WRITE_TOKEN
-		parallelResponses: true,
-	},
-	legal: {
-		minimumAge: 13,
-		governingLaw: "United States",
-		refundPolicy: "no-refunds",
-	},
-	policies: {
-		privacy: {
-			title: "Privacy Policy",
-			lastUpdated: "July 24, 2025",
-		},
-		terms: {
-			title: "Terms of Service",
-			lastUpdated: "July 24, 2025",
-		},
-	},
-	authentication: {
-		google: true, // Requires AUTH_GOOGLE_ID + AUTH_GOOGLE_SECRET
-		github: true, // Requires AUTH_GITHUB_ID + AUTH_GITHUB_SECRET
-		vercel: true, // Requires VERCEL_APP_CLIENT_ID + VERCEL_APP_CLIENT_SECRET
-	},
-	ai: {
-		gateway: "vercel",
-		providerOrder: [
-			"openai",
-			"anthropic",
-			"google",
-			"xai",
-			"meta",
-			"mistral",
-			"deepseek",
-			"perplexity",
-			"cohere",
-			"alibaba",
-			"amazon",
-			"inception",
-			"moonshot",
-			"morph",
-			"zai",
-		],
-		disabledModels: [],
-		anonymousModels: ["openai/gpt-5-nano"],
-		workflows: {
-			chatImageCompatible: "openai/gpt-4o-mini",
-		},
-		tools: {
-			webSearch: {
-				enabled: true, // Requires TAVILY_API_KEY or FIRECRAWL_API_KEY
-			},
-			urlRetrieval: {
-				enabled: true, // Requires FIRECRAWL_API_KEY
-			},
-			codeExecution: {
-				enabled: true, // Vercel-native, no key needed
-			},
-			mcp: {
-				enabled: true, // Requires MCP_ENCRYPTION_KEY
-			},
-			followupSuggestions: {
-				enabled: true,
-			},
-			text: {
-				polish: "openai/gpt-5-mini",
-			},
-			sheet: {
-				format: "openai/gpt-5-mini",
-				analyze: "openai/gpt-5-mini",
-			},
-			code: {
-				edits: "openai/gpt-5-mini",
-			},
-			image: {
-				enabled: true, // Requires BLOB_READ_WRITE_TOKEN
-				default: "google/gemini-3-pro-image",
-			},
-			deepResearch: {
-				enabled: true, // Requires webSearch
-				defaultModel: "openai/gpt-5-nano",
-				finalReportModel: "openai/gpt-5-mini",
-				allowClarification: true,
-				maxResearcherIterations: 1,
-				maxConcurrentResearchUnits: 2,
-				maxSearchQueries: 2,
-			},
-		},
-	},
-	anonymous: {
-		credits: isProd ? 10 : 1000,
-		availableTools: [],
-		rateLimit: {
-			requestsPerMinute: isProd ? 5 : 60,
-			requestsPerMonth: isProd ? 10 : 1000,
-		},
-	},
-	attachments: {
-		maxBytes: 1024 * 1024, // 1MB
-		maxDimension: 2048,
-		acceptedTypes: {
-			"image/png": [".png"],
-			"image/jpeg": [".jpg", ".jpeg"],
-			"application/pdf": [".pdf"],
-		},
-	},
+  appPrefix: "chatjs",
+  appName: "ChatJS",
+  appTitle: "ChatJS - The prod ready AI chat app",
+  appDescription:
+    "Build and deploy AI chat applications in minutes. ChatJS provides authentication, streaming, tool calling, and all the features you need for production-ready AI conversations.",
+  appUrl: "https://www.demo.chatjs.dev",
+  organization: {
+    name: "ChatJS",
+    contact: {
+      privacyEmail: "privacy@chatjs.dev",
+      legalEmail: "legal@chatjs.dev",
+    },
+  },
+  services: {
+    hosting: "Vercel",
+    aiProviders: [
+      "OpenAI",
+      "Anthropic",
+      "xAI",
+      "Google",
+      "Meta",
+      "Mistral",
+      "Alibaba",
+      "Amazon",
+      "Cohere",
+      "DeepSeek",
+      "Perplexity",
+      "Vercel",
+      "Inception",
+      "Moonshot",
+      "Morph",
+      "ZAI",
+    ],
+    paymentProcessors: [],
+  },
+  features: {
+    attachments: true, // Requires BLOB_READ_WRITE_TOKEN
+    parallelResponses: true,
+  },
+  legal: {
+    minimumAge: 13,
+    governingLaw: "United States",
+    refundPolicy: "no-refunds",
+  },
+  policies: {
+    privacy: {
+      title: "Privacy Policy",
+      lastUpdated: "July 24, 2025",
+    },
+    terms: {
+      title: "Terms of Service",
+      lastUpdated: "July 24, 2025",
+    },
+  },
+  authentication: {
+    google: true, // Requires AUTH_GOOGLE_ID + AUTH_GOOGLE_SECRET
+    github: true, // Requires AUTH_GITHUB_ID + AUTH_GITHUB_SECRET
+    vercel: true, // Requires VERCEL_APP_CLIENT_ID + VERCEL_APP_CLIENT_SECRET
+  },
+  desktopApp: {
+    enabled: true,
+  },
+  ai: {
+    gateway: "vercel",
+    providerOrder: [
+      "openai",
+      "anthropic",
+      "google",
+      "xai",
+      "meta",
+      "mistral",
+      "deepseek",
+      "perplexity",
+      "cohere",
+      "alibaba",
+      "amazon",
+      "inception",
+      "moonshot",
+      "morph",
+      "zai",
+    ],
+    disabledModels: [],
+    anonymousModels: ["openai/gpt-5-nano"],
+    workflows: {
+      chatImageCompatible: "openai/gpt-4o-mini",
+    },
+    tools: {
+      webSearch: {
+        enabled: true, // Requires TAVILY_API_KEY or FIRECRAWL_API_KEY
+      },
+      urlRetrieval: {
+        enabled: true, // Requires FIRECRAWL_API_KEY
+      },
+      codeExecution: {
+        enabled: true, // Vercel-native, no key needed
+      },
+      mcp: {
+        enabled: true, // Requires MCP_ENCRYPTION_KEY
+      },
+      followupSuggestions: {
+        enabled: true,
+      },
+      text: {
+        polish: "openai/gpt-5-mini",
+      },
+      sheet: {
+        format: "openai/gpt-5-mini",
+        analyze: "openai/gpt-5-mini",
+      },
+      code: {
+        edits: "openai/gpt-5-mini",
+      },
+      image: {
+        enabled: true, // Requires BLOB_READ_WRITE_TOKEN
+        default: "google/gemini-3-pro-image",
+      },
+      deepResearch: {
+        enabled: true, // Requires webSearch
+        defaultModel: "openai/gpt-5-nano",
+        finalReportModel: "openai/gpt-5-mini",
+        allowClarification: true,
+        maxResearcherIterations: 1,
+        maxConcurrentResearchUnits: 2,
+        maxSearchQueries: 2,
+      },
+    },
+  },
+  anonymous: {
+    credits: isProd ? 10 : 1000,
+    availableTools: [],
+    rateLimit: {
+      requestsPerMinute: isProd ? 5 : 60,
+      requestsPerMonth: isProd ? 10 : 1000,
+    },
+  },
+  attachments: {
+    maxBytes: 1024 * 1024, // 1MB
+    maxDimension: 2048,
+    acceptedTypes: {
+      "image/png": [".png"],
+      "image/jpeg": [".jpg", ".jpeg"],
+      "application/pdf": [".pdf"],
+    },
+  },
 });
 
 export default config;

package/templates/chat-app/components/ai-elements/prompt-input.tsx

@@ -286,7 +286,7 @@ export function PromptInputAttachment({
       <HoverCardTrigger asChild>
         <div
           className={cn(
-            "group relative flex h-8 cursor-default select-none items-center gap-1.5 rounded-md border border-border px-1.5 font-medium text-sm transition-all hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+            "group relative flex h-8 cursor-default select-none items-center gap-1.5 rounded-md border border-border px-1.5 font-medium text-sm transition-all hover:bg-accent hover:text-accent-foreground",
             className
           )}
           key={data.id}

package/templates/chat-app/components/anonymous-session-init.tsx

@@ -13,13 +13,17 @@ import { useSession } from "@/providers/session-provider";
 import { useTRPC } from "@/trpc/react";
 
 // Schema validation function
-function isValidAnonymousSession(obj: any): obj is AnonymousSession {
+function isValidAnonymousSession(obj: unknown): obj is AnonymousSession {
+  if (!obj || typeof obj !== "object") {
+    return false;
+  }
+
+  const session = obj as Partial<AnonymousSession>;
+
   return (
-    obj &&
-    typeof obj === "object" &&
-    typeof obj.id === "string" &&
-    typeof obj.remainingCredits === "number" &&
-    (obj.createdAt instanceof Date || typeof obj.createdAt === "string")
+    typeof session.id === "string" &&
+    typeof session.remainingCredits === "number" &&
+    (session.createdAt instanceof Date || typeof session.createdAt === "string")
   );
 }