A modern SaaS application built with Next.js 14, React, and TypeScript that combines AI image generation capabilities with an intelligent chatbot interface.
- 🎨 AI Image Generation: Create unique images using advanced AI models
- 🤖 AI Chatbot: Intelligent conversation system using GeminiAI
- 💳 Credit System: Built-in credit management for service usage
- 📊 User Dashboard: Track and manage generated images
- 💰 Payment Integration: PayPal integration for credit purchases
- 🌓 Dark/Light Mode: Full theme support with mode toggle
- 📱 Responsive Design: Fully responsive UI for all devices
- Framework: Next.js 14
- Language: TypeScript
- Styling: Tailwind CSS
- Database: MongoDB (via built-in models)
- Authentication: Next.js built-in auth
- Payment: PayPal integration
- AI Services:
- OpenAI for image generation
- GeminiAI for chat functionality
- UI Components: Custom components with shadcn/ui
├── actions/ # Server actions for API functionality
├── app/ # Next.js app router pages and layouts
├── components/ # Reusable React components
├── context/ # React context providers
├── lib/ # Utility functions and helpers
├── models/ # MongoDB models
├── public/ # Static assets
└── utils/ # Types and database utilities
- Clone the repository
- Install dependencies:
npm install
- Set up environment variables:
OPENAI_API_KEY=your_openai_key GEMINI_API_KEY=your_gemini_key MONGODB_URI=your_mongodb_uri PAYPAL_CLIENT_ID=your_paypal_client_id
- Run the development server:
npm run dev
- Open http://localhost:3000 in your browser
- Generate custom images using OpenAI's DALL-E model
- Save and manage generated images
- Edit or regenerate images as needed
- Interactive chat using GeminiAI
- Context-aware conversations
- Real-time responses
- Pay-per-use credit system
- Credit purchase through PayPal
- Credit usage tracking
- View all generated images
- Manage credit balance
- Track usage history
Contributions are welcome! Please feel free to submit a Pull Request.