18.8.4.4 Creating a Dynamic Action to Display AI Assistant

Create a dynamic action to display AI Assistant.

Note:

Before you can add a dynamic action to display AI Assistant, you must complete the steps described in About Including Generative AI in Applications. Failure to create a Generative AI Service or edit the application, AI attributes results in an error.

The following simple example creates a dynamic action hooked to a button that displays the AI Assistant in a dialog. Note this example only describes the limited number of attributes. This example assumes you have already created an application and page.

To add a dynamic action to display AI Assistant:

  1. Navigate to the application page.
    1. On the Workspace home page, click the App Builder icon.
    2. Select an application.
    3. Select a page.
    Page Designer appears.
  2. Create a region to contain the button:
    1. Right-click Body and select Create Region from the context menu.
      In Page Designer, edit the Region attributes.
    2. Identification, Name - Enter a region name. The region name is used as the runtime region title if the title attribute is empty. For example: Display AI Assistant Dialog
  3. Create a button:
    1. Right-click the region you just created and select Create Button from the context menu.
      In Page Designer, edit the Button attributes.
    2. Identification, Button Name - Enter the name used to reference the button being clicked. This name is used to reference the button. For example: AI_ASSISTANT
    3. Identification, Button Title - If the button is text, enter the text to be displayed on the button. If the button is an image, then this text becomes the ALT text for the image. For example, enter: AI ASSISTANT
  4. Create a dynamic action that fires when the user clicks a button:
    1. Click the Dynamic Actions tab in the left pane.
    2. Under Events, right-click Click and select Create Dynamic Action.

      A dynamic action named New appears in the left pane. The Property Editor displays Dynamic Action attributes.



  5. In the Property Editor, edit the Dynamic Action attributes:
    1. Identification, Name - Enter the name of the dynamic action. For example, enter: Display AI Assistant
    2. When, Event - Specify the event that causes the dynamic action to fire. For this example, accept the default, Click
    3. When, Selection Type - Select the type of page element or construct to be used to trigger the event. For this example, select Button.
    4. When, Button - Select the type of page element or construct to trigger the event. For this example, select the button you previously created, AI_ASSISTANT.
  6. Edit the True action, Show. In the Dynamic Action tab, click the Show action.

    Action attributes displays in the Property Editor.

  7. Identification, Action - Select action you want to perform.

    For this example, select Show AI Assistant.



  8. Generative AI attributes:
    1. Generative AI, Service - Select the Generative AI Service to be used by the AI Assistant. Application Default uses the Generative AI Service specified on the AI page in the application attributes. See Configuring AI Attributes for an Application.
    2. Generative AI, System Prompt - Specify the system prompt to be used by the AI Assistant. The System Prompt gives the AI a context. This message does not display on front end, but is sent to all AI service requests on the back end.

      You can enter text or use this attribute in conjunction with Initial Prompt to utilize substitutions using application items, page items, or system variables.

    3. Generative AI, Welcome Message - Specify an optional welcome message shown by the AI Assistant. For example, enter: How may I help you today?

      Note this attribute also supports substitutions using application items, page items, or system variables

  9. Appearance attributes:
    1. Appearance, Display As - Select how the AI Assistant should appear on your page. Options include: Dialog or Inline.

      For this example, select Dialog.

      Note that the UI changed depending upon your selection.

    2. Appearance, Title - Only displays if Display As is Dialog. Enter the title that displays on the dialog. For example, enter: Customer Support
  10. Quick Actions, Message - Enter a message to serve as a chat-wide quick action. A quick action is a predefined phrase that, once clicked, will be sent as a user message. For example, enter: I need help with an order?
  11. View the page. Click Save and Run Page..
    The page appears.
  12. Click the AI Assistant button.