❤️ 如果你也关注 AI 的发展现状，且对 AI 应用开发感兴趣，我会每日分享大模型与 AI 领域的开源项目和应用，提供运行实例和实用教程，帮助你快速上手AI技术！

🥦 AI 在线答疑 -> 智能检索历史文章和开源项目 -> 丰富的 AI 工具库 -> 每日更新 -> 尽在微信公众号 -> 搜一搜：蚝油菜花 🥦

💥 "还在和单个AI尬聊？20个智能体组团怼你才是真未来！"

大家好，我是蚝油菜花。当别人还在小心翼翼调教单个ChatGPT时，硬核玩家已经开始训练AI辩论队了！你是否遇到过：

• 👉 想比较不同AI模型的回答，要反复切换多个网页
• 👉 测试知识边界时，单个AI的认知局限让人抓狂
• 👉 调试对话逻辑时，缺乏多视角反馈就像闭门造车...

今天要安利的 Botgroup.chat ，正在GitHub掀起AI社交新浪潮！这个开源神器能让你：

• ✅ 创建AI版微信群：千问/混元/豆包多模型同台竞技
• ✅ 自定义角色人格：打造毒舌杠精、学术大佬等专属AI
• ✅ 实时流式互怼：看不同AI为数学题吵得不可开交
• ✅ 禁言玩控场：随时让话痨AI闭嘴，掌握对话主导权

已有开发者用它搭建AI评审团——产品需求丢进群聊，立刻获得多维度评估报告。想用React+Cloudflare搭建自己的智能体社群吗？三分钟部署教程马上开始！

🚀 快速阅读

Botgroup.chat 是一款开源的 AI 聊天应用，支持多个 AI 角色同时参与对话。

1. 核心功能：支持多人 AI 群聊、自定义 AI 角色、多种模型支持、实时互动和群组管理功能。
2. 技术原理：基于 React 框架开发前端，使用 Cloudflare Pages 进行后端部署，支持多种 AI 模型集成和流式响应。

Botgroup.chat 是什么

Botgroup.chat 是一款基于 React 和 Cloudflare Pages 的开源 AI 聊天应用，支持多个 AI 角色同时参与对话，提供类似群聊的交互体验。用户可以自定义 AI 角色的性格和模型，可以对特定 AI 进行禁言操作。创新的聊天方式让用户能体验与多个 AI 一起交流，类似于在一个虚拟的社交群组中。

Botgroup.chat 不仅支持多种 AI 模型，如千问、混元、豆包等，还提供了丰富的功能，如 Markdown 格式支持、数学公式显示等，适合娱乐、教育或测试场景。

Botgroup.chat 的演示截图

Botgroup.chat 的主要功能

• 多人 AI 群聊：支持多个 AI 角色同时参与对话，模拟真实的群聊场景。用户可以在聊天界面中与多个 AI 角色进行实时互动。
• 自定义 AI 角色：用户可以定义 AI 角色的名称、性格、模型及头像，打造个性化的智能体。
• 多种模型支持：兼容多种 AI 模型，如千问、混元、豆包等，满足不同用户的需求。用户可以根据需要切换不同的模型。
• 一键部署：通过 Cloudflare Pages 实现快速部署，无需复杂配置。用户可以轻松将项目部署到自己的服务器上。
• 实时互动：提供流畅的对话体验，适合娱乐、教育或测试场景。用户可以连续对话，观察不同角色的响应风格。
• 群组管理功能：支持群组管理，包括添加、删除角色，以及禁言功能。
• 支持 Markdown 格式：用户可以在聊天中使用 Markdown 格式，方便排版和展示。
• 支持数学公式显示：支持 KaTeX 数学公式显示，适合学术讨论。
• 开源代码：项目代码在 GitHub 上开放，开发者可以自由修改和扩展功能。

Botgroup.chat 的技术原理

• 前端开发：Botgroup.chat 的前端基于 React 框架开发。在 Botgroup.chat 中，React 负责渲染聊天界面、处理用户输入以及显示 AI 角色的回复。
• 后端部署：后端部署使用了 Cloudflare Pages。用户可以通过 GitHub 将项目代码 Fork 到自己的仓库，然后通过 Cloudflare Dashboard 进行配置和部署。
• AI 模型集成：Botgroup.chat 支持多种 AI 模型，包括但不限于千问、混元、豆包等。模型通过 API 调用与应用进行交互。用户可以在配置文件中指定不同角色所使用的模型，通过环境变量来管理 API Key 和模型的 URL。
• 实时响应：应用实现了流式响应，即用户在发送消息后，AI 的回复会以类似打字机的效果实时显示。通过调用 AI 模型的流式 API 实现的。在后端，使用了 OpenAIStream 和 StreamingTextResponse 等技术来处理流式数据。
• 上下文记忆：为了使对话更加连贯，Botgroup.chat 实现了基于向量数据库的上下文记忆系统。使用了 Pinecone 和 OpenAI 的嵌入式模型来存储和检索对话历史。当用户发送新消息时，系统会根据上下文检索相关的对话历史，将其作为上下文信息传递给 AI 模型。
• 角色管理：用户可以自定义 AI 角色的名称、性格、模型和头像。角色的配置信息存储在项目的配置文件中。用户可以通过修改配置文件来添加或删除角色，重新部署应用以生效。

如何运行 Botgroup.chat

Cloudflare Pages 一键部署

1. Fork 项目到你的 GitHub 账号

点击Fork项目，将项目 Fork 到你的 GitHub 账号。

• Fork项目：https://github.com/maojindao55/botgroup.chat/fork

2. 登录 Cloudflare Dashboard

• 进入 Cloudflare Dashboard。
• Cloudflare Dashboard：https://dash.cloudflare.com/
• 在左侧导航栏中选择 Workers & Pages 页面。
• 点击 Create a application > Pages 按钮。
• 选择 Connect to Git，连接到你 Fork 的仓库。

3. 配置部署选项

• 选择你 Fork 的仓库。
• 设置以下构建配置：
  • Framework preset: None
  • Build command: npm run build
  • Build output directory: dist
• 设置环境变量（必须）：

  DASHSCOPE_API_KEY=xxx // 千问模型 KEY  
  HUNYUAN_API_KEY=xxx // 混元模型 KEY  
  ARK_API_KEY=xxx // 豆包模型 KEY
  
          
  
            
          
          
          
  
            
  
            AI 代码解读
          
        
        

4. 点击 "Save and Deploy"

• Cloudflare Pages 会自动构建和部署你的应用。
• 部署完成后，可以通过分配的域名访问你的应用。

注意：首次部署后，后续的代码更新会自动触发重新部署。

自定义配置（可选）

1. 配置模型和 AI 角色

在 config/aiCharacters.ts 文件中，可以自定义模型和 AI 角色。

配置模型

{
   
  model: string;     // 模型标识，按照服务方实际模型名称配置
  apiKey: string;    // 模型的 API 密钥
  baseURL: string;   // 模型的 baseURL
}

        

          
        
        
        

          

          AI 代码解读
        
      
      

配置 AI 角色

{
   
  id: string;        // 角色唯一标识
  name: string;      // 角色显示名称
  personality: string; // 角色性格描述
  model: string;     // 使用的模型，从 modelConfigs 中选择
  avatar?: string;   // 可选的头像 URL
  custom_prompt?: string;  // 可选的自定义提示词
}

        

          
        
        
        

          

          AI 代码解读
        
      
      

示例配置：

{
   
  id: "assistant1",
  name: "小助手",
  personality: "友善、乐于助人的 AI 助手",
  model: "qwen", // 注意：豆包的配置需要填写火山引擎的接入点
  avatar: "/avatars/assistant.png",
  custom_prompt: "你是一个热心的助手，擅长解答各类问题。"
}

        

          
        
        
        

          

          AI 代码解读
        
      
      

2. 配置群组

在 config/groups.ts 文件中，可以配置群组信息。

{
   
  id: string;        // 群组唯一标识
  name: string;      // 群组名称
  description: string; // 群组描述
  members: string[]; // 群组成员 ID 数组
}

        

          
        
        
        

          

          AI 代码解读
        
      
      

示例配置：

{
   
  id: "group1",
  name: "AI 交流群",
  description: "AI 角色们的日常交流群",
  members: ["ai1", "ai2", "ai3"] // 成员 ID 需要与 aiCharacters.ts 中的 id 对应
}

        

          
        
        
        

          

          AI 代码解读
        
      
      

注意事项：

• members 数组中的成员 ID 必须在 aiCharacters.ts 中已定义。
• 每个群组必须至少包含两个成员。
• 群组 ID 在系统中必须唯一。

本地环境启动与调试

由于本项目后端 server 使用的是 Cloudflare Pages Function（本质是 Worker），因此本地部署需要安装 wrangler。

1. 安装 wrangler

运行以下命令安装 wrangler：

npm install wrangler --save-dev

        

          
        
        
        

          

          AI 代码解读
        
      
      

2. 使用启动脚本

运行以下命令启动本地开发环境：

sh devrun.sh

        

          
        
        
        

          

          AI 代码解读
        
      
      

本地默认预览地址是：http://127.0.0.1:8788

资源

• GitHub 仓库：https://github.com/maojindao55/botgroup.chat

❤️ 如果你也关注 AI 的发展现状，且对 AI 应用开发感兴趣，我会每日分享大模型与 AI 领域的开源项目和应用，提供运行实例和实用教程，帮助你快速上手AI技术！

🥦 AI 在线答疑 -> 智能检索历史文章和开源项目 -> 丰富的 AI 工具库 -> 每日更新 -> 尽在微信公众号 -> 搜一搜：蚝油菜花 🥦