{"id":35321,"date":"2024-08-22T07:00:00","date_gmt":"2024-08-22T14:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=35321"},"modified":"2024-09-06T09:56:19","modified_gmt":"2024-09-06T16:56:19","slug":"quick-answers-better-experience-chatbot-openai-nodejs-react","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/quick-answers-better-experience-chatbot-openai-nodejs-react","title":{"rendered":"Quick Answers, Better Experience: Building a Developer Chatbot With OpenAI, NodeJS, and React"},"content":{"rendered":"\n

Quick access to accurate information is crucial in a development environment. The solution? Create a powerful chatbot that lives on your website and is designed to enhance the developer experience. Leveraging OpenAI, this chatbot will provide instant answers to queries from your developer documentation, helping users find what they need faster and more efficiently.<\/p>\n\n\n\n

In this blog post, you\u2019ll learn how to train a Model<\/a> for your chatbot, generate an image with the DALL-E API<\/a>, and generate the chat using the Chat Completion API<\/a>.<\/p>\n\n\n\n

This is an example of an output of the app in which I ask how one can use the Cloudinary React SDK:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

GitHub Repo<\/strong>: Cloudinary-Chatbot-OpenAI-Demo<\/a><\/p>\n\n\n\n

Part 1: Set Up OpenAI<\/h2>\n\n\n\n

Create an OpenAI account<\/h3>\n\n\n\n

To begin, log in to your OpenAI Platform account or create a free account<\/a>. You\u2019ll be redirected to your OpenAI dashboard.

Now, click your avatar in the top right corner, then click Your Profile<\/strong> and you\u2019ll be redirected to your profile page. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Add Credit to Your OpenAI account<\/h3>\n\n\n\n

Deposit money to start using the OpenAI API<\/strong> or SDK<\/strong>. Even an amount as small as $2-$5 is enough for you to start playing with OpenAI. <\/p>\n\n\n\n

Inside the profile page, on the left side navigation, click Billing<\/strong>, then the green button Add payment details, <\/strong>and enter your bank account information to add credit to your account.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

With OpenAI you can set charge limits so you won\u2019t be surprised by an unexpected bill.<\/p>\n\n\n\n

Get API Keys<\/h3>\n\n\n\n

Generate an API Key to be used on our backend server to use the OpenAI services. To do this, on your left navigation bar, click YourProfile<\/strong>, then click Create new secret key.<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

In the pop-up, name your API key. I used chatbot<\/strong>. After entering your API key name, click Create secret key<\/strong>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Copy and paste the API key generated into a safe place and click Done<\/strong>.<\/p>\n\n\n\n

Part 2:<\/strong> Build the React app<\/h2>\n\n\n\n

In this tutorial, I\u2019m using Vite<\/a> to build my React application. I recommend you to do the same. Follow the instructions on Vite\u2019s official website to create a React application.<\/p>\n\n\n\n

Build the UI Chatbot<\/h3>\n\n\n\n

In your App.jsx<\/strong> file, replace the existing code with the following:<\/p>\n\n\n

import { useState, useEffect } from \"react\"<\/span>;\nimport ReactMarkdown from \"react-markdown\"<\/span>;\nimport \".\/App.css\"<\/span>;\n\n\nfunction<\/span> App<\/span>()<\/span> <\/span>{\n const<\/span> [messages, setMessages] = useState([]);\n const<\/span> [inputMessage, setInputMessage] = useState(\"\"<\/span>);\n const<\/span> [isLoading, setisLoading] = useState(\"START\"<\/span>);\n const<\/span> [userImage, setUserImage] = useState(null<\/span>);\n const<\/span> [assistantImage, setAssistantImage] = useState(null<\/span>);\n\n\n const<\/span> handleMessageSend = async () => {\n   setisLoading(\"LOADING\"<\/span>);\n   if<\/span> (inputMessage.trim() === \"\"<\/span>) return<\/span>;\n\n\n   const<\/span> newMessages = [...messages, { role: \"user\"<\/span>, content: inputMessage }];\n   setMessages(newMessages);\n   setInputMessage(\"\"<\/span>);\n\n\n   try<\/span> {\n     const<\/span> response = await fetch(\"api\/chat\"<\/span>, {\n       method: \"POST\"<\/span>,\n       headers: {\n         \"Content-Type\"<\/span>: \"application\/json\"<\/span>,\n       },\n       body: JSON.stringify({ messages: newMessages }),\n     });\n     const<\/span> data = await response.json();\n     const<\/span> botReply = { role: \"assistant\"<\/span>, content: data.content };\n     setisLoading(\"DONE\"<\/span>);\n     setMessages([...newMessages, botReply]);\n   } catch<\/span> (error) {\n     return<\/span> \"Error\"<\/span>\n   }\n };\n\n\n   \/\/ Scroll to the bottom of the chat window when new messages are added<\/span>\n useEffect(() => {\n   const<\/span> chatContainer = document.getElementById(\"chat-container\"<\/span>);\n   chatContainer.scrollTop = chatContainer.scrollHeight;\n }, [messages]);\n\n\n\/\/Generate Image with Dall-e<\/span>\n useEffect(() => {\n   \/\/ Create a new avatar when the page loads<\/span>\n   const<\/span> generateImage = async () => {\n     try<\/span> {\n       const<\/span> response = await fetch(\"api\/avatar\"<\/span>, {\n         method: \"POST\"<\/span>,\n         headers: {\n           \"Content-Type\"<\/span>: \"application\/json\"<\/span>,\n         },\n         body: JSON.stringify({ prompt }),\n       });\n       const<\/span> data = await response.json();\n       console.log(\"images\"<\/span>, data);\n       setUserImage(data[0<\/span>].url);\n       setAssistantImage(data[1<\/span>].url);\n       return<\/span> data;\n     } catch<\/span> (error) {\n       console.error(error);\n     }\n   };\n   generateImage();\n }, []);\n\n\n return<\/span> (\n   <div className=\"App\"<\/span>>\n     <div className=\"chat-container\"<\/span> id=\"chat-container\"<\/span>>\n       {messages.map((message, index) =>\n         message.content !== undefined ? (\n           <div key={index} className={`message ${message.role}`}>\n             <img\n               src={message.role === \"user\"<\/span> ? userImage : assistantImage}\n               alt=\"user image\"<\/span>\n               className=\"avatar\"<\/span>\n             \/>\n             {message.role === \"assistant\"<\/span> ? (\n               <div className=\"assistant-message\"<\/span>>\n                 <ReactMarkdown>{message.content}<\/ReactMarkdown>\n               <\/div>\n             ) : (\n               message.content\n             )}\n           <\/div>\n         ) : (\n           <div key={index} className=\"message assistant\"<\/span>>\n             Error in the server\n           <\/div>\n         )\n       )}\n       {isLoading === \"START\"<\/span> || isLoading === \"DONE\"<\/span> ? (\n         <><\/>\n       ) : (\n         <div className=\"spinner-bar\"<\/span>>\n           <div className=\"spinner chat\"<\/span>><\/div>\n         <\/div>\n       )}\n     <\/div>\n     <div className=\"input-container\"<\/span>>\n       {assistantImage !== null<\/span> && userImage !== null<\/span> ? (\n         <>\n           <textarea\n             rows=\"4\"<\/span>\n             cols=\"50\"<\/span>\n             value={inputMessage}\n             onChange={(e) => setInputMessage(e.target.value)}\n             placeholder=\"Chat with the AI bot\"<\/span>\n           \/>\n           <button onClick={handleMessageSend}>Send<\/button>\n         <\/>\n       ) : (\n         <div className=\"spinner\"<\/span>><\/div>\n       )}\n     <\/div>\n   <\/div>\n );\n}\n\n\nexport default<\/span> App;\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
This code has three main components:<\/p>\n\n\n\n
1. handleMessageSend()<\/code>. This function is responsible for sending the new user message along with the previous conversation history to the NodeJS back end.<\/p>\n\n\n\n
2. first useEffect()<\/code>. This useEffect<\/code> improves the user experience by automatically scrolling the screen to focus on the latest messages whenever a new message is sent and a response is received from the chatbot.<\/p>\n\n\n\n
3. second useEffect()<\/code>. This useEffect<\/code> triggers a call to the backend to generate avatars using DALL-E, creating one avatar for the user and another for the chatbot.<\/p>\n\n\n\n
Configure Your React Vite app<\/h3>\n\n\n\n
If you want to easily make a call to your NodeJS backend without using CORS, you can configure your Vite app to proxy the backend endpoints. This step only applies if you created the React app using Vite. <\/p>\n\n\n\n
Open your vite.config.js<\/code> file and replace the content with the following code.<\/p>\n\n\n
import<\/span> { defineConfig } from<\/span> 'vite'<\/span>\nimport<\/span> react from<\/span> '@vitejs\/plugin-react'<\/span>\n\nexport<\/span> default<\/span> defineConfig({\n  plugins<\/span>: [react()],\n  server<\/span>: {\n    port<\/span>: 3000<\/span>,\n    proxy<\/span>: {\n      \"\/api\"<\/span>: {\n        target<\/span>: \"http:\/\/localhost:6000\"<\/span>,\n        changeOrigin<\/span>: true<\/span>,\n        secure<\/span>: false<\/span>,\n      },\n    },\n  },\n});\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n

Part 3: Build the NodeJS App<\/h2>\n\n\n\n
Time to work on the backend. In the root of your React app, create a folder called back end. Inside this folder create a server.js<\/code> file.<\/p>\n\n\n\n
Setup your NodeJS Server<\/h3>\n\n\n\n
In the root of the project you have the package.json<\/code>, we will use this same file for our backend. Replace everything that you currently have in the package.json<\/code> copy and paste the content of this file<\/a> into your package.json<\/code>.<\/p>\n\n\n\n
In the root of your project create a .env<\/code> file, and enter the following:<\/p>\n\n\n
OPENAI_API_KEY=\"YOUR OPEN AI API KEY\"<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Replace the string with the OpenAI API Key you generated earlier.<\/p>\n\n\n\n
Copy paste the following code into your server.js<\/strong> file.<\/p>\n\n\n
\/* eslint-disable no-undef *\/<\/span>\nimport express from \"express\"<\/span>;\nimport bodyParser from \"body-parser\"<\/span>;\nimport OpenAI from \"openai\"<\/span>;\nimport \"dotenv\/config\"<\/span>;\n\n\nconst<\/span> openai = new<\/span> OpenAI({\n apiKey: process.env.OPENAI_API_KEY,\n});\n\n\nconst<\/span> app = express();\napp.use<\/span>(bodyParser<\/span>.json<\/span>());\n\n\napp.post(\"\/api\/chat\"<\/span>, async (req, res) => {\n \/*\n   Train the model by giving it some previous conversations\n   *\/<\/span>\n const<\/span> demoModel = [\n   {\n     role: \"user\"<\/span>,\n     content:\n       \"Hi, can you tell me where to find information about the Cloudinary React sdk?\"<\/span>,\n   },\n   {\n     role: \"assistant\"<\/span>,\n     content:\n       \"Yes, the conentent can be found inside of this website https:\/\/cloudinary.com\/documentation\/react_integration\"<\/span>,\n   },\n   {\n     role: \"user\"<\/span>,\n     content:\n       \"can you tell me where to find information about the cloudinary transformations\"<\/span>,\n   },\n   {\n     role: \"assistant\"<\/span>,\n     content:\n       \"Yes, the conentent can be found inside of this website https:\/\/cloudinary.com\/documentation\/react_image_transformations\"<\/span>,\n   },\n   {\n     role: \"user\"<\/span>,\n     content: \"can you tell me how to display an image using the cloudinary React SDK\"<\/span>,\n   },\n   {\n     role: \"assistant\"<\/span>,\n     content: `Yes, to display an image using cloudinary follow this guide https:\/\/cloudinary.com\/documentation\/react_integration#landingpage and this code sample<\/span>\n     import React from 'react'<\/span>\n     import {AdvancedImage} from '@cloudinary\/react'<\/span>;\n     import {Cloudinary} from \"@cloudinary\/url-gen\"<\/span>;\n    \n     \/\/ Import required actions.<\/span>\n     import {sepia} from \"@cloudinary\/url-gen\/actions\/effect\"<\/span>;\n    \n     const<\/span> App = () => {\n    \n       \/\/ Create and configure your Cloudinary instance.<\/span>\n       const<\/span> cld = new<\/span> Cloudinary({\n         cloud: {\n           cloudName: 'demo'<\/span>\n         }\n       });\n    \n       \/\/ Use the image with public ID, 'front_face'.<\/span>\n       const<\/span> myImage = cld.image('front_face'<\/span>);\n    \n       \/\/ Apply the transformation.<\/span>\n       myImage\n       .effect(sepia());  \/\/ Apply a sepia effect.<\/span>\n    \n       \/\/ Render the transformed image in a React component.<\/span>\n       return<\/span> (\n         <div>\n           <AdvancedImage cldImg={myImage} \/>\n         <\/div>\n       )\n     };\n       `,\n   },\n ];\n\n\n const<\/span> { messages } = req.body;\n messages[messages.length - 1<\/span>].content = `${\n   messages[messages.length - 1<\/span>].content\n }.`;\n\n\n \/**\n  * Call the OpenAI SDK and get a response\n  *\/<\/span>\n try<\/span> {\n   const<\/span> response = await openai.chat.completions.create({\n     model: \"gpt-3.5-turbo\"<\/span>,\n     messages: [...messages, ...demoModel], \/\/ pass the new message and the previous messages<\/span>\n   });\n   res.json(response.choices[0<\/span>].message);\n } catch<\/span> (error) {\n   console.error(error);\n   res.status(500<\/span>).json({ error: \"Internal Server Error\"<\/span> });\n }\n});\n\n\n\/**\n* Generate a random animal avatar\n* using DALLE\n*\/<\/span>\napp.post(\"\/api\/avatar\"<\/span>, async (req, res) => {\n const<\/span> requestData = {\n   prompt: `generate picture of animal`,\n   n: 2<\/span>,\n   size: \"256x256\"<\/span>,\n };\n\n\n try<\/span> {\n   const<\/span> response = await fetch(\n     \"https:\/\/api.openai.com\/v1\/images\/generations\"<\/span>,\n     {\n       method: \"POST\"<\/span>,\n       headers: {\n         \"Content-Type\"<\/span>: \"application\/json\"<\/span>,\n         Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,\n       },\n       body: JSON.stringify(requestData),\n     }\n   );\n\n\n   if<\/span> (response.ok) {\n     const<\/span> data = await response.json();\n     console.log(\"Response:\"<\/span>, data);\n     res.json(data.data);\n   } else<\/span> {\n     throw<\/span> new<\/span> Error(`HTTP error! status: ${response.status}`);\n   }\n } catch<\/span> (error) {\n   console.error(\"Error:\"<\/span>, error);\n   res.status(500<\/span>).json({ error: \"Internal Server Error\"<\/span> });\n }\n});\n\n\nconst<\/span> PORT = 6000<\/span>;\napp.listen(PORT, () => {\n console.log(`Server is running on port ${PORT}`);\n});\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
Let\u2019s explain the code we have on our server.<\/p>\n\n\n\n
Generate Conversations Using the OpenAI SDK<\/h3>\n\n\n\n
\/api\/chat endpoint<\/code><\/h4>\n\n\n\n
This code defines an endpoint for a chat application that integrates with OpenAI’s GPT-3.5-turbo model<\/a> to generate responses based on user messages. Here’s a detailed explanation:<\/p>\n\n\n\n
1. Route definition:<\/strong><\/p>\n\n\n
 app.post(\"\/api\/chat\"<\/span>, async<\/span> (req, res) => {<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
This line defines a POST endpoint at \/api\/chat<\/code>. The async<\/code> keyword indicates that the function will be handling asynchronous operations, which is crucial for making API calls.<\/p>\n\n\n\n
2. Demo model setup:<\/strong><\/p>\n\n\n
const<\/span> demoModel = [\n        {\n          role<\/span>: \"user\"<\/span>,\n          content<\/span>: \"Hi, can you tell me where to find information about the Cloudinary React sdk?\"<\/span>,\n        },\n        {\n          role<\/span>: \"assistant\"<\/span>,\n          content<\/span>: \"Yes, the content can be found inside of this website https:\/\/cloudinary.com\/documentation\/react_integration\"<\/span>,\n        },\n        \/\/ Additional demo messages...<\/span>\n    ];\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
3. Handling incoming messages<\/strong>:<\/p>\n\n\n
const<\/span> { messages } = req.body;\n    messages[messages.length - 1<\/span>].content = `${messages[messages.length - 1<\/span>].content}<\/span>.`<\/span>;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
The code extracts the messages<\/code> array from the request body. It also modifies the last message by appending a period to its content, ensuring proper punctuation.<\/p>\n\n\n\n
4. Calling OpenAI’s API<\/strong>:<\/p>\n\n\n
 try<\/span> {\n      const<\/span> response = await<\/span> openai.chat.completions.create({\n        model<\/span>: \"gpt-3.5-turbo\"<\/span>,\n        messages<\/span>: [...messages, ...demoModel],\n      });\n      res.json(response.choices[0<\/span>].message);\n    } catch<\/span> (error) {\n      console<\/span>.error(error);\n      res.status(500<\/span>).json({ error<\/span>: \"Internal Server Error\"<\/span> });\n    }<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
This array demoModel<\/code> simulates previous conversations. It includes several user and assistant interactions about using the Cloudinary React SDK<\/a>. These examples help guide the model by providing context.<\/p>\n\n\n\n
What we\u2019re doing here is proxying the backend with any path that is \/api<\/code> to be forwarded to the target http:\/\/localhost:6000<\/strong><\/a>, which is the address of your backend server.<\/p>\n\n\n\n
Let\u2019s now style the app. In your app, replace the code inside of the App.css<\/code> with the code inside of this file<\/a>.<\/p>\n\n\n\n