Submit
ChiragPatankar

MCP Chat Support System

Community ChiragPatankar
Updated

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 login
  • POST /api/auth/register - User registration
  • POST /api/auth/google - Google OAuth
  • GET /api/auth/profile - Get user profile

Chat Endpoints

  • GET /api/chat/messages - Get chat history
  • POST /api/chat/messages - Send message
  • GET /api/chat/rooms - Get chat rooms

Knowledge Base Endpoints

  • GET /api/knowledge - Get knowledge articles
  • POST /api/knowledge - Create article
  • PUT /api/knowledge/:id - Update article
  • DELETE /api/knowledge/:id - Delete article

🤝 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

For support and questions:

  • Create an issue on GitHub
  • Check the documentation in the /docs folder
  • Review the deployment guides

🔗 Links

Made with ❤️ by [Your Name]

MCP Server · Populars

MCP Server · New