Integrating ChatGPT into a JavaScript Chatbot Application using OpenAI API

Introduction

In the world of modern web development, chatbots have become an integral part of enhancing user engagement and providing personalized experiences. Integrating powerful language models like ChatGPT into your chatbot application can greatly enhance its capabilities. In this tutorial, we will guide you through the process of creating a Node.js-based chatbot application that utilizes the OpenAI API to generate responses using ChatGPT. To get started, you'll need your own OpenAI API key, which you can obtain by signing up on the OpenAI website.

Prerequisites

Before we begin, ensure you have the following:

Node.js installed on your machine.

A text editor such as notepad++ or an integrated development environment (IDE) for coding.

Availability of a Bash shell or PowerShell terminal for executing commands from the command line interface.

Setting Up the Project

Follow these steps to set up your chatbot application:

Create a New Project Folder:

Open your terminal and navigate to the directory where you want to create your project. Run the following commands at your terminal:

mkdir ChatbotApp
cd ChatbotApp

Initialize Node.js Project:
Initialize a Node.js project by running the following command and following the prompts:
npm init

Install Required Packages:
Install the necessary packages for your chatbot application using the following commands:
npm install openai chatgpt dotenv readline-sync

1. openai: The OpenAI API wrapper to interact with the OpenAI GPT models.

2. chatgpt: A utility library for integrating ChatGPT models.

3. dotenv: To securely manage environment variables.

4. readline-sync: For reading user input from the terminal synchronously.

Create a .env File:
Create a .env file in the project directory to store your OpenAI API key securely:
OPENAI_API_KEY=your_api_key_here

Replace your_api_key_here with your actual OpenAI API key.

Building the Chatbot Application
Let's proceed with writing the code for our chatbot application.
Import Required Modules:
Create a file named chatbot.js in your project directory and add the following code at the beginning of the file:

JS Code Snippet

 
require('dotenv').config();
const openai = require('openai');
const chatgpt = require('chatgpt');
const readlineSync = require('readline-sync');

Initialize OpenAI API:

Add the following code to initialize the OpenAI API with your API key:

openai.apiKey = process.env.OPENAI_API_KEY;

Define ChatGPT Configuration:
Set up the ChatGPT configuration to specify the model and other parameters:

JS Code Snippet

 
const chatGPTConfig = {
  language: 'en',
  temperature: 0.7,
  maxTokens: 100,
  model: 'gpt-3.5-turbo', // Specify the desired model
};

Create Chatbot Interaction Loop:

Implement a loop to interact with the user and generate chatbot responses:

JS Code Snippet

 
async function chatLoop() {
  console.log('ChatGPT Chatbot');
  while (true) {
    const userMessage = readlineSync.question('You: ');

    if (userMessage.toLowerCase() === 'exit') {
      console.log('Chatbot: Goodbye!');
      break;
    }

    const chatResponse = await chatgpt.getChatResponse(
      userMessage,
      chatGPTConfig
    );

    console.log('Chatbot:', chatResponse.message.content);
  }
}

chatLoop();

Now let's get our html code setup.

HTML (index.html):

HTML (index.html)

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Chatbot Console</title>
</head>
<body>
  <div class="console">
    <div class="output"></div>
    <div class="input-line">
      <span class="prompt">You:</span>
      <input type="text" id="user-input" autofocus>
    </div>
  </div>
  <script src="chatbot.js"></script>
</body>
</html>

CSS (styles.css):

 

  body {
  font-family: 'Courier New', monospace;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #272727;
}

.console {
  border: 2px solid #00ff00;
  width: 400px;
  background-color: black;
  padding: 10px;
  color: #00ff00;
}

.output {
  min-height: 200px;
  padding: 5px;
  background-color: black;
  border: 1px solid #00ff00;
  overflow-y: auto;
  font-size: 14px;
}

.input-line {
  display: flex;
  align-items: center;
}

.prompt {
  color: #00ff00;
  margin-right: 5px;
}

#user-input {
  background-color: black;
  color: #00ff00;
  border: none;
  outline: none;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  width: 100%;
}

JavaScript (chatbot.js):

JS Code Snippet

 
document.addEventListener('DOMContentLoaded', function() {
  require('dotenv').config();
  const openai = require('openai');
  const chatgpt = require('chatgpt');
  const readlineSync = require('readline-sync');

  openai.apiKey = process.env.OPENAI_API_KEY;

  const chatGPTConfig = {
    language: 'en',
    temperature: 0.7,
    maxTokens: 100,
    model: 'gpt-3.5-turbo', // Specify the desired model
  };

  const outputDiv = document.querySelector('.output');
  const userInput = document.getElementById('user-input');
  const prompt = document.querySelector('.prompt');

  function displayUserMessage(message) {
    const userMessage = `<div class="user-message"><span class="prompt">You:</span> ${message}</div>`;
    outputDiv.innerHTML += userMessage;
    outputDiv.scrollTop = outputDiv.scrollHeight;
  }

  function displayChatbotResponse(response) {
    const chatbotResponse = `<div class="chatbot-response"><span class="prompt">Chatbot:</span> ${response}</div>`;
    outputDiv.innerHTML += chatbotResponse;
    outputDiv.scrollTop = outputDiv.scrollHeight;
  }

  async function chatLoop() {
    console.log('ChatGPT Chatbot');
    while (true) {
      const userMessage = userInput.value;

      displayUserMessage(userMessage);

      if (userMessage.toLowerCase() === 'exit') {
        displayChatbotResponse('Goodbye!');
        break;
      }

      const chatResponse = await chatgpt.getChatResponse(
        userMessage,
        chatGPTConfig
      );

      displayChatbotResponse(chatResponse.message.content);
      userInput.value = ''; // Clear the input field
    }
  }

  chatLoop();
});

Explanation of Code:

We import the required modules: dotenv for environment variables, openai for OpenAI API interaction, chatgpt for using ChatGPT models, and readline-sync for synchronous user input reading.

We initialize the OpenAI API using the API key stored in the .env file.

The chatGPTConfig object defines the configuration for generating responses. You can adjust the temperature and maxTokens values to control the creativity and length of responses.

The chatLoop function handles the interaction between the user and the chatbot. It prompts the user for input and generates a chatbot response using the chatgpt.getChatResponse function. The loop continues until the user types "exit."

The model parameter of the chatGPTConfig object specifies the desired model. In this case, we're using the 'gpt-3.5-turbo' model, which is a powerful and efficient variant of GPT-3.5.

By specifying the model in the configuration, you can easily switch between different models provided by OpenAI to suit your application's requirements. Just make sure to use the appropriate model name in the model parameter.

We're using the DOMContentLoaded event to ensure the JavaScript code runs after the page has finished loading.
The displayUserMessage function takes a user message as an argument and adds it to the output area with the appropriate styling.
The displayChatbotResponse function takes a chatbot response as an argument and adds it to the output area with the appropriate styling.
Inside the chatLoop function, after receiving the user input and before generating the chatbot response, we call the displayUserMessage function to display the user's input in the console.
After generating the chatbot response, we call the displayChatbotResponse function to display the chatbot's response in the console.

When you run the HTML file in a web browser and interact with the chatbot, the user's input and the chatbot's responses will be displayed in the console-like interface. The output area will automatically scroll as new messages are added.

This complete example includes the HTML structure, CSS styles, and the combined JavaScript code. When you run the index.html file in a web browser, you'll see the interactive chatbot console where you can input commands and see chatbot responses in a simulated command-line interface. Remember to adjust the paths as necessary based on your file structure.

Running the app from the command prompt:

Let's demonstrate how the app chatbot.js may be run from PowerShell's CLI.

Open PowerShell:

Press the Windows key, type "PowerShell," and then select "Windows PowerShell" from the search results.

Navigate to the Project Directory:

Use the cd command to navigate to the directory where your chatbot.js script is located. For example, if your script is located in the ChatbotApp folder on your desktop:

powershell

cd C:\Users\YourUsername\Desktop\ChatbotApp

Replace YourUsername with your actual Windows username.

Run the Chatbot Script:

Once you're in the correct directory, you can run the script using the node command followed by the script's filename:

powershell:

node chatbot.js

Start Chatting!!!:

The script will start, and you'll see the message "ChatGPT Chatbot." You can start typing your messages as if you're chatting with the chatbot.

Exit the Chatbot:

To exit the chatbot, simply type "exit" (without quotes) and press Enter. The chatbot will respond with "Goodbye!" and the script will terminate.

Here's how the PowerShell CLI session might look while running the chatbot.js script:

powershell

PS C:\Users\YourUsername\Desktop\ChatbotApp> node chatbot.js

ChatGPT Chatbot

Remember to replace YourUsername with your actual Windows username and adjust the paths according to your project's location.

Suppose the application was running in the background we could simulate the display of a chat message and a response in the console as in the following static example. Keep in mind that this static example won't actually interact with the running application, but it will give the appearance of a chat and a response being displayed.

Remember that this example is purely static and doesn't interact with any backend or running application. It's a visual representation for demonstration purposes only.

You: Hello

Chatbot: Hi there! How can I assist you today?

You: What's the weather like today?

Chatbot:I'm not connected to real-time data, but I can help answer questions or have a conversation!

You:Tell me a joke.

Chatbot:Why don't scientists trust atoms? Because they make up everything!

You:You: exit

Chatbot: Goodbye!

You:

Conclusion

Congratulations! You've successfully built a Node.js-based chatbot application that integrates ChatGPT using the OpenAI API. This application allows you to engage in conversations with the chatbot and receive responses generated by the powerful ChatGPT model. Feel free to customize and enhance the application further to suit your specific use case and requirements.

Search This Blog

Coders Congress Blog

Integrating ChatGPT into a JavaScript Chatbot Application using OpenAI API

Integrating ChatGPT into a JavaScript Chatbot Application using OpenAI API

Introduction

Prerequisites

JS Code Snippet

JS Code Snippet

JS Code Snippet

HTML (index.html)

CSS (styles.css):

JS Code Snippet

Conclusion

Happy coding!!!

Comments

Post a Comment