@digilogiclabs/create-saas-app 2.0.0 → 2.2.0

package/dist/templates/web/ai-platform/template/README.md

@@ -0,0 +1,84 @@
+# {{titleCaseName}}
+
+{{description}} - An AI-powered platform for building intelligent applications.
+
+## Features
+
+- **AI Chat** - Conversational AI with multiple model support
+- **Model Selection** - Choose from GPT-4o, Claude, and more
+- **API Access** - Programmatic access to AI models
+- **Usage Dashboard** - Track API calls and token usage
+- **Subscription Billing** - Stripe-powered payments
+
+## Quick Start
+
+1. **Install dependencies:**
+   ```bash
+   npm install
+   ```
+
+2. **Set up environment variables:**
+   ```bash
+   cp .env.example .env.local
+   ```
+   Update with your API keys:
+   - Supabase credentials
+   - OpenAI and/or Anthropic API keys
+   - Stripe keys (optional)
+
+3. **Run the development server:**
+   ```bash
+   npm run dev
+   ```
+
+4. **Open [http://localhost:3000](http://localhost:3000)**
+
+## Tech Stack
+
+- **Framework:** Next.js 15
+- **Language:** TypeScript
+- **Styling:** Tailwind CSS
+- **Auth:** Supabase
+- **AI:** Vercel AI SDK
+- **Payments:** Stripe
+- **UI Components:** @digilogiclabs/saas-factory-ui
+
+## Project Structure
+
+```
+src/
+├── app/                 # Next.js App Router pages
+│   ├── api/chat/        # Chat API route
+│   ├── chat/            # AI chat interface
+│   ├── dashboard/       # User dashboard
+│   └── playground/      # AI playground
+├── components/          # React components
+│   ├── ai/              # AI-specific components
+│   └── providers/       # Context providers
+└── lib/                 # Utilities and helpers
+    └── ai/              # AI utilities
+```
+
+## Adding AI Providers
+
+To enable AI functionality, add your API keys to `.env.local`:
+
+```bash
+# OpenAI
+OPENAI_API_KEY=sk-xxx
+
+# Anthropic
+ANTHROPIC_API_KEY=sk-ant-xxx
+```
+
+Then update `src/app/api/chat/route.ts` to use the AI SDK.
+
+## Deployment
+
+Deploy to Vercel with one click:
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new)
+
+## License
+
+MIT - Built with DLL Platform

package/dist/templates/web/ai-platform/template/middleware.ts

@@ -0,0 +1,55 @@
+import { createServerClient } from '@supabase/ssr'
+import { NextResponse, type NextRequest } from 'next/server'
+
+export async function middleware(request: NextRequest) {
+  let supabaseResponse = NextResponse.next({
+    request,
+  })
+
+  const supabase = createServerClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+    {
+      cookies: {
+        getAll() {
+          return request.cookies.getAll()
+        },
+        setAll(cookiesToSet) {
+          cookiesToSet.forEach(({ name, value }) =>
+            request.cookies.set(name, value)
+          )
+          supabaseResponse = NextResponse.next({
+            request,
+          })
+          cookiesToSet.forEach(({ name, value, options }) =>
+            supabaseResponse.cookies.set(name, value, options)
+          )
+        },
+      },
+    }
+  )
+
+  const {
+    data: { user },
+  } = await supabase.auth.getUser()
+
+  // Redirect to login if accessing protected route without auth
+  if (
+    !user &&
+    (request.nextUrl.pathname.startsWith('/dashboard') ||
+     request.nextUrl.pathname.startsWith('/chat') ||
+     request.nextUrl.pathname.startsWith('/playground'))
+  ) {
+    const url = request.nextUrl.clone()
+    url.pathname = '/login'
+    return NextResponse.redirect(url)
+  }
+
+  return supabaseResponse
+}
+
+export const config = {
+  matcher: [
+    '/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)',
+  ],
+}

package/dist/templates/web/ai-platform/template/next.config.js

@@ -0,0 +1,14 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: '**.supabase.co',
+      },
+    ],
+  },
+}
+
+module.exports = nextConfig

package/dist/templates/web/ai-platform/template/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "{{packageName}}",
+  "version": "0.1.0",
+  "description": "{{description}} - AI Platform",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "type-check": "tsc --noEmit",
+    "test": "vitest",
+    "test:run": "vitest run"
+  },
+  "dependencies": {
+    "next": "^15.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@digilogiclabs/platform-core": "^1.1.0",
+    "@digilogiclabs/app-sdk": "^1.0.0",
+    "@digilogiclabs/saas-factory-auth": "^1.0.7",
+    "@digilogiclabs/saas-factory-payments": "^1.2.9",
+    "@digilogiclabs/saas-factory-ai": "^1.0.0",
+    "@digilogiclabs/saas-factory-ui": "^1.0.1",
+    "ai": "^3.4.0",
+    "@ai-sdk/openai": "^0.0.70",
+    "@ai-sdk/anthropic": "^0.0.57",
+    "stripe": "^16.12.0",
+    "@stripe/react-stripe-js": "^2.8.0",
+    "@stripe/stripe-js": "^4.10.0",
+    "tailwindcss": "^4.0.0",
+    "clsx": "^2.0.0",
+    "class-variance-authority": "^0.7.0",
+    "tailwind-merge": "^2.0.0",
+    "next-themes": "^0.4.0",
+    "lucide-react": "^0.460.0",
+    "zod": "^3.22.4",
+    "zustand": "^4.5.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.7.0",
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "eslint": "^9.0.0",
+    "eslint-config-next": "^15.0.0",
+    "prettier": "^3.4.0",
+    "vitest": "^2.1.0",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/jest-dom": "^6.6.0"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  }
+}

package/dist/templates/web/ai-platform/template/src/app/api/chat/route.ts

@@ -0,0 +1,54 @@
+import { NextRequest, NextResponse } from 'next/server'
+
+// Note: In production, you would use the AI SDK here
+// import { openai } from '@ai-sdk/openai'
+// import { generateText } from 'ai'
+
+export async function POST(request: NextRequest) {
+  try {
+    const { messages, model } = await request.json()
+
+    // Demo response - replace with actual AI SDK integration
+    // In production:
+    // const { text } = await generateText({
+    //   model: openai(model),
+    //   messages,
+    // })
+
+    // Simulated response for demo
+    const lastMessage = messages[messages.length - 1]?.content || ''
+
+    // Simple demo responses
+    let response = "I'm an AI assistant. How can I help you today?"
+
+    if (lastMessage.toLowerCase().includes('hello') || lastMessage.toLowerCase().includes('hi')) {
+      response = "Hello! I'm your AI assistant. I can help you with coding, writing, analysis, and much more. What would you like to explore today?"
+    } else if (lastMessage.toLowerCase().includes('code') || lastMessage.toLowerCase().includes('python')) {
+      response = `Here's a simple Python example:
+
+\`\`\`python
+def greet(name: str) -> str:
+    """Return a greeting message."""
+    return f"Hello, {name}! Welcome to AI Platform."
+
+# Usage
+print(greet("Developer"))
+\`\`\`
+
+Would you like me to explain this code or help with something more specific?`
+    } else if (lastMessage.toLowerCase().includes('explain')) {
+      response = "I'd be happy to explain! Could you provide more details about what concept or topic you'd like me to clarify?"
+    }
+
+    return NextResponse.json({
+      content: response,
+      model,
+    })
+  } catch (error) {
+    console.error('Chat API error:', error)
+    return NextResponse.json(
+      { error: 'Failed to process request' },
+      { status: 500 }
+    )
+  }
+}

package/dist/templates/web/ai-platform/template/src/app/chat/page.tsx

@@ -0,0 +1,235 @@
+'use client'
+
+import { useState, useRef, useEffect } from 'react'
+import { Button, Card } from '@digilogiclabs/saas-factory-ui'
+import { Send, Bot, User, Loader2, Sparkles } from 'lucide-react'
+import { useAuth } from '@digilogiclabs/app-sdk'
+import Link from 'next/link'
+
+interface Message {
+  id: string
+  role: 'user' | 'assistant'
+  content: string
+  timestamp: Date
+}
+
+const MODELS = [
+  { id: 'gpt-4o', name: 'GPT-4o', provider: 'OpenAI' },
+  { id: 'claude-3-5-sonnet', name: 'Claude 3.5 Sonnet', provider: 'Anthropic' },
+  { id: 'gpt-4o-mini', name: 'GPT-4o Mini', provider: 'OpenAI' },
+]
+
+export default function ChatPage() {
+  const { user, loading: authLoading } = useAuth()
+  const [messages, setMessages] = useState<Message[]>([])
+  const [input, setInput] = useState('')
+  const [isLoading, setIsLoading] = useState(false)
+  const [selectedModel, setSelectedModel] = useState(MODELS[0].id)
+  const messagesEndRef = useRef<HTMLDivElement>(null)
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }
+
+  useEffect(() => {
+    scrollToBottom()
+  }, [messages])
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!input.trim() || isLoading) return
+
+    const userMessage: Message = {
+      id: Date.now().toString(),
+      role: 'user',
+      content: input,
+      timestamp: new Date(),
+    }
+
+    setMessages(prev => [...prev, userMessage])
+    setInput('')
+    setIsLoading(true)
+
+    try {
+      const response = await fetch('/api/chat', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          messages: [...messages, userMessage].map(m => ({
+            role: m.role,
+            content: m.content,
+          })),
+          model: selectedModel,
+        }),
+      })
+
+      const data = await response.json()
+
+      const assistantMessage: Message = {
+        id: (Date.now() + 1).toString(),
+        role: 'assistant',
+        content: data.content || 'Sorry, I could not process your request.',
+        timestamp: new Date(),
+      }
+
+      setMessages(prev => [...prev, assistantMessage])
+    } catch (error) {
+      console.error('Chat error:', error)
+      const errorMessage: Message = {
+        id: (Date.now() + 1).toString(),
+        role: 'assistant',
+        content: 'Sorry, there was an error processing your request. Please try again.',
+        timestamp: new Date(),
+      }
+      setMessages(prev => [...prev, errorMessage])
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  if (authLoading) {
+    return (
+      <div className="min-h-screen bg-slate-900 flex items-center justify-center">
+        <Loader2 className="w-8 h-8 text-purple-400 animate-spin" />
+      </div>
+    )
+  }
+
+  if (!user) {
+    return (
+      <div className="min-h-screen bg-slate-900 flex items-center justify-center">
+        <Card className="p-8 bg-white/5 border-white/10 text-center max-w-md">
+          <Bot className="w-16 h-16 text-purple-400 mx-auto mb-4" />
+          <h2 className="text-2xl font-bold text-white mb-2">Sign in to Chat</h2>
+          <p className="text-gray-400 mb-6">
+            Create an account to start chatting with AI models.
+          </p>
+          <div className="flex gap-2 justify-center">
+            <Link href="/login">
+              <Button variant="outline" className="border-white/20 text-white">Sign In</Button>
+            </Link>
+            <Link href="/signup">
+              <Button className="bg-purple-600 hover:bg-purple-700">Sign Up</Button>
+            </Link>
+          </div>
+        </Card>
+      </div>
+    )
+  }
+
+  return (
+    <div className="h-screen bg-slate-900 flex flex-col">
+      {/* Header */}
+      <header className="border-b border-white/10 bg-black/20 px-4 py-3">
+        <div className="max-w-4xl mx-auto flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <Link href="/" className="flex items-center gap-2 text-white">
+              <Bot className="w-6 h-6 text-purple-400" />
+              <span className="font-bold">AI Chat</span>
+            </Link>
+          </div>
+          <select
+            value={selectedModel}
+            onChange={(e) => setSelectedModel(e.target.value)}
+            className="bg-white/10 border border-white/20 rounded-lg px-3 py-1.5 text-white text-sm focus:ring-2 focus:ring-purple-500"
+          >
+            {MODELS.map((model) => (
+              <option key={model.id} value={model.id} className="bg-slate-800">
+                {model.name}
+              </option>
+            ))}
+          </select>
+        </div>
+      </header>
+
+      {/* Messages */}
+      <div className="flex-1 overflow-y-auto px-4 py-6">
+        <div className="max-w-4xl mx-auto space-y-6">
+          {messages.length === 0 && (
+            <div className="text-center py-20">
+              <Sparkles className="w-16 h-16 text-purple-400 mx-auto mb-4" />
+              <h2 className="text-2xl font-bold text-white mb-2">Start a Conversation</h2>
+              <p className="text-gray-400">Ask me anything or try one of these prompts:</p>
+              <div className="flex flex-wrap gap-2 justify-center mt-4">
+                {['Explain quantum computing', 'Write a Python function', 'Help me brainstorm'].map((prompt) => (
+                  <button
+                    key={prompt}
+                    onClick={() => setInput(prompt)}
+                    className="px-4 py-2 bg-white/5 border border-white/10 rounded-lg text-gray-300 hover:bg-white/10 transition text-sm"
+                  >
+                    {prompt}
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {messages.map((message) => (
+            <div
+              key={message.id}
+              className={`flex gap-4 ${message.role === 'user' ? 'justify-end' : ''}`}
+            >
+              {message.role === 'assistant' && (
+                <div className="w-8 h-8 rounded-lg bg-purple-500/20 flex items-center justify-center flex-shrink-0">
+                  <Bot className="w-5 h-5 text-purple-400" />
+                </div>
+              )}
+              <div
+                className={`max-w-2xl rounded-lg px-4 py-3 ${
+                  message.role === 'user'
+                    ? 'bg-purple-600 text-white'
+                    : 'bg-white/5 text-gray-200'
+                }`}
+              >
+                <p className="whitespace-pre-wrap">{message.content}</p>
+              </div>
+              {message.role === 'user' && (
+                <div className="w-8 h-8 rounded-lg bg-blue-500/20 flex items-center justify-center flex-shrink-0">
+                  <User className="w-5 h-5 text-blue-400" />
+                </div>
+              )}
+            </div>
+          ))}
+
+          {isLoading && (
+            <div className="flex gap-4">
+              <div className="w-8 h-8 rounded-lg bg-purple-500/20 flex items-center justify-center">
+                <Bot className="w-5 h-5 text-purple-400" />
+              </div>
+              <div className="bg-white/5 rounded-lg px-4 py-3">
+                <Loader2 className="w-5 h-5 text-purple-400 animate-spin" />
+              </div>
+            </div>
+          )}
+
+          <div ref={messagesEndRef} />
+        </div>
+      </div>
+
+      {/* Input */}
+      <div className="border-t border-white/10 bg-black/20 px-4 py-4">
+        <form onSubmit={handleSubmit} className="max-w-4xl mx-auto flex gap-2">
+          <input
+            type="text"
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            placeholder="Type your message..."
+            className="flex-1 bg-white/10 border border-white/20 rounded-lg px-4 py-2 text-white placeholder-gray-400 focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+            disabled={isLoading}
+          />
+          <Button
+            type="submit"
+            disabled={!input.trim() || isLoading}
+            className="bg-purple-600 hover:bg-purple-700"
+          >
+            {isLoading ? (
+              <Loader2 className="w-5 h-5 animate-spin" />
+            ) : (
+              <Send className="w-5 h-5" />
+            )}
+          </Button>
+        </form>
+      </div>
+    </div>
+  )
+}

package/dist/templates/web/ai-platform/template/src/app/dashboard/page.tsx

@@ -0,0 +1,142 @@
+import { Suspense } from 'react'
+import { Button, Card } from '@digilogiclabs/saas-factory-ui'
+import { MessageSquare, Zap, Key, CreditCard, BarChart, Settings } from 'lucide-react'
+import { requireAuth } from '@/lib/auth-server'
+import Link from 'next/link'
+
+async function getUsageStats(userId: string) {
+  await new Promise(resolve => setTimeout(resolve, 100))
+  return {
+    apiCalls: 1234,
+    tokensUsed: 45678,
+    modelsUsed: 3,
+    creditsRemaining: 850,
+  }
+}
+
+function StatCard({ title, value, icon: Icon, description }: {
+  title: string
+  value: string | number
+  icon: React.ComponentType<{ className?: string }>
+  description?: string
+}) {
+  return (
+    <Card className="p-6 bg-white/5 border-white/10">
+      <div className="flex items-center justify-between">
+        <div>
+          <p className="text-sm font-medium text-gray-400">{title}</p>
+          <p className="text-2xl font-bold text-white">{value}</p>
+          {description && <p className="text-xs text-gray-500 mt-1">{description}</p>}
+        </div>
+        <div className="w-12 h-12 bg-purple-500/20 rounded-lg flex items-center justify-center">
+          <Icon className="h-6 w-6 text-purple-400" />
+        </div>
+      </div>
+    </Card>
+  )
+}
+
+async function UsageStats({ userId }: { userId: string }) {
+  const stats = await getUsageStats(userId)
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+      <StatCard title="API Calls" value={stats.apiCalls.toLocaleString()} icon={Zap} description="This month" />
+      <StatCard title="Tokens Used" value={`${(stats.tokensUsed / 1000).toFixed(1)}K`} icon={MessageSquare} description="This month" />
+      <StatCard title="Models Used" value={stats.modelsUsed} icon={BarChart} />
+      <StatCard title="Credits" value={stats.creditsRemaining} icon={CreditCard} description="Remaining" />
+    </div>
+  )
+}
+
+function StatsSkeleton() {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+      {[...Array(4)].map((_, i) => (
+        <Card key={i} className="p-6 bg-white/5 border-white/10">
+          <div className="animate-pulse">
+            <div className="h-4 bg-gray-700 rounded w-1/2 mb-2"></div>
+            <div className="h-8 bg-gray-700 rounded w-1/3"></div>
+          </div>
+        </Card>
+      ))}
+    </div>
+  )
+}
+
+export default async function DashboardPage() {
+  const user = await requireAuth()
+
+  return (
+    <div className="min-h-screen bg-slate-900">
+      <div className="max-w-7xl mx-auto px-4 py-8">
+        {/* Header */}
+        <div className="flex items-center justify-between mb-8">
+          <div>
+            <h1 className="text-3xl font-bold text-white">Dashboard</h1>
+            <p className="text-gray-400 mt-1">Welcome back, {user.name || user.email}</p>
+          </div>
+          <Link href="/chat">
+            <Button className="bg-purple-600 hover:bg-purple-700">
+              <MessageSquare className="w-4 h-4 mr-2" />
+              New Chat
+            </Button>
+          </Link>
+        </div>
+
+        {/* Stats */}
+        <Suspense fallback={<StatsSkeleton />}>
+          <UsageStats userId={user.id} />
+        </Suspense>
+
+        {/* Quick Actions */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+          <Card className="p-6 bg-white/5 border-white/10">
+            <div className="flex items-center mb-4">
+              <Key className="h-6 w-6 text-purple-400 mr-3" />
+              <h3 className="text-lg font-semibold text-white">API Keys</h3>
+            </div>
+            <p className="text-gray-400 mb-4">
+              Manage your API keys for programmatic access.
+            </p>
+            <Button className="w-full" variant="outline">Manage Keys</Button>
+          </Card>
+
+          <Card className="p-6 bg-white/5 border-white/10">
+            <div className="flex items-center mb-4">
+              <CreditCard className="h-6 w-6 text-purple-400 mr-3" />
+              <h3 className="text-lg font-semibold text-white">Billing</h3>
+            </div>
+            <p className="text-gray-400 mb-4">
+              View usage and manage your subscription.
+            </p>
+            <Button className="w-full" variant="outline">View Billing</Button>
+          </Card>
+
+          <Card className="p-6 bg-white/5 border-white/10">
+            <div className="flex items-center mb-4">
+              <Settings className="h-6 w-6 text-purple-400 mr-3" />
+              <h3 className="text-lg font-semibold text-white">Settings</h3>
+            </div>
+            <p className="text-gray-400 mb-4">
+              Configure your account preferences.
+            </p>
+            <Button className="w-full" variant="outline">Open Settings</Button>
+          </Card>
+        </div>
+
+        {/* Recent Activity */}
+        <Card className="p-6 bg-white/5 border-white/10">
+          <h3 className="text-lg font-semibold text-white mb-4">Recent Conversations</h3>
+          <div className="text-center py-8 text-gray-500">
+            <MessageSquare className="w-12 h-12 mx-auto mb-4 opacity-50" />
+            <p>No recent conversations. Start a new chat!</p>
+            <Link href="/chat">
+              <Button className="mt-4 bg-purple-600 hover:bg-purple-700">Start Chatting</Button>
+            </Link>
+          </div>
+        </Card>
+      </div>
+    </div>
+  )
+}

package/dist/templates/web/ai-platform/template/src/app/globals.css

@@ -0,0 +1,34 @@
+@import "tailwindcss";
+
+@theme {
+  --color-primary: oklch(60% 0.25 295);
+  --color-background: oklch(15% 0.02 256);
+  --color-foreground: oklch(95% 0 0);
+  --font-sans: 'Inter', system-ui, sans-serif;
+  --radius: 0.5rem;
+}
+
+body {
+  font-family: var(--font-sans);
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+}
+
+/* Custom scrollbar for dark theme */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.3);
+}