BytePX Technologies – AI, Data Visualisation, Snowflake, Data Engineering & Salesforce CRM

Contact Us
Email Us hello@bytepx.com
Contact Us
  • Home
  • Creating a Chatbot Using OpenAI’s ChatGPT API

Creating a Chatbot Using OpenAI’s ChatGPT API

August 9, 2024 - By Kharanshu Kashyap

Creating a Chatbot Using OpenAI’s ChatGPT API

Creating a chatbot using OpenAI’s ChatGPT API can significantly enhance your applications by providing quick and intelligent responses. This guide will walk you through the process of setting up an OpenAI account, retrieving API keys, and creating a chatbot with Node.js and Express.

Step 1: Sign Up for an OpenAI Account

  1. Create an Account: If you don’t already have one, sign up for an OpenAI account.
  2. Generate API Key: Navigate to your profile, select “Manage Account,” and then “API Keys” from the sidebar. Click “Create new secret key” to generate an API key. Copy and store this key securely as it will be used to connect your application with the OpenAI API.

Step 2: Set Up Your Node.js Project

  1. Install Node.js and npm: Ensure Node.js and npm are installed on your machine. The latest versions can be downloaded from the official Node.js website.
  2. Create Project Directory: Create a new directory for your project and navigate into it using the command prompt:
   mkdir chatbot
   cd chatbot
  1. Initialize Node.js Project: Run the following command to initialize a new Node.js project:
   npm init -y
  1. Install Dependencies: Install the express and openai packages:
   npm install express openai

Step 3: Create an Express Server

  1. Create Server File: Create a server.js file in your project root directory and add the following code to set up a basic Express server:
   const express = require("express");
   const app = express();

   app.use(express.static("public"));

   app.listen(5000, () => {
     console.log("Server is active");
   });

This server will serve static files from the /public directory.

Step 4: Create the Chat Interface

  1. Create Public Directory: Create a public directory in your project root.
  2. Create HTML File: Inside the public directory, create an index.html file with the following content:
   <!DOCTYPE html>
   <html lang="en">
     <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>Chatbot</title>
       <style>
         /* Styles here */
       </style>
     </head>
     <body>
       <div id="chat-area"></div>
       <div class="submit-form">
         <div class="input">
           <textarea name="input" id="input" cols="40" rows="3"></textarea>
           <button id="btn">Submit</button>
         </div>
       </div>
       <script>
         /* JavaScript here */
       </script>
     </body>
   </html>
  1. Add Styles: Include CSS within the <style> tags to style the chat interface.

Step 5: Add JavaScript for Chat Functionality

  1. Add Event Listener: Inside the <script> tags in index.html, add an event listener to handle the submit button click:
   const btn = document.getElementById("btn");
   btn.addEventListener("click", getResponse);

   async function getResponse() {
     var inputText = document.getElementById("input").value;
     const parentDiv = document.getElementById("chat-area");

     if (inputText === "") {
       return;
     }

     const question = document.createElement("div");
     question.innerHTML = inputText;
     question.classList.add("box");
     parentDiv.appendChild(question);

     document.getElementById("input").value = "";

     let res = await fetch("http://localhost:5000/chat", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
       },
       body: JSON.stringify({ question: inputText }),
     });

     const data = await res.json();

     if (data.message) {
       const answer = document.createElement("div");
       answer.innerHTML = data.message;
       answer.classList.add("box", "answer");
       parentDiv.appendChild(answer);
     }
   }

Step 6: Set Up the Backend to Handle API Requests

  1. Import OpenAI: In server.js, import and set up OpenAI:
   const { OpenAI } = require("openai");

   const openai = new OpenAI({
     apiKey: "your-api-key",
   });

   app.use(express.json());

   app.post("/chat", async (req, res) => {
     try {
       const resp = await openai.chat.completions.create({
         model: "gpt-3.5-turbo",
         messages: [{ role: "user", content: req.body.question }],
       });

       res.status(200).json({ message: resp.choices[0].message.content });
     } catch (e) {
       res.status(400).json({ message: e.message });
     }
   });

Conclusion

After setting up the server and the frontend, you should be able to run your Node.js application and interact with your ChatGPT-powered chatbot through the browser. This setup allows you to leverage the capabilities of OpenAI’s models to enhance your applications with intelligent chat functionalities.

Running the Application

  1. Start the Server: Run the server with the following command:
   node server.js
  1. Open in Browser: Open your browser and navigate to http://localhost:5000 to see your chatbot interface.

This guide provides a basic framework to get you started with creating a chatbot using OpenAI’s API. You can further customize and expand the functionality based on your needs.