Using Your UI2 App

Now that you've finished your app, you can actually try using it.

The great part about UI2 is that due to the powerful LLM powered intent framework, there is much more to UI2 than what you seemingly only implemented.

Here are some basic things to try out:

• Create a todo with a natural language statement
  • "Make a todo to walk the dog"
• Complete todos with natural language statements
  • "Mark that todo to walk the dog as done"

And some more complicated things that you can do:

• Create multiple todos with natural language statements
  • "Make a todo to walk the dog and to get groceries"
• Complete all your todos
  • "Complete all my todos"
• Combination of creating and completing todos
  • "Mark walking the dog as complete and add reminder to get groceries"

Now, while this may seem slightly inefficient, you can easily modify the system prompt to guide the LLM to interpret any statement that isn't a command to be a new reminder, so you can simply say "Walk the dog" and have it create a todo.

Have fun with experimenting with UI2!

Notes on AI Usage

There are a few things that you have to be aware of while using UI2. While UI2 does not use that many tokens per request, it does tend to use many requests.

Something that you can change is the debounceDelay which increases the cooldown between consecutive AI calls. Similarly, if you have the budget, you can also decrease this delay to make UI2 feel more snappy.

It's best to adapt this delay to your audience. For example:

• Shorter Delay: If your app requires very fast feedback or typically consists of fast typers
• Longer Delay: If immediate preview isn't as important or your app typically has slower typers

The default delay is 300ms (debounceDelay: 300) but you can change this property by passing it into the useUI2 config, as such:

let { inputValue, handleInputChange, handleSubmit } = useUI2({
	model: cerebras("llama-3.3-70b"),
	systemPrompt: "This is a todo app.",
	debounceDelay: 500, // In ms
	context: todos.filter(x => !x.preview),
});