Generate Your Screen Using AI Assistant

Add a control that uses ProcessMaker's Artificial Intelligence (AI) to generate Screen components that use natural language to describe how they work.

Control Description

Use ProcessMaker's AI Assistant to generate a Screen without knowing how to use Screen Builder controls. From within Screen Builder, use the AI Generated control to use ProcessMaker Artificial Intelligence (AI) to generate functional Screen controls by describing in natural language how those controls function.

AI Assistant in Screen Builder

AI Generated controls are a no-code way to design a Screen quickly:

  1. Add an AI Generated control to your Screen.

  2. Enter text into the AI Generated control using almost any natural language that describes the functional needs of a section or the entirety of your Screen. You may enter your natural language Screen description in one language, but specify that the Screen user interface labels be in a different language. Multiple AI Controls may be used in a Screen, one to describe and generate different sections of that Screen without even understanding what each Screen Builder control does.

  3. The AI Generated control previews the layout of the Screen based on its interpretation of your natural language.

  4. Optionally regenerate a new preview based on the same or different description, or accept the layout.

  5. After accepting the layout preview, the AI Generated control renders the preview into functional controls that are ready to use. You may further configure those controls if necessary: these are now standard controls like any other.

The following Screen Builder controls are supported. These are listed in alphabetical order.

This control is only available for Form-type Screens. See Screen Types.

Permissions Required

Your user account or group membership must have the following permissions to design a Screen unless your user account has the Make this user a Super Admin setting selected:

  • Screens: Edit Screens

  • Screens: View Screens

See the Screens permissions or ask your Administrator for assistance.

Add the Control to a Screen

Follow these steps to add this control to the Screen:

  1. View the Screen page to which to add the control.

  2. Drag the AI Generated icon into the Screen Builder canvas. Existing controls on the Screen Builder canvas adjust positioning based on where you drag the control.

  3. After the AI Control renders the control(s) for your Screen, review configuration settings and then validate your Screen.

The AI Control does not render in Preview mode until the AI-generated components are applied to the Screen. In Preview mode the following message displays: AI Assistant is unavailable until you apply changes.

Describe the Functional Components for Your Screen Using Natural Language

After adding an AI Generated control to a Screen page, enter a functional natural language description for the Screen components that the AI Generated control will generate.

Follow these steps to describe how the Screen components are to function:

  1. Select the AI Generated control into which to enter your natural language description of its functionality.

  2. In the Description setting, enter a functional natural language description for the components that the AI Generated control will generate. One AI Generated control description may use no more than 1000 tokens. A token is a common sequence of characters found in text for a particular language. Generally, one token corresponds to approximately four (4) characters of common English-language text. This corresponds to approximately 100 tokens to about 75 words in English. To the right of the Description label displays how many tokens your description currently uses. If your description exceeds 1000 tokens, shorten the length of your description.

  3. Click the Generate button. The AI Generated control displays a progress bar for the percentage completion of a Screen preview based on your description. When complete, a preview of your Screen control(s) displays within the AI Generated control. Use this preview to evaluate if the AI Generated control provides the control(s) you intended.

  4. Do one of the following:

    • Regenerate the preview: Revise and/or regenerate the AI Generated control's preview of the Screen layout based on the same or a different description.

    • Accept the preview: Click the Apply Changes button above the preview. The AI Generated control immediately renders the preview as functional controls which can be configured from the default settings the AI Generated control provides. The Variable Name setting for each rendered control uses a placeholder value since this setting is required for all controls.

Move the Control on the Page

See Move a Control on the Page.

Copy the Control with its Settings

Copying a control also copies the current settings of that control. The copied control displays below other controls placed on that Screen page.

Follow these steps to copy a control:

  1. Select the control to be copied.

As a best practice, after copying a control, change the Variable Name setting value for the copied control to its own unique variable value. Otherwise, in-progress Requests that use this Screen read from and send data to both controls.

Delete the Control from a Screen

Deleting a control also deletes configuration for that control. If you add another control, it will have default settings.

Follow these steps to delete a control from a Screen page:

  1. Select the control to be deleted.


The AI Generated control has the following panels that contain settings:

Configuration Panel Settings

Enter a functional natural language description for the components that the AI Generated control will generate. As you enter a description, the number of tokens that the AI Generated control will use to generate those components displays. A maximum of 1000 tokens may be used per AI Generated control. See Describe the Functional Components for Your Screen Using Natural Language.

Advanced Panel Settings

Below are settings for the AI Generated control in the Advanced panel:

Visibility Rule

Note the following regarding how to use visibility rules:

Device Visibility

Select on which device types this control displays:

  • Desktop: The control displays only on desktop devices. Enable the Show for Desktop toggle key.

  • Mobile: The control displays only on mobile devices. Enable the Show for Mobile toggle key.

The AI Generated control does not render in Preview mode until the AI-generated components are applied to the Screen. In Preview mode the following message displays: AI Assistant is unavailable until you apply changes.

CSS Selector Name

See the following best practices regarding custom CSS in Screens:

pageScreen TypespageScreen Builder ModespageValidate Your ScreenpageBootstrap Component Control SettingspageBootstrap Wrapper Control SettingspageCheckbox Control SettingspageDate Picker Control SettingspageFile Download Control SettingspageFile Preview Control SettingspageFile Upload Control SettingspageGoogle Places Control SettingspageImage Control SettingspageLine Input Control SettingspageLoop Control SettingspageMulticolumn / Table Control SettingspageNested Screen Control SettingspagePage Navigation Control SettingspagePhoto/Video Control SettingspageRecord List Control SettingspageRich Text Control SettingspageSelect List Control SettingspageSignature Control SettingspageSubmit Button Control SettingspageTextarea Control SettingspageExpression Syntax ComponentspageValidation Rules for "Validation Rules" SettingspageReference Magic Variables in ProcessMaker Platform Assets

Last updated

© Copyright 2000-2024 ProcessMaker Inc. All rights reserved.