MultiGenQA - Enterprise Multi-AI Chat Platform

A comprehensive, production-ready web platform that enables secure conversations with multiple AI models including OpenAI GPT-4o, Google Gemini 2.5 Flash, and Claude 3.5 Sonnet. Built with enterprise-grade authentication, monitoring, and deployment capabilities.

• OpenAI GPT-4o: Latest and most capable OpenAI model
• Google Gemini 2.5 Flash: Google's fastest multimodal AI
• Claude 3.5 Sonnet: Anthropic's most intelligent model
• Seamless Model Switching: Change AI models mid-conversation
• Conversation Persistence: Full chat history with database storage

• JWT Token-Based Authentication: Industry-standard security
• User Registration & Login: Complete account management
• Password Strength Validation: Real-time password requirements
• Email Verification: Account verification system
• Session Management: Automatic token refresh and logout
• Rate Limiting: Protection against abuse and attacks

• Responsive Design: Works perfectly on desktop, tablet, and mobile
• Real-time Chat Interface: Instant message delivery
• Loading States: Clear feedback during AI processing
• Error Handling: Graceful error messages and recovery
• Accessibility: Screen reader compatible and keyboard navigation

• Docker Containerization: Easy deployment anywhere
• Database Integration: PostgreSQL with SQLAlchemy ORM
• Caching Layer: Redis for improved performance
• Monitoring: Prometheus metrics and Grafana dashboards
• Security Headers: CORS, CSP, and security best practices
• SSL/TLS Support: HTTPS encryption ready

• React 18 with TypeScript for type-safe development
• Context API for state management
• Axios for HTTP client with interceptors
• Lucide React for consistent iconography
• Custom CSS with responsive design

• Flask with production WSGI server (Gunicorn)
• SQLAlchemy ORM with PostgreSQL
• JWT Authentication with secure password hashing
• Flask-Limiter for rate limiting
• Flask-Caching with Redis
• Prometheus metrics collection

• Docker Compose for orchestration
• PostgreSQL for data persistence
• Redis for caching and sessions
• nginx as reverse proxy
• Prometheus + Grafana for monitoring

# Clone the repository
git clone https://github.com/your-username/MultiGenQA.git
cd MultiGenQA

# Setup environment variables
cp backend/env.example backend/.env
# Edit backend/.env with your API keys

# Start with Docker
./docker-run.sh

Access your app:

• Frontend: http://localhost:3000
• Backend API: http://localhost:5001/api/health

# Backend setup
cd backend
pip install -r requirements.txt
cp env.example .env
# Edit .env with your API keys
python app.py

# Frontend setup (new terminal)
npm install
npm start

You'll need API keys from these services:

1. OpenAI → https://platform.openai.com/api-keys
2. Google AI → https://makersuite.google.com/app/apikey
3. Anthropic → https://console.anthropic.com/

Add them to backend/.env:

OPENAI_API_KEY=sk-your-openai-key
GOOGLE_API_KEY=your-google-key
ANTHROPIC_API_KEY=your-anthropic-key

1. Create Account: Register with email and secure password
2. Login: Access your personalized chat interface
3. Select AI Model: Choose from OpenAI, Gemini, or Claude
4. Start Chatting: Type messages and get AI responses
5. Switch Models: Change AI models anytime during conversation
6. View History: Access all your previous conversations

MultiGenQA/
├── 📁 backend/                    # Python Flask API
│   ├── app.py                     # Main Flask application
│   ├── models.py                  # Database models (User, Conversation, Message)
│   ├── requirements.txt           # Python dependencies
│   └── tests/                     # Backend test suite
├── 📁 src/                        # React/TypeScript frontend
│   ├── 📁 components/             # React components
│   │   ├── AuthProvider.tsx       # Authentication context
│   │   ├── Login.tsx             # Login component
│   │   ├── Register.tsx          # Registration component
│   │   ├── ChatMessage.tsx       # Message display
│   │   └── ModelSelector.tsx     # AI model selector
│   ├── 📁 services/              # API services
│   │   └── api.ts                # HTTP client with auth
│   ├── 📁 types/                 # TypeScript definitions
│   │   └── index.ts              # Type interfaces
│   └── App.tsx                   # Main application
├── 📁 docker/                    # Docker configuration
│   ├── docker-compose.yml        # Development setup
│   ├── docker-compose.prod.yml   # Production setup
│   ├── Dockerfile.backend        # Backend container
│   └── Dockerfile.frontend       # Frontend container
├── 📁 monitoring/                # Monitoring setup
│   └── prometheus.yml            # Metrics configuration
├── 📁 docs/                      # Documentation
│   ├── AUTHENTICATION.md         # Auth system guide
│   ├── ARCHITECTURE.md           # System architecture
│   ├── DOCKER.md                 # Docker guide
│   └── PRODUCTION-DEPLOYMENT.md  # Production deployment
└── README.md                     # This file

• POST /api/auth/register - User registration
• POST /api/auth/login - User login
• POST /api/auth/logout - User logout
• GET /api/auth/me - Get current user
• POST /api/auth/verify-email - Email verification

• GET /api/models - Available AI models
• POST /api/chat - Send message to AI
• GET /api/conversations - User's conversations
• GET /api/conversations/:id - Specific conversation

• GET /api/health - Health check
• GET /api/metrics - Prometheus metrics
• GET /api/usage - User's API usage stats

This project demonstrates key TypeScript concepts:

// Define the shape of data
interface User {
  id: string;
  email: string;
  first_name: string;
  last_name: string;
}

// Union types for specific values
type MessageRole = 'user' | 'assistant';

// Type-safe state management
const [user, setUser] = useState<User | null>(null);
const [messages, setMessages] = useState<Message[]>([]);

// Define function signatures
interface AuthContextType {
  login: (user: User, token: string) => void;
  logout: () => Promise<void>;
}

// Properly typed event handlers
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault();
  // TypeScript knows the exact event type
};

docker-compose up --build

docker-compose -f docker-compose.prod.yml up -d

docker-compose -f docker-compose.prod.yml --profile monitoring up -d

• Prometheus Metrics: API performance, error rates, response times
• Grafana Dashboards: Visual monitoring and alerting
• Structured Logging: JSON logs for easy parsing
• Health Checks: Automated service health monitoring

• JWT Authentication: Secure token-based auth
• Password Hashing: bcrypt with salt
• Rate Limiting: API abuse protection
• CORS Protection: Secure cross-origin requests
• Security Headers: XSS, CSRF, clickjacking protection
• Input Validation: Comprehensive data validation
• SQL Injection Prevention: Parameterized queries

cd backend
python test_backend.py

npm test

npm run test:all

For production deployment, see our comprehensive guides:

• Production Deployment Guide - Complete production setup
• Docker Guide - Container deployment
• Architecture Guide - System design details

• Node.js 18+
• Python 3.11+
• Docker (optional but recommended)
• Git

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Run tests
5. Submit a pull request

• TypeScript: Strict mode enabled
• Python: PEP 8 compliance
• ESLint: Configured for React/TypeScript
• Prettier: Code formatting

• Response Times: < 2s average for AI responses
• Concurrent Users: Supports 100+ simultaneous users
• Database: Optimized queries with proper indexing
• Caching: Redis caching for frequently accessed data
• CDN Ready: Static assets optimized for CDN delivery

Authentication not working?

• Check if JWT secret is set in environment
• Verify API keys are correctly configured
• Check browser console for errors

Docker containers not starting?

• Ensure Docker Desktop is running
• Check if ports 3000/5001 are available
• Verify .env file has real API keys

AI responses failing?

• Verify API keys are valid and have credits
• Check rate limits on AI service accounts
• Review backend logs for specific errors

1. Check the troubleshooting guides
2. Review GitHub Issues
3. Join our community discussions

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

• OpenAI for GPT-4o API
• Google for Gemini API
• Anthropic for Claude API
• React and TypeScript communities
• Flask and Python ecosystems

• Documentation: docs/
• Issues: GitHub Issues
• Discussions: GitHub Discussions

Built with ❤️ using React, TypeScript, Python, and Docker