Build ChatGPT AI Tool in React JS | React JS Project with Working Example using OpenAI API
HTML-код
- Опубликовано: 13 июн 2024
- In this Reactjs project, we will make an awesome responsive Chat GPT 2.0 website clone step-by-step by using Open AI API. We learn React hooks, tailwind css, open AI integration, and many more. We will also build a backend using Open AI's latest package! You can build your own chatbot interface and then can integrate it into any web service. At the end, we are going to deploy this app on vercel as a full-stack application so you can share your skills with others.
The project is surely suitable for beginners.
Assets 📚
drive.google.com/uc?export=do...
Complete Source Code ( support me on ⭐):
Frontend Repo: github.com/ZainRk/client-chat...
Backend Repo: github.com/ZainRk/server-chat...
Patreon: / zainkeepscode
Buymeacoffee: www.buymeacoffee.com/zainkeep...
Time Stamps 👇
00:00:00 Intro
00:01:04 Requirements/Setup
00:09:12 Frontend
00:34:27 Backend
00:46:19 Integration
1:17:50 Deployment
"Copyright Disclaimer under Section 107 of the copyright act 1976, allowance is made for fair use for purposes such as criticism, comment, news reporting, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational, or personal use tips the balance in favor of fair use."
INSTAGRAM :
/ zainkeepscode
FACEBOOK:
/ zainkeepscode-10757083... 
Наука
Guy's website is working exactly and accurately. The error 429 represents openAi error its not the project error while doing this project if you get this error that means open AI have stopped giving free API services to get an free API services login with a new account which was never used and then get free API. Thank you so much for an excellent project and explanation ❤❤
Thanks for support ✨
Thank you so much..... Successfully completed as well as Deployed Project first time on vercel.... Thank you from my bottom of Heart !!!!
This is really a very interesting project done in such a short time. Appreciate your time and efforts! Thank you :)
Thank you too!
Your channel is best for skill enhancement
Great video. Amazing stuff
Thanks you So much sir for telling each and every code in detail, First time i have successfully deployed my application. All credits goes to you once again Thanks alot ❤
Plzz make more videos like this ❤😊
learned so much from this project thank you you so much
Thank You So Much For This Amazing Tutorial :)
You're very welcome!
Thank you friend for sharing this amazing project. It will be great in my learning
a big hug
You are welcome 😊
First here! Hi from France!
Awesome 🤗
second here from Bangladesh
Me tooo brother 🇧🇩❤️
Exactly at- 52:58, I was having an error in my project where it was saying that "useState in not defined". For anyone else experiencing this issue, I fixed it by adding import React, {useState} from 'react' at the top of the App.jsx file and I also added import {useState} from 'react' at the top of the ChatInput.jsx file. This resolved my issue! 🙂
in video at 1:04:19 you are getting message in console, but im just getting some kind of unreadable text like thsi "Object { message: "') {
\t\t\t\t//\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t" }"
so can you please tell me how can i fix this
Bro Make more content and be consistent. Literally we have to wait a lot for your video.
A very good project I learned a lot of skills, you are a professional programmer ?,
Why is there an extra padding-top in some of the AI's answers, but in some there is not ?
'Request failed with status code 429' am getting this error why i have change my apiKey 3 times still getting thesame error
Thanks! make more content PLZZZ!
More to come!
at 01:03:32, whenever i type to chatgpt it waits 2 seconds and then my screen goes white. I am using firefox, and have followed everything in the video. can anybody help?
i followed your steps and make chatbot like you but when i ask question it says request failed with status code 429
please help
the message port closed before a response was received. this error occurred in console how to resolve it please help
Third from Bangladesh
how do i solve "Cross-Origin Request Blocked" error at around 1 hour mark
@ZAINKEEPSCODE , my API expiry ended on 1st April, how shall i proceed ?
Thanks for video
hey Zain can you help me solving the problem of process env?
Thank you Sir,please build us a mern video chat app we will really appreciate
I am getting an error while deployiong server. Client is working fine.
Please create portfolio with next js 13, tailwind and Sanity io
Hi, Thanks for sharing this great tutorial. I'm getting an error " Request failed with status code 429 " I have correctly added ID and keys in .env. I have credit available? Your help would be greatly appreciated?
Ok, even though I have never used any free allowance it expired on 1st April. I got it working by paying for API.
@@surfskates1432 same problem did your problem solved
@@surfskates1432 bro where you able to resolve the issue
Hi
I tried all the methods and have also tried updating my key in .env file i.e my original API key but still it is giving me the error of Request failed with status code 429
Please help me with this
your open ai account does not have free api access ,create a new different open ai account
@@divyprajapati4971 still it is giving me the same error...please help brother.
Yes bro same error
it is always in request failed error 401...i cant fetch it properly...tried every possibilities...generated new api and replaced...entered proper org id...still no use...if anyone help me with the solution it will be of great use
Hey bro...same problem...
Can u help me??
same problem bro..if u resolved, then please tell me
Will this work in Uzbekistan?
can you solved the ? i'm trying some questions answer from chat gpt, but chat gpt said 401 error
Please put your own API key in .evn file and your project will be alright then.
you can claim you api keys from official Open AI web account.
if you still face same issue, please check your credit expiry in open Ai dashboard.
i am getting request failed with status 429
sir why occur import {configuration,OpenAIApi} from 'openai'
^^^^^^^^^
SyntaxError: The requested module 'openai' does not provide an export named 'OpenAIApi' error
samee
Request failed with status code 401 is coming from AI side. Please help anyone
I have the same error as you which occurs after the deployment....
Did you find the solution?
Disgusted to have finished the tutorial but that the app does not work once deployed...
I was also facing the same problem. try this:-
I think problem is with process.env.API_KEY
I put api key (in string) directly instead of using process.env.API_KEY
and then it is working fine. yeah but we should use process.env.API_KEY if we are going to deploy it
@@youhavetodoit9070
I don't know why it showing 401 error
I get error 400 when trying to submit a prompt at around 50-60 mins
You can send me log of your error at insta. I will try to figure out why this is happening for you.
Hey i have error Request failed with status code 429. have anybody the same problem ? how to fix that ?
i am facing this error but still not be solved have u solved
@@faizandynamicearth unfortunately it's still unresolved. But if resolved i will say here
@@hosseinhaghshenas7440 same error
Please put your own API key in .evn file and your project will be alright then.
you can claim you api keys from official Open AI web account.
if you still face same issue, please check your credit expiry in open Ai dashboard.
error 404 why? i have api and have credit
I have an console error when i give input its not giving out answers pls help me bro
Please put your own API key in .evn file and your project will be alright then.
you can claim you api keys from official Open AI web account.
if you still face same issue, please check your credit expiry in open Ai dashboard.
Hey Thanks for this magic video
I am at the end of the video and I wonder why the answer text returned by the AI is cut off as soon as the answer is too long. Could you tell me how to correct this error?
Hello from France ;)
Welcome. This is because max_tokens number that you have set in config. Actually max tokens represents maximum number of words that can be returned as answer by Chatgpt. There can be two solutions:
1. Increase max_tokens parameter
2. Ask to continue the answer and it will continue giving response from where it left.
Thank you very much for this answer it works perfectly.
Hello how to fix Request failed with status code 401?
I was also facing the same problem. try this:-
I think problem is with process.env.API_KEY
I put api key (in string) directly instead of using process.env.API_KEY
and then it is working fine. yeah but we should use process.env.API_KEY if we are going to deploy it
@@youhavetodoit9070 still it doesn't works
Hello sir I'm getting this error :
{message: 'Request failed with status code 401', name: 'Error', stack: 'Error: Request failed with status code 401
at …ections (node:internal/process/task_queues:82:21)', config: {…}, status: 401}
What will be the solution please do help me.Humble request
add correct organisation id
@@divyprajapati4971 I have added it properly and have checked it twice than too same error @zainkeepscode can you plz know y this is so??
{
"error": {
"code": "unsupported_country_region_territory",
"message": "Country, region, or territory not supported",
"param": null,
"type": "request_forbidden"
}
} 😑
After deployment on vercel im getting error of Cross origin how to solve this plz tell me
Have you configured the cors in index. js of server?
@@ZAINKEEPSCODE I had followed all instructions as per in video
And I also configured cors through app.use and that error is only occurring after deployment And before deployment on localhost its working fine
It's throwing an error 429 in the server side please help it's urgent
Please put your own API key in .evn file and your project will be alright then.
you can claim you api keys from official Open AI web account.
if you still face same issue, please check your credit expiry in open Ai dashboard.
When I upload it on vercel then it is showing request failed with status code 401
You can send me log of your error at insta, I will try to figure out why this happening for you.
@@ZAINKEEPSCODE me too brother
I have the same error as you which occurs after the deployment....
Did you find the solution?
Disgusted to have finished the tutorial but that the app does not work once deployed...
I was also facing the same problem. try this:-
I think problem is with process.env.API_KEY
I put api key (in string) directly instead of using process.env.API_KEY
and then it is working fine. yeah but we should use process.env.API_KEY if we are going to deploy it
@@gauthiersamba6547 I was also facing the same problem. try this:-
I think problem is with process.env.API_KEY
I put api key (in string) directly instead of using process.env.API_KEY
and then it is working fine. yeah but we should use process.env.API_KEY if we are going to deploy it
i got an error like
import {Configuration, OpenAIApi} from 'openai'
^^^^^^^^^^^^^
SyntaxError: The requested module 'openai' does not provide an export named 'Configuration'
when i try to import in index.js
can u help me please ?
Hey,
It looks like you are not on the same version of openAI. At the time of recording the tutorial, I used the version 3.1.0 ( because that was latest at that time). Since then, they have released updates which changed the module.
Still, you can follow the tutorial.
* Uninstall the current OpenAI by:
npm remove openai
* Install the same version
npm i openai@v3.1.0
Thanks
thank you@@ZAINKEEPSCODE
I am getting the same error. How did you fix it??
@@ZAINKEEPSCODE it worked thank you so much
How to solve error 429
Facing request failed with status code 401 as response from ai issue
Same problem bro
yup.... same problem
firstly I think its bcs of listening port. but this problem occuring even after iIchange port as process.env.port||3000
just get a new api key from openai and add the .env file to .gitignore
I was also facing the same problem. try this:-
I think problem is with process.env.API_KEY
I put api key (in string) directly instead of using process.env.API_KEY
and then it is working fine. yeah but we should use process.env.API_KEY if we are going to deploy it
I am getting error 429 how to deal with that ??
Please put your own API key in .evn file and your project will be alright then.
you can claim you api keys from official Open AI web account.
if you still face same issue, please check your credit expiry in open Ai dashboard.
@@ZAINKEEPSCODE thanks for the reply sir..
It wasn't working at all so I made another account on openai then used their new api and now my app is working fine and i have changed the whole UI experience and it looks so good all the credit goes to you..
Thankyou so much for this wonderful project❤️
Please provide the github link🙏
GitHub links are available in description!
The last app I built was the social media app and I never could deploy it properly :/ scared to try this.
Sorry for your experience, that tutorial was so long so I had to skip that part. But in this one, we are definitely going to deploy as Full Stack App.
@@ZAINKEEPSCODE Thanks for the update. I will give this one a try!
getting 401 error please help
There is a problem in they key encryption method, even I am facing this problem. You put the entire key in your js file and the code will run fine.
Pls upload new videos
The api isn't free right? Did you buy it?
Open AI is giving the free trial of $18 which is a pretty decent amount of API requests, after that they will charge you on the basis of your usage like firebase does.
I have not bought any subscription yet.
@@ZAINKEEPSCODE So to access the free trail, do we have to pay the 18 dollars up front and we get the api for 2 months? Or do we have to put our card details only and cancel the subscription before we get charged the 18$?
@@anuragdas1217 No there is nothing like you have to pay upfront, when you sign up $18 credit is for your account by default without putting any card details. You should visit OpenAI and check your API profile. That's it
@@ZAINKEEPSCODE oh got it, thank you sir.
If Anyone Is facing with 401 error. try this:-
I think problem is with process.env.API_KEY
I put api key (in string) directly instead of using process.env.API_KEY
and then it is working fine. yeah but we should use process.env.API_KEY if we are going to deploy it
Got the same error and just tried with a new APIkey from open AI and it worked fine, you just need to make sure that the API key is correctly pasted
@@raneemrashid9018 ok Thanks bruh :)
Not clear this you clearly upload
Arey kehna kya chahte hoo