AI Bot Configuration

The objective of this guide is to provide an in-depth understanding of how to use AI feature of AI Bot control.

1st Step

  1. Begin by creating a blank transaction form.

2nd Step

  1. Add AI Bot control.
  2. Configure all the attributes in design page based on the specified requirements of the form.

3rd Step

  1. This is where the API behavior is defined:
    1. In "AI Data Connection" select the connection from the dropdown.
      1. Go to workbench, select "New Datasource" option, and fill the details to create new data source.
    2. "Business Description" describes what the bot is supposed to do, like guiding the user through a step-by-step form.
    3. "Schema" defines the structure of the form. For example, the fields you want to collect like full name, email, and phone number.
    4. "Rule" provides clear instructions to the AI on how to ask questions, validate input, and return the final data in a specific format.
    5. "List Of Questions" is used for fixed questions, but is not needed here since the AI uses dynamic questions from the schema.
    6. "Sample Query" shows how the data will be fetched from the database. This is mostly for testing or display purposes.
    7. "Database Connection" points to the actual database (e.g., Cosmos DB) where the collected form responses will be saved.
    8. "Table Name" indicates the exact table in your database where the user’s input should be inserted.
    9. "Response Attribute" defines the key under which the returned data will be stored in the API response (commonly set as data).

4th Step

  1. Final setup for the AI Bot
    1. "Open In Popup" enables the bot to open as a popup window instead of appearing inline on the page.
    2. "Button Icon" defines the icon that will appear on the bot button.
    3. "Select Style" allows you to choose the appearance of the button, like Primary, Secondary, etc. to match your app design.
    4. "Call Chat API On Load" automatically starts the AI assistant as soon as the form loads, without needing user interaction.
    5. "Stop Form Model In Request" temporarily pauses the form when a request is being sent, preventing simultaneous actions.
    6. "Enable AI Form Assistant" activates the smart form assistant powered by AI, which asks questions based on your schema.
      1. "AI Form Assistant API" connects your AI-driven form to a database, allowing it to save, fetch, or manage data automatically based on user input.

5th Step

  1. This is the UI configuration for how data will be visually displayed.
  2. Configure all the attributes in design page based on the specified requirements of the form.

6th Step

  1. Defines how data will be pulled and populated:
    1. Data Connection: NCAMEO Cosmos
    2. Model Name: ContactEntry
    3. Operation: Read
    4. Response Attribute: Data is read from the data object in the response.
    5. Paging and Sorting: Optional configuration for performance.

7th Step

  1. Maps API fields to UI layout:
    1. Custom HTML & CSS: Defines the card structure visually.
    2. Field Mapping: Binds data fields (fullName, email, phone) to card elements.
    3. Style Settings: Custom card design (gradient background, shadow, padding).

8th Step

  1. Real-time interaction between the AI Bot and user:
    1. Bot prompts questions in sequence as per JSON schema.
    2. Once the user submits answers, the form processes the data.
    3. Upon confirmation, the new entry gets added visually as a card.

Final Output:

  1. This confirms the successful end-to-end flow:
    1. A new card has been added.
    2. Email and phone number are correctly captured.
    3. Confirms bot-to-DB-to-UI integration is functioning.