UI Configuration

The ui object in your Flow JSON controls how the Flow’s design, form, and results are presented to users — especially for public Flows. This includes background images, theme colors, preview images, and the final results layout.

Example

ui: {
  leftBackgroundAssetId: 'b60548bd-5dfa-4758-b244-90a3d2df2df4',
  rightBackgroundAssetId: 'f920f87a-a38b-4fce-84c9-aa10d2bc9f5c',
  previewAssetIds: [
    '93746af4-228a-403c-bc20-825a5946125f',
    'cefd5cbb-6164-41a7-9b78-eac70579b1da',
  ],
  submitLabel: 'Start',
  textColor: '#FFFFFF',
  backgroundShadowColor: '#000000',
  bodyBackgroundColor: '#000000',
  instructions: [
    'Upload images with high quality and a variety of angles. You must be the only person in the image. Avoid sunglasses, hats and other accessories.',
  ],
  deliverables: ['100 custom images', 'ZIP file with all images'],
  results: {
    widgets: [
      { type: 'Images', sources: ['ingredientsImageGenerator', 'recipeImageGenerator'] },
      { type: 'Objects', sources: ['recipesGenerator'] },
      { type: 'Download', sources: ['zipOutput'] },
    ],
  },
},

Fields

leftBackgroundAssetIdstring (UUID)

ID of an Asset to use as the left background image.

rightBackgroundAssetIdstring (UUID)

ID of an Asset to use as the right background image.

previewAssetIdsstring[] (UUID)

A list of Asset IDs displayed as a preview carousel on the Flow’s form page.

submitLabelstring

The label on the form submission button (e.g., “Start”, “Generate”, “Summon Party”).

textColorstring

Hex color code for text (e.g., "#FFFFFF").

backgroundShadowColorstring

Hex color code for the background overlay/shadow.

bodyBackgroundColorstring

Primary background color for the Flow page.

instructionsstring[]

A list of instructions for the user to follow (displayed on the form page).

deliverablesstring[]

A list of deliverables the user will receive (displayed on the form page).

results.widgetsarray

Defines how final results are displayed. An array of objects with type and sources. See Results & Widgets.

ℹ

Assets: The AssetId fields (leftBackgroundAssetId, rightBackgroundAssetId, previewAssetIds) reference Assets previously uploaded to your dashboard. An Asset is simply a stored image or media file. The front-end fetches it from S3 and displays it as a background or preview.

Where do Asset IDs come from?

In the lensless dashboard, you can upload images while creating or editing a Flow. Each image gets a unique ID. You can then:

Choose an asset from your uploaded assets.
Assign leftBackgroundAssetId or rightBackgroundAssetId with that asset’s ID.
Optionally include a list of previewAssetIds to show a slider or gallery on the form page.

Partial vs. full customization

You can supply any subset of these UI fields. For example, you might only set backgroundShadowColor and submitLabel, leaving other defaults.
If you omit ui entirely, a basic design with a minimal form layout is used.
For advanced styling not covered by these fields, you can build a custom front-end using lensless’s Flow and run APIs. These APIs are currently in beta and will be generally available soon.