Thinking in UI2
Learn how the UI2 API is structured.
UI2 is built around "intents," which can be thought of as possible user actions. As UI2 developers, you are responsible for defining these intents and their associated actions—as well as the UI on which these actions take place. The UI2 API will handle the rest, including prompting the AI, parsing output, and more.
The Structure of an Intent
Each intent has a name, an optional description, as well as a list of parameters.
Furthermore, each intent has 3 main "lifecycle" events:
onIntent
: A function that is called when the intent is identifiedonCleanup
: A cleanup function that is called when the intent is no longer relevantonSubmit
: A function that is called when the user submits the textbox with the intent
This lifecycle, especially onCleanup
, may seem confusing. So, let's look at an example of how it could work for our todo app.
Choosing Our Intents
For our app, we can identify the following intents and what should happen in their lifecycle.
addTodo
- Parameters: Name of the todo
onIntent
: Show a preview of the new todo, to be addedonCleanup
: Remove the previewonSubmit
: Actually add the new todo to the list
completeTodo
- Parameters: Which todo to mark as complete
onIntent
: Show a preview of the todo to be marked as completeonCleanup
: Remove the previewonSubmit
: Actually mark the todo as complete
As you can see, all of these intents have a very similar lifecycle. As such, UI2 is designed to be compatible with a wide variety of different applications.
Take a moment to familiarize yourself with this lifecycle! It'll make using UI2 much easier.
If it's helpful, in general for UI2, the lifecycle should look like this:
onIntent
: Typically the first event listener called, when the intent is detected- This event listener is responsible for showing a preview of the user's Intent, translated to Action
onCleanup
: Possibly called afteronIntent
, after the intent is no longer detected- This event listener is responsible for removing that preview of the user's Intent to "clean up" any side-effects
onSubmit
: Called when the user "submits" the intent by confirming. Cleanup is not called when submitted- This event listener is responsible for "confirming" the preview.
To make this even more concrete, let's see how we can actually implement this in our app.