ไม่สามารถเล่นวิดีโอนี้
ขออภัยในความไม่สะดวก
🛑 Learn to use OpenAI API by building ChatGPT (super simple!) | React Node.js
ฝัง
- เผยแพร่เมื่อ 3 เม.ย. 2023
- Found this hard? Learn the fundamentals of JavaScript here: www.codewithania.com
🚀 Sign up to www.codewithania.com to receive access for the final code.
____
⭐ Check out my IDE here and get 1 month free: jb.gg/get_webstorm
⭐ New to code and none of this is making sense? Watch my '12hr+ TH-cam Coding Bootcamp' in which you will learn HTML, CSS and JavaScript Fundamentals completely from scratch. It's on my channel and its 100% free.
⭐ In most videos I use Tabnine as my A.I autocompletion tool. You can download it for free here (I get no commission from this link, but am in a partnership): bit.ly/tabnine-top-tool
⭐ You can get a blockchain domain with my affiliate link here: bit.ly/get-a-crypto-domain
⭐ If you would like to buy me a coffee, well thank you very much that is mega kind! : www.buymeacoffee.com/aniakubow
⭐ Sign up for weekly coding tips from my newsletter partnership: bit.ly/JS-tips
You can also find me on:
Twitter: / ania_kubow
Instagram: / aniakubow
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
hero award!
Thank you Ania, you did a great job integrating a backend for us.
You're the best, Ania. Love you.
Thank you Ania wonderful , it works amazingly
Great tutorial
Great tutorial! Thank you.
OMG. Learning something cool. An amazing explanation and beautiful Ania. What else can you ask for.
Thank you Ania. Nice video and Amazing tutorial
Great as always , thank you 😍😍
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)
Did you pay openAi?
yes.. keep it simple and straight frward
Absolutely the best!
awesome, thanks Ania!
+10 for a hiding left panel
+100 for settings panel exposing temperature, system prompt,etc
Thank you sooo much!
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!
Figured it out - but one other question - when I get to the end of the screen, it does not scroll to allow more questions to be answered - is it me, or is this the way the code is supposed to work? Any workaround if so?
Thank you Ania
Thank you.
Thanks!!!
Hello Code with Ania Kubów Thank you for your videos!! Query, can I use the API and focus it on answering me on a specific topic? thank you!!
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 ="
Outstanding! now you have to add Eleven Labs and Whisper please :)
It's amazing
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.
do you think you could help me out with some errors?
@Hiox04 not sure if I am good enough. I used chatgpt to help where I couldn't figure out feom.the video
Hey do you do group sessions? I have a couple of questions and want to learn more.
Good morning And hii from Türkiye
idk what went wrong, but the "data" shows the current response from API, but when I setMessage(data.choices[0].message.content) and then console.log(message) it shows the previous response, not the current.
can have edit prompt feature after submitting it like chatgpt did?
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 deployment???????
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 :)
if someone could answer this, that would be great
You can limit usage by lowering the amount of tokens allowed on the data call (server file). If you wanted to save the chats, the best thing to do would be to add localstorage for chats generated (be sure to have a button to clear or delete them or your local storage will get overwhelmed)
@ania i need help to make input field empty after onclick function. where to add setValues("")
why you didn't use mongodb for storing the messages and titles as it's not good to store that much data on client side?
This is awesome! How can you make the ai remember the conversation?
React useState hooks I suppose for the front end, and store the responses from the front end in a document-style database like MongoDB.
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?"
I love you Ania ♥++
Hi, does anyone know how to empty the input box after sent the question
Can I make it with websocket?
Please make one big and usefull project with vite typesript and hosting it (frontend and backend deployment) with firebase or mongodb plus authentication
And also explain how to set a job on server and refreshing all the cache
would be down for that as well!! i'd prefer mongoDB over firebase though
your channel doesnt have any videos 🤨
but it's not scrolling the page with already given responses, or is it?
Thanks for your all wonderful video. It was very useful. I usually watch every of your video. One quick question, I would like create a site with Wordpress ( as a backend ) and frontend with Angular. Basically i want to use Wordress as a Headless CMS with Angular UI. I was searching thro internet and got something but those are not giving much confident whether it is a correct idea or not. Could you please help me to direct on that? Again thanks for all your videos. :)
Hi Shivani, maybe this will help you : th-cam.com/video/YGhtEWeIKFo/w-d-xo.html
So, how do you maintain congruence? Each individual prompt within a chat has no bearing on the next, as evidenced by the responses you got when asking, "are you sure?"
It's since LLM does not have a memory itself. You can use langchain framework to set up your chat with memory.
you can post chat history as an array of messages, and the api will return a relevant answer
Yea, so it seemes that the she does not implement that function (which means this really isnt a chat gpt clone) but in the official documentation you can send previous chats as a whole and the LLM will continue the conversation, working as "memmory" of the AI.
I have problems with showing the chat logs
Can anyone please provide the repo
Thank you
I've a problem, when I console.log(data) it is a success with 200 status code but it is returning an empty object..? can anyone help please!
edit: SOLVED. You have to use backticks. Instead of quotes or single quotes. i.e. " ' ` (three different things)
problem was: When I write 'Bearer ${API_KEY}' It is considering ${API_KEY) to be a string rather than inserting the key. VScode is not making it a different color either. 'Bearer ${API_KEY}' is all one color as if it doesn't understand I am trying to insert something. Literally writing the api key in causes it to work. For example "Bearer 3984364t9u3gnrgnf"
Hahahahhahahahhaha
Is it necessary to have credits in the openai account to use the API? Isn't it free?
Can you use Vite instead of create-react-app for this project?
Yes
yea
Github link of this code?
1 question please answer anyone
How can I set "setValue(' ')" after submit? I mean after sending the message how can I make my input field become empty?
Nevermind
I fix it :)
@@sayedulkrm did you fixed it?
{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
Since recently, you need to buy credits for openAi API. You wont get any free credits, especially if you already created your OpenAI account in the past and your free creddits expired. The credits are very cheap. 5 usd of credits gives you an incredible amount of chats requests with gpt 3.5
Any idea why at the 44:39 mark of the video, when I try to put What is 2+2? The console shows me this error: "TypeError: Cannot read properties of undefined (reading '0') at getMessages" ?
I ve got the same Error, do you solve it?
@@robertoana4213 Nope. My code is the exact same, I've rechecked it all. Still getting that error.
@@jheyen13 maybe a missing module or faulty import? i didnt watch the video yet. try asking chat GTP... sound funny and ironic but might actually help, good luck
i had the same problem because i add s to messages you chould insure that message always the same
@@p.cnunes7098 lol you were right chatGPT did find the error for me. in const options I mispelled header and so I corrected it to headers. That fixed this bug for me
Were is the source code
hi ania i keep getting this error on 39:42 Failed to load resource: the server responded with a status of 404 (Not Found) when i inspect
does this openai api key will require payment to continue using?
yes mine expired and asking for 18 usd
{
"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
Did u solve it ?
@@simtangaranvijay273 Did you?
Idk why openai doesn't work for me. I am getting 429 (too many requests error i guess) while this was my first time using it
i am getting an error about invalid api key and in code editor it shows that API_KEY is declared but never used.....I 've tried everything but could not work it through, so if anybody has any solution please let me know.
Did you get it sorted? If you declared your API constant i.e. const API_KEY = '50m3Ap1K3yEtCeTc';
then check your headers to ensure that you are using it for the post; i.e. headers : {Authorization" : *`Bearer* ${API_KEY}', ...etc
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!
hi 😍
feed is not working for me it is not rendering anything on the actual chat
nevermind I accidentally used a typo, used chatgpt to figure it out
@@remixrblx6862 Bro, facing same issue. Can u help me
Same issue
Please help bro
Or sent the GitHub code
all of your react tutorials dont work after I delete the extra files
any idea? :/
It didn't work for me, response is coming as empty object {}
where's the source code??
is it me or when i try to chat it doesnt send to the console?
@Code with Ania Kubów
@ Code with Ania Kubów
did you fix it
Need source code
error
:
{message: 'You exceeded your current quota, please check your plan and billing details.', type: 'insufficient_quota', param: null, code: null}
[[Prototype]]
:
Object.
Should i buy chat GPT or i can write my API free? I have this error when i try to send message in console (((
Fixed, created new account and new key) Big Big Thank you Ania for your channel, i've learned a lot!!!!!
@@user-th5kn1bp4p how you fixed ?
@@user-th5kn1bp4pstrange, I created new accounts and still have the same issue
🎯 Key Takeaways for quick navigation:
01:07 🚀 *Learn to use OpenAI API to build a ChatGPT clone in React with Node.js.*
02:42 🛠️ *Set up a new React project using create-react-app and clean up unnecessary files.*
08:29 🎨 *Style the sidebar and main sections with background colors, borders, and spacing.*
14:33 📱 *Create the main section with an H1, feed, and input container for chat prompts.*
19:16 ⚙️ *Style the input field, remove focus outline, and add a subtle box shadow for aesthetics.*
24:18 🖱️ *Adjusting chat UI: Positioning the chat box at the bottom right with specific styling changes, including font size adjustments.*
26:10 📦 *Setting up the backend: Installing and configuring necessary packages (cors, Express) for the server.js file to establish the backend.*
29:13 🔑 *Obtaining OpenAI API key: Briefly demonstrating how to obtain an API key from OpenAI's developer API reference.*
35:30 🔄 *Implementing OpenAI API call: Writing the code to make a fetch call to OpenAI's chat completions API, passing the input message and receiving the AI-generated response.*
44:51 📝 *Managing chat history: Creating a mechanism to store and display chat history, organizing conversations by titles and roles, incorporating React's useState and useEffect.*
49:23 🔄 *The speaker demonstrates extracting and assigning values from the AI response object, such as roles and content, to update the chat state.*
52:47 🧹 *The creation of a function, `createNewChat`, is shown to clear the current chat, including the message, input value, and current title, allowing for a fresh start.*
56:59 📚 *The implementation of filtering and displaying unique chat titles in the chat history, enhancing the user experience by organizing and presenting conversations distinctly.*
58:08 🎨 *The addition of styling elements to the chat interface, including flexbox, background color, padding, and text alignment, resulting in a visually appealing and organized conversation display.*
01:00:22 ⚙️ *The integration of an "on click" function, `handleClick`, to select and display a specific chat from the history, allowing users to navigate between different conversations.*
Made with HARPA AI
You send one message each time... So how does chatgpt know chat history?
Absolutely valid question. Seems more like she is fishing for memberships to her website. If I figure it out and you still have this question I will circle back here.
You can watch previous tutorial chatgpgt clone with JavaScript she is just storing the user prompts to the chat history
ReferenceError: fetch is not defined How can i fix this issue
I ran into the same issue. Make sure you have the latest node. Node 18 worked for me... I think fetch is not automatically included. It is used as a beta feature..
I installed node-fetch with "npm install node-fetch@2.6.6" then I renamed the server.js to .cjs (commonjs) and in package.json corrected the start backend's line... oh and had to include after name and version the "type": "module", ...
That works too. Just require more initial work.
Same here, i try install node-fetch or axios but the error keep says 'require is not supported' / or 'Cannot use import statement outside a module', can anyone please explain why require express, cors is working in server.js but others dependency not?
@@kevinmancuso9250 Thanks, the latest version solves the problem. However, I would like to know why I can't require or import other dependencies such as axios or node-fetch, while express and cors are working fine as I follow Ania's tutorial.
{
"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!!😭😢)
Thank you for this comment. Saved me frustration
I tried this but every phone number i use to signup in this house it says it already exists. I am confused
Ania, ChatGPT+ React +Java pytanie mam jedno- czemu jeszcze nic w temacie ServiceNow nie robisz:)
I'm wondering if someone could clear up my confusion in regards to using Node for this. In the Javascript, html, css chatGPT video, we can just hit an endpoint. What is the benefit of building your own server for this? I'm new to Node so any feedback is appreciated:)
For example for hiding something on server side. If you will talk to ChatGPT directly from UI you will expose your API key.
and for saving the chat protocols. since they are only saved in react states, they wont show up again when you refresh the page
@@constantine3814 Can u explain more how it will be exposed if we avoid using node js as server ?
If your frontend uses the api key, it will be included in the javascript that is viewable while inspecting the browser. If your backend is making the api call, It cannot be viewed when inspecting the browser.@@simtangaranvijay273
you just built your own chatgpt so ask it the question xD
I love you
Ingenious.... (ﾉﾟ0ﾟ)ﾉ→
is this API available for free??
no
I love your forehead vein
It’s a scar :)
Create your own API key 😅
:)
I wonder why such kind of videos gain less likes than trash
React & node starts at 25:00
25 min in and still only html & css… bro…
We only wanna see the real sauce- React and Node 😂
So, next time skip the html & css part please!
I get an error at 58:04
Did anyone come across it?
index.js:1210 ./src/App.js 175:17
Module parse failed: Unexpected token (175:17)
You may need an appropriate loader to handle this file type.
| columnNumber: 9
| }
> }, currentChat?.map(function (chatMessage, index) {
| return /*#__PURE__*/React.createElement("li", {
| key: index,
It seems to be a 'webpack' config issue, but I didn't see any webpack-related content in this video. I'm using VSCode (not WebStorm IDE) on Mac.
Fixed
she should provide github link