Skip to content

Use Variables with UI Hints

Customize how input variables are displayed in the web UI using the ui field on variable definitions.

QType YAML

flows:
  - type: Flow
    id: generate_story

    variables:
      # Use textarea widget for multi-line text input
      - id: story_prompt
        type: text
        ui:
          widget: textarea

      # Use file upload widget with mime type filtering
      - id: document
        type: file
        ui:
          accept: "application/pdf"

      # Variables without ui hints use default widgets
      - id: max_length
        type: int

Explanation

  • ui.widget: For text variables, controls input style (text for single-line, textarea for multi-line)
  • ui.accept: For file variables, specifies accepted mime types (e.g., "application/pdf", "image/*", "*/*")
  • Default widgets: Variables without ui hints automatically use appropriate widgets based on their type

Note: UI hints are currently limited to text and file input customization. Other variable types use standard widgets.

Complete Example

id: ui_hints_example
description: Demonstrates how to use UI hints to customize input widgets

models:
  - type: Model
    id: nova
    provider: aws-bedrock
    model_id: amazon.nova-lite-v1:0
    inference_params:
      temperature: 0.7
      max_tokens: 500

flows:
  - type: Flow
    id: generate_story
    description: Generate a creative story based on a detailed prompt

    variables:
      # The 'ui' field provides hints to the web UI about how to render inputs
      # Using 'widget: textarea' renders a multi-line text area instead of single-line input
      - id: story_prompt
        type: text
        ui:
          widget: textarea  # Options: text (default), textarea

      # Variables without 'ui' hints use default widgets based on their type
      - id: max_length
        type: int

      - id: story
        type: text

    inputs:
      - story_prompt
      - max_length

    outputs:
      - story

    steps:
      - id: generate
        type: LLMInference
        model: nova
        inputs: [story_prompt, max_length]
        system_message: |
          Write a creative story based on this prompt:

          {{story_prompt}}

          Keep the story under {{max_length}} words.
        outputs:
          - story

See Also