MCP Chat Support System
A comprehensive chat support system with React frontend and Node.js backend, featuring real-time messaging, knowledge base management, and multi-tenant architecture.
๐ Features
Frontend (React + TypeScript)
- Modern UI/UX: Responsive design with mobile optimization
- Real-time Chat: WebSocket-based live messaging
- Authentication: Google OAuth integration
- Demo Mode: Interactive demo with simulated features
- Payment Integration: Stripe payment processing
- Video Calls: WebRTC video conferencing
- Knowledge Base: Searchable documentation system
- Admin Dashboard: Multi-tenant management interface
- Offline Support: Service worker for offline functionality
Backend (Node.js + TypeScript)
- RESTful API: Express.js server with TypeScript
- WebSocket Server: Real-time communication
- Database: SQLite with TypeORM
- Authentication: JWT token-based auth
- Multi-tenancy: Tenant isolation and management
- File Upload: Secure file handling
- Analytics: Usage tracking and reporting
- Widget System: Embeddable chat widgets
๐ Project Structure
project/
โโโ src/ # React frontend
โ โโโ components/ # Reusable UI components
โ โโโ pages/ # Page components
โ โโโ contexts/ # React contexts
โ โโโ hooks/ # Custom React hooks
โ โโโ lib/ # Utility functions
โ โโโ types/ # TypeScript type definitions
โโโ server/ # Node.js backend
โ โโโ src/
โ โ โโโ routes/ # API route handlers
โ โ โโโ middleware/ # Express middleware
โ โ โโโ services/ # Business logic
โ โ โโโ db/ # Database models
โ โโโ package.json
โ โโโ tsconfig.json
โโโ gemini-mcp-server/ # Gemini MCP integration
โโโ public/ # Static assets
โโโ docs/ # Documentation
๐ ๏ธ Tech Stack
Frontend
- React 18 with TypeScript
- Vite for build tooling
- Tailwind CSS for styling
- React Router for navigation
- Socket.io Client for real-time features
- Stripe for payments
- WebRTC for video calls
Backend
- Node.js with TypeScript
- Express.js framework
- Socket.io for WebSocket server
- SQLite database with TypeORM
- JWT for authentication
- Multer for file uploads
- Cors for cross-origin requests
๐ Quick Start
Prerequisites
- Node.js 18+
- npm or yarn
- Git
Frontend Setup
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build
Backend Setup
# Navigate to server directory
cd server
# Install dependencies
npm install
# Copy environment variables
cp env.example .env
# Start development server
npm run dev
# Build for production
npm run build
Environment Variables
Create a .env
file in the server directory:
# Server Configuration
PORT=3001
NODE_ENV=development
# Database
DATABASE_URL=sqlite:./database.sqlite
# JWT Secret
JWT_SECRET=your-jwt-secret-here
# Google OAuth
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
# Stripe (for payments)
STRIPE_SECRET_KEY=your-stripe-secret-key
STRIPE_PUBLISHABLE_KEY=your-stripe-publishable-key
# File Upload
UPLOAD_DIR=uploads/
MAX_FILE_SIZE=5242880
๐ฑ Features Overview
Chat Interface
- Real-time messaging with typing indicators
- File sharing and image uploads
- Message history and search
- Read receipts and delivery status
Knowledge Base
- Searchable documentation
- Category organization
- Rich text editing
- Version control
Admin Dashboard
- Multi-tenant management
- User analytics and reporting
- System configuration
- Widget customization
Widget System
- Embeddable chat widgets
- Customizable appearance
- Multi-language support
- Mobile responsive
๐ง Development
Code Style
- TypeScript for type safety
- ESLint for code linting
- Prettier for code formatting
- Husky for git hooks
Testing
# Run frontend tests
npm test
# Run backend tests
cd server && npm test
Database Migrations
cd server
npm run migration:generate
npm run migration:run
๐ Deployment
Frontend (Vercel/Netlify)
npm run build
# Deploy the dist/ folder
Backend (Render/Railway)
cd server
npm run build
npm start
Docker Deployment
# Build and run with Docker Compose
docker-compose up -d
๐ API Documentation
Authentication Endpoints
POST /api/auth/login
- User loginPOST /api/auth/register
- User registrationPOST /api/auth/google
- Google OAuthGET /api/auth/profile
- Get user profile
Chat Endpoints
GET /api/chat/messages
- Get chat historyPOST /api/chat/messages
- Send messageGET /api/chat/rooms
- Get chat rooms
Knowledge Base Endpoints
GET /api/knowledge
- Get knowledge articlesPOST /api/knowledge
- Create articlePUT /api/knowledge/:id
- Update articleDELETE /api/knowledge/:id
- Delete article
๐ค Contributing
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature
) - Commit your changes (
git commit -m 'Add amazing feature'
) - Push to the branch (
git push origin feature/amazing-feature
) - Open a Pull Request
๐ License
This project is licensed under the MIT License - see the LICENSE file for details.
๐ Support
For support and questions:
- Create an issue on GitHub
- Check the documentation in the
/docs
folder - Review the deployment guides
๐ Links
- Live Demo
- API Documentation
- Deployment Guide
Made with โค๏ธ by [Your Name]