Skip to main content

Rendering UIs

Inside of Interval actions, you can use I/O methods to collect input and display output. Interval handles the heavy lifting of rendering the appropriate UIs.

I/O methods can be awaited just like any other JavaScript promise. The execution of your action handler function will be suspended until the person running the action provides the requested input or acknowledges the data you've displayed.

In practice, this means you can collect input and display output as easily as calling any other function. You can focus on your business logic instead of the complexities of UI programming, like managing state, reactivity, etc.

Type safety and validation

Interval's I/O methods are type safe by design. For example, a call to io.input.number will return a primitive JavaScript number that is statically typed by TypeScript.

In addition to basic type safety, Interval will also enforce validation where logical. For example, a call to io.input.email will return a JavaScript string that is guaranteed by Interval to be a valid email address.

A simple example

Imagine you need to collect an email address from the person running your action. In Interval, this can be accomplished with a single line of code.

// email is a string containing an email address
const email = await io.input.email("Enter an email");

Note that I/O methods can only be used inside actions. Here's the above line in context of a complete Interval app:

import Interval, { io } from "@interval/sdk";

const interval = new Interval({
apiKey: "<YOUR API KEY>", // get an API key at https://interval.com/dashboard/develop/keys
actions: {
collect_email: async () => {
const email = await io.input.email("Enter an email");
},
},
});

interval.listen();

Requesting an optional value

By default, when you request input with an I/O method, the person running your action must supply a valid value before continuing. In some cases, you may want to allow the person running you action to skip a field.

This can be done simply by chaining your I/O method call with .optional().

For example:

// maybeEmail is a string containing an email address *or* undefined
const maybeEmail = await io.input.email("Enter an email").optional();

// or to conditionally mark as optional
const maybeEmail = await io.input
.email("Enter an email")
.optional(user.email !== null);

I/O groups

When writing actions, you'll often want to call multiple I/O methods at the same time. For example, for a tool to create a user account, you may want to collect an email, name, and age. To do this in Interval, you can use the io.group method. If you've used Promise.all before, Interval's group method works effectively identically:

const [name, email, age] = await io.group([
io.input.text("Name"),
io.input.email("Email"),
io.input.number("Age"),
]);
Did this section clearly explain what you wanted to learn?