@digilogiclabs/create-saas-app 1.10.0 → 1.10.2

package/dist/templates/web/ui-auth-ai/template/src/components/ui/select.tsx

@@ -0,0 +1,37 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+export interface SelectProps
+  extends React.SelectHTMLAttributes<HTMLSelectElement> {}
+
+const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <select
+        className={cn(
+          "flex h-10 w-full items-center justify-between rounded-md border border-gray-300 bg-white px-3 py-2 text-sm placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </select>
+    )
+  }
+)
+Select.displayName = "Select"
+
+// Simplified Select components for the template
+const SelectTrigger = Select
+const SelectValue = ({ children, ...props }: React.HTMLAttributes<HTMLSpanElement>) => (
+  <span {...props}>{children}</span>
+)
+const SelectContent = ({ children, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div {...props}>{children}</div>
+)
+const SelectItem = ({ value, children, ...props }: React.OptionHTMLAttributes<HTMLOptionElement>) => (
+  <option value={value} {...props}>{children}</option>
+)
+
+export { Select, SelectTrigger, SelectValue, SelectContent, SelectItem }

package/dist/templates/web/ui-auth-ai/template/src/components/ui/textarea.tsx

@@ -0,0 +1,23 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }

package/dist/templates/web/ui-auth-ai/template/src/hooks/useAuth.ts

@@ -0,0 +1 @@
+export { useAuth } from '@/providers/auth-provider'

package/dist/templates/web/ui-auth-ai/template/src/lib/supabase.ts

@@ -0,0 +1,8 @@
+import { createBrowserClient } from '@supabase/ssr'
+
+export function createClient() {
+  return createBrowserClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
+  )
+}

package/dist/templates/web/ui-auth-ai/template/src/lib/utils.ts

@@ -0,0 +1,5 @@
+import { type ClassValue, clsx } from "clsx"
+
+export function cn(...inputs: ClassValue[]) {
+  return clsx(inputs)
+}

package/dist/templates/web/ui-auth-ai/template/src/providers/auth-provider.tsx

@@ -0,0 +1,55 @@
+'use client'
+
+import { createContext, useContext, useEffect, useState } from 'react'
+import { createClient } from '@/lib/supabase'
+import type { User } from '@supabase/supabase-js'
+
+interface AuthContextType {
+  user: User | null
+  loading: boolean
+  signOut: () => Promise<void>
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined)
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const [user, setUser] = useState<User | null>(null)
+  const [loading, setLoading] = useState(true)
+  const supabase = createClient()
+
+  useEffect(() => {
+    // Get initial session
+    supabase.auth.getSession().then(({ data: { session } }) => {
+      setUser(session?.user ?? null)
+      setLoading(false)
+    })
+
+    // Listen for auth changes
+    const {
+      data: { subscription },
+    } = supabase.auth.onAuthStateChange((_event, session) => {
+      setUser(session?.user ?? null)
+      setLoading(false)
+    })
+
+    return () => subscription.unsubscribe()
+  }, [supabase.auth])
+
+  const signOut = async () => {
+    await supabase.auth.signOut()
+  }
+
+  return (
+    <AuthContext.Provider value={{ user, loading, signOut }}>
+      {children}
+    </AuthContext.Provider>
+  )
+}
+
+export function useAuth() {
+  const context = useContext(AuthContext)
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider')
+  }
+  return context
+}

package/dist/templates/web/ui-auth-ai/template/tailwind.config.js

@@ -0,0 +1,22 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '#eff6ff',
+          500: '#3b82f6',
+          600: '#2563eb',
+          700: '#1d4ed8',
+        },
+      },
+    },
+  },
+  plugins: [],
+}

package/dist/templates/web/ui-auth-ai/template/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "es6"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

package/dist/templates/web/ui-auth-payments-audio/template/src/app/page.tsx

@@ -224,7 +224,7 @@ export default function Home() {
           {/* Main Content */}
           <div className="lg:col-span-3 space-y-8">
             {/* Now Playing Card with Enhanced Glassmorphism */}
-            <div className="${glass.card} ${glass.border} rounded-3xl p-6 mb-8 ${animations.hover.lift} ${animations.transition.smooth}">
+            <div className={`${glass.card} ${glass.border} rounded-3xl p-6 mb-8 ${animations.hover.lift} ${animations.transition.smooth}">
               <NowPlayingCard
                 track={currentTrack || demoPlaylist[0]}
                 isPlaying={isPlaying}
@@ -236,7 +236,7 @@ export default function Home() {
 
             {/* Featured Playlists with Staggered Animation */}
             <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
-              <div className="${glass.card} ${glass.border} rounded-2xl overflow-hidden ${animations.hover.scale} ${animations.transition.smooth} ${animations.delay.short}">
+              <div className={`${glass.card} ${glass.border} rounded-2xl overflow-hidden ${animations.hover.scale} ${animations.transition.smooth} ${animations.delay.short}">
                 <PlaylistCard
                   title="Today's Top Hits"
                   description="The most played songs today"
@@ -246,7 +246,7 @@ export default function Home() {
                   className="bg-transparent border-none"
                 />
               </div>
-              <div className="${glass.card} ${glass.border} rounded-2xl overflow-hidden ${animations.hover.scale} ${animations.transition.smooth} ${animations.delay.medium}">
+              <div className={`${glass.card} ${glass.border} rounded-2xl overflow-hidden ${animations.hover.scale} ${animations.transition.smooth} ${animations.delay.medium}">
                 <PlaylistCard
                   title="Chill Vibes"
                   description="Relaxing music for focus and creativity"
@@ -256,7 +256,7 @@ export default function Home() {
                   className="bg-transparent border-none"
                 />
               </div>
-              <div className="${glass.card} ${glass.border} rounded-2xl overflow-hidden ${animations.hover.scale} ${animations.transition.smooth} ${animations.delay.long}">
+              <div className={`${glass.card} ${glass.border} rounded-2xl overflow-hidden ${animations.hover.scale} ${animations.transition.smooth} ${animations.delay.long}">
                 <PlaylistCard
                   title="Electronic Pulse"
                   description="High-energy electronic and dance music"
@@ -269,7 +269,7 @@ export default function Home() {
             </div>
 
             {/* Track List with Glassmorphism */}
-            <div className="${glass.card} ${glass.border} rounded-2xl overflow-hidden ${animations.transition.smooth}">
+            <div className={`${glass.card} ${glass.border} rounded-2xl overflow-hidden ${animations.transition.smooth}">
               <TrackList
                 tracks={demoPlaylist}
                 currentTrackId={currentTrack?.id}
@@ -288,7 +288,7 @@ export default function Home() {
 
           {/* Sidebar with Glassmorphism */}
           <div className="lg:col-span-1">
-            <div className="${glass.card} ${glass.border} rounded-2xl overflow-hidden ${animations.hover.lift} ${animations.transition.smooth}">
+            <div className={`${glass.card} ${glass.border} rounded-2xl overflow-hidden ${animations.hover.lift} ${animations.transition.smooth}">
               <PlaylistSidebar
                 playlists={[
                   { id: '1', name: 'Liked Songs', trackCount: 47 },
@@ -306,8 +306,8 @@ export default function Home() {
 
         {/* Features Overview with Enhanced Glassmorphism */}
         <ResponsiveGrid columns={gridConfig.columns_1_sm2_md4} gap="lg" className="mb-16">
-          <div className="${glass.card} ${glass.border} text-center p-6 rounded-2xl ${animations.hover.scale} ${animations.transition.smooth} ${animations.delay.short}">
-            <div className="mx-auto w-12 h-12 ${glass.accent} rounded-xl flex items-center justify-center mb-4 ${animations.hover.glow}">
+          <div className={`${glass.card} ${glass.border} text-center p-6 rounded-2xl ${animations.hover.scale} ${animations.transition.smooth} ${animations.delay.short}">
+            <div className={`mx-auto w-12 h-12 ${glass.accent} rounded-xl flex items-center justify-center mb-4 ${animations.hover.glow}`}>
               <Zap className="h-6 w-6 text-blue-400" />
             </div>
             <h3 className="text-lg font-semibold mb-2">High-Quality Streaming</h3>
@@ -316,8 +316,8 @@ export default function Home() {
             </p>
           </div>
 
-          <div className="${glass.card} ${glass.border} text-center p-6 rounded-2xl ${animations.hover.scale} ${animations.transition.smooth} ${animations.delay.medium}">
-            <div className="mx-auto w-12 h-12 ${glass.accent} rounded-xl flex items-center justify-center mb-4 ${animations.hover.glow}">
+          <div className={`${glass.card} ${glass.border} text-center p-6 rounded-2xl ${animations.hover.scale} ${animations.transition.smooth} ${animations.delay.medium}">
+            <div className={`mx-auto w-12 h-12 ${glass.accent} rounded-xl flex items-center justify-center mb-4 ${animations.hover.glow}`}>
               <Shield className="h-6 w-6 text-green-400" />
             </div>
             <h3 className="text-lg font-semibold mb-2">Secure & Private</h3>
@@ -326,8 +326,8 @@ export default function Home() {
             </p>
           </div>
 
-          <div className="${glass.card} ${glass.border} text-center p-6 rounded-2xl ${animations.hover.scale} ${animations.transition.smooth} ${animations.delay.long}">
-            <div className="mx-auto w-12 h-12 ${glass.accent} rounded-xl flex items-center justify-center mb-4 ${animations.hover.glow}">
+          <div className={`${glass.card} ${glass.border} text-center p-6 rounded-2xl ${animations.hover.scale} ${animations.transition.smooth} ${animations.delay.long}">
+            <div className={`mx-auto w-12 h-12 ${glass.accent} rounded-xl flex items-center justify-center mb-4 ${animations.hover.glow}`}>
               <Rocket className="h-6 w-6 text-purple-400" />
             </div>
             <h3 className="text-lg font-semibold mb-2">Offline Support</h3>
@@ -336,8 +336,8 @@ export default function Home() {
             </p>
           </div>
 
-          <div className="${glass.card} ${glass.border} text-center p-6 rounded-2xl ${animations.hover.scale} ${animations.transition.smooth} ${animations.delay.extra}">
-            <div className="mx-auto w-12 h-12 ${glass.accent} rounded-xl flex items-center justify-center mb-4 ${animations.hover.glow}">
+          <div className={`${glass.card} ${glass.border} text-center p-6 rounded-2xl ${animations.hover.scale} ${animations.transition.smooth} ${animations.delay.extra}">
+            <div className={`mx-auto w-12 h-12 ${glass.accent} rounded-xl flex items-center justify-center mb-4 ${animations.hover.glow}`}>
               <svg className="h-6 w-6 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
               </svg>
@@ -355,7 +355,7 @@ export default function Home() {
       </OfflineWrapper>
 
       {/* Fixed Audio Player Bar with Enhanced Glassmorphism */}
-      <div className="fixed bottom-0 left-0 right-0 z-50 ${glass.card} ${glass.border} border-t backdrop-blur-xl">
+      <div className={`fixed bottom-0 left-0 right-0 z-50 ${glass.card} ${glass.border} border-t backdrop-blur-xl`}>
         <FixedAudioBar
           track={currentTrack || demoPlaylist[0]}
           isPlaying={isPlaying}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digilogiclabs/create-saas-app",
-  "version": "1.10.0",
+  "version": "1.10.2",
   "description": "Create modern SaaS applications with Digi Logic Labs packages",
   "main": "dist/cli/index.js",
   "bin": {

package/src/templates/web/ui-auth-ai/template/.env.example

@@ -0,0 +1,18 @@
+# Supabase Configuration
+NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
+NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
+SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key
+
+# AI Gateway Configuration  
+AI_GATEWAY_URL=http://localhost:3001
+{{#ai.enabled}}
+
+# AI Provider Configuration ({{ai.provider}})
+# Add your API key for the selected provider:
+# For OpenAI: OPENAI_API_KEY=your_openai_api_key
+# For Anthropic: ANTHROPIC_API_KEY=your_anthropic_api_key  
+# For Gemini: GOOGLE_API_KEY=your_google_api_key
+
+# Redis Configuration (for AI job processing)
+REDIS_URL=redis://localhost:6379
+{{/ai.enabled}}

package/src/templates/web/ui-auth-ai/template/README.md

@@ -0,0 +1,170 @@
+# {{titleCaseName}}
+
+{{description}}
+
+## Features
+
+{{#ai.enabled}}
+### AI Capabilities
+{{#ai.hasText}}
+- 🤖 **AI Chat**: Interactive AI assistant powered by {{ai.provider}}
+{{/ai.hasText}}
+{{#ai.hasAudio}}
+- 🎵 **Audio Generation**: Create custom audio with AI
+{{/ai.hasAudio}}
+{{#ai.hasVideo}}
+- 🎥 **Video Generation**: Generate videos with AI
+{{/ai.hasVideo}}
+
+### AI Provider: {{ai.provider}}
+This application is configured to use {{ai.provider}} as the AI provider.
+{{/ai.enabled}}
+
+### Authentication
+- 🔐 **Supabase Auth**: Secure authentication with email/password
+- 👤 **User Management**: Complete user registration and login flow
+
+### Tech Stack
+- **Framework**: Next.js 15 with App Router
+- **Styling**: Tailwind CSS
+- **Authentication**: Supabase
+- **Database**: Supabase (PostgreSQL)
+{{#ai.enabled}}
+- **AI SDK**: @digilogiclabs/saas-factory-ai
+{{/ai.enabled}}
+- **Language**: TypeScript
+
+## Getting Started
+
+### Prerequisites
+- Node.js 18+ 
+- npm or yarn
+- Supabase account
+{{#ai.enabled}}
+- {{ai.provider}} API key
+{{/ai.enabled}}
+
+### Installation
+
+1. **Install dependencies**
+   ```bash
+   npm install
+   ```
+
+2. **Set up environment variables**
+   ```bash
+   cp .env.example .env.local
+   ```
+   
+   Fill in your environment variables:
+   - `NEXT_PUBLIC_SUPABASE_URL`: Your Supabase project URL
+   - `NEXT_PUBLIC_SUPABASE_ANON_KEY`: Your Supabase anon key
+   - `SUPABASE_SERVICE_ROLE_KEY`: Your Supabase service role key
+   {{#ai.enabled}}
+   - API key for your selected AI provider ({{ai.provider}})
+   - `AI_GATEWAY_URL`: URL of your AI gateway service
+   - `REDIS_URL`: Redis connection URL (for AI job processing)
+   {{/ai.enabled}}
+
+3. **Set up Supabase**
+   - Create a new Supabase project
+   - Run the database migrations (see `migrations/` folder)
+   - Enable authentication in your Supabase dashboard
+
+{{#ai.enabled}}
+4. **Set up AI Gateway** (Optional for development)
+   - Deploy the AI gateway service from `@digilogiclabs/saas-factory-ai-gateway`
+   - Or use the development gateway at `http://localhost:3001`
+{{/ai.enabled}}
+
+5. **Run the development server**
+   ```bash
+   npm run dev
+   ```
+
+6. **Open your browser**
+   Navigate to [http://localhost:3000](http://localhost:3000)
+
+## Project Structure
+
+```
+src/
+├── app/                    # Next.js app router
+│   ├── layout.tsx         # Root layout with providers
+│   ├── page.tsx           # Home page
+│   └── globals.css        # Global styles
+├── components/            
+│   ├── ui/                # Reusable UI components
+{{#ai.enabled}}
+│   ├── ai/                # AI-specific components
+{{/ai.enabled}}
+│   └── auth/              # Authentication components
+├── providers/             # React context providers
+├── hooks/                 # Custom React hooks
+└── lib/                   # Utility functions
+```
+
+{{#ai.enabled}}
+## AI Features Usage
+
+### Chat Interface
+The chat interface provides real-time streaming responses from {{ai.provider}}:
+```tsx
+import { ChatPanel } from '@digilogiclabs/saas-factory-ai/react'
+
+<ChatPanel 
+  placeholder="Ask me anything..."
+  onError={(error) => console.error('Chat error:', error)}
+/>
+```
+
+{{#ai.hasAudio}}
+### Audio Generation
+Generate custom audio with different styles:
+```tsx
+import { AudioGenerator } from '@/components/ai/audio-generator'
+
+<AudioGenerator />
+```
+{{/ai.hasAudio}}
+
+{{#ai.hasVideo}}
+### Video Generation  
+Create videos from text descriptions:
+```tsx
+import { VideoGenerator } from '@/components/ai/video-generator'
+
+<VideoGenerator />
+```
+{{/ai.hasVideo}}
+{{/ai.enabled}}
+
+## Deployment
+
+### Vercel (Recommended)
+1. Push your code to GitHub
+2. Connect your repo to Vercel
+3. Add your environment variables in Vercel dashboard
+4. Deploy!
+
+### Other Platforms
+This is a standard Next.js application and can be deployed to any platform that supports Node.js.
+
+## Learn More
+
+- [Next.js Documentation](https://nextjs.org/docs)
+- [Supabase Documentation](https://supabase.com/docs)
+{{#ai.enabled}}
+- [SaaS Factory AI Documentation](https://docs.digilogiclabs.com/ai)
+{{/ai.enabled}}
+- [Tailwind CSS](https://tailwindcss.com/docs)
+
+## Support
+
+- 📚 [Documentation](https://docs.digilogiclabs.com)
+- 💬 [Discord Community](https://discord.gg/digilogiclabs)
+- 🐛 [Issue Tracker](https://github.com/DigiLogicLabs/saas-factory-ai/issues)
+
+---
+
+Generated with ❤️ by [Digi Logic Labs](https://digilogiclabs.com)

package/src/templates/web/ui-auth-ai/template/next.config.js

@@ -0,0 +1,13 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  experimental: {
+    serverComponentsExternalPackages: ['@digilogiclabs/saas-factory-ai'],
+  },
+  env: {
+    NEXT_PUBLIC_SUPABASE_URL: process.env.NEXT_PUBLIC_SUPABASE_URL,
+    NEXT_PUBLIC_SUPABASE_ANON_KEY: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
+    AI_GATEWAY_URL: process.env.AI_GATEWAY_URL || 'http://localhost:3001',
+  },
+}
+
+module.exports = nextConfig

package/src/templates/web/ui-auth-ai/template/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "{{packageName}}",
+  "version": "0.1.0",
+  "description": "{{description}}",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build", 
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@digilogiclabs/saas-factory-ui": "^0.18.1",
+    "@digilogiclabs/saas-factory-auth": "^1.0.0",
+    "next": "^15.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@supabase/supabase-js": "^2.0.0",
+    "@supabase/ssr": "^0.1.0",
+    "clsx": "^2.0.0",
+    "tailwindcss": "^3.3.0",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.31"{{#ai.enabled}},
+    "@digilogiclabs/saas-factory-ai": "^3.0.0",
+    "@digilogiclabs/saas-factory-ai-types": "^3.0.0"{{/ai.enabled}}
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.0.0", 
+    "@types/react-dom": "^18.0.0",
+    "eslint": "^8.0.0",
+    "prettier": "^3.0.0",
+    "typescript": "^5.0.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "author": "{{author}}",
+  "license": "MIT"
+}

package/src/templates/web/ui-auth-ai/template/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/src/templates/web/ui-auth-ai/template/src/app/globals.css

@@ -0,0 +1,40 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Import SaaS Factory UI styles */
+@import '@digilogiclabs/saas-factory-ui/dist/index.css';
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/src/templates/web/ui-auth-ai/template/src/app/layout.tsx

@@ -0,0 +1,41 @@
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import './globals.css'
+{{#ai.enabled}}
+import { AIProvider } from '@digilogiclabs/saas-factory-ai/react'
+{{/ai.enabled}}
+import { AuthProvider } from '@/providers/auth-provider'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+  title: '{{titleCaseName}}',
+  description: '{{description}}',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <AuthProvider>
+          {{#ai.enabled}}
+          <AIProvider 
+            config={{
+              gatewayUrl: process.env.NEXT_PUBLIC_AI_GATEWAY_URL || 'http://localhost:3001',
+            }}
+          >
+            {children}
+          </AIProvider>
+          {{/ai.enabled}}
+          {{^ai.enabled}}
+          {children}
+          {{/ai.enabled}}
+        </AuthProvider>
+      </body>
+    </html>
+  )
+}