# Customer Agent SaaS - Complete Setup Guide

## 🚀 Quick Start (Development)

### Prerequisites
- Node.js 18+
- Python 3.11+
- PostgreSQL
- OpenAI API Key

### 1. Backend Setup
```bash
cd server
pip install -r requirements.txt
cp .env.example .env
# Edit .env with your credentials
uvicorn app.main:app --reload --port 8000
```

### 2. Frontend Setup
```bash
cd client
npm install
npm run dev
```

### 3. Database Setup
```sql
CREATE DATABASE customeragent;
```

## 🔧 Configuration

### Environment Variables (.env)
```env
DATABASE_URL=postgresql://user:password@localhost/customeragent
SECRET_KEY=your-secret-key-here
OPENAI_API_KEY=sk-your-openai-key
GOOGLE_CLIENT_ID=your-google-oauth-client-id
GOOGLE_CLIENT_SECRET=your-google-oauth-secret
SMTP_HOST=smtp.gmail.com
SMTP_PORT=587
SMTP_USER=your-email@gmail.com
SMTP_PASSWORD=your-app-password
```

## 📋 Features Implemented

### ✅ Core Features
- [x] JWT Authentication with httpOnly cookies
- [x] Google OAuth integration
- [x] Website management dashboard
- [x] Script verification system
- [x] Sitemap-based content scraping
- [x] NumPy-optimized vector operations
- [x] FAISS vector database
- [x] AI-powered chat responses
- [x] Agentic owner contact system
- [x] Email notifications
- [x] Real-time WebSocket chat
- [x] Embeddable widget
- [x] React Query for state management
- [x] Framer Motion animations
- [x] Tailwind CSS styling

### 🎯 Workflow
1. **User Registration** → Secure JWT auth
2. **Add Website** → Domain verification
3. **Install Script** → Verification check
4. **Fetch Content** → Sitemap scraping
5. **Process AI** → Vector embeddings
6. **Live Chat** → AI responses + owner escalation

## 🌐 Deployment

### Frontend (Vercel/Netlify)
```bash
npm run build
# Deploy dist/ folder
```

### Backend (Render/Railway)
```bash
# Use start.sh as entry point
./start.sh
```

### Environment Variables (Production)
```env
DATABASE_URL=postgresql://...
SECRET_KEY=production-secret-key
OPENAI_API_KEY=sk-...
FRONTEND_URL=https://your-domain.com
BACKEND_URL=https://api.your-domain.com
```

## 🔗 API Endpoints

### Authentication
- `POST /auth/register` - User registration
- `POST /auth/login` - User login
- `POST /auth/logout` - User logout
- `GET /auth/me` - Current user info

### Websites
- `GET /websites/` - List user websites
- `POST /websites/` - Add new website
- `POST /scrape/{id}/verify-script` - Verify widget installation
- `POST /websites/{id}/fetch-content` - Scrape content
- `POST /scrape/{id}/process-content` - Create embeddings

### Chat & Actions
- `POST /chat/` - Send chat message
- `POST /actions/contact-owner` - Contact website owner
- `WS /ws/{website_id}` - WebSocket chat

## 🎨 Widget Integration

Add to any website:
```html
<script src="https://your-domain.com/static/widget.js" data-website-id="123"></script>
```

## 🔒 Security Features

- httpOnly JWT cookies (XSS protection)
- CORS with specific origins
- Password hashing (bcrypt)
- SQL injection protection (SQLAlchemy)
- Input validation (Pydantic)
- Secure cookie settings

## 📊 Tech Stack Summary

**Frontend**: React + Vite + Tailwind + Framer Motion + React Query
**Backend**: FastAPI + NumPy + FAISS + PostgreSQL + WebSockets
**AI**: OpenAI GPT-3.5 + Vector Similarity Search
**Auth**: JWT + Google OAuth + httpOnly Cookies
**Deployment**: Vercel + Render/Railway

## 🎯 Production Checklist

- [ ] Update CORS origins in main.py
- [ ] Set strong SECRET_KEY
- [ ] Configure production database
- [ ] Set up SMTP for emails
- [ ] Configure Google OAuth
- [ ] Test widget on live site
- [ ] Monitor vector database performance
- [ ] Set up error tracking

## 🚀 Next Steps

1. **Scale Vector DB**: Implement ChromaDB for larger datasets
2. **Analytics**: Add chat analytics dashboard
3. **Multi-language**: Support multiple languages
4. **Custom Branding**: White-label widget options
5. **Advanced AI**: Fine-tune models on website content