MCP

🚀 MCP聊天支持系統

MCP聊天支持系統是一個功能全面的聊天支持解決方案，前端採用React構建，後端基於Node.js。它具備實時消息傳遞、知識庫管理和多租戶架構等特性，為用戶提供高效、便捷的聊天支持體驗。

🚀 快速開始

前提條件

• Node.js 18+
• npm 或 yarn
• Git

前端設置

# 安裝依賴
npm install

# 啟動開發服務器
npm run dev

# 構建生產版本
npm run build

後端設置

# 進入服務器目錄
cd server

# 安裝依賴
npm install

# 複製環境變量
cp env.example .env

# 啟動開發服務器
npm run dev

# 構建生產版本
npm run build

環境變量

在服務器目錄下創建一個 .env 文件：

# 服務器配置
PORT=3001
NODE_ENV=development

# 數據庫
DATABASE_URL=sqlite:./database.sqlite

# JWT密鑰
JWT_SECRET=your-jwt-secret-here

# Google OAuth
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret

# Stripe（用於支付）
STRIPE_SECRET_KEY=your-stripe-secret-key
STRIPE_PUBLISHABLE_KEY=your-stripe-publishable-key

# 文件上傳
UPLOAD_DIR=uploads/
MAX_FILE_SIZE=5242880

✨ 主要特性

前端（React + TypeScript）

• 現代的用戶界面/用戶體驗：響應式設計，針對移動設備進行優化
• 實時聊天：基於WebSocket的實時消息傳遞
• 身份驗證：集成Google OAuth
• 演示模式：具有模擬功能的交互式演示
• 支付集成：支持Stripe支付處理
• 視頻通話：基於WebRTC的視頻會議
• 知識庫：可搜索的文檔系統
• 管理儀表盤：多租戶管理界面
• 離線支持：使用Service Worker實現離線功能

後端（Node.js + TypeScript）

• RESTful API：基於Express.js服務器，使用TypeScript編寫
• WebSocket服務器：實現實時通信
• 數據庫：使用SQLite和TypeORM
• 身份驗證：基於JWT令牌的認證
• 多租戶：租戶隔離和管理
• 文件上傳：安全的文件處理
• 分析：使用情況跟蹤和報告
• 小部件系統：可嵌入的聊天小部件

📦 安裝指南

前端設置

# 安裝依賴
npm install

# 啟動開發服務器
npm run dev

# 構建生產版本
npm run build

後端設置

# 進入服務器目錄
cd server

# 安裝依賴
npm install

# 複製環境變量
cp env.example .env

# 啟動開發服務器
npm run dev

# 構建生產版本
npm run build

💻 使用示例

基礎用法

前端啟動開發服務器：

npm run dev

後端啟動開發服務器：

cd server
npm run dev

📚 詳細文檔

項目結構

project/
├── src/                    # React前端
│   ├── components/         # 可複用的UI組件
│   ├── pages/             # 頁面組件
│   ├── contexts/          # React上下文
│   ├── hooks/             # 自定義React鉤子
│   ├── lib/               # 實用函數
│   └── types/             # TypeScript類型定義
├── server/                # Node.js後端
│   ├── src/
│   │   ├── routes/        # API路由處理程序
│   │   ├── middleware/    # Express中間件
│   │   ├── services/      # 業務邏輯
│   │   └── db/            # 數據庫模型
│   ├── package.json
│   └── tsconfig.json
├── gemini-mcp-server/     # Gemini MCP集成
├── public/                # 靜態資源
└── docs/                  # 文檔

技術棧

前端

• React 18 搭配TypeScript
• Vite 作為構建工具
• Tailwind CSS 用於樣式設計
• React Router 用於導航
• Socket.io Client 實現實時功能
• Stripe 用於支付處理
• WebRTC 用於視頻通話

後端

• Node.js 搭配TypeScript
• Express.js 框架
• Socket.io 作為WebSocket服務器
• SQLite 數據庫搭配TypeORM
• JWT 用於身份驗證
• Multer 用於文件上傳
• Cors 處理跨域請求

功能概述

聊天界面

• 帶有輸入提示的實時消息傳遞
• 文件共享和圖片上傳
• 消息歷史記錄和搜索功能
• 已讀回執和送達狀態

知識庫

• 可搜索的文檔
• 分類組織
• 富文本編輯
• 版本控制

管理儀表盤

• 多租戶管理
• 用戶分析和報告
• 系統配置
• 小部件定製

小部件系統

• 可嵌入的聊天小部件
• 可定製外觀
• 多語言支持
• 移動響應式設計

開發

代碼風格

• 使用TypeScript確保類型安全
• 使用ESLint進行代碼檢查
• 使用Prettier進行代碼格式化
• 使用Husky設置git鉤子

測試

# 運行前端測試
npm test

# 運行後端測試
cd server && npm test

數據庫遷移

cd server
npm run migration:generate
npm run migration:run

部署

前端（Vercel/Netlify）

npm run build
# 部署dist/文件夾

後端（Render/Railway）

cd server
npm run build
npm start

Gemini MCP服務器（Hugging Face Spaces）

Gemini MCP服務器可以免費部署到Hugging Face Spaces：

📖 詳細部署說明，請參閱：

快速步驟：

1. 從 Google AI Studio 獲取免費的Google Gemini API密鑰
2. 在 Hugging Face Spaces 創建一個新的Space
3. 選擇 “Docker” 作為SDK
4. 連接你的GitHub倉庫
5. 設置 GEMINI_API_KEY 環境變量
6. 部署！

成本： $0（Hugging Face Spaces和Google Gemini API都提供免費套餐）

Node.js後端（Hugging Face Spaces）

Node.js/Express後端也可以部署到Hugging Face Spaces：

📖 詳細部署說明，請參閱：

快速步驟：

1. 在 Hugging Face Spaces 創建一個新的Space
2. 選擇 “Docker” 作為SDK
3. 連接你的GitHub倉庫
4. 設置 JWT_SECRET 環境變量
5. 部署！

成本： $0（Hugging Face Spaces提供免費套餐）

Docker部署

# 使用Docker Compose構建並運行
docker-compose up -d

API文檔

身份驗證端點

• POST /api/auth/login - 用戶登錄
• POST /api/auth/register - 用戶註冊
• POST /api/auth/google - Google OAuth認證
• GET /api/auth/profile - 獲取用戶資料

聊天端點

• GET /api/chat/messages - 獲取聊天曆史記錄
• POST /api/chat/messages - 發送消息
• GET /api/chat/rooms - 獲取聊天房間

知識庫端點

• GET /api/knowledge - 獲取知識文章
• POST /api/knowledge - 創建文章
• PUT /api/knowledge/:id - 更新文章
• DELETE /api/knowledge/:id - 刪除文章

🔧 技術細節

前端

• 使用React 18和TypeScript構建用戶界面，確保代碼的可維護性和類型安全。
• Vite作為構建工具，提供快速的開發和構建體驗。
• Tailwind CSS用於樣式設計，使界面具有良好的響應式佈局。
• React Router實現頁面導航，提供流暢的用戶體驗。
• Socket.io Client實現實時消息傳遞，讓用戶能夠實時交流。
• Stripe集成實現支付功能，保障交易安全。
• WebRTC支持視頻通話，提供更豐富的溝通方式。

後端

• Express.js作為服務器框架，結合TypeScript編寫RESTful API，提高代碼的可維護性。
• Socket.io服務器實現實時通信，確保消息的即時傳遞。
• SQLite數據庫和TypeORM實現數據存儲和管理，方便開發和部署。
• JWT令牌認證保障用戶身份安全。
• 多租戶架構實現租戶隔離和管理，滿足不同用戶的需求。
• Multer處理文件上傳，確保文件的安全存儲。
• 分析功能跟蹤用戶使用情況，為業務決策提供數據支持。
• 小部件系統可嵌入到其他網站，擴大應用範圍。

📄 許可證

本項目採用MIT許可證 - 詳情請參閱 LICENSE 文件。

🆘 支持

如需支持和提問：

• 在GitHub上創建一個問題
• 查看 /docs 文件夾中的文檔
• 參考部署指南

🔗 鏈接

• 在線演示
• API文檔
• 部署指南

由 [Your Name] 用心打造 ❤️