🌟 Support the Project

Please Don't forget to support me with a ⭐ STAR — it really helps and motivates me to keep improving the system!

---

🚀 SaaS AI Website Builder

A powerful AI-powered SaaS platform that allows users to build websites simply by talking to an AI assistant. This project leverages multiple language models and cutting-edge technologies to generate production-ready Next.js code and preview it live in a secure sandbox.

💳 Billing is handled securely via Clerk Billing.
🎨 Theme colors follow the Twitter color scheme via tweakcn.
🐳 Docker is used to run generated projects inside a sandbox environment without compatibility issues.

---

📚 Table of Contents

• 📸 Screenshots
• 🎯 Project Purpose
• 🛠️ Technologies Used
  • Frontend
  • Backend
  • AI Integration
• 📂 Project Structure
• 📁 Key Files
• 🚀 Getting Started
• 💡 Usage Flow
• 🚢 Deployment
• 🤝 Contributing
• 📄 License

---

📸 Screenshots

---

🎯 Project Purpose

This platform serves as a bridge between non-technical users and web development by enabling them to:

• Generate website projects using AI conversations
• Create complete frontend code with no coding experience
• Preview results instantly in a sandboxed environment
• Manage multiple projects with real-time tracking

---

✨ Features

• Conversational Website Creation: Build websites by simply describing your ideas to an AI assistant.
• Production-Ready Code Generation: Instantly generate clean, production-grade Next.js code for your projects.
• Live Preview in Sandbox: Safely preview and interact with your generated website in a secure, isolated environment.
• Multi-Model AI Support: Leverage OpenAI, Anthropic, and Google Gemini for diverse and powerful code generation.
• Project Management: Create, manage, and track multiple website projects with real-time updates.
• Authentication & Billing: Secure sign-in, sign-up, and billing powered by Clerk.
• Export & Deploy: Easily export your code or deploy directly to platforms like Vercel or Netlify.
• Modern UI/UX: Enjoy a sleek, responsive interface built with Tailwind CSS and Radix UI components.
• Background Jobs: Reliable background processing using Inngest for tasks like code compilation and deployment.
• Database Integration: Robust data storage and management with Prisma and PostgreSQL.

---

🛠️ Technologies Used

Frontend

Backend

AI Integration

🐳 Docker is used to run generated projects inside sandbox containers without compatibility issues.

---

📂 Project Structure

saas\_ai\_website\_builder/
├── prisma/               # Database schema
├── public/               # Static assets
├── sandbox-templates/    # Website templates
├── src/
│   ├── app/              # App Router pages
│   ├── components/       # Reusable components
│   ├── hooks/            # Custom hooks
│   ├── inngest/          # Background jobs
│   ├── lib/              # Utility functions
│   ├── modules/          # Features modules
│   ├── trpc/             # tRPC handlers
│   ├── middleware.ts     # Auth middleware
│   └── prompt.ts         # AI prompts
├── .env                  # Environment variables
├── next.config.ts        # Next.js configuration
├── package.json          # Project dependencies
└── tsconfig.json         # TypeScript configuration

---

📁 Key Files

• schema.prisma: Data models
• prompt.ts: AI prompt logic
• middleware.ts: Auth and middleware logic
• .env: API keys and secrets

---

🔐 Environment Variables

To run this project, you need to set up the following environment variables in a .env file. You can use the .env.example as a template.

# Database
DATABASE_URL="YOUR_POSTGRESQL_URL"

# App URL
NEXT_PUBLIC_APP_URL="http://localhost:3000"

# AI Provider API Keys
GEMINI_API_KEY="YOUR_GEMINI_API_KEY"
OPENAI_API_KEY="YOUR_OPENAI_API_KEY"
ANTHROPIC_API_KEY="YOUR_ANTHROPIC_API_KEY"

# E2B Sandbox API Key
E2B_API_KEY="YOUR_E2B_API_KEY"

# Clerk Authentication and Billing
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="YOUR_CLERK_PUBLISHABLE_KEY"
CLERK_SECRET_KEY="YOUR_CLERK_SECRET_KEY"
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=/
NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=/

---

🚀 Getting Started

Prerequisites

• Node.js 18+
• PostgreSQL or Neon.tech
• API keys (OpenAI, Anthropic, Gemini, E2B, Clerk)

Setup

git clone https://github.com/your-org/saas-ai-website-builder
cd saas-ai-website-builder

npm install

cp .env.example .env
# Fill in all API keys

npx prisma migrate dev

npm run dev

---

📝 Important Notes

• This version is experimental, expect occasional issues.
• Results improve as you use it — context builds over time.
• The project is fully open-source — feel free to fork, improve, or use with different models.
• 🔧 Code is ready — just plug in your .env file and run it locally.
• The system currently runs on Google Gemini API, which is powerful but can be unreliable or limited depending on usage.

---

💡 Usage Flow

1. Sign up using Clerk
2. Create a new website project
3. Describe your idea to the AI
4. Review and edit generated code
5. Preview in sandbox
6. Export or deploy

---

🚢 Deployment

Deploy easily to Vercel, Netlify, etc.

npm run build
npm run start

---

🤝 Contributing

We welcome contributions — especially in AI prompt engineering, UI/UX improvements, and API integrations.

# Fork
git checkout -b feature/your-feature-name
# After changes
git commit -m "feat: improved something"
git push origin feature/your-feature

Open a Pull Request 🚀

---

📄 License

© 2025 Hamzah Amir This code is licensed under the MIT License. Unauthorized commercial use without attribution is prohibited.