About me ◽️ 👨🏻‍💻 Front-End Engineer (9+ years) ◽️ 🎬 React.js Instructor on Udemy ◽️ 🎯 Mentor for Developers

My courses ◽️ React.js AI Chatbot App with ChatGPT and Gemini AI ◽️ React Crash Course: From Zero to Hero

React.js AI Chatbot App with ChatGPT and Gemini AI

Build a Real-time AI Chatbot with React.js, integrating ChatGPT and Gemini AI for dynamic conversations.

In this course, you'll begin by building Chatbot UI, integrating OpenAI (ChatGPT) and Google AI (Gemini), and building your first AI-powered chatbot in React. You'll learn how to implement real-time chat streaming, add markdown support, manage loading states, and create a seamless user experience, all while working with React's component-based architecture. By the end of the course, you'll have the skills to create dynamic, interactive AI chatbots with React.

How to use code examples from Github

This repository contains the source code for the "React.js AI Chatbot App with ChatGPT and Gemini AI" course.

Download the code source

a) Download code source for final application

1. Open repository main page.

2. Click on the green "Code" button to open a list and then click on the "Download ZIP" button to download a source code.

b) Download code sources for specific lesson

1. Open commits page.

2. Click on the "code" icon near the lesson you are interested.

3. You will be redirected to the specific source code page for this lesson.

4. Click on the green "Code" button to open a list and then click on the "Download ZIP" button to download a source code.

Open project in the VS code (code editor)

Open the archive on your computer, open VS code (code editor) and cick "File" -> "Open Folder" -> Choose project folder => "Open".

Start application

1. Install dependencies

Run the npm install command to install all the libraries needed to run the application.

2. Run application

Run the npm run dev command in terminal to start the application. Open http://localhost:5173 to view it in your browser. The page will reload when you make changes.