Build A Chatbot With The ChatGPT API In React (gpt-3.5-turbo Tutorial)

Рет қаралды 76,223

Күн бұрын

Enjoying my videos? Sign up for more content here: www.coopercodes.com/
📩 Join CodeLetter by Cooper Codes, the 3 minute tech newsletter: thecodeletter.com
Join the Cooper Codes Community: / discord (Weekly calls, free resources, tutoring, and more!)
In this video we use the new OpenAI gpt-3.5-turbo model to create a ChatGPT application in React. This is one of the fastest GPT models to be released. This video is great for beginners to both React and ChatGPT, and is a great portfolio project. We create a chatbot that allows you to communicate directly with the ChatGPT API, which is a project that can be applied to a vast array of React projects! This project gives you a great understanding of the ChatGPT API, even if you don’t plan to replicate the project created in the video yourself.
Final Project Code: github.com/coopercodes/ReactC...
0:00 Intro
0:50 Create chat UI / Manage messages state
7:52 Set up ChatGPT API
9:19 Process message with ChatGPT API
17:40 Show ChatGPT response to user
19:58 Changing system message prompt
21:15 Thanks for watching!

Пікірлер: 169

@mathbydoing Жыл бұрын

Thanks so much! It works great, and following your video did not take much time . Presentation-wise it is a masterpiece. Using this as a template, I will repeatedly refer to your channel.

@gokhanburhan382 Жыл бұрын

This tutorial is for who thinks on a new Idea with openAI API good work bro

@deoarlo Жыл бұрын

Amazing tutorial. And I love that you're using Vite

@yinanli2542 Ай бұрын

Thank you so much, your presentation is excellent!!!

@angelgutierrez8303 Жыл бұрын

It was really helpful. Thank you very much! Just one think. The code as it is allowed me to send only one message. I had to modify a line as below. [before] [after] handleSend(message)} /> The credit is to ChatGPT who found the issue and suggested the new line. As a person with 0 experience in react or even JavaScript, this was daunting to me. I see now that it is still very important to know your stuff, otherwise even with AGI, you will not be able to ask the right questions.

@Explorewithargho 2 күн бұрын

You are just a fabulous person, sharing great informations.

@lukecoburn 3 ай бұрын

Amazing! Thank you so much!

@MisterOcean5 Жыл бұрын

Thx for this great tutorial!

@KyanCox 23 сағат бұрын

this is a really, really good video

@shakthi1811 Жыл бұрын

thank you so much! helped me a lot

@Epicurious21331 Жыл бұрын

Awesome work. Idea for a part 2: add the hability to speak to the chat with whisper and to have and audible response by the chat.

@SaiNaru-wc5vu Жыл бұрын

thats a really interesting idea

@harsh9558 Жыл бұрын

Awesome video!!! Thank u very much!!!

@tahamouhoud5630 8 ай бұрын

Thanks this was very helpful

@oryxchannel Жыл бұрын

Rich in tutorial content. Thank you.

@jamezjaz Жыл бұрын

Nice content here! Thanks for sharing

@amanmalik781 4 ай бұрын

Thank you!

@CSFGIRIBAABUKG Жыл бұрын

you are great man!!!

@rahulrudra5651 Жыл бұрын

Awesome tutorial. Try to explain about all the stuffs a little bit deeper . But love it

@veronicag8479 11 ай бұрын

A friendly reminder for folks who are trying this out - at 12:46, code Line 52, remember to add a space after your word "Bearer ". Otherwise the API calls will fail for not being able to find the API key.

@DEBO5 10 ай бұрын

yea that's why I hate the old "" + notation, just use a string template literal

@rajkumarp9943 10 ай бұрын

Brother I'm getting error in this line how to solve

@kanizfatema755 10 ай бұрын

Hey I am getting this error you execced your current quota please check your plan can anyone help ?? Why I am getting this error??

@seanrizarre5904 7 ай бұрын

@@kanizfatema755 That means you've either used up your free tokens or your free tokens have expired, the tokens expire after 3 months have passed since you've signed up with that specific account.

@Margosha01 4 ай бұрын

@@kanizfatema755 did you solved?

@minhduc8a21 Жыл бұрын

Thank you so much!

@yasin_bhojani Жыл бұрын

Great Video ❤

@momobb2485 10 ай бұрын

nice and clean

@crypto4elik 11 ай бұрын

amazing i did it!)

@bhriscannan2080 Жыл бұрын

This is AWESOME! Thanks Cooper! Do you know how to get the "best_of" parameter working?

@vyomraval3722 3 ай бұрын

Excellent! Totally workable

@uparagnath5409 3 ай бұрын

Is it working

@vyomraval3722 2 ай бұрын

@@uparagnath5409yes of course!

@srg9413 11 күн бұрын

Thank you

@the_otherly Жыл бұрын

Two questions. But first, thank you. I look forward to following you. A huge improvement over what I had been using. My questions are two simple formatting issues. First is there a simple code input to have the text fields left-justify instead of center-justify? [Edit: I found justification of text can be accomplished in the accompanying "App.css" file in the first section "#root" under "text-align:". Other UI formatting can be done in the "index.css", such as colors, etc.] And second, the scrolling seems wonky after the chat history fills the chat container... is there a fix for this or are those issues only addressed through the ChatScope UI? Thanks again for your time and sharing your knowledge. Much appreciated!

@anistagoug2957 Жыл бұрын

Thank you very much

@abeechr Жыл бұрын

It would be great to see you, build something using the stream API

@Victor-wh9bs Жыл бұрын

Great 🔥

@paulthepink Жыл бұрын

I will make a best friend for myself now thank you!

@richardmcsharry 2 ай бұрын

@CooperCodes Awesome tutorial, thanks so much. Do you know why we have to send the full array of messages every time to the API?

@AlexEarthshipLeeor Жыл бұрын

thank u! i got it working local on a mac which is amazing. i wonder how do i use it on my webserver.. i ive triied the same process via ssh but i get issues .. clearly i dont do npm run dev .. thanks again!

@studyMiku1123 Жыл бұрын

nice video!

@CooperCodes Жыл бұрын

thanks! appreciate you taking the time to watch it :)

@sumreenali5996 Жыл бұрын

also add pinecone and their algorithm example like semantic search video audio search using open ai and pinecone

@xikaikax Жыл бұрын

great, thanks man...any way to make the chat responsive?

@DevShala678 Жыл бұрын

Hi Firstly thank you so much for bringing this tutorial with reactjs only. just one query though, My response is very slow can help me with that ?

@user-rm2tk2ps1n Жыл бұрын

very useful

@CooperCodes Жыл бұрын

Glad you found it useful, thanks so much for watching!

@Zoo-Wee-Mama-Sq 7 ай бұрын

The API used in this video is different from the new Assistants API, right? Could you quickly explain how the code would differ using that new API, or is it that more of a topic for another video?

@AP-hv5dh Жыл бұрын

Excellent! Thanks for posting. Do you have a code repository? Would like to try to learn from your example, test, fail and test again😂

@CooperCodes Жыл бұрын

Yup! It is in the description, would just copy here but I’m on mobile 💀

@aniruddhaghosh2722 11 ай бұрын

Does this code has the ability to continue a conversation, that is, can remember the previous responses and prompts while giving any new response like that of a chat in ChatGPT?

@2002yeunglau 9 ай бұрын

With this library, can I edit the styling of chatbot for example adding a logo/icon before the chatbox or changing the background colour?

@khoahocgia7671 Жыл бұрын

can you make a video to show us how to turn it into a simple to use android app, we don't always carry the computer with us, while portable devices next to me are very common variable, and especially you should set the maximum number of characters it can handle, and add a minimum response time of 30 seconds to get the most complete response, we look forward to hearing from you. ,

@rossibytes Жыл бұрын

This is awesome. I downloaded and ran your code. Just curious on one thing... why does it seem so slow to complete the responses? I'm seeing just under 10 seconds per response.

@CooperCodes Жыл бұрын

That unfortunately has to do with the speed in which the ChatGPT API can process requests. I think a BUNCH of people are using the API right now and so they are having to scale up their services to meet the demand. Hopefully in the future we can count on faster responses from the API, but hopefully this clears things up.

@harryharrison362 Жыл бұрын

Nice Video. I have a proplem somehow...The first response from ChatGPT is always some random stuff. After the second fetch, i get the answer for my previous question...What am i doing wrong?

@DanielSeacrest Жыл бұрын

This was a great tutorial! However I do have one question, how can I make it so that my system messages content is derived from a text file?

@CooperCodes Жыл бұрын

Great question, use one of the solutions provided here stackoverflow.com/questions/55830414/how-to-read-text-file-in-react . Getting text from a local file isn't as intuitive as you could hope in React, but eventually with one of the solutions there you will get a string from your text file. You can then set the content of your system message to the string, like content: textFileContents . Hopefully this helps!

@laughAFrame Жыл бұрын

Does the app preserve the responses?? Like if I refresh it will it still remember the prev responses?

@valentinusrosari 9 ай бұрын

can i style the component like i would to change the color of MessageInput box?

@supesart 8 ай бұрын

How could we add Llama index to this project to have a custom knowledge base?

@Aliaskar98 Жыл бұрын

Hi, I can't register on the site (because of the embargo). Is there another way to get the OpenAI secret key? Or can I use the key in the video?

@loudywen 5 ай бұрын

no bullshit just perfect

@gerardoricor Жыл бұрын

Amazing stuff! How can I style those components?

@CooperCodes Жыл бұрын

The UI shown in this video was made for example purposes, but its highly applicable to any case as the saving of the messages is the most important part. You can make a custom UI that works similarly (shows messages in a stack like in the video) or you can modify the @chatscope/chat-ui-kit-react library which has documentation here: chatscope.io/storybook/react/?path=/story/documentation-introduction--page . This is a complicated answer but hopefully helps!

@dhanraj4552 7 ай бұрын

how we increase the accuracy of an api key get an immediate response?

@vitn887 5 ай бұрын

Hello, I've got problem with CORS policy, andy idea how to fix it?

@CalebRoy Жыл бұрын

If I want to train the bot on specific information about my business or website, do I put this information in the SYSTEM role? So that when customers on my app ask the bot it can respond to them with specific information I've provided? And does this system data contribute to token consumption?

@CooperCodes Жыл бұрын

I actually need to look into the specifics of this, as I believe it does depend on the system prompt. I will release a video discussing the system prompt in specific and how it changes the ChatGPT API soon 👍

@alpineswiftai Жыл бұрын

@@CooperCodes he may want to check into embeddings. Langchain will allow this

@darkjedig Жыл бұрын

This would be really interesting to know as i was looking to do the same thing.

@yousefashraf152 Жыл бұрын

@@CooperCodes hey cooper have you looked into this problem ??

@ayushVerma-jl1sw Жыл бұрын

I am also searching this type of video..I also want to train the bot for specific information..if you found out please reply to this comment...it will be very thankful..😊

@Printalize 6 ай бұрын

Im having trouble on 6:15. Suddenly he skips something... The [vite] hmr update in the Terminal is not shown in my Terminal. Also, when I do want to open the project in browser it says Edit src/App.jsx and save to test HMR. What should I do? Any help or hint is appreciated!

@marcusmahliaire8379 Жыл бұрын

It seems to, not only remember the previous prompts, but is resubmitting all of them each time you try a follow up prompt. Does anyone have a solution to this issue? This is an amazing tutorial, thank you so much.

@gillesz2636 6 ай бұрын

no, in chatgpt it does the same, every time you make a new prompt it also send the previous

@PoojaSinha-ir3rw Жыл бұрын

This will work on wix website?

@Entheos. Жыл бұрын

I have a Discord bot running with 'text-davinci-003' and am too noobish to figure out how to properly convert this to a 'GPT-3.5-Turbo' ran bot instead. Are there some easy fixes to this, like a simple checklist to go through and be sure everything's good to go?

@Printalize 7 ай бұрын

I have a problem at min 6:00. Once I want to open the chatbot in browser, it is telling me that I should Edit src/App.jsx and save it to test HMR. So what did i do wrong? (btw I fully downloaded the code in first place)

@LedZeppelinThe Жыл бұрын

Can you deploy this using Streamlit?

@noppa2576 Жыл бұрын

It is possible to build on python? (i have 0 knowledge with coding language)

@Katana_SJ Ай бұрын

i tried to build the app same as your code but there is an error in console: (429) (Too Many Requests)

@sebaspqsiddndsacasteesasma2627 Жыл бұрын

Why i can't upload my react work with OpenAI API to Github repository?

@tarunrawat4317 Жыл бұрын

This codes works on wix javascript velo code?

@worldbest3097 19 күн бұрын

is it possbile to connect supabase? to custom chatgpt messagner

@Wilydesu 8 ай бұрын

Why doesn't typinginput appear when deployed?

@mokhlestarmiz743 3 ай бұрын

hello guys is the api free for all or i must buy one ?

@bambi456sauvage3 Жыл бұрын

hello I followed the tutorial to the letter unfortunately in my terminal I have error 429 , how to solve it?

@salimaahmed3283 5 ай бұрын

I have the same problem, did you solve it .

@harshithsshetty007 2 ай бұрын

not working in my case what should i do

@abhishekgawande222 Жыл бұрын

It doesn't respond to entered questions what should I do

@kevinliu4569 11 ай бұрын

why does my chatbot just freeze on typing

@bunnystrasse Жыл бұрын

How do I program a personality or a historical character in the CHAT GPT?

@tuyrindy6380 Жыл бұрын

you would have to put it all in the system role, or find a way to summarize user chat history and put it in there.

@toshikaraikwar1911 Жыл бұрын

it is not working for me can anyone help,the bot keep saying typing please help

@user-dm7kg9gf1m Жыл бұрын

Whenever I type anything to it, it just says chat-gpt is typing and doesn't provide a response. Do you know why?

@kanizfatema755 10 ай бұрын

Same error....did you solve it??

@rjakash5208 Жыл бұрын

It’s not working in windows 11 can any one explain

@verrr23 Жыл бұрын

Why my code show error like Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '0') at App.jsx:79:23 at async processMessageToChatGPT (App.jsx:66:5) at async handleSend (App.jsx:36:5) Are you know how to solved it?

@daftgin 6 ай бұрын

Have you solved this?

@verrr23 6 ай бұрын

@@daftgin yes. The problem is from the trial was over. So you must subscribe it, and will be work. Notes: you cant use with make a new account just to get a free trial again if u used a same telp number

@daftgin 6 ай бұрын

@@verrr23 I was able to fix it but my situation is different, I just had a typo in my code

@waad1503 Ай бұрын

i followed step by step but the chatgpt didn't work well with me

@RukhsadKhan-et9ix Ай бұрын

Hi, I am getting an error message as "Too Many Requests with status code: 429" and I am getting as reposne "Error communicating with OpenAI API" Can anyone help me with this?

@kanizfatema755 10 ай бұрын

Hey I am getting this error you execced your current quota please check your plan can anyone help ?? Why I am getting this error??

@ddiilaaraa 8 ай бұрын

Hi, this is because openAI has limited a free access to APIs to around 2-3 months. You can use the key from the newly created account.

@rohitrajat9322 Жыл бұрын

I am geeting in post method api fetching process?? Any one solve this Chatgpt verson issue??

@RukhsadKhan-et9ix Ай бұрын

Hi, I am getting an error message as below

@jackb9045 2 ай бұрын

Has anyone else encountered issues with all messages being aligned to the right side? I've compared my code to Cooper's and it looks almost identical so I'm not sure what the problem is... Many thanks in advance

@jackb9045 2 ай бұрын

Update: it turns out I needed to specify on all messages the direction, either "incoming" or "outgoing" fixed the issue.

@youtubepremium-iw4qg Жыл бұрын

I'm getting this error - You exceeded your current quota, please check your plan and billing details. Any solution?

@miguelangelperezsantiago783 Жыл бұрын

i have this same error too, Some help please.

@creadoc Жыл бұрын

same

@user-zy1if1zh5k Жыл бұрын

@CooperCodes Жыл бұрын

You need to start paying for OpenAI credits (you ran out), and then double check you are using the API key for the account you paid for.

@DocumentaryPilot Жыл бұрын

when I ask for code, i cant see the code, is there a way to implement a code block in the response?

@yorius96 Жыл бұрын

I don't understand, I thought we had to pay to use this API. How are we using it?

@CooperCodes Жыл бұрын

You get $18 worth of tokens for free whenever you create a new account, and $18 goes a really long way for this API when it comes to testing and even small production environments. All the calls from this video cost around 1 cents I believe, so you get enough tokens to test it out / see if it works for your use case. Hopefully that helps :)

@yorius96 Жыл бұрын

@@CooperCodes Thank you for responding. Your code is very useful. I am currently creating a virtual assistant for my company. I am trying to make the code recognize when it is asked for specific information so that it does not make it up. We have that type of information in a data spreadsheet, and my plan is to tell the API something like: "Answer this question, but use the information from this spreadsheet for your response" (Obviously, only when the code finds that it is being asked for specific data from the spreadsheet. This way, we avoid the problem of it providing false information about specific topics it doesn't know). I learned a lot from your video and your repository. You have earned another subscriber. Greetings from Chile :)

@bellaarorathelabradorretre9031 11 ай бұрын

@CooperCodes I ran the app in my local system with this command (npm run dev), but it is stuck and keeps saying that chatgpt is typing. Am I missing anything?

@salimaahmed3283 5 ай бұрын

I have the same problem, did you solve it .

@emmyyassin1587 Жыл бұрын

I'm getting this error - You exceeded your current quota, please check your plan and billing details. Although I have 18$ credit that I haven't used at all

@pranav5532 Жыл бұрын

yes same error im getting, whole project wasted

@emmyyassin1587 Жыл бұрын

@@pranav5532 it kinda worked... Try to change the model to gpt-3.5-turbo and hopefully this will work with you too.

@simtangaranvijay273 Жыл бұрын

@@emmyyassin1587 Am getting the same error too , any solutions ? am using 3.5 turbo only

@kanizfatema755 10 ай бұрын

I am using gpt-3.5-turbo and still getting the same error ?? Can anyone help??

@kanizfatema755 10 ай бұрын

@@emmyyassin1587no this doesn't working do you have any other solutions??

@elliscaicedo9045 Жыл бұрын

this APP DONT WORK ERROR TYPING [0]

@samuelpaul5923 Жыл бұрын

Why nobody is explaining how to train LLM model with our own custom data in react..

@CooperCodes Жыл бұрын

Feel free to take a look at my more recent video using Supabase and OpenAI for that.

@ggez406 3 ай бұрын

6:28

@AskTheSloth Жыл бұрын

be aware - you left the api key in your github commit

@CooperCodes Жыл бұрын

Yup I disabled it, I like to keep it there so people know what to replace. Thanks for this tho :)

@luchinazo Жыл бұрын

I tought it was going to be svelte :(

@CooperCodes Жыл бұрын

Aye sorry, will do an AI powered application with SvelteKit soon!

@luchinazo Жыл бұрын

@@CooperCodes Thanks for this tutorial tho!

@CooperCodes Жыл бұрын

No worries I got you. The API call in here should be applicable to SvelteKit (but managing the messages is gonna be a little different with the svelte stores). Thanks for watching btw!

@KL13923j Жыл бұрын

The tutorial is great , appreciate it. However when I tried to build with "npm run build" , it shows error Type '{ message: string; sentTime: string; sender: string; }' is missing the following properties from type 'MessageModel': direction, positionts(2739) Message.d.ts(58, 5): The expected type comes from property 'model' which is declared here on type 'IntrinsicAttributes & MessageProps & Omit & { ...; }' (property) MessageProps.model?: MessageModel | undefined How can I fix this?

@wesdc Жыл бұрын

Ask ChatGPT

@MuhammadBilal-cq6tp 9 ай бұрын

when I call api request it says in response in network tab : "You exceeded your current quota, please check your plan and billing details." "insufficient_quota" PLEASE SEE this and fix this!

@MuhammadBilal-cq6tp 9 ай бұрын

You can say it requires pricing in tokens , like 1K tokens is 750 words , am i right? i think i should pay first, then it will run , right ???

@ddiilaaraa 8 ай бұрын

Hi, this is because openAI has limited a free access to APIs to around 2-3 months. You can use the key from the newly created account.

@DaveKumar- 9 ай бұрын

8:18

@Becci02 Жыл бұрын

como modifico todo con tailwind?

@CooperCodes Жыл бұрын

You would have to make custom components, I used an external library to make things easier but it is not required. If you want to do things yourself I recommend following this line of thinking: 1. Create a chat message component , 2. Create a way to get access to all the chat messages (so you can store them in the API call like this video). Hopefully this helps.

@user-wc1mt3yc2k 5 ай бұрын

it's not worked for me , this is the error : Failed to load resource: the server responded with a status of 429 () Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '0') at App.jsx:79:23 at async processMessageToChatGPT (App.jsx:66:5) at async handleSend (App.jsx:36:5)

@ipanirtiano7548 11 ай бұрын

thanks for the tutorials, but I think there is to much data we sent to openai as a message. on the apiRequestBody its to much data we send out to api so thats make the app will get respons slow from api. I thing we can make it simple. example below : ================================================== // get latest message array from apiMessage const textChat = apiMessages[apiMessages.length - 1]; const apiResuestBody = { "model": "gpt-3.5-turbo", "messages": [{"role": "user", content: textChat.content}] } ==================================================== at the apiRequestBody we just send out data lates array from the apiMessage. it will make more clean and faster. I'm from indonesia, so im sorry if my english is not good enough. Thank you again.

@pranav5532 Жыл бұрын

{error: {…}} error : {message: 'You exceeded your current quota, please check your plan and billing details.', type: 'insufficient_quota', param: null, code: null} [[Prototype]] : Object this is the error I'm getting in console.log what should I do to make it work?

@simtangaranvijay273 Жыл бұрын

Am getting the same error too , any solutions ?

@pranav5532 Жыл бұрын

@@simtangaranvijay273 bro i think we have to pay premium for ChatGPT, I left that project :(

@daftgin 6 ай бұрын

@@pranav5532 This is a bit late but if anyone else is struggling with this issue, you have to pay for the tokens for your API key if you want to make your own chatbot.