🛑 Learn to use OpenAI API by building ChatGPT (super simple!) | React Node.js

____

⭐ New to code and none of this is making sense? Watch my '12hr+ YouTube Coding Bootcamp' in which you will learn HTML, CSS and JavaScript Fundamentals completely from scratch. It's on my channel and its 100% free.

You can also find me on:

[ry]

25:25 backend nodejs
36:38 hooking backend to frontend
45:00 previousChats for saving ai response
52:51 new chat
54:52 show in chat history and show chats in chatroom

[DR-kiic]

You're the best, Ania. Love you.

[iancaseydouglas]

+10 for a hiding left panel
+100 for settings panel exposing temperature, system prompt, etc

[trschock]

Thank you Ania, you did a great job integrating a backend for us.

[thequickstartcreative]

although this is a year old, i was able to get it to work with some assistance from chatgpt. i've never used React until this video. It took a bit because I am using visual studio code, but it worked. I have to watch more videos because now I am interested in learning React. I just have to be willing to put the time in.

[baselinesweb]

Thank you Ania - you are a great teacher and this project was very helpful. One question...I have a constant scroll bar (both vertical and horizontal) around all of the user/assistant questions and responses whether needed or not. Any way to get rid of those? Coffee on the way!

[developedbymighty]

Thanks for this tutorial.
Little feedback though. When coding, so as not to confuse the viewers always try coding from left to right rather than coding a functions body before the "const name ="

[christianh.]

yes.. keep it simple and straight frward

[mohitraj]

{error: {…}}
error
:
code
:
"insufficient_quota"
message
:
"You exceeded your current quota, please check your plan and billing details."
param
:
null
type
:
"insufficient_quota"
[[Prototype]]
:
Object
[[Prototype]]
:
Object


i am getting this error

[electrolinks]

Nice tutorial. It worked for me. I had to make sure I had the latest version of Node.js running locally (v18.x.x at the time of writing)

[AtulKumar-piky]

error
:
code
:
null
message
:
"you must provide a model parameter"
param
:
null
type
:
"invalid_request_error"

I am facing this error while everything is same!

[anonymoustrolls]

{
"error": {
"message": "You exceeded your current quota, please check your plan and billing details.",
"type": "insufficient_quota",
"param": null,
"code": null
}
}
in my console pls help

[LearnWithBahman]

In this project, react + node, you put server.js file inside frontend, It will expose API key or Not ? I think (not sure), backend should be in another folder and backend and frontend interact with each other via restAPI, so backend information would be safe for

[its_joel]

Thank you Ania wonderful, it works amazingly

[otavieokuoyo]

Thank you Ania. Nice video and Amazing tutorial

[askjdog]

It would need memory of the individual chats added, and what would be the simplest way to log and limit usage (such as prompt inputs, and completions)? Thanks :)

[Eldlabs]

Great video, how ever it dont not remember conversation, if you ask it what is 2 + 2 and you get response 4 and then you ask are you sure it will not know what do i refer to. so it seams like history in conversation is not working. Mean while if you do same in openai chat you will get response like "Absolutely! In standard arithmetic, 2 plus 2 is always equal to 4. It's a fundamental mathematical principle. Is there anything specific you're curious about regarding this calculation?"

[nicolassuarez]

Outstanding! now you have to add Eleven Labs and Whisper please :)

[yes]

{
"error": {
"message": "You exceeded your current quota, please check your plan and billing details.",
"type": "insufficient_quota",
"param": null,
"code": "insufficient_quota"
}
}

You'll get this error, if you have been using chatGPT for a long time now, doesn't matter if you have initiated the API keys or not earlier, they'll get expired automatically, you can see the expiration in Usage section. To overcome this, you need to subscribe for the API keys or create a diff gmail acc with diff phone no. (OpenAI APIs are not FREE!!😭😢)

[tmpwtmp]

OMG. Learning something cool. An amazing explanation and beautiful Ania. What else can you ask for.