• AIPressRoom
  • Posts
  • Let’s Build ChatGPT 2.0 with React JS and OpenAI on your PC!

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 Bookhttps://enhanceui.gumroad.com/l/teach-me-openaiI’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!

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 – Introduction00:12 – Coding ChatGPT preview00:34 – OpenAI Template Starter Kit00:57 – ChatGPT Starter Kit01:22 – Initialising Project02:47 – Starting Frontend with Create React App03:03 – Designing ChatGPT Side menu05:51 – Styling ChatGPT Side menu12:34 – Designing Prompt Input13:42 – Styling Chat GPT Input18:52 – Coding Chatbot Interface20:31 – Styling the Chat message interface28:15 – Adding OpenAI SVG Logo28:53 – Starting Backend with Express29:54 – Preparing OpenAI Configuration and API Key32:48 – Creating Express API Routes34:03 – React Frontend handle Submit function37:11 – Cleaning up the React Components41:54 – Creating Frontend API Request using Fetch47:17 – Frontend Backend integration53:02 – Adding Features to Select OpenAI Models01:02:02 – Conclusion

#chatgpt #ai #openai