AI Platform - Multi-Service AI SaaS

A comprehensive AI services platform with a professional landing page and dashboard offering various AI-powered tools and services.

Features

• Modern Landing Page: Professional hero section, sticky navbar, pricing plans, and feature highlights
• User Dashboard: Clean sidebar navigation with multiple AI tools
• Content Generation: Blog posts, stories, and content rewriting
• Language Services: Translation, text-to-speech, and speech-to-text
• Media Generation: Image and video creation
• AI Assistant: Chatbot and code generation
• Unified API Architecture: Environment-based configuration for easy integration
• Responsive Design: Works on all devices with dark/light mode support

Tech Stack

• Frontend: Next.js 14, React, TypeScript
• UI Components: Tailwind CSS, shadcn/ui
• Authentication: Supabase Auth
• Database: Supabase PostgreSQL
• API Integration: OpenAI, Google AI, Stability AI, ElevenLabs

Getting Started

Prerequisites

• Node.js 18+ and npm/yarn
• Supabase account
• API keys for AI services (or use mock mode for development)

Installation

1. Clone the repository

git clone https://github.com/yourusername/ai-platform.git
cd ai-platform

2. Install dependencies

npm install
# or
yarn install

3. Set up environment variables

Create a .env.local file in the root directory with the following variables:

# Supabase Configuration
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_KEY=your_supabase_service_key

# API Configuration
MOCK_MODE=true  # Set to false to use real API services

# OpenAI (Optional for real API mode)
OPENAI_API_KEY=your_openai_api_key

# Google AI (Optional for real API mode)
GOOGLE_AI_API_KEY=your_google_ai_api_key

# Stability AI (Optional for real API mode)
STABILITY_API_KEY=your_stability_api_key

# ElevenLabs (Optional for real API mode)
ELEVENLABS_API_KEY=your_elevenlabs_api_key

# Stripe (Optional for payment processing)
STRIPE_SECRET_KEY=your_stripe_secret_key
STRIPE_PUBLISHABLE_KEY=your_stripe_publishable_key
STRIPE_WEBHOOK_SECRET=your_stripe_webhook_secret

4. Run the development server

npm run dev
# or
yarn dev

5. Open http://localhost:3000 in your browser

Database Setup

1. Create a new project in Supabase

2. Run the SQL migrations in the supabase/migrations folder to set up the required tables

3. Update your environment variables with the Supabase URL and keys

Using Real AI Services

By default, the application runs in mock mode, which simulates AI service responses without making actual API calls. To use real AI services:

1. Set MOCK_MODE=false in your .env.local file
2. Add the required API keys for the services you want to use:
   • OpenAI for content generation, chat, and code generation
   • Google AI for additional language services
   • Stability AI for image generation
   • ElevenLabs for text-to-speech

Deployment

Vercel

The easiest way to deploy the application is with Vercel:

1. Push your code to a GitHub repository
2. Import the repository in Vercel
3. Configure the environment variables
4. Deploy

Docker

A Dockerfile is provided for containerized deployment:

docker build -t ai-platform .
docker run -p 3000:3000 ai-platform

Customization

Adding New AI Services

1. Add a new service configuration in src/lib/api-config.ts
2. Create service functions in src/lib/api-service.ts
3. Add mock responses in src/lib/mock-data.ts for development
4. Create UI components in the appropriate dashboard section

Styling

The application uses Tailwind CSS for styling and shadcn/ui for components. You can customize the theme in:

• tailwind.config.ts - For Tailwind configuration
• src/app/globals.css - For global styles
• src/components/ui/* - For component styling

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgements

• Next.js
• Tailwind CSS
• shadcn/ui
• Supabase
• OpenAI
• Lucide Icons