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

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

You're the best, Ania. Love you.

Great tutorial

Thank you Ania wonderful , it works amazingly

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

Great tutorial! Thank you.

Great as always , thank you 😍😍

Thank you Ania. Nice video and Amazing tutorial

awesome, thanks Ania!

Absolutely the best!

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

yes.. keep it simple and straight frward

Thank you sooo much!

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)

Thank you Ania

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

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!

Thank you.

Thanks!!!

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 ="

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.

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

It's amazing

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.

Hey do you do group sessions? I have a couple of questions and want to learn more.

@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?

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???????

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?"

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 :)

can have edit prompt feature after submitting it like chatgpt did?

🎯 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

This is awesome! How can you make the ai remember the conversation?

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?"

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!

but it's not scrolling the page with already given responses, or is it?

Hi, does anyone know how to empty the input box after sent the question

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" ?

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

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"

{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

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

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?

I have problems with showing the chat logs Can anyone please provide the repo Thank you

Is it necessary to have credits in the openai account to use the API? Isn't it free?

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. :)

I love you Ania ♥++

{ "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

Can you use Vite instead of create-react-app for this project?

yea

Were is the source code

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!

Github link of this code?

feed is not working for me it is not rendering anything on the actual chat

does this openai api key will require payment to continue using?

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

It didn't work for me, response is coming as empty object {}

all of your react tutorials dont work after I delete the extra files any idea? :/

is it me or when i try to chat it doesnt send to the console?

{ "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!!😭😢)

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 (((

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.

where's the source code??

You send one message each time... So how does chatgpt know chat history?

Ania, ChatGPT+ React +Java pytanie mam jedno- czemu jeszcze nic w temacie ServiceNow nie robisz:)

hi 😍

ReferenceError: fetch is not defined How can i fix this issue

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:)

Need source code

I love you

is this API available for free??

Create your own API key 😅

:)

I love your forehead vein

Ingenious.... (⁠ﾉﾟ⁠0ﾟ⁠)⁠ﾉ⁠→

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.