MCP

🚀 MCP Chat Support System

A comprehensive chat support system with a React frontend and a Node.js backend, offering real-time messaging, knowledge base management, and a multi-tenant architecture.

🚀 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

Frontend (React + TypeScript)

• Modern UI/UX: Responsive design optimized for mobile devices.
• Real-time Chat: Live messaging based on WebSocket technology.
• Authentication: Integrated with Google OAuth for user authentication.
• Demo Mode: An interactive demo with simulated features.
• Payment Integration: Supports Stripe payment processing.
• Video Calls: Enables WebRTC video conferencing.
• Knowledge Base: A searchable documentation system.
• Admin Dashboard: A multi-tenant management interface.
• Offline Support: Utilizes service workers for offline functionality.

Backend (Node.js + TypeScript)

• RESTful API: An Express.js server built with TypeScript.
• WebSocket Server: Facilitates real-time communication.
• Database: Uses SQLite with TypeORM for data storage.
• Authentication: Employs JWT token-based authentication.
• Multi-tenancy: Manages tenant isolation and related operations.
• File Upload: Securely handles file uploads.
• Analytics: Tracks usage and generates reports.
• Widget System: Provides 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 as the build tool
• Tailwind CSS for styling
• React Router for navigation
• Socket.io Client for real-time features
• Stripe for payment processing
• WebRTC for video calls

Backend

• Node.js with TypeScript
• Express.js framework
• Socket.io for the WebSocket server
• SQLite database with TypeORM
• JWT for authentication
• Multer for file uploads
• Cors for handling cross-origin requests

💻 Features Overview

Chat Interface

• Real-time messaging with typing indicators.
• Allows file sharing and image uploads.
• Supports message history and search.
• Provides read receipts and delivery status.

Knowledge Base

• A searchable documentation system.
• Organized by categories.
• Supports rich text editing.
• Enables version control.

Admin Dashboard

• Manages multiple tenants.
• Analyzes user data and generates reports.
• Configures system settings.
• Customizes widgets.

Widget System

• Offers embeddable chat widgets.
• Allows for customizable appearance.
• Supports multiple languages.
• Is responsive on mobile devices.

🔧 Development

Code Style

• Uses TypeScript for type safety.
• Employs ESLint for code linting.
• Utilizes Prettier for code formatting.
• Implements 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:

Quick Steps:

1. Get a free Google Gemini API key from Google AI Studio.
2. Create a new Space on Hugging Face Spaces.
3. Choose "Docker" as the SDK.
4. Connect your GitHub repository.
5. Set the GEMINI_API_KEY environment variable.
6. 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:

Quick Steps:

1. Create a new Space on Hugging Face Spaces.
2. Choose "Docker" as the SDK.
3. Connect your GitHub repository.
4. Set the JWT_SECRET environment variable.
5. 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

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

• Live Demo
• API Documentation
• Deployment Guide

Made with ❤️ by [Your Name]