Create a React App with OpenAI GPT API: Send Prompts & Display AI Responses!

hey everyone I'm n and today we will be connecting the power of open ai's GPT to a react application with Firebase and nodejs forming the backbone of our back end so if you have ever wondered how to harness the capabilities of AI in your Web projects then this tutorial is tailor made for you now before we dive in let me give you a quick overview of what we will be creating we will build a web app that takes user input in the form of a prompt like this input and displays the responses generated by the open AI GPT models you will see how seamlessly react works with the backend built on Firebase functions using nodejs and by the end of this video you will have a fully functional AI prompt response application and a solid understanding of connecting apis within a react environment so in this web page if I will put in the prompt input as hi there for the GPD API model and click on submit prompt then we will get the response from the AI like over here hello how can I assist you today let's try a different prompt something like tell me the simple interest formula so this is how the AI is responding with the formula of simple interest now let's start to implement this entire web page by building out our back end and then subsequently integrating that back end with our react front end so let's get started so this is Visual Studio code and in this project we have react as a front end framework and we have Firebase functions which are forming the layer of our back end so first let's see what the this chat GPT component is all about so over here we have an input for accepting the prompt from the user and then we have a button when clicked we'll call this handle submit function over here which is right now empty so we will provide an implementation for this handle submit button and then we have a div which will have the AI output or the AI response is going to be printed in this div also we are using Tailwind CSS utility classes so don't get surprised when you will see some strange looking class names over there these are all tailin utility class names which makes it very easy to style our front end application and also to handle responsiveness pretty well now for the back end we will be using this chat completion function so this chat completion function will be called when the user will click on the submit prompt button the function will get prompt in the data as an argument and then we will send this prompt to the open AI API payload and then when we will get the ai's response then we are simply going to return it and that's all that we need to do but before we start to do all of this there is one very important step that needs to be finished and that is to set up your open AI API account and I will quickly show you how you can do this that so open up open.com and then click on login when you will do that then you will be presented with a screen with two options either login into chat GPT or login into API so you will have to click on API and then you will be able to log in if you have not already created an account then you will have to sign up and create an account on open as website verify your email address and then after you will log in then you will be able to access access your dashboard like this when you will do that then you will be able to provide your billing information so you will have to provide your payment details when you are done doing that then you can simply go to the API Keys page and then create a new secret key for your project So currently I'm using this tutorial key for this video to create a new secret key you can just click on this button and then provide the name of the secret key then click on this create secret key button and you secret key will be created for you and then you can copy it and then start to use it now on the back end side you will just have to install the open AIS nodejs package so to install the open a nodejs package we have to execute the command npm install and then open AI after the package has been installed we can start to use the API in our backend code now why am I emphasizing to run the code code to call the open a apis in your back end well that is the only way that you will be able to protect your secret keys from the prying eyes of malicious users because open api's secret key is only what it takes for you or anyone else to be able to access the API models with your own billing so if you don't want anyone else to be able to use your money to call the API models then you will have to protect your API keys and the best way to do that is to call the apis from back end and store your keys either in environment variables or in a dedicated key manager now with that out of the way let's talk about the documentation how do we need to call the apis so you can go to the introduction and quick start to get to know how you can start to use the apis I will show you at a very minimum what you need what what payload you need to send along with the API request to fetch the desired AI response there are different parameters that you can use to tweak the response that the AI model is providing you but at a minimum you will need the model name and the messages array so model name is the name of the model that you need to use so let me show you the different models that you can have available for you so right now these are all the models which are available for me so I can use any one of these and if you are not familiar with Chad GPT then all I can say is these models have different capabilities so the gbt 4 is the most capable model and GPT 3.5 is not so capable but it is really really fast so if you want to do some basic task with very fast response times then you should do that using GPT 3.5 model but if your tasks are are intelligence intensive or cognitive intensive then you should be using the gp4 model it's somewhat slower compared to gbt 3.5 but it's much more capable okay now let's get back to our backend code and start to implement the chat completion function which our front end is going to call to fetch the ai's response the first thing that I will be doing over here is I will simply fetch the dependency information by calling require open AI because we are going to need the open a dependency or open a package to call the API which I think is currently the best way to do it if you want to utilize all the features provided by the Open Eyes back end so for this code example I'm not going to use any environment variable to store the API key so I'm just going to store the key in our code because it's going to be pretty simple anyways so this is the key which I have generated for this tutorial video now let's initialize the open AI object by calling new open Ai and then providing an options object with the property API key and then the name of the constant which contains our API key which is this one open API key actually it should be open AI API key yep all right now let's create a new constant for the AI model that we are going to use so for the purpose of this tutorial video I'm going to use the fastest model which is this one GPT 3.5 turbo so let's do that and now we will also need the messages array so for messages we are going to provide two objects in this array the first one is going to have the row Ro of system so with role of system we are just instructing the AI model what specific task it needs to do for us so for this tutorial video I'm just going to write you are a helpful assistant okay now let's copy this object and we can provide the role for a user user so as a user what you need is you want the AI model to you know process your prompt and then provide you a response which then you can display on your front end so you have to provide role as user and content as prompt next we will have to call the open AI completions do create function to get the AI response so const completion equals to await this is an async function so await open AI do chat. completions dot create and then let's provide the argument values for model which is AI model and then for messages which is messages all right next we can create another constant with the name AI response now the AI response is going to be contained within this completion object but this completion object also has a certain structure so to fetch the exact AI response we will have to do that by fetching the response from first the choices Aras first item and then the message and then the content and then I am just going to remove this empty string from over here and then remove this dot as well which I don't think is going to be here and then now let's just save your function code so this is all we need to do to call the open ai's AI model at a very minimum we just need to provide the AI model value and the messages array and then simply call the Open Eyes chat completions create function which is going to return us the response now it's time to integrate this function into our front end code so to do that I'm going to open the chat GPT component and over here we have to call this function when the submit prompt button is going to be clicked and when we will have a response then we will simply set the output State variable now it will be a good idea to disable the button while we are fetching the AI response so for that we can create a new state variable with the name fetching so fetching and then set fetching we can set its initial value as false and um let's go to the button and let's set its disabled state so when we will be fetching the AI response then we have to disable the button so that the user is not able to click on it again and again let's also change the button text as well so when we will be fetching then we can set the button text as fetching AI response otherwise we can set the button text as submit prompt which is already here so I'm just going to cut and paste it in The tary Operators condition and one more thing that we can do is we can update the visual appearance of the button while the response is being fetched so this is already a template string so if fetching is true then we can set a or apply a certain set of classes otherwise we can apply another set of classes so currently we have the background the hover background the focus utility class is being applied so I'm just going to um remove them from over here and paste them over here when fetching it false and for background we can use gray color let's also set the cursor class so cursor not allowed which will simply tell the user that you should not be able to use this button while the response is being feted and that's everything we need to do for the buttons visual State now let's come to the handle submit functions implementation so the first thing we need to do is to call the back function and then the second thing is when we have got the response then simply set the output State variables value as the ai's response now because this is a Firebase backend function there is a very specific way in which it can be called so don't go much into the nuances and specifics of how we can call the five bases backend function because this video is about how we can integrate the jat JP model with our react front end but still I can show you the specific details it's very simple actually so we have imported the get functions from Firebase functions so with this we can get the list of all the functions so get functions and next we have to fetch the reference of our function which is in our back end so the name of the function is chat completion so const chat completion equals to htps callable because this is a callable function so there is a specific way to call it and callable Firebase functions are different from normal rest API calls because a context is also provided as an argument which we can use to check the authentication and authorization state of the user but I mean that's not very relevant I'm just telling you because if you are thinking I mean what is a quable function okay so chat completion is the name of the function that we need to fetch and now let's have a tri block and let's also have a catch block so catch error for now we are not going to do anything in this catch block let's also have a finally block and I will tell you what finally is going to be for so the first thing that I'm going to do is to Let's CH a const so const data equals to an object having a single property with the name prompt and with the value of the prompt and then let's set set fetching to true and after that let's fetch the result so con result equals to await chat completion just provide the data as an argument when we have the result then simply set output with the result so result dat. AI response so AI response was the response that we were returning from this scalable function and this is how we can um get its value after we have got the result from this chat completion function call now in finally we can simply set set fetching to false so even if the this operation is a success or a failure we are always going to set it to false so all is left is to run our react application locally and then I'm going to emulate the functions locally because ideally we should be deploying our function changes to a server but that is going to be too complicated and too involved for the scope of this video so I'm just going to emulate them locally so first let's call npm sorry not npm install npm start to start the react application and to emulate the function I'm just going to call npm run and then Firebase emulate so this is a custom command which I have added to package.json which is going to emulate the functions in our local Dev environment so this is the command which is going to get called so our react application is now running on Local Host 3000 let's try entering something I'm just going to enter hello for now now click on submit prompt and we are receiving the response hello how can I help you today now let's enter a different prompt so tell me something about the mysteries of universe click on submit prompt so the mysteries of the universe are vast and captivating and and so on and so forth so as you can see we are successfully able to fetch the open ai ai models response by calling its API and this integration can have a lot of possibilities you can use open AI llm models or for any other llm model to implement a lot of different features for your use cases and your business needs and you have learned how to integrate serverless functions with Firebase to keep our app scalable and also responsive thank you so much for joining joining me in this session I hope you found it helpful and you now feel inspired to use these tools in your own projects and as always if you found any value in this video please give it a thumbs up if you have any questions or if there's something specific you would like me to cover in a future video then drop a comment below and remember to subscribe to the channel for more tutorials like this one and to further your learning and contribution to the developer Community you you can also join our Discord Channel as well finally I'm nage and I'm here to help you on your journey to becoming a better developer keep coding keep creating and I will see you in the next video

Channel: Code Radiance

Views: 2,002

Keywords: OpenAI GPT, React tutorial, Firebase backend, API integration, AI response app, JavaScript development, OpenAI prompts, Frontend programming, Node.js, Web application development

Id: WQh9oCy35p8

Length: 19min 41sec (1181 seconds)

Published: Mon Jan 01 2024