Are you ready to embark on an exciting journey into the world of AI-powered chatbots? In this blog, we will take you through a comprehensive step-by-step guide on how to build your very own chatbot project using two powerful technologies: QuickBlox and OpenAI's ChatGPT. By the end of this tutorial, you'll have a fully functional Node.js project that seamlessly integrates with both APIs, enabling you to handle incoming user messages and generate intelligent responses. Furthermore, by using the QuickBlox React UI Kit we will empower you to create a chatbot that not only excels in functionality but also boasts a visually appealing and user-friendly interface. The QuickBlox React UI Kit serves as an indispensable tool, streamlining the process of integrating your chatbot into a captivating chat interface that users will love.

Don’t forget to see our earlier blog, How to create your own AI ChatBot using OpenAI and JavaScript SDK which provides instructions for creating a basic bot that can respond to the last single message. In this second tutorial, we provide instructions for creating a more advanced bot that can take into account the context of multiple messages in the conversation (for this purpose, a message queue to the bot is implemented) and generate responses using OpenAI. We will also use the new QuickBlox React UI Kit to visualize the bot's operation.

I. Creating a Bot Project

To make the integration process easier for developers, QuickBlox has developed a node js application that automates the integration work. This means that developers do not need to spend time and effort on manual integration. They can simply configure and launch the application, and the integration will be done automatically.

We offer the following step-by-step guide to creating a Node.js project:

Step 1: Install Node.js

The first step is to install Node.js on your computer if you haven't done so already. You can download the Node.js installer from the official website (https://nodejs.org) and follow the installation instructions for your operating system.

Step 2: Create a New Project

Open your command prompt or terminal and navigate to the folder where you want to create your project. Then run the following command to initialize a new Node.js project:

npm init

Follow the instructions in the command prompt to set up your project, including specifying the name, version, and other settings. By default, a package.json file will be created, which will contain the project's dependencies.

Step 3: Install Dependencies

To work with QuickBlox, OpenAI, and other necessary modules, let's install the corresponding dependencies. Run the following command in the command prompt:

npm install quickblox openai dotenv

In this example, we're installing the quickblox module for working with QuickBlox, the openai module for interacting with OpenAI, and the dotenv module for loading configuration variables from the .env file.

Step 4: Create the .env File

Create a new file named .env in the project's root folder. This file will store the configuration variables. Add the following variables with the specified values for OpenAI and QuickBlox:

# OpenAI settings

OpenAI_API_Key = "YOUR_OPENAI_API_KEY"

OpenAI_Model = "gpt-3.5-turbo"

OpenAI_Temperature = 0.7

OpenAI_Max_Tokens = 2048

OpenAI_Max_Tokens_For_Context = 100

OpenAI_Top_P = 1

OpenAI_Frequency_Penalty = 0

OpenAI_Presence_Penalty = 0

# Quickblox settings

QB_App_Id = YOUR_QB_APP_ID

QB_Auth_Key = "YOUR_QB_AUTH_KEY"

QB_Auth_Secret = "YOUR_QB_AUTH_SECRET"

QB_Account_Key = "YOUR_QB_ACCOUNT_KEY"

QB_User_Id = "YOUR_QB_USER_ID"

QB_User_Password = "YOUR_QB_USER_PASSWORD"

Here's the instruction on how to obtain the OpenAI API Key:

1. Visit the OpenAI website at https://www.openai.com.

2. If you already have an account, sign in using your credentials. Otherwise, create a new account by following the registration process.

3. Once you're logged in, navigate to the API section of the OpenAI platform.

4. Read and understand the documentation and terms of use for the OpenAI API.

5. Find the API key management section or the option to generate a new API key.

6. Click on the "Generate API Key" or similar button to create a new API key.

7. The OpenAI platform will generate a unique API key for you. Copy this API key to your clipboard or save it in a secure location.

8. Keep the API key confidential and do not share it publicly or expose it in your code repositories.

With the obtained OpenAI API key, you can now use it in your Node.js application by placing it in the .env file under the "OpenAI_API_Key" variable. Remember to treat the API key with care to ensure the security and integrity of your OpenAI interactions.

Here's the instruction on how to obtain the parameters for QuickBlox:

For detailed instructions see our earlier blog: How to Create an App and Use the QuickBlox Admin Panel

1. The first step is to create a QuickBlox account, if you don’t already have one.

2. After signing into your QuickBlox Account, select “New App.”

3. Enter a title and type for the application. Other fields are optional. Then click on the “Create app” button.

4. View your App parameters on the Overview page, these include App ID, Auth Key, Auth Secret, and Account Key. Take note of these parameters as you will need them later.

5. To obtain parameters for a specific user in your QuickBlox application, navigate to the users' dashboard by visiting the following link: https://docs.quickblox.com/docs/users-dashboard.

Step 5: Create the Bot File

Create a new file named bot.js (or any other convenient name) in the project's src folder. This file will contain the code for the bot's functionality.

Please note that the instructions provided here are a general guide, and you may need to customize them based on your specific project requirements.

Step 6: Adjust the package.json File

In this step, we will modify the package.json file to specify the entry point of our application.

Here's an example of a package.json file:

{
  "name": "openai-integration",
  "version": "0.1.0",
  "main": "src/bot.js",
  "scripts": {
    "start": "node src/bot.js",
    "postinstall": "node configure.js"
  },
  "license": "MIT",
  "dependencies": {
    "dotenv": "^16.0.3",
    "openai": "^3.2.1",
    "quickblox": "^2.15.5"
  }
}

II. Understanding the function of the Bot.js and MessageQueue files

In our project, we will have two files: bot.js and MessageQueue.js. Let's explore the purpose and functionality of each file:

• MessageQueue.js

The MessageQueue.js file contains the definition of the MessageQueue class, which is responsible for managing the message queue in our chatbot. The MessageQueue class has properties such as maxTokens (the maximum number of text tokens that can be stored in the queue), queue (an array to store the messages in the queue), and currentTokens (the current number of tokens in the queue). It also has methods for adding messages to the queue, calculating the token count, retrieving the current queue, and checking for emptiness.

The usage of the MessageQueue class in our chatbot's code, utilizing the gpt-3.5-turbo model from OpenAI, is justified by the need to manage and limit the size of the message queue. The MessageQueue class enables efficient control over the size of the dialogue history, preventing token limit exceedances. This helps ensure a more reliable and efficient interaction with the OpenAI API, allowing the chatbot to be utilized in various development scenarios.

See sample code of MessageQueue class below:

class MessageQueue {
    constructor(maxTokens) {
        this.maxTokens = maxTokens;
        this.queue = [];
        this.currentTokens = 0;
    }

    enqueue(message) {
        let tokens = this.calculateTokens(message.content);
        this.currentTokens += tokens;

        while (this.currentTokens > this.maxTokens && this.queue.length !== 0) {
            let dequeuedMessageTokens = this.calculateTokens(this.queue.shift().content);
            this.currentTokens -= dequeuedMessageTokens;
        }

        this.queue.push(message);
    }

    calculateTokens(text) {
        return text.length / 4; //one token equals 4 characters
    }

    getMessages() {
        return this.queue;
    }

    isEmpty() {
        return this.queue.length === 0;
    }
}

module.exports = MessageQueue;

• bot.js

The bot.js file contains the code for our chatbot. It serves as the main entry point for the chatbot application. This file will utilize the MessageQueue class to handle the message queue functionality and interact with the OpenAI gpt-3.5-turbo model. It will include the necessary logic to process incoming messages, manage the queue, generate responses using the OpenAI model, and handle other bot functionalities.

At the beginning of the bot.js file, we import the necessary dependencies to use in our chatbot. Here's an example of the imports:

// Load environment variables from the .env file
require('dotenv').config();
// Library for interacting with the QuickBlox API
const QB = require('quickblox'); 
// Library for interacting with the OpenAI API
const { Configuration, OpenAIApi } = require('openai'); 
// Importing the MessageQueue class from the MessageQueue.js file
const MessageQueue = require('./MessageQueue');

Here, we use require to import the required modules. dotenv is used to load environment variables from the .env file we created earlier. quickblox and openai are libraries that allow us to interact with the QuickBlox API and OpenAI API, respectively.

In addition, we import the MessageQueue class from the MessageQueue.js file we created earlier. This allows us to use the functionality of the MessageQueue class to manage the message queue in our chatbot.

III. Developing chatbot functionality with QuickBlox and OpenAI API

Thus, after importing the necessary dependencies and the MessageQueue class, we are ready to start developing the functionality of our chatbot using the QuickBlox and OpenAI API.

After importing the required dependencies, the next step is to define the environment variables necessary for the application. These variables include API keys required for the functioning of the chatbot. We initialize QuickBlox and create an instance of OpenAIApi using the provided keys.

var dialogs = {};

const configuration = new Configuration({
  apiKey: process.env.OpenAI_API_Key,
});
const openai = new OpenAIApi(configuration);

QB.init(process.env.QB_App_Id, process.env.QB_Auth_Key, process.env.QB_Auth_Secret, process.env.QB_Account_Key);

In the code, we define a variable dialog to store the chatbot dialogs. Then, we create a configuration object for the OpenAIApi instance, passing the OpenAI_API_Key from the environment variables. This allows us to authenticate and interact with the OpenAI API using the provided key.

Next, we initialize QuickBlox using the QB.init method, passing the QuickBlox application ID, authentication key, authentication secret, and account key from the environment variables. This step ensures that our chatbot can authenticate and make use of the QuickBlox API functionalities.

By completing these steps, we have set up the necessary environment variables, initialized QuickBlox, and created an instance of the OpenAIApi class, enabling our chatbot to interact with both APIs effectively.

Next, we create a QuickBlox session and establish a connection with the Chat Server. Upon successful connection, a message indicating the bot's readiness is displayed:

QB.createSession((error, result) => {
    if (error) {
      console.log('Create session Error: ', error);
    } else {
      console.log('Create session - DONE!');
      // connect to Chat Server.....

      var userCredentials = {
        userId: process.env.QB_User_Id,
        password: process.env.QB_User_Password
      };

      QB.chat.connect(userCredentials, (error, contactList) =>{
        if (error) {
            console.log('QB chat.connect is failed!');
            process.exit(1);
        }        
        console.log('QB Bot is up and running');
        // listener....
        QB.chat.onMessageListener = onMessageListener;
    });


  }
});

The onMessageListener function serves as a handler for incoming messages from users. If the message is a chat message (msg.type === 'chat') and contains the message body (msg.body), the message is processed.

Inside the handler, the following steps are performed:

• It checks if a dialogue already exists for the user. If not, an instance of the MessageQueue class is created and added to the dialogs object using the user's identifier (userId).

• Using the enqueue method of the MessageQueue instance, the user's message is added to the dialogue queue.

• Next, using the OpenAI API, a response is generated based on the messages in the dialogue queue.

• The generated response is added to the dialogue queue and sent to the user using the QB.chat.send method.

By following these steps, the chatbot efficiently manages the dialogue history, generates responses using the OpenAI API, and sends them back to the users, providing a seamless conversational experience.

Here's an example code illustrating the message-handling process:

async function onMessageListener(userId, msg) {

    if (msg.type === 'chat' && msg.body) {

        if (dialogs[userId] === undefined){

            dialogs[userId] = new MessageQueue(process.env.OpenAI_Max_Tokens_For_Context)

        }

        dialogs[userId].enqueue({

            role: "user",

            content: msg.body,

        });


        try {

            const response =  await openai.createChatCompletion({

                model: process.env.OpenAI_Model,

                messages: dialogs[userId].getMessages(),

                temperature: Number(process.env.OpenAI_Temperature),

                max_tokens: Number(process.env.OpenAI_Max_Tokens),

                top_p: Number(process.env.OpenAI_Top_P),

                presence_penalty: Number(process.env.OpenAI_Presence_Penalty),

                frequency_penalty: Number(process.env.OpenAI_Frequency_Penalty),

            });


            const answerMessage = {

                type: 'chat',

                body: response.data.choices[0].message.content,

                extension: {

                    save_to_history: 1,

                },

            };


            dialogs[userId].enqueue({

                role: "assistant",

                content: answerMessage.body,

            });


            QB.chat.send(userId, answerMessage);

        }

        catch (e) {

            console.log('Error: ', e);

        }

    }

}

In the code snippet, the onMessageListener function listens for incoming messages from users. If the message is a chat message with a body, it checks if a dialogue exists for the user. If not, it creates a new instance of the MessageQueue class and adds it to the dialogs object.

The user's message is then enqueued using the enqueue method of the MessageQueue instance. The messages in the dialogue queue are passed to the OpenAI API to generate a response. The response is added to the dialogue queue and sent back to the user using the QB.chat.send method.

This process ensures efficient message handling and response generation within the chatbot, providing smooth and interactive conversations with users.

IV. Integrating with QuickBlox React UI Kit

To visually demonstrate the functionality of our created chatbot, we will utilize a new product from QuickBlox called QuickBlox React UI Kit. This tool allows for easy creation of a chat interface and integration of our chatbot within it.

See official documentation for more information about its features, API, and implementation

Furthermore, for a quick start, there is a sample project available on GitHub that demonstrates the integration of the React UI Kit. We can explore and use it as a starting point for our project.

To run the sample, follow these steps:

1. Clone the repository with the sample using the git clone command:

git clone

https://github.com/QuickBlox/quickblox-javascript-sdk.git

1. Navigate to the react-chat sample directory:

cd quickblox-javascript-sdk/samples/react-chat

1. Install the dependencies using npm:

npm install

1. Edit the src/config.js file to provide the necessary QuickBlox application settings, such as appId, authKey, authSecret, accountKey, and userId.

2. Start the application with the following command:

npm start

After completing these steps, you will see the running application with a chat interface where you can interact with your created chatbot. Play around with the chat functionality and observe how your bot responds to user messages using the OpenAI API and QuickBlox integration.

This provides a convenient environment for testing and showcasing the functionality of our chatbot, allowing real-time interaction and evaluation of its capabilities.

Conclusion

In this article, we have provided a step-by-step guide on how to create a Node.js project that integrates with the QuickBlox and OpenAI APIs for handling incoming user messages and generating responses. We have demonstrated the importance of managing message queues using the MessageQueue class to efficiently handle the dialogue history and token limits imposed by the OpenAI model.

Furthermore, we introduced the QuickBlox UIKit React, a powerful tool that enables the integration of our chatbot into a visually appealing and user-friendly chat interface. By following the provided links to the documentation and sample project, we explored how to quickly set up and run a chat application that showcases the interaction between the QuickBlox and OpenAI APIs.

The possibilities for creating innovative and interactive chatbot applications are now within reach!

Join the QuickBlox Dev Discord Community! Share ideas, learn about software, and get support.