Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

Build ChatGPT 2.0 with React JS and OpenAI on Your PC

Adrian Twarog via YouTube

Start learning Write review
Coursera Ad

AI, Data Science & Cloud Certificates from Google, IBM & Meta

Learn More → DataCamp Ad

AI Engineer - Learn how to integrate AI into software applications

Learn More →

Overview

Google, IBM & Meta Certificates – 40% Off
One Coursera Plus subscription covers most Professional Certificates on Coursera.
Unlock All Certificates
This beginner-friendly tutorial shows how to build a ChatGPT-style web application with a React frontend, an Express and Node.js backend, and the OpenAI API. It covers interface design, API configuration, request handling, frontend-backend integration, and model selection.

Syllabus

- Introduction
- Coding ChatGPT preview
- OpenAI Template Starter Kit
- ChatGPT Starter Kit
- Initialising Project
- Starting Frontend with Create React App
- Designing ChatGPT Side menu
- Styling ChatGPT Side menu
- Designing Prompt Input
- Styling Chat GPT Input
- Coding Chatbot Interface
- Styling the Chat message interface
- Adding OpenAI SVG Logo
- Starting Backend with Express
- Preparing OpenAI Configuration and API Key
- Creating Express API Routes
- React Frontend handle Submit function
- Cleaning up the React Components
- Creating Frontend API Request using Fetch
- Frontend Backend integration
- Adding Features to Select OpenAI Models
- Conclusion

Taught by

Adrian Twarog

Reviews

Start your review of Build ChatGPT 2.0 with React JS and OpenAI on Your PC

Start learning

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.