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.jsAPIsMetaJavaScriptOpenAIGenerative AIArtificial Intelligence FoundationsAdvancedFront-End Web DevelopmentArtificial Intelligence (AI)Web DevelopmentProgramming LanguagesSoftware Development
Concepts
Introduction
- Build a JavaScript AI app with React and the OpenAI API
- Use the exercise files on GitHub Codespaces
- Using GitHub Codespaces with this course
Building a Weather App with AI Power
- Beyond ChatGPT - What AI can do for you
- Real-world challenge - A more useful weather app
- Ideating with ChatGPT as a base
The Core App
- Sidebar - Build a React app using Vite and GitHub Codespaces
- Boot up the app in GitHub Codespaces
- Work with the OpenWeatherMap API
- App walk-through
Connecting to the OpenAI API
- What is the OpenAI API, and how does it relate to ChatGPT
- Test the API in the OpenAI Playground
- Generate secret keys
- Test the API with a REST client
Using AI as a Human-to-Machine Translator
- Create a location string from a prompt
- The challenge of non-deterministic APIs
- Function calling in the OpenAI API
- Create a custom function call for the OpenAI API
Integrating AI into the Weather App
- Sequence API calls in an app
- Create a fetch request to the OpenAI API
- Add a function call to the request
- Parse the response
- Pass the response to the weather data request
- Update the weather data display
Creating Rich AI Outputs
- Prompt engineering for developers
- Advanced calls to the OpenAI API
- Integrate the AI API response
- Provide good UX with independent loaders
Conclusion
- Go further