Create Your Own ChatGPT in HTML CSS and JavaScript | ChatGPT Clone HTML CSS and JavaScript
In this video tutorial, I demonstrate how to create your own ChatGPT using HTML, CSS, and JavaScript. This ChatGPT clone project allows you to ask questions and receive instant responses. Additionally, you have the option to switch between dark and light themes.
Your chat history is saved in the browser's local storage, ensuring it remains even if you refresh the page. However, you can easily delete chats by clicking on the dedicated "Delete Chat" button.
🖼️ Get Images only of this ChatGPT Clone
➤ codingnepalweb.com/custom-pro...
🗂️ Get Source Code of this ChatGPT Clone
➤ buymeacoffee.com/codingnepal/...
🌐 Visit CodingNepal for helpful coding projects
➤ www.codingnepalweb.com
⭐ Hire me on Fiverr
➤ www.fiverr.com/prakashahi
📷 Follow me on Instagram
➤ / coding.np
🤝 Support my work with a coffee
➤ buymeacoffee.com/codingnepal
Timestamps:
0:00 Demo of ChatGPT Clone
4:00 HTML & CSS Start
4:15 Creating Static Chats
8:45 Creating Typing Dots Animation
11:18 Creating Bottom Typing Box
20:10 JavaScript Start
21:05 Working on Outgoing Chat
24:49 Working on Typing Dots Animation
26:24 Working on Generating API Response
33:58 Working on Copy Response Button
36:37 Saving Chats to Local Storage
38:46 Working on Dark/Light Theme
42:55 Working on Delete Chats Button
#javascript #html #css #javascriptprojects #js #chatgpt #chatgpt_clone
Music Credit:
Ikson - We Are Free [Official]
• #83 We Are Free (Offic...
Miss You - LiQWYD
• Miss You - LiQWYD (No ...
Those Restless Nights - Artificial.Music
• Those Restless Nights ...
Ehrling - You And Me (Vlog No Copyright Music)
• Ehrling - You And Me (...
Пікірлер: 154
Build A Google Gemini AI Clone in HTML CSS & JavaScript: kzread.info/dash/bejne/ZWWYz8Omlbq1gps.html
@kameshg964
9 ай бұрын
pls give soure code
@SurajPandey-vi9gr
3 ай бұрын
After the update it, looks like there is no free trial ?
@CodingNepal
2 ай бұрын
Yes, It seems OpenAI no longer provides free credits for API usage. The minimum cost to get started is now $5. Once the payment is made, your ChatGPT clone project should work as expected.
Pretty awesome work. thanks
sir your videos are really great
Amazing content, HONESTLY THIS IS THE BEST CODING CHANNEL ON KZread!!! Keep it up. Love the stuffs you guys do.
@scapesteam
Жыл бұрын
Honestly it would be cool if there was a way to actually recommend you the next video.
@scapesteam
Жыл бұрын
Every video you make is already my favourite but still. a way to recommend would be cool
@simple_boy_077
11 ай бұрын
+
@vishnuvardhan-rb8cc
3 ай бұрын
@@scapesteam bruh bot
Awesome Project 👍. Please Resume Generator HTML CSS JavaScript
thank you so much. it's awesome
great work🎉🎉
Good work 👍👍
avesome bro . From Sri Lanka 👍
@CodingNepal
Жыл бұрын
Thanks a million
Great work It makes better if you have streamed response
@Mully-mc
4 ай бұрын
@mullycraft3Djv
Best Ever ❤
Such an amazing project
it shows error after providing Correct api also
you're really a creative man
@CodingNepal
Жыл бұрын
Thanks a million
Awesome 👍👍 keep it up
@CodingNepal
Жыл бұрын
Thanks a million
Awesome Coding nepal.😀😀😘😘
@CodingNepal
Жыл бұрын
Thanks a million
Please make a video on, train running status website using rapid API keys..
That is a unsure way to put the API key no? If the application is hosted would it not be accessible through the browser?
HOW CAN NEPAL DO THIS!!! TALENTED
like your creativity sir...really challenging me alot..keep up another like from me
@CodingNepal
Жыл бұрын
Thanks a million
Great video! Keep it up! 😉🔥
@CodingNepal
Жыл бұрын
Thanks a million
that sick 🔥
@CodingNepal
Жыл бұрын
Thanks a million
can i change the model to gpt-3.5-turbo?
Damn🤯.... What a project 👏
@CodingNepal
Жыл бұрын
Thanks a million
Very nice❤
@CodingNepal
Жыл бұрын
Thanks a million
Awesome!!!!!
@CodingNepal
Жыл бұрын
Thanks a million
can we use Bard API_KEYS instead? open ai available in only 45 countries. pls make a video. and let me know if you see this comment.
Bro, How to fix - Oops! Something went wrong while retrieving the response. Please try again.
@preskopresko6427
6 ай бұрын
How??????????????????
Anybody asked chatgpt "How to create a ChatGPT clone in HTML, CSS, and JavaScript " ? 😜
@Sudhasinghcrafts
Жыл бұрын
I asked but it doesn't replied accuratly
@afolabifasanya5349
6 ай бұрын
Na chatbot d werey go dey give me
From where can we download this code?
amazing video , cant find the link for the google fonts
why it is generating random answers such i typed hii and as reponse i got a cpp code
How do you create copy, delete, theme and send buttons in one line?
make this video using next js,typescript & tailwind css usin redux.Thank you🤗🤗😐😐😵💫😵💫
Good bro, Ai video editing website creation it bro.
Can you show me the new chat button configuration in javascript?
Thanks
@CodingNepal
13 күн бұрын
Thank you too for your support
Can you make room gpt please❤🙏
Please make a video on Anime Streaming website like 9anime using HTML, CSS and Javascript
can you show how a assistant from openai is connected?
35:00 new way for copy text to clipboard is work enyware ?
👍
hi can you share in there with your source code because i cant open with zip
hey bro, how to make automatic ChatGPT API keys, and no need to enter before accessing the page?
@CodingNepal
Жыл бұрын
The API key requirement before access the page is only for my demo project. If you follow the video, then you don't need to do that.
@azzamhaer
Жыл бұрын
@@CodingNepal ill do it
Brother, I have a question that AI also created a website and clones. As I am learning Html, CSS. But I am also worried if AI creating everything just saying how my website should look like just typing the instructions without writing any code. So how i should see this. Please give me your views or make an video about this if possible. Because if everything is happening without writing a code. How we can add more value by learning HTML and CSS.
Help us with source code please 🙏
how to upload documents through the prompt
LUKO KING CLONE ❤❤❤
If we deployed this website on github or any other server API Key gets disabled due to api key exposion .. So how to use api key without exposing it in js?
@CodingNepal
10 ай бұрын
You can use Node.js to send secure API requests from the backend, as it's not possible to securely hide API keys using plain JavaScript.
dude please give the links to your source code
How do get this https link
bring some react tutorials bro, single page application with redux toolkit
@Muhammad-Shahab
Жыл бұрын
he doesn't know react
Oops! Something went wrong while retrieving the response. Please try again.
@CodingNepal
Жыл бұрын
The free OpenAI API is available for three months after creating an account. After that, it becomes a paid service. To continue using the API for free, create a new account and API key for limited usage.
After making the HTML and CSS I strated the JS part. When I fetched the API it is showing- API likit reached check billing.... I think API is no more free.
@satyamkarn9227
Жыл бұрын
create another account with different phone number and emailID
sir there is any documentaion about this project
I thought javascript is easy but my mind you gona see somthing big😂 😮😮can you provide a javascript full free course
@CodingNepal
Жыл бұрын
I will think about it.
Good code, can we get this code ?
🥲🥲can you make a poject where free api is available ?? when I created API it didnt work because it is paid not free
Can you guide me to use other free APIs
Very Nice Video
@CodingNepal
Жыл бұрын
Thanks a million
why model ?
Please Create JavaScript Tutorial Playlist.
@CodingNepal
Жыл бұрын
It's available on my channel.
@m.areeshrashid705
Жыл бұрын
Please Create JavaScript Tutorial Playlist step by step concepts clear.
We are waiting for the sorce code for the ChatGPT, Please upload it soon..
@CodingNepal
Жыл бұрын
Source code will be uploaded soon on my website - www.codingnepalweb.com
Brother, Suddenly it stopped working. Can't understand what is happening. I have tried changing the api key. But it isn't working. Any suggestions?
@CodingNepal
Жыл бұрын
The free OpenAI API is available for three months after creating an account. After that, it becomes a paid service. To continue using the API for free, create a new account and API key for limited usage.
Great Project sir. But can't download source code.
@CodingNepal
Жыл бұрын
Source code will be uploaded soon on my website - www.codingnepalweb.com
@musicalsworld1455
Жыл бұрын
@@CodingNepal Failed to load resource: the server responded with a status of 429 () Facing this problem sir after using API_KEY from chatgpt.
@RS33
Жыл бұрын
@@CodingNepal Failed to load resource: the server responded with a status of 429 () Facing this problem sir after using API_KEY from chatgpt please solve the problem
@RS33
Жыл бұрын
@@CodingNepal create short video for solve problem
And i learn a function is trim(l for rimove white space , right
@CodingNepal
Жыл бұрын
Yes, it is true that the trim() method in JavaScript removes any extra whitespace from both ends of a string. const email = " abc@gmail.com "; const trimmedEmail = email.trim(); console.log(trimmedEmail); // Output: "abc@gmail.com"
@coding_with_mayavi0
Жыл бұрын
@@CodingNepalcan you provide a full javascript cous in free or you knlw some on provide the course free?
please give source code
@CodingNepal
Жыл бұрын
Source code will be uploaded soon on my website - www.codingnepalweb.com
the console says "POST" has too many uses
Where to host it
I followed this and got this error: Oops! Something went wrong while retrieving the response. Please try again. Any ideas why I am getting this?
@CodingNepal
Жыл бұрын
It appears that there is an error within the code in the try block. This error could be due to an invalid API key, a typo, or something else. To identify the error, you can use console.log(error). try { // Your code goes here } catch (error) { console.log(error); // Additional code or error handling can be added here }
@dongarevikramnarayan179
Жыл бұрын
@@CodingNepal sir i also face same problem
@dongarevikramnarayan179
Жыл бұрын
is your problem solved
@Nimisha844
8 ай бұрын
@@CodingNepal hello sir whenever i send a prompt in these application it is showing error about too many request error 429.Please can you help me in these.I checked my code multiple times and i followed all your api key generation steps but these error is no vanishing.
Can you provide source code for clarification
hi i have a premium chatgpt why this respond Oops! Something went wrong while retrieving the response. Please try again.
@CodingNepal
10 ай бұрын
ChatGPT and OpenAI API subscriptions are different.
Help solve the error 429 please "error": "message": "You exceeded your current quota, please check your plan and billing details.", "type": "insufficient_quota", "param": null, "code": null
@CodingNepal
Жыл бұрын
The free OpenAI API is available for three months after creating an account. After that, it becomes a paid service. To continue using the API for free, create a new account and API key for limited usage.
@atheisttttt
Жыл бұрын
@@CodingNepal no I created an API key today only. But having the same error. I guess credit card link is mandatory
@CodingNepal
Жыл бұрын
It doesn't matter; when you've created an API key, if your account is older than 3 months, the API won't work until you pay. So, create a new account and API to use it for free for limited usage.
@atheisttttt
Жыл бұрын
@@CodingNepal no I created my account yesterday only
I can't run it :/
We can't download the code to follow the project.
@CodingNepal
Жыл бұрын
You don't need to download the code to follow this project. Simply watch the video tutorial. Complete source code will be available soon on my website codingnepalweb.com for download.
@utkarshsiddhpura2401
Жыл бұрын
@@CodingNepal every programmer has its own website with his features😅😅😅
I got an error while getting answer from it
@tejasmane2588
Жыл бұрын
Can you please help
source coe?
gmail inbox using php
how to get the openAI API key, is it free?
@CodingNepal
Жыл бұрын
Go to this url: platform.openai.com/account/api-keys, login and create an API key. It's free.
@shubhsinha3896
Жыл бұрын
@@CodingNepal ok thanks
iska soource code milega kya ?
@CodingNepal
Жыл бұрын
Source code will be uploaded soon on my website - www.codingnepalweb.com
@codinggrits6504
Жыл бұрын
to load resource: the server responded with a status of 429 () . why give this error
where i can get free api_key ??
Source code CHATGPT clone plzzz
@CodingNepal
Жыл бұрын
Source code will be uploaded soon on my website - www.codingnepalweb.com
How to fix - Oops! Something went wrong while retrieving the response. Please try again.
@CodingNepal
Жыл бұрын
The free OpenAI API is available for three months after creating an account. After that, it becomes a paid service. To continue using the API for free, create a new account and API key for limited usage.
@dongarevikramnarayan179
Жыл бұрын
@@CodingNepal ok sir
@dongarevikramnarayan179
Жыл бұрын
@@CodingNepal yes sir, it's work thank you
@MysteryMan-wg5db
9 ай бұрын
@@CodingNepal Mine I made a few weeks ago but the source code provided still doesnt work
Awesome Bro Can U provide the code
@CodingNepal
Жыл бұрын
Get source code from here: www.codingnepalweb.com/create-chatgpt-clone-html-css-javascript/
@muhammadvitoni1802
Жыл бұрын
@@CodingNepal this is an error after entering the API_keys what should I do
Hey I saw your chatgpt clone in my browser When I would right click it would say you cannot view or copy source code then I pressed f12 and then I downloaded all source code haahahhaa. and another thing when I messaged chat gpt would say invalid api key. 🤓🤮🤮🤮🤮🤓😎😎😎😎😎
Is this API paid...?
😱😱🤯🫵🏻👍🏻
@CodingNepal
Жыл бұрын
Thanks a million
I need help how i can contact you?