Let's Build ChatGPT 2.0 with React JS and OpenAI on your PC!

ChatGPT clone using the latest React JS and simple HTML and CSS. Built on top of Node JavaScript and Express, this will let you run your own instance of ChatGPT on your own PC!

⭐ New - Teach Me OpenAI Digital Book ⭐
I've put together a easy to understand book with ~60 pages about OpenAI and GPT with how to get started to integrate it into projects, code examples, and much more!

Chat GPT Starter Kit:

OpenAI Template:

This video will cover how to code from scratch a Chat GPT interface for the frontend and a backend using Open AI latest package! It is a beginner-friendly tutorial for using the OpenAI API and working with models that are provided like DaVinci, ada, etc. You can build your own chatbot interface and this guide is also intended to help build the foundations to work with prompts and outputs from the chatgpt models.

00:00 - Introduction
00:12 - Coding ChatGPT preview
00:34 - OpenAI Template Starter Kit
00:57 - ChatGPT Starter Kit
01:22 - Initialising Project
02:47 - Starting Frontend with Create React App
03:03 - Designing ChatGPT Side menu
05:51 - Styling ChatGPT Side menu
12:34 - Designing Prompt Input
13:42 - Styling Chat GPT Input
18:52 - Coding Chatbot Interface
20:31 - Styling the Chat message interface
28:15 - Adding OpenAI SVG Logo
28:53 - Starting Backend with Express
29:54 - Preparing OpenAI Configuration and API Key
32:48 - Creating Express API Routes
34:03 - React Frontend handle Submit function
37:11 - Cleaning up the React Components
41:54 - Creating Frontend API Request using Fetch
47:17 - Frontend Backend integration
53:02 - Adding Features to Select OpenAI Models
01:02:02 - Conclusion

#chatgpt #ai #openai

[TheNeok]

I used ChatGPT to improve itself, essentially creating it into its own Alexa... Voice recognition and TTS responses... its so fun...

[germancadenatv]

Adrian, you are not only a great programmer/developer but also a superb instructor as well. It is very rare to find these two unique qualities working perfectly in one person at the same time. On top of that, the tone of your voice, tone, teaching style and professionalism makes it enjoyable to listen to you and pay attention to all details you share.

Keep up the amazing job you are doing - you are the best from any angle in my opinion. Whatever your business or personal goals are, I have no doubt you will reach them. Your level of knowledge is solid and you share it in such an interesting and exquisite manner that it is quite enjoyable. I will keep an eye on how to move forward with this amazing technology is coming to all of us. Let´s hope our paths cross in the near future. Cheers!

[universecode]

You are a master on ChatGPT Adrian and as a React dev, this is perfect for me

[green_universe]

In the past, I have shied away from learning about AI, coding, or utilizing it, however, with the quick advancements in AI in recent times, I now feel the urge to educate myself in these areas, to not fall behind and to not miss out on a powerful resource that could greatly speed up my development as a software engineer. This changes today.

[jamesradford]

Followed this through and loved every minute of it, now having so much fun playing with my own ChatGPT! Thank you for the content :)

[abuxinegaming]

I was waiting for such ChatGPT React app. Thank you Adrian.

[fiestafarmerbitch]

I am no developer but I used this as a foundation to learn css and js. Perfect instructions and this so well thought out as far as matching everything to the ChatGPT UI. Well done.

[jonathanpratte]

A big thank you, I didn't do HTML, CSS, Java-script for 15 years and thanks to you, I have now replicated your app completely. I expose the Number of completion too.

[TrentMcfarlane]

Just finished this. YOU ARE AN ABSOLUTE GEM.

I cannot thank you enough for this. I learned a lot from this experience. Thank you :-D

[alanhenderson]

Just bought the template - can't wait to try it. Thank you for your videos!

[_slickyricky]

99 bucks much better staring price than 500. This is great specially for devs that already know what they are doing. So we can plug and play and be on our way. Ty for saving me the time.

[nagaprasadts]

You made my resume filled with interesting projects 😃☺️🤔🙂😉😜

[markemerson]

bravo - particularly appreciate your agile development process; specifically, how you begin with the UI layouts and then refactor into react components...

[ScarletEdge]

ChatGPT helped me design RPG system for my custom campaign in Cold War setting. It's absolutely brilliant as assistant. I can't praise it enough.

[ernestj]

Excellent instruction and what a generous person to take the time to explain integration of this new and emerging technology with React! Thank you for making this content available!

[dylan_curious]

The video shows how to create an app using React and how to use it with chat GPT. The speaker installs create-react-app and creates a client and server folder. She then goes on to customize the app's look and style, including creating a side menu and main section, changing the background color, and adding padding. She also explains how to use chat GPT in business and work, such as scanning through resumes, writing a cover letter for a developer, and asking chat GPT to write any type of code. Overall, the video provides a useful guide for those interested in building an app with chat GPT.

[SonnySangha]

Hmmm… the title looks awfully familiar 😅

On the level though - Awesome job with this build Adrian keep it up💯

[RealLexable]

That's what we can call a real christmas present i guess! You deserve a subscription for sure.

[raphaeljaggerd]

Dude thank you so much for the amazing content.
You are awesome. If i ever make money with this and get out of my current situation i will owe it all to you.🙏

[contractorwolf]

Absolutely the best. Appreciate your clear explanations and watching your coding process in real time. Subscribed.