A fully-featured AI SaaS platform with 5 powerful AI tools for content generation. Built with cutting-edge technologies including Next.js 16 App Router, OpenRouter AI, Replicate AI, and a complete Stripe subscription system.
Credit: This project is based on the tutorial by Antonio Erdeljac (Code With Antonio)
- 💬 Conversation - Advanced AI chat using one the most sophisticated conversation model
- 🖼️ Image Generation - Turn your prompts into stunning images
- 🎵 Music Generation - Generate 1-2 minute songs with AI vocals
- 🎬 Video Generation - Create short video clips from text descriptions
- 💻 Code Generation - Generate code using descriptive text
- 🎯 5 Free Generations - Try all tools with free tier limits
- 💳 Stripe Subscription - Upgrade to Pro for unlimited generations
- 🔐 Clerk Authentication - Secure sign-in/sign-up with social logins
- 📊 Usage Tracking - Monitor your generation limits
- 📱 Mobile Responsive - Works seamlessly across all devices
- ⚡ Real-time Generation - Watch AI create content in real-time
- ✨ Unlimited AI generations across all tools
- 🎨 Priority generation queue
- 💾 Save and download all creations
- Next.js 16 - React framework with App Router
- React 19 - UI library
- TypeScript - Type safety
- TailwindCSS - Styling
- Shadcn UI - Component library
- Lucide React - Icon library
- Prisma ORM - Database ORM
- Neon PostgreSQL - Serverless Postgres database
- Next.js API Routes & Server Actions
- OpenRouter AI - Multiple AI model access (Conversation, Code)
- Pollinations.ai - Free image generation with Flux model
- Replicate AI - Music and Video generation
- Clerk - Complete authentication solution
- Stripe - Payment processing & subscriptions
- Stripe Webhooks - Subscription management
- Zustand - Global state management
- React Context API
Before you begin, ensure you have:
- Node.js (v18 or higher)
- npm, yarn, or pnpm
- Git
- Accounts for:
- Clerk (Authentication)
- Neon (Database)
- OpenRouter (AI Models)
- Replicate (AI Generation)
- Stripe (Payments)
git clone https://github.com/git-adventures/ai-saas-clone.git
cd ai-saas-clonenpm installCreate a .env file in the root directory:
# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key
# Clerk Redirect URLs
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/dashboard
# Site Configuration
YOUR_SITE_URL=http://localhost:3000
YOUR_SITE_NAME=AI Platform Clone
# OpenRouter AI (Multiple Keys for Automatic Failover)
# Add up to 10 keys - system will automatically rotate when one runs out
OPENROUTER_API_KEY_1=your_openrouter_key_1
OPENROUTER_API_KEY_2=your_openrouter_key_2
OPENROUTER_API_KEY_3=your_openrouter_key_3
OPENROUTER_API_KEY_4=your_openrouter_key_4
# Optional: Add more keys (up to OPENROUTER_API_KEY_10)
# Replicate AI
REPLICATE_API_TOKEN=your_replicate_token
# Database (Neon PostgreSQL)
DATABASE_URL=your_neon_postgres_connection_string
# Stripe
STRIPE_API_KEY=your_stripe_secret_key
STRIPE_WEBHOOK_SECRET=your_stripe_webhook_secret
NEXT_PUBLIC_APP_URL=http://localhost:3000# Generate Prisma Client
npx prisma generate
# Push database schema
npx prisma db push
# (Optional) Open Prisma Studio to manage database
npx prisma studio# Install Stripe CLI
# Visit: https://stripe.com/docs/stripe-cli
# Login to Stripe CLI
stripe login
# Forward webhooks to your local server
stripe listen --forward-to localhost:3000/api/webhookCopy the webhook signing secret to your .env file as STRIPE_WEBHOOK_SECRET.
npm run devOpen http://localhost:3000 in your browser.
| Command | Description |
|---|---|
npm run dev |
Start development server |
npm run build |
Build for production |
npm start |
Start production server |
npm run lint |
Run ESLint |
npx prisma studio |
Open Prisma Studio |
npx prisma generate |
Generate Prisma Client |
npx prisma db push |
Push schema to database |
The platform includes an intelligent API key rotation system for uninterrupted service:
- Multiple Key Support: Configure up to 10 OpenRouter API keys (
OPENROUTER_API_KEY_1throughOPENROUTER_API_KEY_10) - Automatic Failover: When one key runs out of credits or hits rate limits (402/429 errors), the system automatically switches to the next available key
- Zero Downtime: Users experience seamless conversations and code generation without interruption
- Smart Error Handling: Only switches keys for credit/rate-limit errors, returns immediately for other errors
- Logging: Console logs show which key is being used
Example Console Output:
[CODE_API_KEY_1] Attempting request...
[CODE_API_KEY_1] Rate limited or out of credits, trying next key...
[CODE_API_KEY_2] Attempting request...
[CODE_API_KEY_2] Success!
Setup:
- Create multiple OpenRouter accounts
- Generate API keys for each account
- Add them to your
.envfile asOPENROUTER_API_KEY_1,OPENROUTER_API_KEY_2, etc. - The system automatically uses them in order and rotates when needed
- Each user gets 5 free generations across all AI tools
- Usage is tracked in the database per user
- Counter resets with Pro subscription
- Conversation: Uses OpenRouter Meta Llama 3.3 70B for multi-turn conversations
- Image Generation: Powered by Pollinations.ai Flux model - free, fast, and high-quality
- Music Generation: AI-generated songs with vocals using Replicate
- Video Generation: Text-to-video using Replicate
- Code Generation: Intelligent code generation using OpenRouter Meta Llama 3.3 70B with syntax highlighting
- Next.js Documentation
- Prisma Documentation
- Clerk Documentation
- OpenRouter Documentation
- Replicate Documentation
- Stripe Documentation
- Shadcn UI Documentation
- YouTube - Original tutorial
- Vercel - Deployment platform (CD)
- GitHub - Code hosting and version control (CI)
- OpenRouter - AI model access
- Replicate - AI generation tools
- Shadcn - Beautiful UI components
⭐ If you found this project helpful, please give it a star!