Generative UI Engineering with React Workshop

Learn the basics of AI engineering, bring the UX of ChatGPT to your React app, simplify forms, provide suggestions and shortcuts to your users, and build agentic web apps using our JavaScript runtime.

The Basics of AI Engineering

Learn how to use Large Language Models (like GPT-5) in your React client using Hashbrown.

1. The useCompletion() hook to generate simple text input completion (think Gmail).
2. The factors to consider when choosing a model.
3. The basics of the model APIs: tokens, temperature, json mode, and verbosity.
4. How to measure token usage and cost.

Bring the UX of ChatGPT to your React App

Master generative UI.

1. The useChat() hook and streaming text responses from the model into your React app.
2. The useUiChat() hook enables you to expose React components to the model.
3. Render generated React components from the model in the chat.

Simplify Forms and Provide Suggestions

Learn how to generate structured data from natural language prompts and predictions using the useCompletion() hook.

1. The useStructuredChat() hook to generate structured data from natural language prompts.
2. The useStructuredCompletion() hook to generate structured data from reactive values.
3. Refactor a multi-input form to a single input that accepts natural language using a model to generate structured data that is ready for your web app to consume.
4. Provide navigation and task completion suggestions to your users based on user actions.

Build Agentic Web Apps

Learn how to build agentic web apps using Hashbrown.

1. Compose multiple generative React components together to build agentic apps.
2. Safely executing model-generated JavaScript code in the Hashbrown runtime.

Prerequisites

• You should have a basic understanding of React and TypeScript.
• It is helpful if you have some experience using the OpenAI models and APIs.

Schedule

• Start: 8 am PT / 11 am ET
• End: 3 pm PT / 6 pm ET
• Breaks: two 15-minute breaks and one 30-minute break