Build ChatGPT In React JS Using OpenAI API | Create ChatGPT Clone Using React JS
HTML-код
- Опубликовано: 28 авг 2023
- Build your own version of ChatGPT In React JS Using OpenAI API | Create ChatGPT Clone Using React JS step by step tutorial
#ChatGPT #Reactjs #ReactProjects #GreatStack
❤️ SUBSCRIBE: goo.gl/tTFmPb
In this tutorial we are going to create our own ChatGPT in React with the help of OpanAI API. This ChatGPT clone works same as the real ChatGPT app or website. In this Clone of ChatGPT we don't need to create an account. We can directly open this ChatGPT clone web app and search for our query. The ChatGPT clone will given the answer of all our queries using AI API.
Download the assets:
👉 drive.google.com/file/d/1aimX...
React Introduction tutorial:
👉 • What Is React (React J...
Build AI image Generator in React:
👉 • Build An AI Image Gene...
JavaScript complete tutorials for beginners:
👉 • What Is JavaScript | I...
JavaScript Projects for beginners:
👉 • How To Make Weather Ap...
-----------------------------------------
Suggested Course:
❤️ Complete website Using HTML and CSS
✔️ 8 Complete website step by step
✔️ Source Code Download
✔️ 76 Lectures, 12 Hours Video
✔️ Course Completion certificate
👉 easytutorialspro.com/go/course/
----------------------------------
Affordable web hosting (coupon- EASYTUTORIALS)
👉 easytutorialspro.com/hosting/
My recommended tools and tutorials
👉 easytutorialspro.com/
-------------------------------------
◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see)
Join Channel Membership:
► / @greatstackdev
-------------------------------------
Like - Follow & Subscribe us:
◼️ RUclips: goo.gl/tTFmPb
◼️ Facebook: goo.gl/qv7tEQ
◼️ Twitter: / itsavinashkr
◼️ Instagram: / iamavinashkr
Super helpful tutorial! Just a couple of points:
- At 1:19:14, don't pass in an array of objects as a dependency to the useEffect hook. It could trigger an infinite loop. Only use primitive/static values, like "messages.length".
- At 1:20:30 Instead of creating a new function just for the Enter key, make the input element part of a element so that pressing Enter will trigger a form submission.
The UI looks incredible. Never seen anyone creating Chatgpt as easy as you made it. I'm gonna try this today ❤ Thank you greatstack
yes please create your own version of ChatGPT in React
abinav can u plz share the source code
What I think the only missing part here is the authentication part
@@GreatStackDev
@@shiraztariq2789still want code or not ?
Send me your project repo
Please do create more ReactJS projects, your projects are way simpler to understand. Got to learn lots of concepts through projects. Appreciate your work :)
Thanks Raviraj, Glad you liked this React Project tutorial to build ChatGPT clone.
Did check this portfolio website project in React: ruclips.net/video/4ag1LsgIUc0/видео.html
Send me your project repo
what extension are you used in this project? Can you please share this.
Bro You are the best 💖💖
How do you format the content in a suitable form? For example, if the content contains code snippets or bullet points, then the tag should be used, so how to do this?
Love it sir ❤❤
We want full react course😀
Great tutorial, thank you!
Thanks GreatStack for this amazing project .This is a best project. I learned something new while creating it everything was explained very nicely and it's completely begineer friendly I recommend others to try this out.
Glad you like it!
Can you help me plz in this i gotting errors
Send me this project repo
Thanks for the Tutorial ! Is it possible to uplaod documents with the Chatgpt APi or is it an CHATGPT Plus exclusive ?
Your video is very good and it would be great if you add the editing feature of gpt chat
sir, can we add this to a 24*7 website
pls tell
What extension do you use for auto completion of tags with autofill.
Can you make a chatbot tutorial, where u have choice between options
Excellent UI. The source code would've really helped us figure out our errors.
Bro 😮😮😲
👍🏻👍🏻👍🏻👍🏻
hello sir , sir maine chatgpt ka clone bana hai but isme bahut sari problem face karna par raha hai related to the openai sir how could i solve this
Thank you very much!
can i do this for major project? is this that advanecd?
Need full course for react js
.Great video!
PD: ALT + Z please ;)
We need full react course plechhh🤗
sure but It will take time, currently working on JavaScript course
Good to hear this , thank you so muchhh😊
please provide react full course
Need React long Course ❤❤
sure but It will take time, currently working on JavaScript course
can we have the repo with the complete code ?
He said that it was in a community post, but only channel members of GreatStack (Easy Tutorials) can view it.
@GreatStack I have encountered an error, it says that Request failed with status code 401, what should I do?
401 error comes when your credentials are not completed, i.e your profile for the api is not complete, You need to pay $0 from your card on the official website, then the api will allow you to use the feature....
Check from 55:00
Don't worry, no money will be deducted automatically, says OpenAI 😊
@@anuraganand6480 hey is this similar to 400 error too?
I think it would be great if we can make that response text to speech 🤔
yes you can make that by using window. speechSynthesis, you can get idea from this text to speech tutorial: ruclips.net/video/3oDNqHZ7UKY/видео.html
@@GreatStackDev thanks sir 👍
Bro, source code share kar do please... if you have no problem...
@@standwithindia397 Bro did you get the source code?
@@prabhugantayat6562 nahi bro
Thanks man
Glad you liked this tutorial to make ChatGPT clone project in React
I like your previous voice
Sir npm install openai@^3.0.0 is also not working
Awesome Tutorial I learned a lot from this video and the good thing about some points I don't understand so personally guide me very well how to use Api
Can you help me i gotting some errors in this
@@dharmikjain5288 Same here !! I am also getting errors...have you encountered this one:- Request failed with status code 401
can you share openai.js file source code?
the configuration error occurs during run time
Sir? Can you pls provide the Github repo here?
if you get the github link plz let me know
When i implement the openai configurations it show me following error
"Configuration is not a constructor"
Close visual studio.
Open your node_modules folder.
Delete openai folder
Open your terminal in your project folder
Run the command "npm install openai@^3.0.0"
Restart local instance by typing "npm start" in terminal
Request failed with status code 400 this is new error after your process
@@jamesp5343
Please help ,I am getting a error in console window after writing the api code ,I have follow the same code as you have written but getting error in Console that require is not defined,and the web page become blank .
Do reactjs small projects 30 like you done on JS
Bro makke more react project like movie app, ecommerce app
sure, working on Ecommerce react project, we will upload it soon
Can we use cookies of already logged in chatgpt?
pls post a react full course
sure but It will take time, currently working on JavaScript course
Hello GreatStack !!! What an amazing and an easy tutorial to create ChatGpt !!! Thank you so much fo this but i am facing an issue..i am getting this error:- Request failed with status code 401...Any ideas how to resolve this ?? IT would be appreciated and Thank you again !!!!
Have you find the solution for this?
@@vibhanshusingh1718 Nope, i couldn't find it
Thank you ❤ , this is the simplest yet amazing way of creating chatGpt clone . I'm gonna try it 😉
can u plz share the source code
@@shiraztariq2789haven't tried yet.
Hello bro please share source code
@@shiraztariq2789bro did you get the source code?
Npx create-react-app clone not working it shows npx is not recognize command
I also request in future also guide this if this same project we have to live link so what's the process do we have to follow and make a link with firebase because in firebase we have a option to free live link .
Can you help me i gotting some errors in this
i also got the error if you solved it. Then it would be great if u share how did you do that cuz i cant find any solutions :(
@@creaxionx8540 bro that api is paid now
Openai.js file not working while importing complete ui becoming blank
same for me have you resolved that issues then pls help me on this
One error is not resolving even after installing openai 3.3.0 it shows ERROR
Request failed with status code 400 please help
I have the same error
i also have these error,can anyone resolve this issue?
Hey did you det any solution of this problem
I am facing it too
@@wildrubis9496please
Can you make a realtime chat app? Let's take the challenge 💪
Thank you for providing this ChatGPT clone using react but while I am trying this code the output on the browser is not displaying for me and it is showing that an error like Configuration is not a constructor. In actual there is no error in terminal and it is showing that webpack compiled successfully. Could you please help me to solve this issue.
Do anyone know about this? please help me to find it out .
Close visual studio.
Open your node_modules folder.
Delete openai folder
Open your terminal in your project folder
Run the command "npm install openai@^3.0.0"
Restart local instance by typing "npm start" in terminal
@jayalakshmiballajaya
tq i will try in that way@@jamesp5343
i have done what you have told but it is showing still the same error@@jamesp5343
i have while configuration of api? plz help me clr the error?
Please front end development fulll course Html css and JavaScript please please sir❤❤
1. HTML CSS Full Course: ruclips.net/video/GAZVvpjxYQY/видео.html
2. JavaScript Course: ruclips.net/video/CBWnBi-awSA/видео.html&pp=iAQB
3. HTML CSS JS Projects: ruclips.net/video/CpgNVyUxUV0/видео.html
Can you please give me the source code 🥺
😢😢 completed up to 1:14:52
Suddenly browser not showing the output
same pls help me on this
Great Project !!! BUT FREE OPEN API WILL NOT WORK GUYS , its paid services now , so whosever is not able to generate response , is because of No response from API !!!
Hmm 😢 but is there any other options are available?
@@jerryhacker8569 you can try using unofficial hugging chat api
Thought of using this project for my sem 8, but im out of luck !😭
I am getting error refused to set unsafe header "user agent" can anyone help me with this
after openai.js
this runtime error shows - (TypeError: Configuration is not a constructor)
can anyone solve this
even i am also facing the same error right now
Me too facing same pb,do you got the solution
Me too
Actually chatgpt api is premium(paid) now,it doesn't free,that's why it shows error
Hope all of you understand now
I am facing the same problem before then I recreate the project and at the time of installing open ai I just installed openai version 3.3.0
@GreatStack sir how to solve this error Request failed with status code 429
Same problem
Please am getting error “require is not defined in ES module scope”
Buddy source code kha se milega repo ki link dedo kuch check krna hai
Frist
project making but some create a problem not show the output and configuration is openai.js:5 not a constructor please fastly reply solve with problem
Same problem did you got the solution
Can it impact on resume or i want some add on projects.
yes. you can add
Do we have any git repo for this clone??
Bro did you get the code?
Is there any IEEE paper for this project
What extension are you using? Please let me know, I'd like to use it too
An extension that shortens writing code so that what we want to write appears directly, pls tell me GreatStack 🙌🙌🙌
Vscode inbuilt Extension Emmet @@MuhammadIlham-nl4du
please what's called the theem that u use in this vedio
why is my app.css not compiling from 19:14 ? the tags are correct and app.css is imported in app.js but css still not applying on the project... kindly help
same issue!!
We need React course
sure but It will take time, currently working on JavaScript course
Hello sir , this project making but some create a problem not show the output and configuration is openai.js:5 not a constructor please fastly reply solve with problem
check your package.json file
it should contains
"openai": "^3.3.0",
if it is not there you can install by typing
npm install openai@^3.0.0
i also have a same issue @GreatStack
kindly plz resolve this error
@@shiraztariq2789 u got answer? I am facing same issue
Hi, can you please provide the source code?
Sir npm i openai is not installing
try
npm install openai@^3.0.0
@@GreatStackDev sir it's not working
Sir when i enter the consol.log(res); the web page is not visible. 1:05:52 so please tell me sir what should i do
Yes bro you are right require is not defined error show kr rha mere me
if any one fix the bug please provide us with the solution
@@anmolsingh6567
from package json remove "type": "module",
or
you can try to remove the require function and use the import syntax
Did u get this error?
Uncaught TypeError: Configuration is not a constructor
@@ghostlegend_ yes
I have joined the channel but I dont see the source code for this tutorial. where I can find the source?
Hi Ankush, We will post the code link by today evening.
here it is: ruclips.net/user/postUgkxoZfd5WBH5uZQeHjVUp_0G8BNTKFNjkv0
I didn't see the source code. Can you help it out? @@GreatStackDev
It give me this error "openai.js:2 Uncaught TypeError: Configuration is not a constructor"
check your package.json file
it should contains
"openai": "^3.3.0",
if it is not there you can install by typing
npm install openai@^3.0.0
Not working sir
Close visual studio.
Open your node_modules folder.
Delete openai folder
Open your terminal in your project folder
Run the command "npm install openai@^3.0.0"
Restart local instance by typing "npm start" in terminal
Is open ai API still working??
Yes it works
@@GreatStackDevit is not taking visa debit card details and show "your card declined".
Please help me I am stuck here.
Hey can you share the github repo for the project?
is it censored like chat gpt?
Hi,
Even with the same settings and everything, I am getting a scrollbar in the main chat area. Please help
i also got the same error
Hi @jinssean7606
::-webkit-scrollbar {
display: none;
}
Add this to your App.css file
thanks Marryam, your comment will help others
@marryam can u plz provide the source code
since chatgpt is not available in my location which other ai api key can I use?
maybe falcon on hugging face, or just use a vpn
this method has been deprecated. can you tell us how to implement gpt 3.5?
for who getting error related to Configuration, createCompletion etc. here is a code of apenai.js file: const OpenAI = require('openai');
const openai = new OpenAI({ apiKey: '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', dangerouslyAllowBrowser: true });
export async function sendMsgToOpenAI(message) {
const res = await openai.completions.create({
model: 'gpt-3.5-turbo-instruct',
prompt: message,
temperature: 0.7,
max_tokens: 256,
top_p: 1,
frequency_penalty: 0,
presence_penalty: 0
});
return res.data.choices[0].text;
}
But this subscription is not free please can you tell free trial method
is some one there who made this project...is it working correctly?
it showing Configuration is not a constructor ? why ?
same here.. Is it is solve or not
getting require is not defined error
can u pleser share code
getting some error
Mere project me jb hello likh kr send kroo toh user ki img 40-45 baar print ho rhi hai fir uske baad mera massage likh kr aarha hai map function me kuch error hai kisi ko koi idea hai ki kya kiya ja skta hai
@GreatStackDev plz help buddy
Bro i gotting some errrors plz anyone help
Configuration is not a constuturor getting error need help
hey did you find the solution, cuz i got problems too
@@Flenex-io bro 🥲it's shit it is pending know also I try and created another time with new folder but same error in that open api that is put in terminal there is not constructor 🥲 or it is updated
Facing same issue
Close visual studio.
Open your node_modules folder.
Delete openai folder
Open your terminal in your project folder
Run the command "npm install openai@^3.0.0"
Restart local instance by typing "npm start" in terminal
@@jamesp5343 great stack se puch mena main se unhone ne bola wo api ab paid hogya h isliya use ni hoga pura code unhone mujhe dediya
images are not working i dint know y
is now working
Try resizing them with css, also, you can download a replacement icon online, which will be free.....
openai api is not free?
where do i get it for free
build it yourself
openai.js:1 Uncaught ReferenceError: require is not defined
at openai.js:1:38 "Sir please tell me what I do to fix this error"
use import/export rather than require.
@@user-kg3iz4ww9m How
How much free credit do we get from open ai
Around 200 responses, which will be reactivated automatically after some days, check the openAI documentation for more....
getting status code 429 error
Same error
const { Configuration, OpenAIApi } = require("openai");
const configuration = new Configuration({
apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
});
I wrote the code very correctly but still i am getting this error can someone please help with me this
"Configuration is not a constructor"
const openai = new openai({ apiKey: proceso.env.OPENAI_API_KEY, organización: organización-id, configuration});
Can add this line for solving that problem?
API key is not free
it is asking to pay min 5$
create react app, javascript in 2023? really? still missing the use of classes
Api billing, they asked money bro
Just need to verify payment method, verification transaction amount will be refund immediately. After that you will get free credit to use API. You can see the available credit limit also. Any time you can remove your payment method
poppins is not loading
Do we need to pay for getting access to chatgpt api?
Yes you have to, but if you register an account you get some free usage at the beginning.
You need to verify payment method after that you will see free credit limit to use the API
@@GreatStackDevhow can I verify the payment method or how to add debit card to used API
Thanks for replying , so we need to pay for chatgpt api even for sample execution , as i verified my payment methods , it showed me this "You have not started a payment plan yet." @@GreatStackDev
please check this tutorial about OpenAI api: ruclips.net/video/PZG2MvOjud0/видео.html
55:56
Source Code??