Build Your Own ChatGPT using React JS and OpenAI API | Part 2 | ChatGPT Clone | React Projects

Key Takeaways

Okay guys, we are live. I hope I'm audible. Please mention in the live chat. Is everything clear? Then we can start with this live session. I Is this part one? No, actually this is part two. Let me just clarify those things for you. So, uh basically we created part one for build your own chat GPT using the React JS and open API. Okay, uh we basically created this live session a long time ago. And today we are taking the part two. Why we have to take the part two? Because part one stopped working, okay? And as a developer, it's my duty to correct that thing. Why? Because previously we were using free version of open API, right? Open AI API. The problem with that version was that time it was free, but now it's paid. So, now if you want something free, for that I'm taking this session, okay? So, uh yeah, in the title we have mentioned open AI API, which we are going to change. Uh so, basically instead of open AI API, we're going to use a free API service today in the previous code in the previous part one's code. So, I'm going to show you where is the part one. In that code, we have to change the API and also some functionalities. Which API we're going to use? We're going to use Google's Gemini API. So, yeah. Chat GPT, inside that we are using Google's Gemini API. Although you can just change the UI as per your demand, we are using the same old Chat GPT UI, the design which we created in Next.js React.js. So, let me just show you first of all what was the mistake, okay? What was the problem? So, if if I just take you to part one, okay? Let me just show you where is exactly part one. So, you just need to visit GeeksforGeeks channel, okay? And then you can just go to this playlist, and here guys, you would find World of Development. I guess it's here. Let me just check, okay? No, it's not here. It's in the next playlist, okay? Uh yeah, this this is the this one this one, right? Front end project tutorials, React projects, okay? So, here you would find the part one. So, in part one what we did was if I just uh show you this at the end. So, uh I think I have shown the UI. Yes. Just a minute, guys. Voice is not clear. Okay, let me just check. Someone mentioned it's loud and clear. So, that So, I thought that it's fine. Let me just check. Okay, I think now it must be more louder. Please mention again in the live chat and we can continue. Okay, let me just check by my side, okay? Then we can continue. Okay, thanks for mentioning. I think now it's more clear. I made it more louder, okay? So, yes, I was telling you that in part one what we have completed. Okay, let me just skip this ad and ad came. Just a minute. Yes. So, yeah, you can see that this was part one, right? And since it got more views and uh basically what happened was I used React JS and ChatGPT Open AI API for this, okay? Open AI API for this. I hope this much is clear. You will watch that tutorial, you will uh be understanding some things more, okay? This was that part one so that you can understand part two. This was working fine at that time 2 months ago, but now OpenAI API is not free. Previously, it was free 2 months ago, it was free, but today if I develop today, it's not free. That's why you would get some comments that it's not working and some kind of comments are here. Okay. So, you can see some kind of comments I'm getting lots of errors again and again. So, I thought that let's create part two for that so that we can fix our API. So, instead of OpenAI API, we're going to use Gemini API. Okay. So, let me just give you a small description. So, I'll just give you a small diagram what we are going to use. Okay. So, first of all, we're going to use the old React JS UI which we created in part one. So, you can watch the part one for the UI part. I'll also provide you the source code. So, from there also you can get the UI design. Okay. Don't worry about that. Okay. So, here I'll just write First of all, we have the React JS /Next JS actually. It's same. Okay. Yeah, those who know Next JS, they know it's same as React JS. Okay. So, we have the front end. Okay. We have a front end, right? We have a front end React JS and Next JS. The UI design is like this. Okay. UI design is this which we already created. If you want to get the Git repository, what you need to do is you just need to type v i r a j j 0 1 4 github.com. Okay. So, github.com/virajj014. Okay. So, if you type this, you will get my GitHub profile. Here in the repositories, you need to just type chat GPT React Next JS. You can just type this exactly and you would get this. Okay. So, here you can see that everything is fine, but again, 2 months ago, things are working. Today, things are not working. So, we have to fix that today. Okay. What's that? We have to change the API. We were using OpenAI API previously. Today, we are going to use Gemini API into the same design. Okay. So, the design is exactly same which I explained in that video. Just the logic is different and the API is different. Okay, so the design is ready. If you still are not able to understand the design, you can just watch this tutorial. Design is very easy, very easy. Okay, you just need to understand the basic concepts and everything is fine. Okay, if you want to get the design, what you can do is you can just check out this repository. I'll download this and I'll explain you again. Okay, don't worry. So, yeah, here you can just see that first of all, we have the front end in React JS Next JS. That means this UI. Okay, this CUI. So, let me just take a screenshot of this. Okay. Uh I'll just paste it here. Okay, so we made this UI in Next JS. Okay, perfect. And next what we did was we actually used OpenAI API because it was free, right? We used OpenAI API. Which was free till last month. Okay, so it was free till last month. But now this is paid. You can just go and check yourself. And now if you try to use this for free, you won't be able to use this. And obviously we want free stuff. Okay, so instead of this, this was done in part one. Instead of this, this was done in part in part one. Now what we're going to use is we are going to use Gemini API. Okay, so we are going to use Gemini API instead of this OpenAI API. Okay, so let me just write here Gemini. Those who don't know what's Gemini, Gemini is Google's Bard or Gemini, you know, it's it's like ChatGPT made by Google. Okay, now it it's also great. I use both of them. ChatGPT and Google's Gemini, both are really great. Okay, so yeah, we are going to use Gemini API which is free for any number of use cases. You can use it any number of times. Unlike OpenAI API, you get some credits and then it expires. Google's Gemini API is free for any number of use. Okay, so it's always a better approach to use Gemini API if you are someone who wants things for free. Okay, so yeah, this is free and we are going to implement it. So first of all, let me just share you where is Gemini API? Let me show you where is Gemini API. So guys, you need to just simply type Gemini API. Just type this. Okay, just type this. So once you type this, you can see build with Gemini API. Okay, you have this website. Okay, you have this website. So you go to this website. So if you are in India, in India region, you would see this website, but in some countries this might not work. So please check because I had a client, freelance client, and in his country it wasn't working. So in some countries it might not work, but yeah, for India it works properly. You can see that this website is loading properly. Fine till here? So just pause it. Let me first of all show you the existing code. Okay, so the existing code is something like this. This is what we wrote in part one. You can see we used OpenAI API. Okay, everything was working fine then. Okay, but today if I try to use this, I have some API key in ENV local. If I try to use this, it would simply say that 404 not found or some kind of error because my plan is either expired or I don't have active recharge on it. Whatever reasons. I want free stuff. I don't get free stuff here. Okay, so if I just show you this is the existing code which is running, part one's code. Okay, so if I write hi if I write hi, you can see that I'm getting some error, unauthorized, things like this. Okay, this error. Perfect. So to fix that, instead of this OpenAI API, we are going to use Gemini. That's it. Okay, that's it. So this is the code which you would get. Okay, let me just show you the exact basic stuff. So what's what's this stuff? This is a Next.js code explained in part one. I created this in part one. How to start this code? Okay, how to start this code? So we need to simply uh and I'm going to create a fresh fresh component. Okay, so that it's easy for us, okay? Just keep it aside. I'll create a fresh project. So, let's create it here, okay? Here itself. I'm just going to create a new folder, okay? And inside that, let me just open things in VS Code. Okay, you must have VS Code and Node.js installed. That's the basic thing which we require for React JS or Next JS. Here guys, we are going to simply type in the terminal. I hope this is visible. Let me just zoom this, okay? So, I need to simply type NPX create next, okay? Next app at the rate latest, okay? At the rate latest. I think this is it. So, you type the command. And once you type the command, yeah, it's going to ask for the latest version, okay? And your project name. So, I'm just going to say chat GPT Gemini, okay? Something like that because we're using Gemini API, okay? So, would you like to use TypeScript? Yes, TypeScript. And yes for ESLint, and no for Tailwind, and SRC directory, yes. And app router, yes. And no for import, okay? Why we are using Next JS? Because in the React JS website itself, they are mentioning to use Next JS, okay? So, React JS developers, please shift to Next JS, okay? So, we are using Next JS this way, okay? So, here you can see that I'm going to create a basic project. This project is going to be empty. Then we are going to paste our old things, okay? So, that we are on same page. Even if you don't watch part one, you'll get this, okay? You'll understand this, okay? So, you'll get the complete source code. Don't worry about that, okay? So, the source code is on me. I'll provide you the source code. All right. So, here's this one. And it's going to take a few minutes to complete, and then we can continue. So, you can see this is a fresh project. Right now it's empty. It does not contain any code. Okay? So what we're going to do is we're just going to go to base.tsx. Okay? So this is a boilerplate which you get by default. I'm just going to remove this. I'll just write here H1 This is chat GPT. Okay? This is chat GPT. And save this. Okay? And guys, now let me just run this. So I'll just open this in integrated terminal. You can see that this project is in integrated terminal. Just type npm run dev. Okay? That's it. So once you type this, you would get a fresh project into your browser. Okay? Into your browser. So local host uh 3000. Yeah, you can see that this is chat GPT. That means you got a fresh project. Okay? So now guys, first of all, I already explained the UI part in this video also. So I'm not going to waste my time in part one I explained that. I'm just going to copy paste things directly. Okay? So again, just go to this repository. We're going to create a fresh repository for part two. We're going to take things from part one. Okay? So nothing, just uh go to the SRC. Okay? Here we have the components. Here we have the left section and right section. Okay? So similarly, in your code in your code what you need to do is you just need to create go to SRC. Inside SRC, don't go inside app. Here just create a components folder. Okay? Components. Okay? And inside that we're going to need the left section and right section. Okay? So let me just uh check the name. Okay, yeah. Components. Components. Inside this we have the left section and right section. Okay? So left section dot tsx. Okay? Similarly, we have the right section. So right section.tsx. Okay? Perfect. So we have the left section and right section. And this code is again explained in the part one. I hope you know. Please watch from the start. If you didn't didn't get where is exactly part one. Okay, so I'm just going to copy this left section. Okay, and I'm going to paste it here. Now, where are the styles? You can see that the styles is exactly in the styles folder. So, we need to create the styles folder also. Okay. And inside the SRC, I'm going to create a folder named as styles. Okay, styles. And here guys, we have the left section dot module dot CSS. Okay, so we need to copy the styles again from the repo. Okay, so just go to the styles folder or okay. And this is the left side. So, just copy this part and just paste it here. Okay, this was explained in part one. Similarly guys, we're going to create right section CSS. The CSS is also very easy. Okay, so inside the right section CSS, I'm going to paste this part. Okay. So, you can see that this is also here. Perfect. Now guys, in the components part, we have the left section and we need to have the right section. So, here I'm just going to type RAFCE, which is an extension shortcut from React JS. You need to just get an extension named as ES7 Plus. Okay, ES7 Plus. Once you type this extension, okay, ES7 Plus. Okay, once you type this extension name, you need to simply install this extension. Just install this extension and after that, your shortcuts would be working. RAFC, this is the shortcut, right? So, you would get the simple right section. Okay, so let's go back to the page.tsx, which is available inside the app folder. This is the page.tsx, okay? So, inside guys, the page.css contains two things, left section, right section. Okay, so I'm just going to go to page.tsx, which we created before. So, page.tsx and you can see that you just need to copy this and just paste it here. Okay, and one more thing guys, we have some assets also. So I'm just going to download the assets or you can just get the assets from my repository. Okay, this is just a logo chat GPT logo and this is another type of logo and say no user logo. That's it. Okay, these are some images assets. Okay, PNG format. So we are showing this assets. So first of all, you can see in page.tsx we have left section and right section. Let's talk about the CSS of page.module.css. So just go to the page.module.css and just paste the code. Okay, so you can just check it here. It's exactly this one. Yeah, we pasted this code. I also go to global.css and copy this part and also paste this one. That's all we did in part one. Okay, that's all we did in part one. And you would find the code exactly same as part one. Okay, we have the exact same code as part one. So now if you didn't watch the part one, you'll have the idea. Okay, and let me first of all check then we are going to talk about the right section also. So you can see that is the left section. Perfect. In the right section right now we don't show anything. We have to show something. Okay, what we are going to show? Again, the chat GPT like UI. This UI. Okay, so we already have built this in the part one. So I'm going to take the code from part one only. Okay, so right section and today we are going to upgrade this code. Okay, existing code. So you can see that we have this code. Perfect. Okay, we have this code. Perfect. And you can see that this is the right section. Okay, here we need one more thing that is the react spinners. Uh okay, I'll just write it like this. Or or or we're going to talk about this later. Okay, we're going to talk about this react spinners later. Um Okay. Um comment and comment. Okay, perfect. So yes. So in part one you had this much. Okay, in part one you had this much. Simple UI, chat GPT API. Where is the chat GPT API located? So, you can see that first of all, this function is here. You can see that this function is here. This is the URL and then it needs the API key. Where is the API key? So, you can see API key is a variable which is taking the API from this this location. Okay? So, this location is basically from where you are taking the API. Okay? So, you can just come here and you can see actually in part one it was named as OpenAI API key, not the Gemini API key. This is the updated code. Okay? So, yeah. You would see something like this in part one. Okay? It was next public OpenAI API key. And now here guys, in the SRC in the SRC I'll just go here and I'll just create a file .env.local. And here we had the variable which contained our API key like this. Okay? With the variable name and the API key. That's it. So, this was the part one. Now, let's continue to part two. Okay? So, first of all, what was the problem? Again, the API key which we generated for free from OpenAI in the last video, it wasn't working properly. Why? Because now it's not free. Previously, it was free. At that time it was working. Today, it's not working. So, how to fix that? How to fix that? So, since you watched the part one, this is part two for you, specially for you to fix the code. Okay? So, here what we need is we need Gemini API key. How we can get the Gemini API key? So, just go to this website, okay, which we opened, okay? Gemini API. Just go to the first website. Here guys, what do we have? We have the first link. Okay? Inside this, you'll get the API key. Get API key in Google AI Studio. And here you would see get API key. Okay? So, this is the API key which you get from Google's Gemini. Now, we're not using Chat GPT API key. We're using Google's Gemini. Okay? Google's Gemini API key. The function is exactly same just like Chat GPT, but we're using this because this is free for any number of use cases. So, obviously, it's always better. Okay? So, I'm just going to say I'll just delete this API key for now. Okay? Existing ones. Here, you have to simply click on create API key. Okay? And here, guys, you need to simply just pick any project if you want. I I can pick any project name. If you don't get this, you can just select this Google like any project. Okay? Any project. That's totally fine. So, you can see that it's generating an API key. Okay? So, this is the API key. Please don't use my API key. Generate your own API key. Okay? Although this is totally free. So, even if you use it, that's fine. But, please use your own API key. Okay? So, this is the API key. I'll just copy this. And I'll just go here. And here, first of all, let me just change this OpenAI to Gemini API key. Okay? And the API key. That's it. Okay? So, we have the API key, guys. Okay? We have the API key. Now, go to the right section. Okay? Go to the right section. And just paste this variable name. Okay? So, instead of OpenAI, we're using Gemini API key. Perfect. Now, everything is fine here. We need to just fix these things. Okay? We need to fix these things. Okay? So, what we did was we created a simple training prompt and things like that. So, first of all, I'm going to delete this stuff. Okay? I'm going to delete this stuff also. Okay? Now, guys, I'll delete this part also. Okay? I'll delete this part. Uh Just a minute. I'll delete these extra buttons also. Okay? So, that's fine. Now, let's try to finish this code. Now, let's try to finish this code. Okay? So, guys, what we need to do is we need to just work on the right section. Here, first of all, we have the training prompt. What's our training prompt? So, it's like uh Okay, I'm just going to write my own training prompt. And or else, let me just keep this random training prompt. Okay? So, this is what we did in part one also. had a sample training prompt. If you don't want to give a training prompt, that's also fine. If you want to give a training prompt, that's also fine. So, let me just create a simple training prompt for you. Okay, very simple training prompt. So, it's going to be like So, here it's going to be like what what's the introductory prompt which you want to give? Okay? So, first of all, I am the user. I am saying to the AI, to the model. This is an introductory dialogue for our any prompt. So, whenever I load the application, whenever I load the website, this is the message which I must get. Okay, which I must get. When if I say hi, I must get something like this. Okay? So, I am Harshal's bot. Okay? Our Geeks for Geeks bot. Geeks for Geeks bot. Okay? Ask me anything regarding uh placements. Placements, DSA, web development. Something like this. Okay? I'll be happy to help you. Okay? So, this is the introductory introductory prompt. And this is it. Okay? And uh one more one more thing. Suppose I want this model to call me what? To call me what? I want this model to call me Tony Stark. Okay? Tony Stark. So, my name is Tony Stark. Okay? My name is Tony Stark. And the model would say, "Okay." So, this is the introductory prompt. And it's like a training. Okay, it's like a training. I'm just giving you basic instructions that if I say this, you are okay with this. If I say this, you are okay with that. So, it would remember that my name is Tony Stark. So, whenever if I ask, "What's my name?" it would say, "Tony Stark." Okay? Like that. Okay, so you can see that this is a basic prompt. And you'll get this code into my like yeah repository. I'll provide you the repository, don't worry. So, you'll get this code. Okay, so this is the training prompt which we are always going to give at first when you start this application. Okay, now after this what we have, we have the message field and it's same as before. Message field is simply taking the message which we write here. Okay, which we write here in the message message box which box? Let me just show you. Uh Just a minute, guys. Okay, yes. So, you can see that this is the message box. Okay, this is the message box. Whatever you write inside this, it would come inside the message variable. Okay, via here. So, this is what we did in the last video, part one. This was done. Now, what we are going to do is we are again going to create a flag named as is sent true or false. So, this is a flag which we are going to use. It's like loading animation when message is sending and receiving. When message is received, this flag is going to be false. Okay, initially it's true. Like that. Okay, so if it's true, that means loading. If it's false, it's not loading. Like that. We are going to discuss that. Okay, now what else we need? We are going to create a hook for storing all messages. This is the previous hook which we already had. It's going to store the all messages. Whatever messages we have, user model, user model, user model. Like that. Okay, all messages. So, it's like the array which is going to store all messages for us. Okay. Then. Now guys, what we are going to do is we are going to create a function named as send message. Okay, so this is the function which we already had for sending message. Whenever users clicks on which button? Whenever user clicks on this SVG, this button, I'm simply going to call send message. Okay, send message. That means I'm simply going to click on this and this would call send message. Okay, this was done previously. Now, inside send message, we are going to apply our logic. Okay, apply our logic. Okay, we are using Gemini API now. So, this is going to be a little bit different. Okay, so here what we are going to say, we are first of all going to bring the URL. Okay, bring the URL. So, URL equals this is the URL which I'm going to fetch. Okay, which I'm going to fetch. Where is the URL? So, just go to Gemini's website. Okay, just go to Gemini's website. And here guys, what you need to do is just go to documentation. And here you will get the documentation. Just go below and here guys, you'll get the REST API. Okay, just go here. If you want to use it for Python or different different things, you can definitely go. But this is the basic thing. So, you can see that these are some things which you would get. So, this is this is this is the URL which I'm talking about. Okay, if you're someone who understands cURL, then you would definitely get this. Okay. So, here guys, you have HTTP Generative Language Google's API and uh I'm just going to copy this part. Okay, I'm just going to copy this part. Okay, now here you'll come back and paste it. Right? So, you have the URL in which you'll send your request. Hi. What's GeeksforGeeks? Something like that. Okay, you're going to send your request to this URL. Now, just add the API key at the end. Okay, so you can add your API key at the end. So, API key is nothing but the variable which we have stored and this is going to store your API key coming from env.local. Okay, so your API key is also here. Now, you need to create an object. message to Actually, it's an array. I'm sorry. Message to send. Okay, messages to send. So, I'm going to send previous messages also. If I'm saying uh suppose if I'm saying what is GeeksforGeeks? So, before that I'm going to send the previous prompt also and previous questions I asked. Okay, so previous questions that I asked would be in all messages. Previous prompt would be in all messages. Okay, previous questions would be in all messages. Training prompt would be here. New message would be here. Okay, so we are simply going to say that latest message which you which you have typed would be inside this, right? Previous messages, previous questions which I asked would be here. My training prompt would be here. That means three things are here. Okay, so we are simply going to say that dot dot dot training prompt, okay, comma and then guys we are going to have dot dot dot all messages, okay? Then guys we are going to have the latest message which we have typed. This is the latest message which we have typed in the message bar. And these are old messages and this is my training prompt. So at the top I'm going to provide my training prompt, then the old questions which I have already asked and this is the latest question which I'm asking, okay, into that chat, okay? So here I'm just going to say that this is going to be like an object. Inside this I'll just say that role since as a user I'm asking this so role is user, okay? And what? And inside this we are going to say parts, okay? Inside parts we are going to create an array. Inside that we have a single object. Here I'm just going to say whatever is your text, you're going to provide that text. The text is message. In the exact same format, training prompt is this format. Similarly we have the message in this format, okay? This is the way you're going to send your data to Gemini and you're going to receive stuff. This is the format which Gemini follows, okay? How did I know? So you can see that here is a sample a sample a sample thing. You can see that this is this is a sample which you would get, okay? So role model and some parts, okay? Right, something like this. But uh you uh just explore this. Yeah, you can see yeah, here we we have this, okay? Here we have this. So you can see this is the format which Gemini expect things, okay? So inside contents I'm going to provide the array. This array is what? Messages to send, okay? Inside contents I'm going to provide this whole array. This is what? Messages to send which we have stored, okay? Which we have stored here, right? Messages to send send, okay? So we have the array. We are going to provide this into the contents field of our API. That's it. How we can do that? So guys for that we have to simply say first of all I my message is not sent. Okay, my message is not sent. So, I'm going to say false. That means since message is not sent we're going to show a loading animation. So, we're going to make it false. Okay, since initially it was true, that means message message is already sent, so we're not going to show any loading animation. Since message is sending we're going to say false. Okay, message is sending, so I'm going to say false. Okay. So, here we're going to say that await and here we're going to say fetch. Okay, just like we do in fetch API. Inside this just provide the URL. Okay, just provide the URL and then inside the body like means first of all in the inside the extra fields first of all we're going to say that the method is post. Okay, method is post. How do I know that? So, it's very easy. You can see that you can read things. So, you can see this is the URL. Okay, if you understand curl you'll understand this or you can use ChatGPT to understand this. It would convert it into a fetch request. Okay, so this is the URL and this is the header content type application JSON and this is the post request. Okay, so these are the three things which we have. Similarly into our API we are saying method is post. Okay, and inside headers we're going to say content type application JSON. Perfect. Now, the last thing is inside the body inside the body we are going to say into the string format you send the data in string format always. So, JSON.stringify just a second. Body. JSON .stringify and guys inside that we are just going to say that what are your contents. So, c o n t e n t s. Okay. Contents. Okay, contents. And inside this we are just going to say messages to send. Okay, messages to send. That's it. So, you can see that we have messages to send. Okay, we have messages to send inside this. So, content contains this array. Which array? You can see contents contents contains this array. Okay, so contents, right? Contents. Yes, contents. Perfect. So, you can see that we have this ready. We have this ready. Now, we have to just make a request. Okay, now we have to make a request. So, we are making a request and we are storing the result in RES JSON. Okay, perfect. Now, we have the response. We have a response. So, first of all, I'm going to say that since we received a response, so we are going to say set is sent as true. That means now we have sent the message and everything is perfect. So, we're just going to make it true. That means loading would stop. Okay. Loading would start here. Loading would start here. You are making the request loading animation. Then we got a response, we are going to stop the loading. That's it. Okay. Now here, guys, we have to simply print this. First, let's print it what we exactly get. So, console console .log. Let's print this. Okay. So, RES JSON. Let's print this. Okay. So, here, guys, uh I'm going to open things. Local host 3000, it's already there. Okay. So, if I type am I? Okay, who am I? So, if I just inspect and console and let's try this. So, you can see that it returned me something. What it returned? So, let's explore this. So, inside our array, this is the RES JSON. Inside this, we have candidates. RES JSON. candidates. Inside this, we have the zeroth object. So, zeroth object. Okay. Inside this, we have the content key. Okay, inside the content, we have the parts. Inside the parts, we have zeroth object. Inside Inside this, you can see I got my response. You are Tony Stark. Perfect. Perfect. That means ChatGPT understood our training prompt. And after that, I simply asked who am I? So, training prompt, previous message, and this message. Okay, that's it. So, let's let's extract this message. Okay, let's extract this message. So, response message. Okay, response message. I have extracted the message. So, let me just print this. Console.log response.message. Okay, we got the response.message. And guys, now if I again ask things So, you can see I'm again again asking things and you are getting something. Okay, you are getting something. Okay, actually the message got erased. I'm sorry. So, if I say hi. Okay, if I say hi. So, if I just check this So, you can see hello my dear friend. I am GeeksforGeeks bot. Ask me anything regarding placements, DSA, web development. So, you can see that yeah, if I say hi, it's going to return me this. Perfect. That means our model is trained. Now, we have to just show this message. We have to show this message into our area. So, just like in the previous video in the part one, we discussed that it's exactly same. We have to do nothing. Just create an array like this. Okay, just create an array like this. And in all messages first of all, show the all previous messages if we have. We are going to show the all previous message. Initially, it's empty, but later on we have to increment that. So, initially, it's empty, but suppose we have two three messages of existing. Okay, existing before. Then we are going to show our latest message which we type and the response which we got. From whom? From the model. So, you can see from the model you got the response. The message you type and the model respond. Hi, I am GeeksforGeeks bot. Right? This is the response. So, we have a new array. We have to show this into our chat. How we can do that? So, I'm just going to say set all messages. The new all messages would be passed to all messages. That means now all messages would be containing the previous chat. And this is our previous chat. Right? This is our previous chat. That's it, guys. That's it. That's what you need. Perfect. Now, um you will notice one more thing. We are not showing training prompt anywhere into our chat. Okay, we are just sending it to the API, but we are not showing it into our chat. Okay, so you can see that this is very clean. Okay, so keep training prompt separate so that no one can manipulate things. Okay, and as soon as you receive things, you show the chat into your page. You're going to make set message as empty. Okay, set message as empty. That means whatever you have typed, it's going to be erased from the message bar. That's it. Okay, so now guys, here once you have all messages, you are simply saying that once you have all messages, you have whatever uh role it is, you're going to show the role. And also the part zero and text. Why? Because you're going to get the response like this. Parts inside this zeroth object and inside this text field. Okay, that's why we have shown it like this. Okay, so you're simply saying that whoever sent the message, if the role is user, you're going to say uh no user logo, else we're going to show the ChatGPT logo. Okay, just like previous video in part one we did that. And then you're going to show the name, the role. Okay, user sent this or ChatGPT sent this. And then the next thing is the message. Okay, that message. Now guys, let's test this. Okay, so if I just refresh and now if I write hi and if I just hit this, so it would take some time and you can see that hello my dear friend, this is ChatGPT bot. Okay, and who am I? So if I say who am I Tony Stark, you're Tony Stark. Okay, as you can see that uh he uh ChatGPT added more things. Okay, so you can see now it's working perfectly and our application is also complete. This is the fix which I wanted to tell you in part two. Now one more thing guys, uh I want to show a loading animation here. So remember we have set is sent as true or false. So according to that, according to that, I'm just using the React Spinner React Spinner package. Okay, so first of all, install the React Spinner package. We have commented this out, so I'm just going to install this first of all. So this is going to give us loading circles and things like that. So it's a very easy package to use. So I'm just going to go here and I'm just going to type npm i install react spinners. Okay, so this is a package very helpful. If you just visit its website, you'll understand it. Uh react spinners. Here you can see you get different different spinning animations. Suppose I like this one, hash loader. So, if I go inside this, you can see we are inside this and then show code you can see that we have hash loader. Okay, so just copy this hash loader and just paste it wherever you want. Okay, so I pasted it here. Okay, I pasted it here. And I'm saying that if it's sending, okay, if it's sending, then then Just a minute, guys. Yes, I'm saying that if it's already sent, that means not loading proper like save zone, nothing is loading, message is sent, we don't want any loading animation. So, I'm going to just show our button. If it's loading, then we're going to show our hash loader. Okay, so just import the hash loader from React Spinners just like this. You can see that hash loader is imported from React Spinners. That's it, guys. That's it, guys. Now, after this after this, you would simply go and check. So, if I type uh What's my age? Something like that. If I try this. Okay, what's my age? So, you can just type this and you are 50 years old. So, according to Tony Stark's age, it just predicted. Okay, so you can see that it's working. You got the loading animation and the project is working. So, now guys, let me just upload the source code. So, for that I'm just going to go here to GitHub. And here I'll just go to repositories and here guys, you'll get the source code here. The source code is available here. You would simply check ChatGPT React Next.js. Okay, so here you would get the complete source code. Here I haven't provided the API key. API key would be available into my page, but I haven't provided the API key. So, what you need to do is whenever you download the source code whenever you download the source code, just create a file named as .env.local and just keep your API key there. Okay, that's it. That's what you need. How you can download the code, it's very easy. Just go to code and then you can download the zip format of this code. That's it. Okay, that's it. That's easy. Right? So guys, I hope you understood this and I hope you enjoyed this session. We completed this part today and this was something really important which I wanted to tell you and I hope for now you won't be complaining in the comment section. Some people complained and thanks for mentioning that actually. I thought we would have covered that. So yeah, instead of OpenAI, we have used Gemini API to get free stuff and this API is free. You can use it as many number of time. There are no credits. It's free. Okay, so you can add more things to that. If you explore this, you have some image recognition stuff also, so you can explore this. You'll get more things. Okay, and you can get paid version of this. I guess you'd get more things and more features. Okay? So guys, I hope you understood this video. The code is available into my GitHub repository, viraj014. Just type this and I'll I'll just provide this in the description or in the comment box also later after ending the session. Just go to my profile. Okay? github.com/viraj014. Here guys, you can follow me. If you want to contact me, you can contact me via these links. In the repositories, you would simply find chat GPT react next JS. Okay, you can just go inside this and you would get the source code. Right? So that's it for today guys. I hope you enjoyed the session and I will see you in some other videos like this one. Okay, you can just suggest me in the comment box what else kind of sessions you want based on AI or some other tools like if you want something related to elections which we are have which which are happening in India or if you want to make a model something like that AI based model or some project. You can mention that in the live chat or in the comment section or you can contact me. Okay? So till then, have a good day. Bye-bye.