Carousel Select Input

Carousel Select Input in AgenticFlow AI

What is a Carousel Select Input?

A Carousel Select Input is an input component that allows users to configure a list of carousel selectors, each with a representative image and a value that is sent to the action. This input type is especially useful for situations where visual representation can help users make more informed decisions. For example, in selecting presets to generate a video, users can see images representing each preset option (e.g., Simple, Besty, Karaoke) and choose accordingly. Once a selection is made, the chosen value is sent to the action to perform the specified operation.

When to Use the Carousel Select Input Component

The Carousel Select Input component is ideal for scenarios where a visual representation of options can enhance the user experience. For instance, it can be used to allow users to select video presets with accompanying images and titles, making the selection process more intuitive and user-friendly.

How to Add a Carousel Select Input to Your Custom Workflow

The Carousel Select Input component is listed under User Inputs. You can add it to your workflow using the main section or the sidebar.

Adding a Carousel Select Input

1. Navigate to the Workflow page.

2. Click on + Create Workflow or select an existing workflow.

3. In the empty state or within your workflow, click on + Add Input.

4. Select Carousel Select Input from the list of input components.

Carousel Select Input Settings

Title

The title of your input component.

Description

Describe what this input is or will be used for. This helps users understand the purpose of the input.

Variable Name

Located at the bottom left and marked in green, you can rename the variable. Use this name to access the data in your workflow.

Optional/Required

Located at the top right, indicating whether the input is mandatory for the workflow to run:

• Optional: The input is not required for the workflow to function.

• Required: The input must be provided before the workflow can start.

Configuring Carousel Select Options

1. Add Items to the Carousel:

   • Click on + Add Item to add a new option to the carousel.

   • For each item, upload an image that represents the option and provide a title (e.g., Simple, Besty, Karaoke).

   • Enter a value that will be sent to the action when the item is selected.

2. Set a Default Value:

   • To set a default value for the carousel select input, choose an item from the list and click on the small setting icon at the bottom right.

   • Click on Set Current Value to save the default value.

Accessing the Selected Value

To access the selected value, use the variable name within double curly braces {{}}.

For example, if the variable name is preset, you can access it as:

• {{preset}} in most workflow steps.

• params.preset in a JavaScript step.

Example Usage in a Prompt:

Use the selected preset "{{preset}}" to render the video.

Practical Example

Example Workflow: Selecting a Video Preset

1. Add a Carousel Select Input:

   • Title: "Choose Video Preset"

   • Description: "Select a preset to use for rendering your video."

   • Variable Name: video_preset

2. Configure Carousel Items:

   • Add items to the carousel, each with an image and a title.

   • Example items: Simple, Besty, Karaoke, etc.

   • Set values for each item corresponding to the presets.

3. Add a Video Rendering Action:

   • Use the value provided by the video_preset variable to access the selected preset.

   • Prompt:

     Render the video using the "{{video_preset}}" preset.

4. Run the Workflow:

   • Save the workflow.

   • On the App page, select a video preset using the Carousel Select Input component.

   • Run the workflow to see the video rendered using the selected preset.

By following these steps, you can effectively utilize Carousel Select Input components in your workflows to provide a visually intuitive selection process, enhancing the capabilities of your AI-driven automation in AgenticFlow AI.