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

  • @CodingNepal
    @CodingNepal11 ай бұрын

    Build A Google Gemini AI Clone in HTML CSS & JavaScript: kzread.info/dash/bejne/ZWWYz8Omlbq1gps.html

  • @kameshg964

    @kameshg964

    9 ай бұрын

    pls give soure code

  • @SurajPandey-vi9gr

    @SurajPandey-vi9gr

    3 ай бұрын

    After the update it, looks like there is no free trial ?

  • @CodingNepal

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

  • @mounir101
    @mounir101 Жыл бұрын

    Pretty awesome work. thanks

  • @ritika8539
    @ritika8539 Жыл бұрын

    sir your videos are really great

  • @scapesteam
    @scapesteam Жыл бұрын

    Amazing content, HONESTLY THIS IS THE BEST CODING CHANNEL ON KZread!!! Keep it up. Love the stuffs you guys do.

  • @scapesteam

    @scapesteam

    Жыл бұрын

    Honestly it would be cool if there was a way to actually recommend you the next video.

  • @scapesteam

    @scapesteam

    Жыл бұрын

    Every video you make is already my favourite but still. a way to recommend would be cool

  • @simple_boy_077

    @simple_boy_077

    11 ай бұрын

    +

  • @vishnuvardhan-rb8cc

    @vishnuvardhan-rb8cc

    3 ай бұрын

    @@scapesteam bruh bot

  • @m.areeshrashid705
    @m.areeshrashid705 Жыл бұрын

    Awesome Project 👍. Please Resume Generator HTML CSS JavaScript

  • @xkimido
    @xkimido Жыл бұрын

    thank you so much. it's awesome

  • @user-fw8hw1qu4k
    @user-fw8hw1qu4k11 ай бұрын

    great work🎉🎉

  • @buzzkagirl
    @buzzkagirl Жыл бұрын

    Good work 👍👍

  • @Dumiya123
    @Dumiya123 Жыл бұрын

    avesome bro . From Sri Lanka 👍

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

    Thanks a million

  • @bidhan_niroula
    @bidhan_niroula Жыл бұрын

    Great work It makes better if you have streamed response

  • @Mully-mc

    @Mully-mc

    4 ай бұрын

    @mullycraft3Djv

  • @TechAyush001
    @TechAyush001 Жыл бұрын

    Best Ever ❤

  • @asian.drama031
    @asian.drama031 Жыл бұрын

    Such an amazing project

  • @Eternal-Bhakti
    @Eternal-Bhakti Жыл бұрын

    it shows error after providing Correct api also

  • @webhimel
    @webhimel Жыл бұрын

    you're really a creative man

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

    Thanks a million

  • @saifullahqadeer4u
    @saifullahqadeer4u Жыл бұрын

    Awesome 👍👍 keep it up

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

    Thanks a million

  • @rushikeshavachat4282
    @rushikeshavachat4282 Жыл бұрын

    Awesome Coding nepal.😀😀😘😘

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

    Thanks a million

  • @buzzkagirl
    @buzzkagirl Жыл бұрын

    Please make a video on, train running status website using rapid API keys..

  • @docpatel7399
    @docpatel73994 ай бұрын

    That is a unsure way to put the API key no? If the application is hosted would it not be accessible through the browser?

  • @LORD-OF-AI
    @LORD-OF-AI4 ай бұрын

    HOW CAN NEPAL DO THIS!!! TALENTED

  • @juma_alpha
    @juma_alpha Жыл бұрын

    like your creativity sir...really challenging me alot..keep up another like from me

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

    Thanks a million

  • @lukas.webdev
    @lukas.webdev Жыл бұрын

    Great video! Keep it up! 😉🔥

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

    Thanks a million

  • @vz4
    @vz4 Жыл бұрын

    that sick 🔥

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

    Thanks a million

  • @MindsetA.I
    @MindsetA.I Жыл бұрын

    can i change the model to gpt-3.5-turbo?

  • @yubiroaster6285
    @yubiroaster6285 Жыл бұрын

    Damn🤯.... What a project 👏

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

    Thanks a million

  • @danicoding
    @danicoding Жыл бұрын

    Very nice❤

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

    Thanks a million

  • @rigood4235
    @rigood4235 Жыл бұрын

    Awesome!!!!!

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

    Thanks a million

  • @Azalea_tube
    @Azalea_tube Жыл бұрын

    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.

  • @KnowItWithWilliam
    @KnowItWithWilliam Жыл бұрын

    Bro, How to fix - Oops! Something went wrong while retrieving the response. Please try again.

  • @preskopresko6427

    @preskopresko6427

    6 ай бұрын

    How??????????????????

  • @liviuc1946
    @liviuc1946 Жыл бұрын

    Anybody asked chatgpt "How to create a ChatGPT clone in HTML, CSS, and JavaScript " ? 😜

  • @Sudhasinghcrafts

    @Sudhasinghcrafts

    Жыл бұрын

    I asked but it doesn't replied accuratly

  • @afolabifasanya5349

    @afolabifasanya5349

    6 ай бұрын

    Na chatbot d werey go dey give me

  • @ginocote
    @ginocote Жыл бұрын

    From where can we download this code?

  • @BruceShira
    @BruceShira9 ай бұрын

    amazing video , cant find the link for the google fonts

  • @himanshudixit3376
    @himanshudixit337610 ай бұрын

    why it is generating random answers such i typed hii and as reponse i got a cpp code

  • @yashdhawade5341
    @yashdhawade53413 ай бұрын

    How do you create copy, delete, theme and send buttons in one line?

  • @rushikeshavachat4282
    @rushikeshavachat4282 Жыл бұрын

    make this video using next js,typescript & tailwind css usin redux.Thank you🤗🤗😐😐😵‍💫😵‍💫

  • @Balan_E
    @Balan_E Жыл бұрын

    Good bro, Ai video editing website creation it bro.

  • @arijitsarker7570
    @arijitsarker757010 ай бұрын

    Can you show me the new chat button configuration in javascript?

  • @sleepingbear7897
    @sleepingbear789714 күн бұрын

    Thanks

  • @CodingNepal

    @CodingNepal

    13 күн бұрын

    Thank you too for your support

  • @janakpanthi78
    @janakpanthi78 Жыл бұрын

    Can you make room gpt please❤🙏

  • @gurmeetkumar6020
    @gurmeetkumar6020 Жыл бұрын

    Please make a video on Anime Streaming website like 9anime using HTML, CSS and Javascript

  • @aubisokahaftungsbeschrankt6406
    @aubisokahaftungsbeschrankt64064 ай бұрын

    can you show how a assistant from openai is connected?

  • @coding_with_mayavi0
    @coding_with_mayavi0 Жыл бұрын

    35:00 new way for copy text to clipboard is work enyware ?

  • @indracode7
    @indracode7 Жыл бұрын

    👍

  • @Movietime36557
    @Movietime3655710 ай бұрын

    hi can you share in there with your source code because i cant open with zip

  • @azzamhaer
    @azzamhaer Жыл бұрын

    hey bro, how to make automatic ChatGPT API keys, and no need to enter before accessing the page?

  • @CodingNepal

    @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

    @azzamhaer

    Жыл бұрын

    @@CodingNepal ill do it

  • @dailymasala614
    @dailymasala6146 ай бұрын

    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.

  • @anniesshort
    @anniesshort Жыл бұрын

    Help us with source code please 🙏

  • @Muhammad-Hanzala
    @Muhammad-Hanzala Жыл бұрын

    how to upload documents through the prompt

  • @HRANIMEINHINDI
    @HRANIMEINHINDI Жыл бұрын

    LUKO KING CLONE ❤❤❤

  • @shubhammali706
    @shubhammali70610 ай бұрын

    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

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

  • @bhavikyadav2934
    @bhavikyadav293410 ай бұрын

    dude please give the links to your source code

  • @mudiaomokri1066
    @mudiaomokri106611 ай бұрын

    How do get this https link

  • @shubhsinha3896
    @shubhsinha3896 Жыл бұрын

    bring some react tutorials bro, single page application with redux toolkit

  • @Muhammad-Shahab

    @Muhammad-Shahab

    Жыл бұрын

    he doesn't know react

  • @dubfy
    @dubfy Жыл бұрын

    Oops! Something went wrong while retrieving the response. Please try again.

  • @CodingNepal

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

  • @sumitdas2004
    @sumitdas2004 Жыл бұрын

    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

    @satyamkarn9227

    Жыл бұрын

    create another account with different phone number and emailID

  • @Elysian_Editzz
    @Elysian_Editzz4 ай бұрын

    sir there is any documentaion about this project

  • @coding_with_mayavi0
    @coding_with_mayavi0 Жыл бұрын

    I thought javascript is easy but my mind you gona see somthing big😂 😮😮can you provide a javascript full free course

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

    I will think about it.

  • @godfreyogbeide2340
    @godfreyogbeide23406 ай бұрын

    Good code, can we get this code ?

  • @ammarabhatti8261
    @ammarabhatti82614 ай бұрын

    🥲🥲can you make a poject where free api is available ?? when I created API it didnt work because it is paid not free

  • @HoangNguyenViet-n6z
    @HoangNguyenViet-n6z29 күн бұрын

    Can you guide me to use other free APIs

  • @prasadbagul2146
    @prasadbagul2146 Жыл бұрын

    Very Nice Video

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

    Thanks a million

  • @xuananhofficial7879
    @xuananhofficial78797 ай бұрын

    why model ?

  • @m.areeshrashid705
    @m.areeshrashid705 Жыл бұрын

    Please Create JavaScript Tutorial Playlist.

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

    It's available on my channel.

  • @m.areeshrashid705

    @m.areeshrashid705

    Жыл бұрын

    Please Create JavaScript Tutorial Playlist step by step concepts clear.

  • @KnowItWithWilliam
    @KnowItWithWilliam Жыл бұрын

    We are waiting for the sorce code for the ChatGPT, Please upload it soon..

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

    Source code will be uploaded soon on my website - www.codingnepalweb.com

  • @mdsarowarhosen4545
    @mdsarowarhosen4545 Жыл бұрын

    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

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

  • @musicalsworld1455
    @musicalsworld1455 Жыл бұрын

    Great Project sir. But can't download source code.

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

    Source code will be uploaded soon on my website - www.codingnepalweb.com

  • @musicalsworld1455

    @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

    @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

    @RS33

    Жыл бұрын

    @@CodingNepal create short video for solve problem

  • @coding_with_mayavi0
    @coding_with_mayavi0 Жыл бұрын

    And i learn a function is trim(l for rimove white space , right

  • @CodingNepal

    @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

    @coding_with_mayavi0

    Жыл бұрын

    @@CodingNepalcan you provide a full javascript cous in free or you knlw some on provide the course free?

  • @zubarer
    @zubarer Жыл бұрын

    please give source code

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

    Source code will be uploaded soon on my website - www.codingnepalweb.com

  • @jaredthomas2943
    @jaredthomas29432 ай бұрын

    the console says "POST" has too many uses

  • @secret_7025
    @secret_702510 ай бұрын

    Where to host it

  • @andreengelbrecht5204
    @andreengelbrecht5204 Жыл бұрын

    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

    @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

    @dongarevikramnarayan179

    Жыл бұрын

    @@CodingNepal sir i also face same problem

  • @dongarevikramnarayan179

    @dongarevikramnarayan179

    Жыл бұрын

    is your problem solved

  • @Nimisha844

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

  • @RANGANATHANJCSEUG-Batch
    @RANGANATHANJCSEUG-Batch9 ай бұрын

    Can you provide source code for clarification

  • @user-jf1zq9gq7h
    @user-jf1zq9gq7h10 ай бұрын

    hi i have a premium chatgpt why this respond Oops! Something went wrong while retrieving the response. Please try again.

  • @CodingNepal

    @CodingNepal

    10 ай бұрын

    ChatGPT and OpenAI API subscriptions are different.

  • @alibikhasenov3726
    @alibikhasenov3726 Жыл бұрын

    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

    @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

    @atheisttttt

    Жыл бұрын

    @@CodingNepal no I created an API key today only. But having the same error. I guess credit card link is mandatory

  • @CodingNepal

    @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

    @atheisttttt

    Жыл бұрын

    @@CodingNepal no I created my account yesterday only

  • @lusiviacravetofficial
    @lusiviacravetofficial2 ай бұрын

    I can't run it :/

  • @samuelawe2641
    @samuelawe2641 Жыл бұрын

    We can't download the code to follow the project.

  • @CodingNepal

    @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

    @utkarshsiddhpura2401

    Жыл бұрын

    @@CodingNepal every programmer has its own website with his features😅😅😅

  • @tejasmane2588
    @tejasmane2588 Жыл бұрын

    I got an error while getting answer from it

  • @tejasmane2588

    @tejasmane2588

    Жыл бұрын

    Can you please help

  • @twinomugishamorris2340
    @twinomugishamorris23409 ай бұрын

    source coe?

  • @azzamhaer
    @azzamhaer Жыл бұрын

    gmail inbox using php

  • @shubhsinha3896
    @shubhsinha3896 Жыл бұрын

    how to get the openAI API key, is it free?

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

    Go to this url: platform.openai.com/account/api-keys, login and create an API key. It's free.

  • @shubhsinha3896

    @shubhsinha3896

    Жыл бұрын

    ​@@CodingNepal ok thanks

  • @codinggrits6504
    @codinggrits6504 Жыл бұрын

    iska soource code milega kya ?

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

    Source code will be uploaded soon on my website - www.codingnepalweb.com

  • @codinggrits6504

    @codinggrits6504

    Жыл бұрын

    to load resource: the server responded with a status of 429 () . why give this error

  • @asian.drama031
    @asian.drama031 Жыл бұрын

    where i can get free api_key ??

  • @azzamhaer
    @azzamhaer Жыл бұрын

    Source code CHATGPT clone plzzz

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

    Source code will be uploaded soon on my website - www.codingnepalweb.com

  • @dongarevikramnarayan179
    @dongarevikramnarayan179 Жыл бұрын

    How to fix - Oops! Something went wrong while retrieving the response. Please try again.

  • @CodingNepal

    @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

    @dongarevikramnarayan179

    Жыл бұрын

    @@CodingNepal ok sir

  • @dongarevikramnarayan179

    @dongarevikramnarayan179

    Жыл бұрын

    @@CodingNepal yes sir, it's work thank you

  • @MysteryMan-wg5db

    @MysteryMan-wg5db

    9 ай бұрын

    @@CodingNepal Mine I made a few weeks ago but the source code provided still doesnt work

  • @GoogleSoftwareEnginear
    @GoogleSoftwareEnginear Жыл бұрын

    Awesome Bro Can U provide the code

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

    Get source code from here: www.codingnepalweb.com/create-chatgpt-clone-html-css-javascript/

  • @muhammadvitoni1802

    @muhammadvitoni1802

    Жыл бұрын

    ​@@CodingNepal this is an error after entering the API_keys what should I do

  • @Muhammad-Shahab
    @Muhammad-Shahab Жыл бұрын

    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. 🤓🤮🤮🤮🤮🤓😎😎😎😎😎

  • @AhadSTS2.0
    @AhadSTS2.0 Жыл бұрын

    Is this API paid...?

  • @Trigoter
    @Trigoter Жыл бұрын

    😱😱🤯🫵🏻👍🏻

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

    Thanks a million

  • @user-ki4kw4lg2m
    @user-ki4kw4lg2m8 ай бұрын

    I need help how i can contact you?