[Udemy] React.js AI Chatbot built with ChatGPT, Gemini and DeepSeek [9/2025, ENG]

Welcome to the course
00:59
Course Requirements
00:32
How to Study on Udemy
02:15
How to Use Code Resources
04:16
Project Overview
04:19
Your Journey in React.js AI Chatbot
Introduction to Generative AI
03:00
AI APIs Pricing Model
01:57
Setting Up Environment
01:16
Creating React Application
02:19
Cleaning Up Application
03:02
Building the App Layout
02:43
Displaying Chat Messages
06:11
Displaying Chat Messages
04:06
Handling Messages in the Chat
08:29
Overview of Popular AI APIs
04:15
Getting API Key for Google AI
03:15
Connect Google AI (Gemini) for Chatting
07:17
Isolating Google AI logic for Reusability
06:07
Getting API Key for Open AI
01:44
Connect Open AI (ChatGPT) for Chatting
10:40
Displaying Loading State
04:37
Adding Markdown Support to Messages
01:54
Making Text Field Auto-Resizable
02:22
Disable Chat Controls during Loading
01:49
Applying Auto-Focus to Text Field
02:05
Adding Auto-Scrolling to Bottom
03:23
Improving Auto-Scrolling Behaviour
08:43
Adding Dark Mode Support
07:27
Connect Google AI
04:34
Enabling Real-Time Chat Streaming
08:46
Connect Open AI (ChatGPT) for Streaming
03:01
Overview of DeepSeek R1 and V3 Models
02:51
Getting API Key for DeepSeek
01:49
Connect DeepSeek (R1 and V3) for Chatting
07:12
Usage and Rate Limits of AI API’s
04:08
Code Not Working? Learn How to Debug
04:01
Dealing with API Errors from AI Services
02:48
Using New Google AI (Gemini) Library
07:15
Handle and Display Friendly Error Messages
08:43
Overview of Anthropic (Claude) Models
03:19
Getting API Key for Anthropic (Claude)
02:28
Connect Anthropic (Claude) for Chatting
11:37
Overview of xAI (Grok) Models
03:45
Getting API Key for xAI (Grok)
02:49
Connect xAI (Grok) for Chatting
04:18
Switching Between AI Assistants in a Chatbot Interface
12:28
Extend Chatbot to Support More AI Models
07:00
Add Light/Dark Theme Picker to Chatbot UI
09:11
Overview of the New Sidebar for Managing Multiple Chats
03:25
Create a Sidebar Layout to Display All Chats
09:56
Make Sidebar as a Hamburger Menu on Mobile
15:00
Extract Messages Logic from App Component
07:28
Enable Chat Switching from a Sidebar
05:35
Show Full Message History for Active Chat
04:49
Update Existing Chats with New Messages
05:06
Add a “New Chat” Button to Start New Conversations
06:02
Prevent the Creation of Multiple Empty Chats
06:07
Auto-Generate Chat Titles from User Input
04:27
Support Separate History for Each Chat (Google AI Specific)
14:40
Keep Responding while Switching Between Chats
09:42
Remove Fake Chats Data and Fix Welcome Screen
02:17
Handle Code Blocks and Improve Formatting
04:01
Introduction: Why You Should Use Github Copilot
01:02
Overview of GitHub Copilot
05:08
Popular Use Cases of GitHub Copilot for Developers
07:18
Github Copilot Payment Plans & Limitations
07:59
Understand Github Copilot Data Privacy
05:36
Setting Up Github Copilot and VS Code
04:51
Quick Start with GitHub Copilot in VS Code
08:19
Learn more about Code Completions
08:42
Use Inline Chat for Editor and Terminal
03:37
Github Copilot Smart Actions
07:03
Use of Github Copilot Chat Interface
07:08
Using Copilot Chat – Ask Mode
06:23
Editing Code with Copilot – Edit Mode
07:33
Automate Tasks with Copilot – Agent Mode
10:54
Using Chat Context for Better Responses
13:40
Introduction: Why You Should Use Cursor
01:02
Overview of Cursor AI
03:09
Popular Use Cases of Cursor AI for Developers
09:23
Cursor AI Payment Plans & Limitations
08:39
Understand Cursor AI Data Privacy
04:17
Setting Up Cursor AI Code Editor
05:00
Quick start with Cursor AI
08:54
Learn more about Tab Completions
09:13
Use Inline Chat for Editor and Terminal
06:15
Use of Cursor AI Chat Interface
06:50
Using Cursor Chat – Ask Mode
08:51
Editing Code with Cursor – Manual Mode
05:35
Automate Tasks with Cursor – Agent Mode
12:35
Using Chat Context for Better Responses
09:08
Introduction: Why You Should Use Windsurf
01:02
Overview of Windsurf
03:57
Popular Use Cases of Windsurf for Developers
09:01
Windsurf Payment Plans & Limitations
07:41
Understand Windsurf Data Privacy
06:32
Setting Up the Windsurf Editor
03:50
Quick start with Windsurf
07:41
Learn more about Tab & Supercomplete
06:12
Use In-line Command for Quick Questioons
05:02
Windsurf Codelenses for Quick Actions
03:50
Use of Windsurf Cascade (Chat Interface)
08:14
Using Windsurf Cascade – Chat Mode
07:38
Editing Code with Cascade – Write Mode
13:00
Plan your App with Cascade - Plan Mode
09:47
Using Chat Context for Better Responses
06:21
How to Leave a Review
01:05
How to Get a Certificate
00:45