<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Chukwuduzie Blaise</title>
    <description>The latest articles on DEV Community by Chukwuduzie Blaise (@vectorware).</description>
    <link>https://dev.to/vectorware</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F924425%2F8359c292-9788-4464-a133-c2255bd4003b.jpg</url>
      <title>DEV Community: Chukwuduzie Blaise</title>
      <link>https://dev.to/vectorware</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/vectorware"/>
    <language>en</language>
    <item>
      <title>What is Docker ?: Understanding the Concept of Containerization.</title>
      <dc:creator>Chukwuduzie Blaise</dc:creator>
      <pubDate>Mon, 11 Mar 2024 14:01:02 +0000</pubDate>
      <link>https://dev.to/vectorware/introduction-to-docker-module-1-understanding-the-concept-of-containerization-16ec</link>
      <guid>https://dev.to/vectorware/introduction-to-docker-module-1-understanding-the-concept-of-containerization-16ec</guid>
      <description>&lt;p&gt;The concept of containers have become widely adopted in software development, they have proven to offer multiple advantages in compatibility and consistency of software.&lt;/p&gt;

&lt;p&gt;It has almost become a compulsory skill for Software Engineers to master in order to work effectively. Its very important to grasp the concept of containers before diving head on into usage. If that sounds good to you then keep reading.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;"The Why"&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Docker was introduced as a tool to package applications together with required dependencies in a consistent environment for production and deployment. This tool was introduced as a result of the problems faced with the traditional methods of deployment.&lt;/p&gt;

&lt;p&gt;Here are two most common problems faced:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;u&gt;Dependency Issues&lt;/u&gt;&lt;/strong&gt; : Most applications require multiple dependencies and varying versions, managing these across local and deployment environments can cause errors and be really stressful.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;u&gt;Environment Inconsistency&lt;/u&gt;&lt;/strong&gt;: A good example is a group of 4 members working on the same project but using different operating systems (Eg: windows, mac, Linux). They would face compatibility problems as dependencies and frameworks work in certain ways for different environments.&lt;/p&gt;

&lt;p&gt;A more obvious example is pulling a Node.js API that was setup with version 20 to a local machine running version 18 from GitHub. This would prove problematic for dependencies that require a minimum of version 20 to work, you would have to spend extra time working installing the right versions on your local machine.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What is a Container&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;A container is a lightweight, standalone and executable software package that isolates any application with all of its dependencies and runtime environment including libraries and system tools into a single portable unit. As the name container implies, it simply covers your application in an isolated environment that enables it run efficiently eliminating the problems mentioned earlier above.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;"The How"&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Containers work with the host system kernel in order to provide isolation. The system kernel is a core part of operating systems that serves as an intermediary between software and hardware, working with the kernel gives the containers native access to the systems hardware resources. This enables use of direct access of container runtimes to manage these resources thereby making them more resource efficient and this is what grants it the title "lightweight".&lt;/p&gt;

&lt;p&gt;Containerization is the process of packaging and running applications in a consistent and isolated environment like a container. This improves deployment and scalability marginally. Multiple containers can be run on one system all isolated from each other.&lt;br&gt;
_&lt;br&gt;
"A very good analogy to describe it is packing a child's lunch for school, assume that the lunch box is the container then all items in it are various components of the application, this ensures the child's lunch is isolated from that of the other kids and maintains a consistent state till its time to eat and this just same for the containers."_&lt;/p&gt;

&lt;p&gt;Are Containers the same as virtual machines???&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Containers&lt;/strong&gt; may seem a bit similar to VMs by concept, but are not the same: Containers are used mainly when deployment, scalability and are preferred for microservice architectures. They are less resource intensive and can enable a host system run multiple instances at once.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Virtual Machines&lt;/strong&gt; are more resource intensive, are used for running old legacy systems with full isolation and when more security is required. A virtual machine emulates a whole host system including hardware and software. Running multiple virtual machines on one host system is usually discouraged due to the amount of resources they consume.&lt;/p&gt;

&lt;p&gt;What is Docker?&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Docker&lt;/strong&gt; is simply an open source tool that delivers software in packages called containers. It is a tool used to perform containerization to software, it is the most popular among others used.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;## Benefits&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;** 1.Consistency**: Docker ensures consistency in software environments, developers can package their applications and dependencies into containers.&lt;/p&gt;

&lt;p&gt;** 2.Isolation**: Each container runs in its own isolated environment, this keeps application independent from each other.&lt;/p&gt;

&lt;p&gt;** 3.Portability**: Containers can run consistently across different platforms, including local development machines, on-premises servers, and cloud infrastructure.&lt;/p&gt;

&lt;p&gt;** 4.Resource Efficiency**: Docker containers are lightweight and consume minimal resources compared to traditional virtual machines.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;u&gt;Key Components&lt;/u&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcqqcvnp4qbb7yp0ww7ko.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcqqcvnp4qbb7yp0ww7ko.png" alt=" " width="720" height="493"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Docker consists of key components that enable containerization and streamline the process of building, shipping, and running applications.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;u&gt;&lt;strong&gt;Docker Engine:&lt;/strong&gt;&lt;/u&gt;&lt;br&gt;
It creates and manages containers on the host system. It includes the Docker daemon, which runs in the background and manages container lifecycle operations, and the Docker CLI (command line interface) for interacting with Docker.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;u&gt;&lt;strong&gt;Docker Image:&lt;/strong&gt;&lt;/u&gt;&lt;br&gt;
Docker Image is a read-only template used to create containers. It contains the application code, libraries, dependencies, and other files needed to run the application. Docker images are built from Dockerfiles and can be shared and reused across different environments. Images are stored in a registry, such as Docker Hub.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;u&gt;&lt;strong&gt;Docker Container:&lt;/strong&gt;&lt;/u&gt;&lt;br&gt;
Docker Container is a lightweight, runnable instance of a Docker image. Containers encapsulate applications and their dependencies, providing a consistent runtime environment for running applications.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;u&gt;&lt;strong&gt;Dockerfile:&lt;/strong&gt;&lt;/u&gt;&lt;br&gt;
Dockerfile is a modifiable text file that contains instructions for building a Docker image. It specifies the base version, dependencies and other configuration settings needed for the application.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;&lt;u&gt;Docker Registry:&lt;/u&gt;&lt;/strong&gt;&lt;br&gt;
Docker Registry is a storage and distribution service for Docker images. The most popular registry is Docker Hub, which provides a centralized repository for storing, sharing, and distributing Docker images. This is similar to Github where developers can pull and push containers for public use.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;&lt;u&gt;Docker Compose:&lt;/u&gt;&lt;/strong&gt;&lt;br&gt;
Docker Compose is a tool for defining and running multi-container Docker applications. It uses a YAML file to specify the services, networks, and volumes required for an application, allowing developers to define complex application architectures with ease.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;The use of containers is very important and requires calmness of mind to master, as a result I have two more modules lined where I would walk you through hands on containerization with docker and subsequently deployment.&lt;/p&gt;

&lt;p&gt;If you enjoyed this and want to complete the modules, give me a follow and watch out for module 2 of this series.&lt;/p&gt;

&lt;p&gt;Lets Connect : &lt;a href="https://twitter.com/vector_ware" rel="noopener noreferrer"&gt;Twitter&lt;/a&gt; | &lt;a href="https://www.linkedin.com/in/chukwuduzie-akalonu-46811026b/" rel="noopener noreferrer"&gt;LinkedIn&lt;/a&gt; | &lt;a href="https://github.com" rel="noopener noreferrer"&gt;Github&lt;/a&gt;&lt;/p&gt;

</description>
      <category>docker</category>
      <category>containers</category>
      <category>containerapps</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Building an AI Chatbot using Open AI API "GPT-3" model with Node.js and React.js</title>
      <dc:creator>Chukwuduzie Blaise</dc:creator>
      <pubDate>Sat, 11 Mar 2023 14:43:57 +0000</pubDate>
      <link>https://dev.to/vectorware/building-an-ai-chatbot-using-open-ai-api-gpt-3-model-with-nodejs-and-reactjs-8ia</link>
      <guid>https://dev.to/vectorware/building-an-ai-chatbot-using-open-ai-api-gpt-3-model-with-nodejs-and-reactjs-8ia</guid>
      <description>&lt;p&gt;"The field of &lt;strong&gt;artificial intelligence&lt;/strong&gt; (AI) has experienced a sudden explosive boom in recent months, with advancements in machine learning, neural networks, and &lt;strong&gt;natural language processing&lt;/strong&gt;. AI is revolutionizing industries from healthcare to finance to transportation, and its impact is only set to increase in the years to come. The sudden boom in AI is due to a confluence of factors, including the availability of massive amounts of data, the rise of cloud computing, and the development of powerful algorithms. In this article, we will explore the reasons behind the sudden AI boom and its implications for the future and how to utilize this tool as a developer."&lt;/p&gt;

&lt;p&gt;If you are reading this then I guess you liked the opening paragraph above, well it was written by the most popular AI tool today **ChatGPT **and this is proof of its capability and the impact it has had over the last few months on most activities surrounding humans and computers in general. As a Software Developer, I became curious as to how AI models could be utilized. In this article, I will share steps and guide you to building your very own text completion chatbot using **Open AI's API **and also make sure you understand some very important concepts.&lt;/p&gt;

&lt;p&gt;Before we start, look at the below as your table of contents and guide for this Article:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. Understanding prompt Engineering.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. Examples of prompts with chatGPT.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. Different AI models from OpenAI and uses.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;4. Understanding the temperature scale and its effect on AI responses.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;5. Choosing your tech stack for the build, Creating Node.js, Express.js server and OpenAI setup.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;6. Creating React App and making an API call to the back-end.&lt;br&gt;
**&lt;br&gt;
*7. Receiving responses from the backend.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;## Understanding Prompt Engineering&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Firstly do not get overwhelmed by the term** "Prompt Engineering"**, it's a simple theoretical concept to grasp. It has to do with effectively querying (asking questions) to an AI to get the desired or even a much better outcome than expected. This is because even though AI models are trained to give humanlike responses there are still limits to their ability to properly understand questions. So even though they are made to be intelligent, there are definitely better ways to ask questions rather than asking a regular person.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;## Examples of Prompts with ChatGPT&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Let us look at one example below:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5pnd1pv85mc0ngzhigzb.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5pnd1pv85mc0ngzhigzb.png" alt=" " width="800" height="570"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now let us look at a more structured prompt.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0dei2jd98z3pwjov0rer.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0dei2jd98z3pwjov0rer.png" alt=" " width="800" height="581"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you look at the two images above clearly, you will see that in the first chatGPT gives a vague response that makes in the first one. In the second image, the response is much more detailed and straight to the point. One can also see that this is partly because of the prompts used, the first one had little detail and so the data was generated based on the little it could grasp. In the second image, the parameters were defined and this goes to show exactly the significance of Prompt Engineering.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;## Different AI models from Open AI and their uses.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;AI is capable of doing a lot of tasks but in other to improve efficiency and other factors, OpenAI created models named after popular personalities or technical terms. Each of them has a particular field they are trained to perform better at. The image below will show you all the current models.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnmnvokeqofrnhhhtpaql.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnmnvokeqofrnhhhtpaql.png" alt=" " width="800" height="473"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can also head on to &lt;a href="https://platform.openai.com/" rel="noopener noreferrer"&gt;Open AI API&lt;/a&gt; site to learn more. The AI model we will use is the &lt;strong&gt;text-DaVinci-003&lt;/strong&gt; based on GPT-3.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;## Understanding the temperature scale and its effect on AI responses.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Just like the prompts enable you to query the AI model, the temperature also has an important role to play in the nature of the responses you get. The temperature scale ranges from 0 to 1 and different temperature values affect the creativity of the AI. Let us look at an example.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fi2dbtu32vsuv2al5humu.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fi2dbtu32vsuv2al5humu.png" alt=" " width="800" height="349"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you pay attention to the above image you can see I asked the AI a question &lt;strong&gt;"What is the best way to learn to code?"&lt;/strong&gt; When you look to the right you can see there is a temperature scale and it is set to zero. Now the answer it gives seems fair enough but just hold on till you see the reply with a higher temperature value below.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F07rk96czh5no715frq6q.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F07rk96czh5no715frq6q.png" alt=" " width="800" height="275"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In this next example, I asked the AI the same question on a temperature scale value of 1 and if you take a look at the answer you will see a difference. The AI is more direct and precise and goes ahead to even mention the programming languages needed to learn to code. Later in this article in your backend build you will find out that you can change the temperature value yourself when working with the API.&lt;/p&gt;

&lt;p&gt;In general, the higher the temperature, the more flexible, precise and honest the AI gets with its responses. it is very simple to understand, some developers even argue that the temperature scale of chatGPT is set to a low value as a control measure, but who knows?&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;## Choosing your tech stack for the build.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;As a developer, your tech stack is a combination of languages and tools that you are comfortable building with. I am a &lt;strong&gt;MERN&lt;/strong&gt; stack developer and that means I work with &lt;strong&gt;React.js&lt;/strong&gt; on the front end and &lt;strong&gt;Node.js&lt;/strong&gt;, &lt;strong&gt;Express.js&lt;/strong&gt; on the back end and MongoDB for the databases.&lt;/p&gt;

&lt;p&gt;The &lt;strong&gt;OpenAI API&lt;/strong&gt; currently supports &lt;strong&gt;Python&lt;/strong&gt; and &lt;strong&gt;Node.js&lt;/strong&gt; for builds&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fi9dfe3sk8trjqvqbwbib.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fi9dfe3sk8trjqvqbwbib.png" alt=" " width="800" height="598"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I will be working with Node.js if you work with python be sure to still follow the steps and you will be fine, so let us get started.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;## Setting up Express.js server and API setup&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Open your IDE of choice, mine is VS code. Create a project with a folder for the backend and the frontend too.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F31c8qv88z74tlrq7n4yq.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F31c8qv88z74tlrq7n4yq.png" alt=" " width="192" height="86"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Initialize your package.json to keep a record of your dependencies by using the following command.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm init -y
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The next step is to install the following packages from npm&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm install openai body-parser dotenv cors
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now we set up our express server and require all our modules for the project.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnbjjl05bkirinpphhzn2.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnbjjl05bkirinpphhzn2.png" alt=" " width="800" height="231"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you are familiar with APIs you will remember that you usually need an API key for authorization and so you have to generate one. Head over to Open AI and create an account. While you are in click on your profile icon at the top right corner.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fayfexgh7p282w3xk5308.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fayfexgh7p282w3xk5308.png" alt=" " width="511" height="365"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You will see options to generate an &lt;strong&gt;API key&lt;/strong&gt;, do this and continue.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjcuz37390vuwhy0khadc.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjcuz37390vuwhy0khadc.png" alt=" " width="800" height="552"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Please be mindful that you do not share your API key with anyone as it is personal, as a result of this we will assign this API key to a variable in our &lt;strong&gt;.env&lt;/strong&gt; file which we will create next. This helps with security to ensure unauthorized users do not take advantage of our code.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frnwuphkxhs53zl1crw6s.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frnwuphkxhs53zl1crw6s.png" alt=" " width="401" height="183"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now we can refer to the API key as &lt;strong&gt;OPENAI_API_KEY&lt;/strong&gt;, you can also give it any other variable name of your choice.&lt;/p&gt;

&lt;p&gt;Now let us write the remaining code for the backend with the documentation as the guide.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpmwkclm9e3dp3rl847sm.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpmwkclm9e3dp3rl847sm.png" alt=" " width="800" height="597"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;All the logic is written in the server.js file for the sake of simplicity in the code. If you do not understand it all do not panic, I will explain everything completely.&lt;/p&gt;

&lt;p&gt;In the beginning, we reference the configuration function with the &lt;strong&gt;apiKey&lt;/strong&gt; as its value then we reference the &lt;strong&gt;OPENAI_API_KEY&lt;/strong&gt; just like we defined in our** dotenv **variables.&lt;/p&gt;

&lt;p&gt;The next &lt;strong&gt;handleError&lt;/strong&gt; function is for error handling in case we have a bug with the configuration function for the API key.&lt;/p&gt;

&lt;p&gt;We later use the &lt;strong&gt;body-parser&lt;/strong&gt;, a node.js body-parsing middleware. Cors is used to limit privileges to routes as a means of security.&lt;/p&gt;

&lt;p&gt;The next is the main logic as a post request to the client side for use, for more reference visit &lt;strong&gt;Open AI&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;## Creating React App and making an API call to the back-end.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;In your frontend folder create a react app using &lt;strong&gt;npm, npx or yarn&lt;/strong&gt; depending on your preference and give it a name. I prefer npm because I am accustomed to it and I will call mine alexander-ai.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;create-react-app alexander-ai
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Clean up your react-app boilerplate code to your liking, the react-app will be a single-page application for simplicity but you can customize your app for more frontend functionality if you wish.&lt;/p&gt;

&lt;p&gt;In your &lt;strong&gt;App.js&lt;/strong&gt; file, we use the &lt;strong&gt;state&lt;/strong&gt; hook to manage the state for messages we will send to the server and responses respectively.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbxcwkr8mydrcn6wj70qt.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbxcwkr8mydrcn6wj70qt.png" alt=" " width="800" height="181"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Next, we have to make an API call to our backend server to get responses. I will install an npm package called Axios to help me with this.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm install axios
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now, we make the API call using &lt;strong&gt;axios.post&lt;/strong&gt;, alternatively you can make an API call using the fetch API as seen in the code sample below.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fd81xsq5viv9p3rcbrqex.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fd81xsq5viv9p3rcbrqex.png" alt=" " width="800" height="612"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;To receive and send responses to the server we design a simple form for input, you can play around with your user interface and make it into a chat app. For simplicity, we will keep it this way.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm3k28xguv073aca0q0tb.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm3k28xguv073aca0q0tb.png" alt=" " width="726" height="655"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you have followed this tutorial up to this point, you should give yourself a pat on the back as you have done well. Now you can go load your react app in your browser and hold a conversation with your chatbot.&lt;/p&gt;

&lt;p&gt;For more reference on the source code, you can check my &lt;a href="https://github.com/vector-10/Alexander-AI" rel="noopener noreferrer"&gt;GitHub&lt;/a&gt; and &lt;a href="https://platform.openai.com/" rel="noopener noreferrer"&gt;Open AI&lt;/a&gt;. Follow me if you are interested in topics like this, I hope you come back next time.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>node</category>
      <category>react</category>
      <category>ai</category>
    </item>
  </channel>
</rss>
