UI Components

Render beautiful UIs in your chatbot responses or custom application pages.

UI Design

When creating a UI in the studio, it is important to define its title and description for its intended use case, as these UI components are used as tools for your graph nodes to dynamically use.

UI Configuration

• Input Parameters: define the specific input parameters that will be used in the HTML code. Each node's use case of the UI will need to be configured to use these parameters in a specific way.

• Styles: define specific class color styles to be utilized throughout the HTML classes.

Code

The code has all features available by the monaco editor. You can use common keyboard shortcuts for finding text and performing mass replaces by using (CMD+F).

This code must be formatted to render plain HTML with a root div tag:

<div>
    <p>Hello World</p>
</div>

Parameters

Parameters used by your UI. Whatever you set their unique name to, can be used within the HTML code.

Types

• String

• Number

• Boolean

• Object

• Date

Required

Whether this parameter is required for this HTML code to work

IsArray

Whether this parameter is an array of its type

Default Value

The value that will be used if for some reason that parameter is not specified in its individual use

Extensions

We will continuously add more extensions as integrated features for UIs to utilize.

Database

These database configurations allow for schemas to be used within your HTML so that you can view, create, edit, or delete database entries from a UI component.

Tool

These tool configurations allow for tools to be used within your HTML code to either call tools directly to render results on your UI, or to fill in forms to trigger tools dynamically.

Graph

These graph configurations allow for graphs to be used within your HTML code to either call graphs directly to render their results on your UI, or to fill in forms to trigger tools dynamically.

Runner

These graph configurations allow for automations to be used within your HTML code to either call graphs directly to render their results on your UI, or to fill in forms to trigger automations dynamically.

Web3 Functions

Web3 functions bring in core Web3 data that may be relevant to your project, including portfolio data, balance data, etc.