React. js AI Chatbot built with ChatGPT, Gemini and DeepSeek
- Description
- Curriculum
- FAQ
- Reviews
Unlock the power of AI to create smart, interactive apps that engage users in real time. You can easily add advanced features to your projects and build solutions that stand out in today’s market using OpenAI (ChatGPT), Google AI (Gemini), DeepSeek (R1 and V3), Anthropic (Cloud Sonnet and Haiku) and xAI (Grok 3) AI API’s.Course updatesMay 2025. Added New Lessons. Connect Claude and Grok AI models using API to Chatbot + Handle & Display API Errors in a Chat + Switch between AI Models and Light/Dark Theme. (1+ hour).February 2025. Added New Lessons. Connect DeepSeek AI model using API to Chatbot and Handle API Errors with Confidence. (30 min).What’s in this course?Build a real-time AI Chatbot with React.js, ChatGPT, Gemini, DeepSeek, Claude and GrokGenerative AI and Pricing Models for popular AI API’s (ChatGPT, Gemini, DeepSeek, Claude and Grok).Create and style Chatbot Layout. Handle Chat Interactions via Component State.Overview of Popular AI Models (ChatGPT, Gemini, DeepSeek, Claude and Grok). Getting API keys for API’s.Connect ChatGPT, Gemini, DeepSeek, Claude and Grok AI Models the for Chatting.Implement Streaming Messages. Handle and Debug API’s Errors.Add support of Dark Mode, Markdown, Messages Auto-Scrolling and Auto-Resizable Inputs.This Course includesTheory and Practice: About 4 hours of lectures with many practical examples (3-10 min lessons duration).Source Code Examples: Full access to source code for all projects and exercises (practice on your own).Lifetime access to the course and any future updates.Udemy Certificate: which you will receive after completing the course.Support: If you have any questions, we will always be willing to answer them.Who is this course for?Developers and students with fundamental React.js knowledge.People who want to learn how to integrate AI Tools like ChatGPT, Gemini, DeepSeek, Claude and Grok.Meet your instructor!Dmytro Vasyliev – Senior Front-end Engineer with more than 10 years of professional experience in developing complex Web Applications. I have extensive experience with React and other frameworks, having used it in various projects to build dynamic and efficient user interfaces.Do you need to be concerned?This course comes with a 30-day money-back guarantee.Join our course today to learn how to build your first application in React!
-
3
Project OverviewIn this lesson you will get an overview of the chatbot, see its design, and explore all the features we’ll be building together.
-
4
Introduction to Generative AI
In this lesson you will learn what generative AI is and see real-life examples of how it is used.
-
5
Setting Up Environment
In this lesson you will start setting up your development environment, everything you need to have to create React application.
-
6
Creating React Application
In this lesson you will learn how to quickly create a React application that is ready to run out of the box.
-
7
Cleaning Up Application
In this lesson you will clean up a bit our React application from not necessary code.
-
8
Building the App Layout
In this lesson you will learn how to build application layout for chatbot.
-
9
Displaying Chat Messages
In this lesson you will learn how to display and styles chat messages in the application.
-
10
Displaying Chat Messages
In this lesson you will learn how to add a text input and send button, enabling users to type and send messages to the AI assistant
-
11
Handling Messages in the Chat
In this lesson you will learn how to implement adding new messages form a user into conversation.
-
12
Overview of Popular AI APIs
In this lesson you will learn about popular AI APIs, such as Google AI (Gemini) and OpenAI (ChatGPT)
-
13
Getting API Key for Google AI
In this lesson you will learn how to create Google AI API key and how to store it in the application.
-
14
Connect Google AI (Gemini) for Chatting
In this lesson you will learn how to connect Google AI API into your application.
-
15
Isolating Google AI logic for Reusability
In this lesson you will learn how to separate the Google AI logic into separate file for easier reuse.
-
16
Getting API Key for Open AI
In this lesson you will learn how to create Open AI API key and how to store it in the application.
-
17
Connect Open AI (ChatGPT) for Chatting
In this lesson you will learn how to connect Open AI API into your application.
-
18
Displaying Loading State
In this lesson you will learn how to create a loader component and display it while waiting for a response from the API.
-
19
Adding Markdown Support to Messages
In this lesson you will learn how to add markdown support to chat messages, allowing you to display formatted content such as bullet lists, bold text, and more.
-
20
Making Text Field Auto-Resizable
In this lesson, you will learn how to make the text field height auto-resizable when the user enters long text, allowing it to expand and take up more lines.
-
21
Disable Chat Controls during Loading
In this lesson, you will learn how to disable the text field and send button during loading, preventing the user from entering new text or sending messages.
-
22
Applying Auto-Focus to Text Field
In this lesson you will learn how to set up auto-focus for the text field, so it automatically activates whenever the chatbot generates a response, improving the flow of the conversation.
-
23
Adding Auto-Scrolling to Bottom
In this lesson you will learn how to implement auto-scrolling to the bottom of the chat, ensuring users can always see the latest response.
-
24
Improving Auto-Scrolling Behaviour
In this lesson you will learn how to improve the auto-scrolling feature to focus on the latest user message, making it easier for users to follow the most recent conversation.
-
25
Adding Dark Mode Support
In this lesson you will learn how to add dark mode support to your chat application, allowing users to switch between light and dark themes for a better user experience.
