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

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.

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!

[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.

[gokhanburhan]

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

[yinanli]

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

[angelgutierrez]

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]
<MessageInput placeholder="Type message here" onSend={handleSend}/>
[after]
<MessageInput placeholder="Type message here" onSend={(message) => 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.

[deoarlo]

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

[jamezjaz]

Nice content here!
Thanks for sharing

[Epicurious]

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.

[harsh]

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

[veronicag]

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.

[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!

[bhriscannan]

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

[Explorewithargho]

You are just a fabulous person, sharing great informations.

[rahulrudra]

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

[yeunglau]

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

[paulthepink]

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

[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!

[DevShala]

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 ?

[xikaikax]

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

[richardmcsharry]

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

[aniruddhaghosh]

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?