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] 用心打造 ❤️