Hello everyone, welcome to my channel. In this video, I will show you how to make
an AI chatbot using gpt3 and react native expo. You can see the demo of the final output of
this project. So, without wasting any time, let’s start
this project. Start an expo project, select the blank template,
name your application, and continue to dependencies downloading. In the project, we are going to use the Axios
library. So, install it. Axios is a popular JavaScript library used
for making HTTP requests. It is often used to make API calls and handle
responses. Axios provides a way to handle HTTP requests
and responses in a more efficient and streamlined way, making it a useful tool for web development. Now, create a separate javascript file inside
a separate “src” folder. And then customize the project accordingly. Now, run the application. You can see that our code is working fine
and we are ready to build the project. First, let’s customize the title of the
application Next, we are going to use the OpenAI API key. If you do not have an account on OpenAI then
create your account first. Then follow the video to get your API key. First, we create a stateful variable called
data and a function called setData that can be used to update the value of data. The initial value of data is an empty array. We also create a variable called apiKey which
will hold the key value for the API endpoint that we are going to use. And we also create a variable called apiUrl
which holds the endpoint for OpenAI API Finally, we create a stateful variable called
textInput and a function called setTextInput that can be used to update the value of textInput. The initial value of textInput is an empty
string. The code we will be analyzing today is a function
named "handleSend" that makes an API call and updates the application's state. The function begins by creating a variable
"prompt" that is assigned the value of the "textInput" variable. This "textInput" variable is likely some user
input that will be sent in the API request. Next, the function makes a POST request to
an API endpoint specified by the "apiUrl" variable. It passes in an object as the request body
with the properties "prompt", "max_tokens", and "temperature". These properties are likely used by the API
to generate a response. The request also includes headers, with the
"Content-Type" set to "application/json" and an "Authorization" header that includes a
bearer token in the form of the "apiKey" variable. This is used for authentication and authorization
purposes. The response of this request is then stored
in a variable "response". The function then extracts the "text" property
of the first element in the "choices" array of the response data and assigns it to a variable
"text". This "text" variable is likely the response
that the API generated based on the user's input. Finally, the function updates the "data" state
variable by spreading the current data and adding two new objects, one with a "type"
of "user" and a "text" property of the current "textInput" value, and another with a "type"
of "bot" and a "text" property of the extracted "text" from the API response. This updates the application's state and shows
the user the response from the API. The function also resets the "textInput" state
variable to an empty string, likely to clear the input field for the next user input. In summary, this function handles sending
a user's input to an API, receives a response, and updates the application's state to show
the user the response. We pass in the data prop to the FlatList component,
which is an array of objects that will be used to render each item in the list. We also use the keyExtractor prop to extract
a unique key for each item in the list, this is necessary for React to keep track of the
items. The renderItem prop is a function that is
used to render each item in the list. It takes an object, destructures it and render
the View component with some styles and nested Text component. The View component has a flexDirection prop
set to 'row' which aligns the children within it and also has a padding of 10. The first Text component has a fontWeight
prop set to 'bold' and a color prop that is set to green if the item.type is 'user' or
red otherwise. It also renders a text 'Ninza:' or 'Bot:'
based on the item.type The second Text component renders the text
of the item passed to it and also applying the styles from styles.bot So with this FlatList component, we're able
to take an array of items, apply a unique key for each item, and render each item in
a row format with a 'Ninza:' or 'Bot:' prefix and the item's text, and apply some styles
to the FlatList and rendered items Next, I am using TextInput component to get
the input from the user and using the Touchable Opacity component for button. So, follow the video and you will see a beautiful
UI Next is the styling part. Feel free to customize it. I know everyone knows better css than me. Now, let’s test this application. Congratulations!! You just built an AI chatbot using GPT3 and
react native expo. Make sure to hit the subscribe button before
you go and don’t forget to visit the channel’s react native expo playlist for more such projects. See you in the next video.
