UI2 Docs
Quick Start

Adding Intents

Adding Intents to your UI2 app

The next step is to actually define our intents. First, here's the code for one such intent:

import { createUI2 } from "ui2-sdk";
import { z } from "zod";
import { createCerebras } from "@ai-sdk/cerebras";
 
const cerebras = createCerebras({
	apiKey: "API_KEY",
});
 
let { identifyIntent } = createUI2({
	model: cerebras("llama-3.3-70b"),
}).addIntent("sum", {
	parameters: z.object({
		a: z.number(),
		b: z.number(),
	}),
	description: "Add two numbers together",
	onIntent: (intentCall) => {
		console.log(
			`${intentCall.parameters.a} + ${intentCall.parameters.b} = ${
				intentCall.parameters.a + intentCall.parameters.b
			}`
		);
	},
});

Let's walk through what's happening.

Name Your Intent

The first parameter of .addIntent("sum", {}) is the name of your intent. Keep it short and ideally following the standard variable naming conventions (for example, no spaces). However, the more descriptive it is, the better.

Describe Your Intent

Next, if you feel like your name isn't clear enough, you can provide explicit descriptions. These are passed to the AI so it knows how or when to identify your Intent.

Give Parameters

The parameters are defined using Zod.

They must be contained in a z.object, but anything inside is up to you. You can even use .describe("") to describe your types to the AI.

Powered by Structured Output, UI2 guarentees the AI's output will match your schema.

However, to prevent confusion, it's still best to keep the schema relatively simple.

Define Your Event Listeners

onIntent, our event listener, takes two parameters: intentCall and input.

intentCall is an object consisting of the name, id, and parameters of that particular intent call.

  • name is simply the name of whatever intent was called. This is redundant, but there for continuity.
  • id is a UUID identifier to keep track of that particular intent identified. It can be used to prevent duplicate calls to functions, but it's more relevant with frontend.
  • parameters is a object in the same schema that you specified. It's fully type annotated, so you get typesafety and IDE autocomplete for its properties.

In our onIntent, we can simply write whatever we want to happen after the Intent is identified. In this case, we'll just log a message.

It might seem like a lot of code to write, but it's easy to do so—it's simply describing behavior.

Another Intent

The neat part about UI2 is that to include another intent, you simply chain another .addIntent to the end of your existing code. It scales simply and easily.

Now, based on this, try to implement a square intent which takes a parameter to square.

Here's the final code with both intents:

import { createUI2 } from "ui2-sdk";
import { z } from "zod";
import { createCerebras } from "@ai-sdk/cerebras";
 
const cerebras = createCerebras({
	apiKey: "API_KEY",
});
 
let { identifyIntent } = createUI2({
	model: cerebras("llama-3.3-70b"),
})
	.addIntent("sum", {
		parameters: z.object({
			a: z.number(),
			b: z.number(),
		}),
		description: "Add two numbers together",
		onIntent: (intentCall) => {
			console.log(
				`${intentCall.parameters.a} + ${intentCall.parameters.b} = ${
					intentCall.parameters.a + intentCall.parameters.b
				}`
			);
		},
	})
	.addIntent("square", {
		parameters: z.object({
			a: z.number(),
		}),
		description: "Squares a number",
		onIntent: (intentCall) => {
			console.log(
				`${intentCall.parameters.a}^2 = ${
					intentCall.parameters.a * intentCall.parameters.a
				}`
			);
		},
	});

On this page