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

Build a basic Astro server app that calls the OpenAI API, serves HTML and React code to the browser, and scaffolds a simple chat application using JavaScript.

Add react to your astro app with npm astro add react, create a src/components/index.js, then render the component client:only inside an astro island.

Create a first server endpoint in node.js under api/chat using a get handler that returns a json response with an answer field, enabling browser requests and future OpenAI chat completions.

Sign up for OpenAI, generate and save your secret API key, install the openai package, and configure the API to use GPT-3.5-turbo for chat completions.

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.

Build a basic React user interface with a text input and a send button, fetch messages from a server api, and display the language model's response in an output div.

Learn to save and send full chat history to the OpenAI API by storing messages on the server, using a messages array to maintain conversation state.

Learn how to implement a chat reset in a React-based chat app by passing a new id via the url, resetting messages and starting a fresh conversation.

Improve the user experience by clearing the input on send, disabling the input and button during the pending fetch, and rendering a full chat history using a messages array.

Improve the chat history with alternating yellow and green message backgrounds, a column layout with eight-pixel gaps, and enter-to-send keyboard support.

Build a functional chat app using the OpenAI API, improve the UI with centered messages and inputs, and explore chat history, copy buttons, and system prompts and function calls.

Create an adventure game environment integrated with a chat UI for NPC conversations and puzzles. Extend the React app with location navigation and a simple game data model for rooms.

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.

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.

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.

Use a system prompt to make the model a bartender in a sci-fi bar, define guests including Doctor Owen, and enable refill-triggered dialogue.

Learn to integrate function calls in a chat workflow, enabling the model to trigger actions (like giving Doctor Owen a drink) and pass results back to complete quests.

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 the quest by Doctor Owen drink as completed on the client via handle function call and answer object, then update game runtime data to enable talking to Doctor Owen.

Implement a leave chat function that lets players exit in natural language, handle function calls, and complete quests, while resetting the chat with a new chat id.

Implement a talk-to feature to converse with Doctor Owen and the bartender using a dropdown, backed by an NPCs array and per-NPC system prompts to start chats.

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.

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.

Create a chat with the security robot, using the passcode trick phrase and a system prompt to complete the trick robot quest.

Build a cloud guitars virtual sales assistant in a React app, configure a single chat interface, and implement product search functions to fetch seven string guitar details.

Enhance product search by parsing function call arguments from the language model and using maps to retrieve product descriptions and prices by type or name.

The lecture shows modeling products as arrays, mapping types to IDs, and concatenating descriptions with newlines to display electric guitars (six- and seven-string) and basses (coral red, midnight blue).

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.

Resolve a bug where price range is undefined by conditionally filtering products only when a price range exists. The lesson demonstrates debugging with a seven string guitar example priced at 1599.

Shows adding a product to the cart via a function call and console log, using a product name, while indicating a real cart and checkout aren't implemented.

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.

Build three OpenAI-powered apps showcasing chat history management, tailored prompts, and function calls for quests and shopping. Utilize JavaScript, Astro, and React with OpenAI's chat completion API, embeddings, DALL-E, Whisper.