AI Customer Support Chatbot (SaaS Ready)

A professional AI customer support chatbot built with React frontend and Node.js backend (Gemini API). Designed for SaaS productization and multi-user support.

Features

• Clean minimal ChatGPT-like UI
• Animated background (outside chat container)
• AI response formatting (short answer, headings, bullets)
• Chat memory persisted in localStorage (last 20 messages)
• Authentication (register/login with JWT)
• Multi-user chat history
• Typing simulation effect
• Error handling fallback

Use case

AI Customer Support Chatbot for Businesses:

• Answer customer questions
• Handle FAQs
• Assist like a support agent

Project structure

• frontend/ - React app

  • src/components/ChatContainer.jsx
  • src/components/MessageBubble.jsx
  • src/components/ChatInput.jsx
  • src/components/TypingIndicator.jsx
  • src/components/WelcomeScreen.jsx
  • styles/chatbot.css

• backend/ - Node/Express

  • server.js
  • routes/chatRoutes.js
  • routes/authRoutes.js
  • services/geminiService.js
  • services/authService.js
  • data/users.json (created dynamically)

Installation

Backend

cd backend
npm install

Set environment variables in .env:

GEMINI_API_KEY=your_gemini_key
JWT_SECRET=your_secret

Run backend:

npm run dev

Frontend

cd frontend
npm install
npm run dev

API endpoints

• POST /auth/register - { email, password }
• POST /auth/login - { email, password }
• POST /api/chat - { message, history }

Notes

• Chat history is saved per user in localStorage using key saas_chat_history_<email>.
• authRoutes stores users in backend/data/users.json.

Demo suggestions

• "What services do you offer?"
• "How can I contact support?"

Additional improvements

1. Add MongoDB integration.
2. Add paid plan support and billing.
3. Add admin dashboard for analytics.
4. Add proper tests and data validation.