Triggers an event based on UI interactions like button clicks or input changes. UI Trigger block

Overview

The UI Trigger block is the starting point for your blueprint if users interact with the agent’s interface. It starts a workflow in response to a user action in the UI, such as clicking a button or typing in a text area. Use it to connect frontend events to backend logic in your blueprint. You can specify the event to listen for and any parameters to pass to the workflow.

How it works

  1. Component Id: Select the UI component that triggers this workflow; for example, a button click or chatbot message.
  2. Event type: Specify the type of event to listen for; for example, clicks (wf-click) or text area changes (wf-change).
  3. Default result: Optionally provide a default result when testing the blueprint from the “Run blueprint” button. This is useful for testing the workflow without having to interact with the interface. The default result should match the expected payload format for the selected event type. For example:
    • For a button click (wf-click), provide an object with modifier key states, like:
      {
        "ctrl_key": false,
        "shift_key": false,
        "meta_key": false
      }
      
    • For a text input change (wf-change), provide the expected text value, like "Sample text"
    • For a file upload (wf-file-change), provide an array of file objects, like:
      [
        {
          "name": "example.txt",
          "type": "text/plain",
          "data": "data:text/plain;base64,U2FtcGxlIHRleHQ="
        }
      ]
      
When the specified event occurs on the selected component, the block starts the workflow. The event payload is available as @{payload} in subsequent blocks.

Examples

Interactive dashboard updates

This example demonstrates how to handle real-time dashboard interactions and updates. Interface:
  1. A Plotly chart that a user can click to trigger the workflow.
Blueprint Flow:
  1. UI Trigger → User clicks on dashboard widget
  2. HTTP Request → Fetches updated data from external API
  3. Set state → Updates dashboard state
Block Configuration:
  • Component Id: Dashboard widget component
  • Event type: wf-click
  • Default result: Optional, but useful for testing the blueprint from the “Run blueprint” button. The default result below mimics the data that would be returned if a user clicked somewhere on a Plotly chart in the interface.
[
  {
    "curveNumber": 0,
    "pointNumber": 1,
    "x": "Product B",
    "y": 150,
    "label": "Product B",
    "xaxis": {
      "anchor": "y"
    },
    "yaxis": {
      "anchor": "x"
    }
  }
]
UI Trigger workflow This workflow enables real-time dashboard interactions with external data sources.

Fields

NameTypeControlDefaultDescriptionOptionsValidation
Component IdComponent Id--The id of the component that will trigger this branch.uiComponentsWithEvents-
Event typeComponent Event Type--The type of the event that will trigger this branch. For example, wf-click.eventTypes-
Default resultCode--The result that is used when the blueprint is triggered from the “Run blueprint” button--

End states

Below are the possible end states of the block call.
NameFieldTypeDescription
Trigger-success-
The output of the UI Trigger block is the event payload. For example, if the event type is wf-file-change for a File input block, the payload contains the file that the user uploaded. You can access this value in any block in the blueprint as @{payload}.