Chatty - AI Chatbot Platform

A modern, full-stack AI chatbot platform that combines a Next.js frontend with a FastAPI-based RAG (Retrieval-Augmented Generation) service. Create, manage, and embed AI chatbots with document-based knowledge and comprehensive analytics.

🏗️ Project Architecture

┌─────────────────────────────────────────────────────────────────┐
│                        Chatty Platform                          │
├─────────────────────────────────────────────────────────────────┤
│  Frontend (Next.js)          │  Backend (FastAPI + Qdrant)     │
│  ┌─────────────────────────┐  │  ┌─────────────────────────────┐ │
│  │ • Authentication        │  │  │ • Document Processing       │ │
│  │ • Chatbot Management    │◄─┼─►│ • Vector Search (RAG)       │ │
│  │ • Embeddable Widget     │  │  │ • User Isolation            │ │
│  │ • Analytics Dashboard   │  │  │ • Qdrant Vector DB          │ │
│  │ • Real-time Chat        │  │  │ • OpenAI Embeddings         │ │
│  └─────────────────────────┘  │  └─────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘

📁 Project Structure

Chatty/
├── front-end/                 # Next.js Frontend Application
│   ├── app/                   # Next.js App Router
│   │   ├── api/              # API Routes (Auth, Chat, Analytics)
│   │   ├── components/       # React Components
│   │   ├── dashboard/        # Dashboard Pages
│   │   └── chatbot/          # Chatbot Management
│   ├── lib/                  # Database & Utilities
│   ├── public/               # Static Assets & Widget
│   └── package.json          # Frontend Dependencies
│
├── rag-service/              # FastAPI Backend Service
│   ├── main.py               # FastAPI Application
│   ├── services/             # Business Logic
│   │   ├── document_processor.py
│   │   ├── rag_service.py
│   │   └── vector_store.py
│   ├── models/               # Data Models
│   ├── docker-compose.yml    # Service Orchestration
│   └── requirements.txt      # Python Dependencies
│
├── .gitignore                # Unified Git Ignore Rules
└── README.md                 # This File

✨ Key Features

Frontend (Next.js)

• 🔐 Authentication: NextAuth with email/password and Google OAuth
• 🤖 Chatbot Management: Create, configure, and manage multiple chatbots
• 🔗 Embeddable Widget: Lightweight JavaScript widget for any website
• 📊 Analytics Dashboard: Real-time metrics and conversation analytics
• 🎨 Modern UI: Responsive design with dark/light theme support
• 🛡️ Security: Domain restrictions and user isolation

Backend (FastAPI + RAG)

• 📄 Document Processing: Support for PDF, TXT, and DOCX files
• 🧠 RAG Integration: Retrieval-Augmented Generation with OpenAI embeddings
• 🔍 Vector Search: Semantic search using Qdrant vector database
• 👤 User Isolation: Complete data separation between users and chatbots
• 🐳 Docker Support: Easy deployment with Docker Compose
• 🔒 JWT Authentication: Secure API access with token validation

🚀 Quick Start

Prerequisites

• Node.js (v18 or higher)
• Python (v3.8 or higher)
• Docker and Docker Compose
• MongoDB (local or Atlas)
• OpenAI API Key (for embeddings and chat completions)

1. Clone the Repository

git clone <your-repo-url>
cd Chatty

2. Set Up Environment Variables

Create environment files for both services:

Frontend (front-end/.env.local):

# MongoDB
MONGODB_URI="mongodb://localhost:27017"
MONGODB_DB="chat_app"

# NextAuth
NEXTAUTH_SECRET="your-strong-secret"
NEXTAUTH_URL="http://localhost:3000"

# Google OAuth (optional)
GOOGLE_CLIENT_ID="your-google-client-id"
GOOGLE_CLIENT_SECRET="your-google-client-secret"

# OpenRouter API (for chat completions)
OPENAI_API_KEY="your-openrouter-api-key"

# RAG Service
RAG_SERVICE_URL="http://localhost:8000"

Backend (rag-service/.env):

# OpenAI API (for embeddings)
OPENAI_API_KEY="your_openai_api_key_here"

# JWT Configuration
JWT_SECRET_KEY="your_jwt_secret_key_here"
NEXTJS_JWT_SECRET="your_nextjs_jwt_secret_here"

# Qdrant Configuration
QDRANT_HOST=localhost
QDRANT_PORT=6333

# Next.js Integration
NEXTJS_APP_URL=http://localhost:3000

3. Start the Backend Services

# Navigate to RAG service directory
cd rag-service

# Start Qdrant and FastAPI service
docker-compose up -d

# Verify services are running
curl http://localhost:8000/health
curl http://localhost:6333/collections

4. Start the Frontend

# Navigate to frontend directory
cd ../front-end

# Install dependencies
npm install

# Start development server
npm run dev

5. Access the Application

• Frontend: http://localhost:3000
• RAG Service API: http://localhost:8000
• Qdrant Dashboard: http://localhost:6333/dashboard

🔄 Running Everything Together

Development Mode

1. Start Backend Services:

   cd rag-service
   docker-compose up -d

2. Start Frontend:

   cd ../front-end
   npm run dev

3. Access the Application:

   • Open http://localhost:3000 in your browser
   • Sign up for an account
   • Create your first chatbot
   • Upload documents to enable RAG functionality

Production Deployment

Option 1: Docker Compose (Recommended)

Create a root-level docker-compose.yml:

version: '3.8'
services:
  frontend:
    build: ./front-end
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=production
      - MONGODB_URI=${MONGODB_URI}
      - NEXTAUTH_SECRET=${NEXTAUTH_SECRET}
      - NEXTAUTH_URL=${NEXTAUTH_URL}
      - OPENAI_API_KEY=${OPENAI_API_KEY}
      - RAG_SERVICE_URL=http://rag-service:8000
    depends_on:
      - rag-service

  rag-service:
    build: ./rag-service
    ports:
      - "8000:8000"
    environment:
      - OPENAI_API_KEY=${OPENAI_API_KEY}
      - JWT_SECRET_KEY=${JWT_SECRET_KEY}
      - QDRANT_HOST=qdrant
      - NEXTJS_APP_URL=${NEXTJS_APP_URL}
    depends_on:
      - qdrant

  qdrant:
    image: qdrant/qdrant
    ports:
      - "6333:6333"
    volumes:
      - qdrant_data:/qdrant/storage

volumes:
  qdrant_data:

Option 2: Separate Deployments

• Frontend: Deploy to Vercel, Netlify, or any Node.js hosting
• Backend: Deploy to Railway, Render, or any Python hosting
• Database: Use MongoDB Atlas and Qdrant Cloud

🔧 Configuration

MongoDB Setup

Local MongoDB:

# macOS with Homebrew
brew tap mongodb/brew
brew install mongodb-community
brew services start mongodb/brew/mongodb-community

# Ubuntu/Debian
sudo apt-get install mongodb
sudo systemctl start mongod

MongoDB Atlas (Recommended for production):

1. Create account at MongoDB Atlas
2. Create a cluster
3. Get connection string
4. Update MONGODB_URI in environment variables

API Keys

1. OpenAI API Key: Get from OpenAI Platform
2. OpenRouter API Key: Get from OpenRouter (for chat completions)
3. Google OAuth: Set up at Google Cloud Console

📊 How It Works

1. User Authentication

• Users sign up/sign in via NextAuth
• JWT tokens are generated for API access
• Sessions are managed securely

2. Chatbot Creation

• Users create chatbots with custom configurations
• Each chatbot gets a unique ID and embeddable widget code
• Domain restrictions can be set for security

3. Document Upload & Processing

• Users upload documents (PDF, TXT, DOCX) via the frontend
• Documents are processed and chunked by the RAG service
• Text chunks are converted to embeddings using OpenAI
• Embeddings are stored in Qdrant with user isolation

4. Chat Interaction

• Users interact with chatbots via the embeddable widget
• Messages are sent to the chat API
• RAG service searches for relevant document chunks
• Context is combined with user message and sent to LLM
• Response is returned and stored for analytics

5. Analytics & Monitoring

• All interactions are logged for analytics
• Real-time metrics are displayed in the dashboard
• User engagement and chatbot performance are tracked

🛠️ Development

Adding New Features

1. Frontend Changes:

   • Add components in front-end/app/components/
   • Create API routes in front-end/app/api/
   • Update pages in front-end/app/

2. Backend Changes:

   • Add services in rag-service/services/
   • Update models in rag-service/models/
   • Add API endpoints in rag-service/main.py

Testing

Frontend Testing:

cd front-end
npm test

Backend Testing:

cd rag-service
python -m pytest

Integration Testing:

# Test document upload
curl -X POST "http://localhost:8000/documents/upload" \
  -H "Authorization: Bearer <token>" \
  -F "file=@test.pdf" \
  -F "chatbot_id=test_chatbot"

# Test chat with RAG
curl -X POST "http://localhost:8000/chat/context" \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer <token>" \
  -d '{"query": "test query", "chatbot_id": "test_chatbot"}'

🔒 Security Features

• JWT Authentication: Secure API access
• User Isolation: Complete data separation
• Domain Restrictions: Control where widgets can be embedded
• File Validation: Secure document uploads
• Rate Limiting: Prevent abuse
• HTTPS Support: Encrypted communication

📈 Monitoring & Analytics

• Real-time Metrics: User engagement, conversation counts
• Performance Monitoring: Response times, error rates
• Usage Analytics: Token usage, document processing stats
• Health Checks: Service availability monitoring

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📝 License

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

🆘 Support

• Documentation: Check the individual README files in front-end/ and rag-service/
• Issues: Report bugs and request features via GitHub Issues
• Discussions: Join community discussions for help and ideas

---

Built with ❤️ using Next.js, FastAPI, MongoDB, Qdrant, and OpenAI

Live Demo | Documentation | API Reference