Build a JavaScript AI App with React and the OpenAI API

Learn how to integrate the OpenAI API into a JavaScript-based web app. Topics

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

1. 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

2. 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

3. 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

4. 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

5. 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

6. 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