CX Chatbot - E-Commerce Customer Support AI

An intelligent, multilingual AI-powered chatbot for e-commerce customer support built with modern technologies.

🌟 Features

• 🤖 AI-Powered Conversations - Smart responses using Groq API
• 🌐 Multilingual Support - English and Urdu with RTL support
• 📦 Order Tracking - Real-time order status and tracking
• 🛍️ Product Information - Intelligent product search and recommendations
• ❓ FAQ Management - Instant answers with semantic search
• 🎨 Beautiful UI - Modern glassmorphism dark theme
• 📱 Mobile Responsive - Works perfectly on all devices

🏗️ Architecture

┌─────────────────┐      ┌─────────────────┐      ┌─────────────────┐
│    Frontend     │◄────►│     Backend     │◄────►│   Databases     │
│   (React/Vite)  │      │  (Bun/Hono.js)  │      │ (MongoDB/Redis) │
│  localhost:5173 │      │  localhost:3000 │      │                 │
└─────────────────┘      └─────────────────┘      └─────────────────┘
                                │
                                ▼
                         ┌──────────────┐
                         │  AI Service  │
                         │   (Groq)     │
                         └──────────────┘

🚀 Quick Start

Prerequisites

• Bun v1.0+ (for backend)
• Node.js v18+ (for frontend)
• Docker & Docker Compose

1. Start Infrastructure

docker-compose up -d mongodb redis

2. Start Backend

cd backend
bun install
bun run dev

Backend will run on http://localhost:3000

3. Start Frontend

cd frontend
npm install
npm run dev

Frontend will run on http://localhost:5173

📁 Project Structure

cx_app/
├── backend/                  # Bun.js + Hono.js API
│   ├── src/
│   │   ├── agents/          # AI agents (7 total)
│   │   ├── routes/          # API routes
│   │   ├── services/        # Business logic
│   │   ├── models/          # Mongoose models
│   │   └── config/          # Configuration
│   └── .env                 # Environment config
├── frontend/                 # React + Vite application
│   ├── src/
│   │   ├── components/      # React components
│   │   ├── services/        # API client
│   │   ├── store/           # Zustand state
│   │   └── styles/          # CSS design system
│   └── package.json
├── docker-compose.yml        # Infrastructure
└── IMPLEMENTATION_PLAN.md    # Detailed roadmap

🛠️ Tech Stack

Backend

• Runtime: Bun.js
• Framework: Hono.js
• Database: MongoDB + Mongoose
• Cache: Redis
• AI: Groq API
• Language: TypeScript

Frontend

• Framework: React 19
• Build Tool: Vite 7
• State: Zustand
• HTTP: Axios
• Icons: Lucide React
• Language: TypeScript

🔑 Environment Variables

Backend (.env)

PORT=3000
NODE_ENV=development
MONGODB_URI=mongodb://localhost:27017/cx_chatbot
REDIS_HOST=localhost
REDIS_PORT=6379
GROQ_API_KEY=your_key_here
CORS_ORIGIN=http://localhost:5173

🧪 Testing the Chatbot

Query	Expected Response
"Hello!"	Friendly greeting
"What are your shipping costs?"	FAQ answer
"Show me headphones"	Product list
"Track order ORD-001"	Order status
"میں اپنا آرڈر ٹریک کرنا چاہتا ہوں"	Urdu support

📖 API Documentation

See backend/curl.md for detailed API examples.

Key Endpoints

• POST /api/v1/chat/message - Send chat message
• GET /api/v1/products - List products
• GET /api/v1/orders/:id - Get order details
• GET /api/v1/faqs - List FAQs
• GET /health - Health check

---

Built with ❤️ using modern web technologies