Build a JavaScript AI App with React and the OpenAI API
2hAdvanced2023-09-18
Authors
Morten Rand-Hendriksen
Senior Staff Instructor, Speaker, Web Designer, and Software Developer
Course details
In this course, learn how to integrate the OpenAI API into a JavaScript-based web app. Join instructor Morten Rand-Hendriksen as he takes a React-based weather app, adds a heavy dose of AI, and creates an interactive experience that knows what location you want weather information from, explains the weather data in simple language, and even suggests what to wear. Through this project-based course, Morten teaches you about API integration, user-based authentication, storing user tokens in a ServiceWorker, task-based API configuration, and sending and receiving requests to the API.
Skills covered
GPTEcma InternationalReact.jsAPIsMetaJavaScriptOpenAIAdvancedGenerative AIFront-End Web DevelopmentArtificial Intelligence FoundationsArtificial Intelligence (AI)Web DevelopmentProgramming LanguagesSoftware Development
Concepts
0. Introduction
- 01 - Build a JavaScript AI app with React and the OpenAI API
- 02 - Use the exercise files on GitHub Codespaces
- 03 - Using GitHub Codespaces with this course
1. Building a Weather App with AI Power
- 04 - Beyond ChatGPT - What AI can do for you
- 05 - Real-world challenge - A more useful weather app
- 06 - Ideating with ChatGPT as a base
2. The Core App
- 07 - Sidebar - Build a React app using Vite and GitHub Codespaces
- 08 - Boot up the app in GitHub Codespaces
- 09 - Work with the OpenWeatherMap API
- 10 - App walk-through
3. Connecting to the OpenAI API
- 11 - What is the OpenAI API, and how does it relate to ChatGPT
- 12 - Test the API in the OpenAI Playground
- 13 - Generate secret keys
- 14 - Test the API with a REST client
4. Using AI as a Human-to-Machine Translator
- 15 - Create a location string from a prompt
- 16 - The challenge of non-deterministic APIs
- 17 - Function calling in the OpenAI API
- 18 - Create a custom function call for the OpenAI API
5. Integrating AI into the Weather App
- 19 - Sequence API calls in an app
- 20 - Create a fetch request to the OpenAI API
- 21 - Add a function call to the request
- 22 - Parse the response
- 23 - Pass the response to the weather data request
- 24 - Update the weather data display
6. Creating Rich AI Outputs
- 25 - Prompt engineering for developers
- 26 - Advanced calls to the OpenAI API
- 27 - Integrate the AI API response
- 28 - Provide good UX with independent loaders
Conclusion
- 29 - Go further
Related courses
- Hands-On Data Analysis with ChatGPT-5
- Introduction to Large Language Models
- Automate Your Workflow with Custom GPTs
- Using AI for UX Design and Research
- Time Series Analysis and Forecasting with ChatGPT
- Introduction to Multimodal Prompting for Generative AI
- OpenAI API: Multimodal Development with GPT-4o
- How GPT-4o and Google Gemini Could Transform Your Business: A Conversation with Conor Grennan