Generative UI Engineering with Angular Workshop

Learn the basics of AI engineering, bring the UX of ChatGPT to your Angular 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 Angular app using Hashbrown.

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

Bring the UX of ChatGPT to your Angular App

Master generative UI.

The chatResource() function and streaming text responses from the model into your Angular app.
The uiChatResource() function enables you to expose Angular components to the model.
Render generated Angular 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 Hashbrown's structured resources.

The structuredChatResource() function to generate structured data from natural language prompts.
The structuredCompletionResource() function to generate structured data from reactive values.
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.
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.

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

Prerequisites

You should have a basic understanding of Angular 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