UI Trigger - Writer AI Studio

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

Component Id: Select the UI component that triggers this workflow; for example, a button click or chatbot message.
Event type: Specify the type of event to listen for; for example, clicks (wf-click) or text area changes (wf-change).
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:

A Plotly chart that a user can click to trigger the workflow.

Blueprint Flow:

UI Trigger → User clicks on dashboard widget
HTTP Request → Fetches updated data from external API
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"
    }
  }
]

This workflow enables real-time dashboard interactions with external data sources.

Fields

Name	Type	Control	Default	Description	Options	Validation
Component Id	Component Id	-	-	The id of the component that will trigger this branch.	uiComponentsWithEvents	-
Event type	Component Event Type	-	-	The type of the event that will trigger this branch. For example, wf-click.	eventTypes	-
Default result	Code	-	-	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.

Name	Field	Type	Description
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}.