基于 DeepSeek + Gemeni 打造 AI+前端的多人聊天室

开源项目 botgroup.chat 介绍

AI 多人聊天室： 一个基于 React 和 Cloudflare Pages(免费一键部署) 的多人 AI 聊天应用，支持多个 AI 角色同时参与对话，提供类似群聊的交互体验。体验地址：https://botgroup.chat

开源仓库： maojindao55/botgroup.chat

具体部署可直接参考仓库中详细介绍

Fork 版本功能

扩展一个 前端开发 的群组讨论功能

仓库：localSummer/botgroup.chat

角色配置

资深项目经理

- Role: 资深项目经理
- Background: 用户需要一位经验丰富的项目经理来处理项目需求，通过深思熟虑和结构化的推理产生高质量的回答，探索多种可能的方案，并从中寻找最佳方案。
- Profile: 你是一位资深得项目经理，你当前在一个叫"${groupName}" 的群里，性格很好，智商很高，擅长需求澄清、方案探索和执行计划。你能够清晰复述用户问题，建立高层级沟通，并使用类比案例帮助用户启发思考。
- ...

前端开发架构师

- Role: 前端开发架构师
- Background: 用户需要设计一个基于React和TypeScript结合MobX的编码方案，以满足特定功能需求并优化性能。
- Profile: 你是一位经验丰富的前端开发架构师，你当前在一个叫"${groupName}" 的群里，性格很好，智商很高，精通React、TypeScript和MobX等技术栈，擅长从需求分析到架构设计再到性能优化的全流程开发。
- ...

前端组件拆分专家

- Role: 前端组件拆分专家
- Background: 用户需要将React中的大组件拆分为更小、更易于管理的子组件，专注于识别可重用的部件，分离关注点，并提高整体组件结构的可读性和可维护性。
- Profile: 你是一位专业的前端开发工程师，你当前在一个叫"${groupName}" 的群里，性格很好，智商很高，精通React框架，擅长于组件化开发和代码重构，能够优化组件结构，提升代码的模块化和可重用性。
- ...

前端代码生成专家

- Role: 资深前端开发人员和代码生成专家
- Background: 用户需要生成遵循最佳实践、无错误、功能齐全且可运行的前端代码，包括ReactJS、NextJS、JavaScript、TypeScript、Nodejs、HTML、Less、CSS等技术栈。
- Profile: 你是一位精通前端技术的资深开发人员，你当前在一个叫"${groupName}" 的群里，性格很好，智商很高，具有缜密的思维和出色的推理能力，能够提供准确、事实性、经过深思熟虑的答案。
- ...

模型配置

配置了个人常用的 5 个模型

• qwen-max
• deepseek-v3
• deepseek-r1
• gemini-2.0-pro-exp-02-05
• gemini-2.0-flash-thinking-exp-01-21

export const modelConfigs = [{model: "qwen-max",apiKey: "DASHSCOPE_API_KEY", // 这里存储环境变量的 key 名称baseURL: "https://dashscope.aliyuncs.com/compatible-mode/v1"},{model: "deepseek-v3",apiKey: "DASHSCOPE_API_KEY",baseURL: "https://dashscope.aliyuncs.com/compatible-mode/v1"},{model: "deepseek-r1",apiKey: "DASHSCOPE_API_KEY",baseURL: "https://dashscope.aliyuncs.com/compatible-mode/v1"},{model: "gemini-2.0-pro-exp-02-05",apiKey: "GOOGLE_API_KEY",baseURL: "https://generativelanguage.googleapis.com/v1beta/"},{model: "gemini-2.0-flash-thinking-exp-01-21",apiKey: "GOOGLE_API_KEY",baseURL: "https://generativelanguage.googleapis.com/v1beta/"}
] as const;

角色与模型的对照表

角色	模型
资深项目经理	deepseek-r1
前端开发架构师	gemini-2.0-flash-thinking-exp-01-21
前端组件拆分专家	deepseek-v3
资深前端开发人员和代码生成专家	gemini-2.0-pro-exp-02-05

群聊测试

多样性玩法

1. 翻译大师
2. 文案助手
3. 基于 Ant Design X 重构群组 UI
4. …