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

    superglue-ai

    superglue

    superglue integrates & orchestrates APIs from natural language. Agents use it to build deterministic workflows across apps, APIs and databases. Humans use it to generate insights, build automations and manage data.

    Community superglue-ai
    superglue-ai

    docs

    superglue integrates & orchestrates APIs from natural language. Agents use it to build deterministic workflows across apps, APIs and databases. Humans use it to generate insights, build automations and manage data.

    Community superglue-ai
    KemingHe

    Python Dependency Manager Companion MCP Server

    Self-updating MCP server to cross-reference latest official pip, poetry, uv, and conda docs

    Community KemingHe
    apache

    ECharts MCP

    Apache ECharts MCP Server

    Community apache
    formulahendry

    Spec-Driven Development MCP Server

    Spec-Driven Development MCP Server, no just Vibe Coding

    Community formulahendry