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

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

Gemini MCP Server (Hugging Face Spaces)

The Gemini MCP Server can be deployed to Hugging Face Spaces for free:

📖 For detailed deployment instructions, see: gemini-mcp-server/README_HF_SPACES.md

Quick Steps:

Get a free Google Gemini API key from Google AI Studio
Create a new Space on Hugging Face Spaces
Choose "Docker" as the SDK
Connect your GitHub repository
Set the GEMINI_API_KEY environment variable
Deploy!

Cost: $0 (free tier available for both Hugging Face Spaces and Google Gemini API)

Node.js Backend (Hugging Face Spaces)

The Node.js/Express backend can also be deployed to Hugging Face Spaces:

📖 For detailed deployment instructions, see: server/README_HF_SPACES.md

Quick Steps:

Create a new Space on Hugging Face Spaces
Choose "Docker" as the SDK
Connect your GitHub repository
Set the JWT_SECRET environment variable
Deploy!

Cost: $0 (free tier available for Hugging Face Spaces)

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

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

Made with ❤️ by [Your Name]

This server cannot be installed

security - not tested

license - not found

quality - not tested

How are these scores calculated?

remote-capable server

The server can be hosted and run remotely because it primarily relies on remote services or has no dependency on the local environment.

A comprehensive customer support platform featuring real-time messaging, knowledge base management, and a multi-tenant architecture with both React frontend and Node.js backend.

Related MCP Servers

zendesk-mcp-server
reminia
-
security
A
license
-
quality
This server provides a comprehensive integration with Zendesk. Retrieving and managing tickets and comments. Ticket analyzes and response drafting. Access to help center articles as knowledge base.
Last updated -
21
Python
Apache 2.0
Node Omnibus MCP Server
bsmi021
A
security
A
license
A
quality
A comprehensive Model Context Protocol server that provides advanced Node.js development tooling for automating project creation, component generation, package management, and documentation with AI-powered assistance.
Last updated -
7
4
JavaScript
MIT License
CouchDB MCP Server
robertoamoreno
A
security
F
license
A
quality
A TypeScript-based MCP server that enables AI assistants to interact with CouchDB databases through a simple interface, providing tools for creating, reading, and querying databases and documents.
Last updated -
9
3
JavaScript
SmartCustomerSupportMCP
precariat365
-
security
A
license
-
quality
A MCP-based intelligent customer service system that provides smart Q\&A, human agent transfer, order inquiries, and product knowledge management.
Last updated -
2
Python
MIT License

View all related MCP servers