Controls reference

The basic available Controls are:

ControlDescription
DividerVisual separator for grouping controls
Text FieldSingle-line input for short text
Text AreaMulti-line input for longer text
Drop DownSelection from predefined options
Toggle SwitchOn/off control for boolean settings
SliderNumeric value selector with range limits
ConditionShows/hides controls based on parameter values

Other use-case-specific Controls are available:

ControlDescription
Aspect ratioSelection for image/video dimensions with visual previews


Divider

You can use dividers to visually group or separate controls in ways that are intuitive for users.

Fields

FieldTypeDescriptionRequired
controlStringThe type of control. For a divider, control is always "divider"Yes

Example

{
  "control": "divider"
}

Text field

Text fields allow users to enter short text values. They are best suited for single-line inputs like names, keywords, or short commands.

Fields

FieldTypeDescriptionRequired
controlStringThe type of control. For a text field, control is always "text_field"Yes
labelStringThe label text shown above the input fieldYes
descriptionStringOptional description text shown below the labelNo
parameter_nameStringName of the parameter to store the input valueYes
default_valueStringOptional default text for the input fieldNo
placeholderStringOptional placeholder text shown when field is emptyNo

Example

{
  "control": "text_field",
  "label": "Style prompt",
  "description": "Define the visual style for your generated media",
  "parameter_name": "style_prompt",
  "default_value": "",
  "placeholder": "Photorealistic, anime, oil painting, cyberpunk"
}

Text area

Text areas allow users to enter longer text content. They are best suited for multi-line inputs like descriptions, prompts, or detailed instructions.

Fields

FieldTypeDescriptionRequired
controlStringThe type of control. For a text area, control is always "text_area"Yes
labelStringThe label text shown above the text areaYes
descriptionStringOptional description text shown below the labelNo
parameter_nameStringName of the parameter to store the input valueYes
default_valueStringOptional default text for the text areaNo
placeholderStringOptional placeholder text shown when field is emptyNo

Example

{
  "control": "text_area",
  "label": "Negative prompt",
  "description": "Enter content you want to exclude from generation",
  "parameter_name": "negative_prompt",
  "default_value": "",
  "placeholder": "Low quality, blurry, distorted"
}

Drop down

Dropdowns allow users to select from a predefined list of options. They are ideal for scenarios where users need to choose one option from a limited set of choices.

Fields

FieldTypeDescriptionRequired
controlStringThe type of control. For a dropdown, control is always "drop_down"Yes
labelStringThe label text shown above the dropdownYes
descriptionStringOptional description text shown below the labelNo
parameter_nameStringName of the parameter to store the selected valueYes
default_valueStringOptional default selected valueNo
optionsArrayList of Options, which are value-name pairs representing the available optionsYes

Option fields

FieldTypeDescriptionRequired
valueStringThe internal value that will be stored in the parameterYes
nameStringThe display text shown to users in the dropdown menuYes

Each option in the options array must be an object containing both a value and name. The value is what gets stored in the parameter and used by your bot's logic, while the name is what's displayed to users in the UI.

Example

{
  "control": "drop_down",
  "label": "Model",
  "description": "Select your preferred AI model",
  "parameter_name": "model",
  "default_value": "gpt4o",
  "options": [
    {"value": "gpt4o", "name": "GPT-4o"},
    {"value": "claude4", "name": "Claude 4"},
    {"value": "llama4", "name": "Llama 4"}
  ]
}

Toggle switch

Toggle switches allow users to turn options on or off. They are ideal for boolean settings or enabling/disabling features.

Fields

FieldTypeDescriptionRequired
controlStringThe type of control. For a toggle switch, control is always "toggle_switch"Yes
labelStringThe label text shown next to the toggle switchYes
descriptionStringOptional description text shown below the labelNo
parameter_nameStringName of the parameter to store the boolean valueYes
default_valueBooleanOptional default state of the toggle (true/false)No

Example

{
  "control": "toggle_switch",
  "label": "Enable creative mode",
  "description": "Generate more imaginative and diverse AI responses",
  "parameter_name": "creative_mode_enabled",
  "default_value": true
}

Slider

Sliders allow users to select a numeric value within a specified range. They are ideal for settings that require numerical input within defined boundaries.

Fields

FieldTypeDescriptionRequired
controlStringThe type of control. For a slider, control is always "slider"Yes
labelStringThe label text shown above the sliderYes
descriptionStringOptional description text shown below the labelNo
parameter_nameStringName of the parameter to store the numeric valueYes
default_valueNumberOptional default position of the sliderNo
min_valueNumberMinimum value of the slider rangeYes
max_valueNumberMaximum value of the slider rangeYes
stepNumberIncrement between values on the sliderYes

Example

{
  "control": "slider",
  "label": "Thinking budget",
  "description": "Select the complexity level for your AI's reasoning",
  "parameter_name": "thinking_budget",
  "default_value": 50,
  "min_value": 10,
  "max_value": 100,
  "step": 5
}

Conditional

Conditionals are control wrappers that dynamically hide or show other Controls based on parameter values.

Fields

FieldTypeDescriptionRequired
controlStringThe type of control. For a conditional, control is always "condition"Yes
conditionObjectContains the comparison logic (ComparatorCondition)Yes
controlsArrayList of controls to show/hide based on the conditionYes

Condition

FieldTypeDescriptionRequired
comparatorStringThe type of comparison. Currently only "equals" is supportedYes
leftObjectLeft side of comparison (LiteralValue or ParameterValue)Yes
rightObjectRight side of comparison (LiteralValue or ParameterValue)Yes

Parameter Value

FieldTypeDescriptionRequired
parameter_nameStringName of the parameter whose value to useYes

Literal Value

FieldTypeDescriptionRequired
literalString, Number, or BooleanThe literal value to use in the comparisonYes

Example

{
  "control": "condition",
  "condition": {
    "comparator": "equals",
    "left": {
      "parameter_name": "output_type"
    },
    "right": {
      "literal": "image"
    }
  },
  "controls": [
    {
      "control": "slider",
      "label": "Image Width",
      "parameter_name": "width",
      "min_value": 256,
      "max_value": 1024,
      "step": 64,
      "default_value": 512
    }
  ]
}

In this example, the slider control for image width is only shown when the output_type parameter equals "image". The condition can compare either literal values or parameter values on both sides of the comparison.


Aspect ratio

The aspect ratio control lets users choose from predefined aspect ratios with visual previews for easy comparison—especially useful for image and video generation bots.

Fields

FieldTypeDescriptionRequired
controlStringThe type of control. For aspect ratio, control is always "aspect_ratio"Yes
labelStringThe label text shown above the aspect ratio selectorYes
descriptionStringOptional description text shown below the labelNo
parameter_nameStringName of the parameter to store the selected aspect ratioYes
default_valueStringOptional default selected aspect ratioNo
optionsArrayList of AspectRatioOptionDefinition objects representing the available optionsYes

AspectRatioOptionDefinition

FieldTypeDescriptionRequired
widthNumberThe width value for the aspect ratioYes
heightNumberThe height value for the aspect ratioYes
valueStringThe value to be passed when the option is selected. If not defined, a string with the following format will be passed as the value: [width]:[height] (e.g. “16:9”)No

Example

{
  "control": "aspect_ratio",
  "label": "Aspect ratio",
  "description": "Select the aspect ratio for your generated image",
  "parameter_name": "aspect_ratio", 
  "default_value": "square",
  "options": [
    {"value": "square", "width": 1, "height": 1},
    {"value": "landscape", "width": 16, "height": 9},
    {"value": "portrait", "width": 9, "height": 16}
  ]
}

The aspect ratio control will display a visual preview of each ratio option to help users understand the proportions they're selecting.