Building a Generative UI

[00:00 - 00:13] Welcome back. In this lesson we will discover generative UI. Generative UI is a new pattern where we build a user interface on the fly, unresponse to the action taken by a large language model.

[00:14 - 00:30] Here we can see our demo app. We have an agent which has two kinds of tools. A tool that lets the model make SQL query to an external database, and a tool which is a Python code interpreter where we can run Python.

[00:31 - 00:49] And as you can see in the UI we have here some components that lets the user see exactly what action we have taken and what was the result of the action. So here we can see a component describing a SQL query. So we can see the query and the query we can see our output as a table.

[00:50 - 01:02] Here we can see the code interpreter. We see some Python code and we see our output being a matriety chart. Now let us look at the code. Here we can see the SQL component.

[01:03 - 01:12] We see so it takes a status, some data, some apps. As you can see here where the query, the query will be the argument of our tool code.

[01:13 - 01:23] We display the query and here we have the coding with the table. Now how are we going to display it within the chat interface?

[01:24 - 01:43] Let's include the other chat. We are making two changes to our interface tool and our interface message. The first is that we take a list of tools and for each tool is their name and they is a UI property. The UI property is simply a real component.

[01:44 - 01:57] So when we define our chat we pass the UI component for each tool as needed. The second is the message interface. As you can see the new property events.

[01:58 - 02:18] And that's a very powerful pattern called the event sourcing pattern where we keep in memory every single event that happened and then as needed we compute the derived state from those events. Here the derived state will be our UI. Now let's take a look.

[02:19 - 02:46] Here we have our messages and now we say it's a message group. Why is that message group? Because now from one user message it may leads to several message. For instance you may have one assistant message which will then use two tools so that it make two tools message and then as we loop to implement the reflection pattern it may lead to yet another assistant message.

[02:47 - 02:58] So it will lead to four different message but in the UI we want everything to appear as one. So we are going to group. Now let's look at the groups.

[02:59 - 03:15] Here we have the standard UI, we are rebuild, we have icons, we are loading, we have a bag. We have still have a markdown, we have a markdown with the completion and now we also want to display the tools. So let's take a look at the tools.

[03:16 - 03:47] Here you can see we are implementing our event sourcing pattern where we take every single event and we keep only the one that describes the last states. Here for instance if we have an event for loading, a one event for success we keep only the success one. And here we have our hook, use message groups that is used to group message to the inner single group as needed. So with that we just need now to render our UI. This is done here.

[03:48 - 04:03] As you can see we have our tool events and for any event, look whether there is a UI and if yes we render the UI and we are done and we have build a generative