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

Great tutorial

You're the best, Ania. Love you.

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

@LibraryOfTheOligarchs

4 ай бұрын

hero award!

Great tutorial! Thank you.

Great as always , thank you 😍😍

Thank you Ania wonderful , it works amazingly

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

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

Thank you Ania. Nice video and Amazing tutorial

yes.. keep it simple and straight frward

Absolutely the best!

awesome, thanks Ania!

Thank you sooo much!

🎯 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

Thank you Ania

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

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!

@baselinesweb

11 ай бұрын

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?

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

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

It's amazing

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.

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

Good morning And hii from Türkiye

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

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

{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

@janholecek2692

9 күн бұрын

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

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)

@developedbymighty

Ай бұрын

Did you pay openAi?

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!

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

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

@jesskrikra

Жыл бұрын

would be down for that as well!! i'd prefer mongoDB over firebase though

@uzersayed3530

Жыл бұрын

your channel doesnt have any videos 🤨

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

@hassanogunniyi6889

11 ай бұрын

if someone could answer this, that would be great

@AkiraWebSolutions

10 ай бұрын

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)

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

Github link of this code?

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

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

@scottscott232

8 ай бұрын

React useState hooks I suppose for the front end, and store the responses from the front end in a document-style database like MongoDB.

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

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

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

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

@alyster8397

Жыл бұрын

Hi Shivani, maybe this will help you : kzread.info/dash/bejne/i3uc1qeQlayxdtI.html

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

@the_dream_man

5 ай бұрын

Yes

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

@TreeOfMusic_

Жыл бұрын

It's since LLM does not have a memory itself. You can use langchain framework to set up your chat with memory.

@amansinha4631

7 ай бұрын

you can post chat history as an array of messages, and the api will return a relevant answer

@janholecek2692

9 күн бұрын

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.

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?

@sayedulkrm

Жыл бұрын

Nevermind I fix it :)

@sridharrajaram7075

5 ай бұрын

@@sayedulkrm did you fixed it?

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

@robertoana4213

Жыл бұрын

I ve got the same Error, do you solve it?

@jheyen13

Жыл бұрын

@@robertoana4213 Nope. My code is the exact same, I've rechecked it all. Still getting that error.

@p.cnunes7098

Жыл бұрын

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

@fatimazahrarahmoun8750

Жыл бұрын

i had the same problem because i add s to messages you chould insure that message always the same

@sartaq1

Жыл бұрын

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

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"

@abbasmahdavi7133

11 ай бұрын

Hahahahhahahahhaha

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

@ShivanshuCodes

2 ай бұрын

yes mine expired and asking for 18 usd

I love you Ania ♥++

yea

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

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!

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

@simtangaranvijay273

10 ай бұрын

Did u solve it ?

@developedbymighty

Ай бұрын

@@simtangaranvijay273 Did you?

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

@developedbymighty

Ай бұрын

Thank you for this comment. Saved me frustration

@developedbymighty

Ай бұрын

I tried this but every phone number i use to signup in this house it says it already exists. I am confused

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

@user-th5kn1bp4p

Жыл бұрын

Fixed, created new account and new key) Big Big Thank you Ania for your channel, i've learned a lot!!!!!

@rabiezouita6905

11 ай бұрын

@@user-th5kn1bp4p how you fixed ?

@cattocatto397

3 ай бұрын

@@user-th5kn1bp4pstrange, I created new accounts and still have the same issue

hi 😍

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.

@scottscott232

8 ай бұрын

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

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

where's the source code??

Need source code

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

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

@remixrblx6862

Жыл бұрын

nevermind I accidentally used a typo, used chatgpt to figure it out

@redgear9552

Жыл бұрын

@@remixrblx6862 Bro, facing same issue. Can u help me

@sayedulkrm

Жыл бұрын

Same issue Please help bro Or sent the GitHub code

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

@CashVFX11

Жыл бұрын

@Code with Ania Kubów

@CashVFX11

Жыл бұрын

@ Code with Ania Kubów

@srivarshabachu2823

5 ай бұрын

did you fix it

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

@jonmarkortiz

3 ай бұрын

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.

@LearnCode_withAI

2 ай бұрын

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

@kevinmancuso9250

Жыл бұрын

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

@WalintHUN

Жыл бұрын

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", ...

@kevinmancuso9250

Жыл бұрын

That works too. Just require more initial work.

@lilyou2219

Жыл бұрын

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?

@lilyou2219

Жыл бұрын

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

is this API available for free??

@fblops

7 ай бұрын

no

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

@constantine3814

Жыл бұрын

For example for hiding something on server side. If you will talk to ChatGPT directly from UI you will expose your API key.

@jesskrikra

Жыл бұрын

and for saving the chat protocols. since they are only saved in react states, they wont show up again when you refresh the page

@simtangaranvijay273

10 ай бұрын

@@constantine3814 Can u explain more how it will be exposed if we avoid using node js as server ?

@trschock

7 ай бұрын

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

@j.c8183

3 ай бұрын

you just built your own chatgpt so ask it the question xD

I love you

Create your own API key 😅

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

I love your forehead vein

@AniaKubow

Жыл бұрын

It’s a scar :)

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.

@LanaBegunova

Жыл бұрын

Fixed

@adamspice9076

Жыл бұрын

she should provide github link