Build ChatGPT-Powered Web Apps with JavaScript & React (Open

Name: Build ChatGPT-Powered Web Apps with JavaScript & React (Open
Rating: 4.3 (10 reviews)

Create real-world AI projects – from chatbots to virtual agents – with JavaScript, React, Astro & OpenAI API (ChatGPT)

Created byStephan Haewß

Last updated 9/2025

English

What you'll learn

Creating web applications that incorporate AI chats
Usage of the OpenAI (ChatGPT) chat completion API
Create a basic chat application like ChatGPT
Integrate AI chats into games
Create AI powered support agents for online shops

Course content

5 sections • 37 lectures • 3h 28m total length

What's the course about?3:14
Learn to build AI chat apps with JavaScript, React, Astro JS, and the OpenAI API. Create a ChatGPT clone, a text-based adventure game, and a guitar sales assistant.
Tools used in this course4:04
The OpenAI platform5:53
Important: Recent changes to the OpenAI API (and AstroJS)1:22

Creating the basic AstroJS project5:22
Adding React to our project4:50
Adding an endpoint to the server4:10
Preparing to call the OpenAI API10:07
Providing the user message to the OpenAI API5:03
Pass a user-provided message from the URL to the OpenAI API by reading msg from the URL search params in Astro, and enable server-side rendering to access it.
Basic UI in React7:15
Saving the chat history8:29
Resetting the chat5:46
Improving UX9:59
Prettier chat history6:58
Improve the chat history with alternating yellow and green message backgrounds, a column layout with eight-pixel gaps, and enter-to-send keyboard support.
Summary: First chat app2:18

Creating the project5:15
The story5:11
Explore ai integration in a game using function calls and system prompts, letting a language model drive a bar adventure and guide passing a security robot after meeting ai specialist.
Preparing the quests5:01
Develop and test quest-driven navigation in a web app by guarding the east exit with a passcode, tracking quest completion, and displaying dynamic location descriptions.
First AI chat5:05
Initiate a chat with the bar's bartender in a space adventure game, using a system prompt to prime the language model to play the bartender role and guide the conversation.
System prompt for the bartender9:24
Function calls part I5:32
Function calls part II -providing the result5:50
Finish handling a function call by providing the function result as a function message to the language model and generating the chat completion with the same model.
Mark quest as completed4:02
Leave the chat8:23
Talk to Dr. Owen4:39
Start new chat on server8:28
Start a chat on the server by selecting an NPC from a dropdown and clicking talk to, using the NPC id to initiate the conversation with bartender or Doctor Owen.
Providing new quest function for Dr. Owen6:25
Mobilize the new function to reveal how to bypass a security robot, using the system override passcode 12345, completing the second quest with Doctor Owen’s guidance.
Chat with security robot9:00

Creating the new project6:53
Better product search6:42
More products3:08
Multiple parameters in function calls4:44
Add a price range parameter to the find products by type function and filter results by low, mid, and high price ranges using a price range map.
Fixing price range not defined3:10
Add product to shopping cart5:36
Fuzzy product search7:10
Implement fuzzy product search by returning all product names when no exact match exists, letting the assistant pick the closest name and confirm with the user before showing details.

Requirements

Good knowledge of JavaScript (ES6) programming
Basic understanding of React JS programming
NodeJS is not required, but is an advantage

Description

Want to build your own ChatGPT-like AI applications?

Learn how to create intelligent chatbots and web apps using the OpenAI API, JavaScript, React, and Astro! Whether you’re a web developer, entrepreneur, or AI enthusiast, this course will teach you how to integrate AI into your projects and make them more interactive.

In this video course, you will embark on a thrilling journey into the world of web development and Artificial Intelligence. You’ll learn how to create AI-powered chat applications using JavaScript, React, AstroJS, and the OpenAI API. Throughout the course, you’ll work with the OpenAI API, which is using the same AI/Large Language Model (LLM) that powers ChatGPT. No prior AI experience is needed—just basic web development skills!

The course is divided into three exciting projects:

Project 1 – AI Chatbot: Build a ChatGPT-like chatbot and master the OpenAI API integration.

Project 2 – Text-Based Adventure Game: Create an AI-driven interactive storytelling experience.

Project 3 – AI-Powered Sales Assistant: Develop a chatbot for an e-commerce site to enhance customer experience.

By the end of this course, you’ll have hands-on experience building AI-powered apps that engage users and provide real-world value.

Don’t just use AI—build with it! Enroll now and start creating AI-powered web apps today!

Who this course is for:

Web Developers that want to integrate AI into their web applications and games

Build ChatGPT-Powered Web Apps with JavaScript & React (Open

What you'll learn

Explore related topics

Course content

Introduction4 lectures • 15min

Project: Basic Chat app11 lectures • 1hr 10min

Project: AI Chat in a text adventure game13 lectures • 1hr 22min

Project: Online Shop Sales Assistant7 lectures • 37min

Summary + Bonus2 lectures • 4min

Requirements

Description

Who this course is for: