In this video, we’re going to generate a project using the Angular CLI.

Let's explore Hash Brown — the main library we’ll use throughout this course.

In this video, we’re going to set up an OpenAI key and store it inside our environment file.

Let's implement a server to handle streaming responses.

We’ll improve the start script so that we end up with a single command to start both the frontend and backend.

Let's take a moment to explore the architecture of the project.

Time to build a chat interface and connect it to our server.

In this video, we’ll render the received messages in the UI.

We’ll implement a backend and mock database using the json-server library.

Let's leverage the power of tool calling to provide our data to the LLM.

Let's use Hash Brown’s debug tools to nicely inspect and debug messages sent to and received from the LLM.

What’s Gen UI? Let’s find out.

Now that we know what Gen UI is, let’s go ahead and implement it.

We’ll use the power of the chatResource to show a loading indicator.

By implementing a theme switch, we’ll see how components that interact with the rest of the page can be integrated into the chat.

We broke classic chat responses — let’s implement a Markdown component to fix this.

The system prompt is a powerful tool — let’s experiment with it.

At this point, we can display shows but not add them — so we’ll need a form.

In this video, we’ll connect our form to the backend.

Let's get to know the completionResource and see how we can use it to improve UIs.

We’ll use the completionResource from the previous step to implement a ghost input in the UI.

Let's get to know another resource type — the structuredCompletionResource.

Currently, the responses from the structuredCompletionResource are not reflected in the UI. Time to change that.

Let’s remove the static rendering of the show form and integrate it into the chat.

Prompts should be cleared from the input once they are sent.

Right now, we manually scroll to the latest message — let’s improve this by using effects to implement automatic scrolling.

Our chat has come to life — now it’s time to polish the UI.

Time to explore the JS runtime — the last missing Hash Brown feature.

Let's take a closer look at the runtime handlers and how they work.

We’ll take the output of the JS runtime and render it as a chart.

To wrap up, let’s check out more Hash Brown examples to spark new ideas for what we can build.