Botgroup.chat: a group chat app with multiple AI characters interacting in real time

General Introduction

Botgroup.chat is an open source AI group chat application based on React and Cloudflare Pages, designed to provide users with an interactive experience similar to WeChat group chat. It supports multiple AI characters to participate in conversations at the same time, allowing users to interact with multiple intelligent bots in real time through simple configuration. The project is hosted on GitHub, created by developer maojindao55, and allows users to deploy to Cloudflare Pages for free with a single click. Whether you want to experience multiplayer AI chat or develop a customized chatbot, Botgroup.chat offers a flexible solution, and is currently available for experience (https://). Botgroup.chat is now available for users to try out ().

Function List

• Multiplayer AI Group ChatThe AI characters can participate in the conversation at the same time, simulating a real group chat scenario.
• Customizing AI Roles: Users can define the character's name, personality, model and avatar to create a personalized intelligent body.
• Multiple model supportCompatible with a variety of AI models such as Thousand Questions, Mixed Elements, and Doubtful Bags to meet different needs.
• One-Click Deployment: Rapid deployment without complex configuration through Cloudflare Pages.
• real time interaction: Provides a smooth conversational experience suitable for entertainment, educational or testing scenarios.
• open source: Open source on GitHub, developers are free to modify and extend the functionality.

Using Help

Botgroup.chat is an easy-to-use AI group chat tool that users can use by visiting the ready-to-use experience address or deploying it themselves. Below is a detailed how-to guide to help you get started quickly.

How to get started

Method 1: Direct experience

1. Open your browser and enter the official experience address:https://botgroup.chatThe
2. Once on the page, you will see a chat screen with multiple AI characters already configured by default.
3. Enter text in the input box and click send to interact with multiple AI characters.
4. To adjust roles or settings, check the page for tips or refer directly to the GitHub project documentation.

Methodology II: self-deployment

If you want to have your own instance of Botgroup.chat, you can complete the deployment by following these steps:

1. preliminary
   • Make sure you have a GitHub account and a Cloudflare account.
   • Install Git for local cloning of code (optional).
2. Get Code
   • Visit the GitHub project address:https://github.com/maojindao55/botgroup.chatThe
   • Click the "Fork" button in the upper right corner to copy the project to your GitHub repository.
   • Or just click the "Code" button to download the ZIP file and extract it locally.
3. Configuring Environment Variables
   • In the project root directory, find the README.md file for environment variable configuration instructions.
   • establish .env file, fill in the necessary API Key, for example:

     DASHSCOPE_API_KEY=xxx # Thousand Questions Model Key
     HUNYUAN_API_KEY=xxx # Hybrid model key
     ARK_API_KEY=xxx # Beanbag Model Key
     

   • Select the supported model (qwen-plus, deepseek-v3, etc.) according to your needs and fill in the corresponding API key and baseURL.
4. Deploying to Cloudflare Pages
   • Log in to your Cloudflare account and go to the "Pages" tab.
   • Click "Create a project" and select "Connect to Git".
   • Link your Fork's GitHub repository and click "Begin setup".
   • In "Build settings", select the framework "React" and the build command is npm run buildThe output directory is distThe
   • Add the environment variables from the previous step and click "Save and Deploy".
   • When deployment is complete, Cloudflare provides an access URL (such as the https://your-project.pages.dev).
5. Validating Deployment
   • Visit the deployed URL and check if the chat interface is loading properly.
   • Enter a message to test the AI response and make sure the model is calling properly.

Main function operation flow

1. Creating and managing AI roles

• procedure::
  1. Open the project configuration file (usually in the src/config folder, for example roles.json).
  2. Add a new role in the following format:

     {
     "id": "role1",
     "name": "Xiaozhi".
     "personality": "Funny and likes to tell jokes",
     "model": "qwen-plus", "avatar":"", "qwen-plus", "qwen-plus
     "avatar": "https://example.com/avatar1.png",
     "custom_prompt": "Please answer questions in a relaxed tone"
     }
     

  3. Save and redeploy, refresh the page to see the new role.
• caveat::
  • assure model values are consistent with the model configuration in the environment variables.
  • Avatar URL Optional, if not filled in the default avatar is used.

2. Interacting with AI Group Chat

• procedure::
  1. Type a question or command into the chat screen, e.g., "Hi everyone, what's the weather like today?"
  2. After clicking Send, all configured AI characters will reply in turn based on their respective personalities and models.
  3. Consecutive conversations can be held to observe the response styles of different characters.
• Featured Usage::
  • Enter complex questions (e.g., "What do you think will happen to technology in the future?"). and experience collaborative multi-character responses.
  • Test for differences in responses across models, e.g., rigor in Thousand Questions vs. creativity in Hybrid.

3. Switching AI models

• procedure::
  1. Modify the API Key and baseURL in the environment variables, e.g. switch the model to beanbag:

     ARK_API_KEY=xxx
     BASE_URL=https://豆包API地址
     

  2. Update in Role Configuration model values, such as "model": "doubao-pro"The
  3. Redeploy the project and refresh the page to take effect.
• draw attention to sth.::
  • Different models may require specific API formats, refer to the official documentation for each model.

Frequently Asked Questions and Solutions

• concern: AI does not respond or reports errors
  • tackle: Check that the API Key is correct, the network is connected, and the model supports real-time calls.
• concern: Deployment failure
  • tackle: Check the Cloudflare build log to make sure the dependencies are installed correctly (run the npm install (Check).
• concern: Slow loading interface
  • tackle: Confirm the server region settings and select the Cloudflare CDN node that is close to the user.

With these steps, you can easily use Botgroup.chat either experience an off-the-shelf version or customize your own dedicated group chat tool.