UI2 Docs
React Quick Start

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 identified
  • onCleanup: A cleanup function that is called when the intent is no longer relevant
  • onSubmit: 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 added
    • onCleanup: Remove the preview
    • onSubmit: 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 complete
    • onCleanup: Remove the preview
    • onSubmit: 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 after onIntent, 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.

On this page