AI Agent
AI Agent
Embedded Files
What is it?
What is it?
An AI agent acts like a digital assistant within your workflow. It can process information using artificial intelligence and provide responses or take actions based on your configuration. Unlike traditional logic flows that follow fixed rules, an AI agent can understand natural language and adapt to different types of inputs, for example, text, images, or documents such as PDFs.
AI Agent In Dragonce
AI Agent In Dragonce
(1) Setting Up the AI Agent
(1) Setting Up the AI Agent
(a) Navigate to the settings icon located to the right of the account icon. If the feature is available to you, an AI Agent option will appear in the menu.
(b) Within the Settings page, two tabs will be visible:
App List: the configuration page for the AI agent
AI Model: the setup page for connecting different AI models that will be available to the agent
(c) Within the ‘App List’ tab, you will find two sections:
Agent List: displays all the AI agents you have configured
Agent Package Repository: allows you to deploy an AI agent to another environment
(2) Configuring the AI agent
(2) Configuring the AI agent
(a) Record Selector
The Record Selector section includes the following settings:
(i) Name: The name of the AI agent, used to identify different agents
(ii) Form: Select the form and status that the AI agent will target
(b) Running Schedule
The Schedule section includes the following settings:
(i) Time Range: Toggle on to process records only within a specified time range
(ii) Date Range: Toggle on to process records only within a specified date range
(iii) Weekday: Toggle on to process records only on selected days of the week
If no schedule is set, the AI will process records immediately.
(c) AI Settings
The AI Settings section includes the following configurations:
(i) AI Model: Select the AI model that will be used by the AI agent
(ii) Additional Settings: Configure advanced options such as:
1) Max Tokens: The maximum unit of text the AI can generate in a single response
2) Temperature: Controls the style of the output (lower values produce more stable and predictable results, while higher values allow for more creative and varied responses)
(iii) System Prompt: Instructions that guide the AI’s behaviour, written in natural language (similar to how you would chat with a chatbot like ChatGPT)
(iv) User Prompt: Provides fine control over the AI’s behaviour, such as defining where the AI should retrieve attachments
(v) AI Output: Defines the fields that the AI should return. This includes setting the field key, data type, and description (description gives AI the context about each field)
(vi) Reference Image(s) For Comparing: Allows you to upload reference images for the AI when it needs to recognize or match specific items
(d) Post-processors
The Post‑Processors section provides tools for fine-tuning the AI’s output. These processors allow you to apply additional action after the AI has generated its response. Examples include:
(i) Summarizing arrays returned by the AI
(ii) Generating records from an array output
(iii) Removing specific strings from the output to ensure it matches your requirements
(e) Form Mapping
The Form Mapping section allows you to insert the AI output fields (defined in the Output Format Condition) into the corresponding form widgets.
(f) Next Edge
The Next Edge section allows you to define the workflow edge that the AI will follow after processing. You can configure:
(i) Successful Edge: The workflow edge the AI will move to once processing is completed successfully
(ii) Failed Edge: The workflow edge the AI will move to if it fails to provide a response (for example, due to server conditions)
(iii) Error Message: Specify which widget will display the error message when the AI fails to provide a response
Hands-On Tutorial
Hands-On Tutorial
You are going to build a Business Card Organizer using DragOnce to help users manage their collection of contacts. With this application, you will:
Upload business cards that you collect
Use AI to automatically extract key details from the card
Search and retrieve contact information whenever you need it
Run Time
Run Time
Step-by-Step
Step-by-Step
1 Create App
1 Create App
After logging in, on top of the Launch Board, mouse over the App Management and select Developing Environment.
2. In App List, click + and create a new app by entering Application Name and click Create & Open.
Application Name: Business Card Organizer - Your Name
2 Assign Runtime User Role
2 Assign Runtime User Role
In the left side menu, click ‘Runtime User Roles’. Mouse over the row and click User Role Settings to configure the user role, including the role name and privileges:
2. Mouse over the row of ‘Normal Staff’ and click Add User or Group to assign users to the relevant Run Time User Role:
Information !
If a user is not assigned to any Run Time User Role, the user will not be able to run the application.
Information !
You may assign your own account to all Run Time User Roles first, to ensure you have permissions to view all pages and perform basic function tests when building the app.
3 Design Pages
3 Design Pages
In Page List, click + to create 2 pages:
Business Card Upload Form
Homepage
3.1 Business Card Upload Form
3.1 Business Card Upload Form
a. Run Time
b. Page Builder
Form Layout
Form Layout
In Page List, click ‘Business Card Upload Form’ to access Page Builder.
From the left side menu, drag a Form widget and drop it into the canvas area.
3. Click to select the Form widget to view Quick Setting Panel, and update widget name from ‘Form’ to ‘Business Card Upload Form’. And select “Section” as Layout.
4. Create the following 3 sections in the form by clicking + New to add a section, and clicking the icon circled below to edit a section’s name.
a. Business Card
b. From AI
c. Debug
5. Insert following widgets into the form for different sections. Resize widgets to display full content, house addition widgets or improve overall layout if necessary.
Section of 'Business Card'
Section of 'Business Card'
Widget No.
1
Widget Type
Formatted Container
Name
Formatted Container 1
Widget Property Settings
'General' tab
Untick: Show header
Sizing Mode: Auto-height
Resize widgets if necessary
Widget No.
2
Widget Type
File Uploader
Name
File Uploader
Widget Property Settings
Default settings
Section of 'From AI'
Section of 'From AI'
Widget No.
1
Widget Type
Formatted Container
Name
Formatted Container 2
Widget Property Settings
'General' tab
Untick: Show header
Sizing Mode: Auto-height
Resize widgets if necessary
Widget No.
2
Widget Type
Input Box
Name
English Name
Widget Property Settings
'General' tab
Width: 400px
Widget No.
3
Widget Type
Input Box
Name
Chinese Name
Widget Property Settings
'General' tab
Width: 400px
Widget No.
4
Widget Type
Input Box
Name
Title
Widget Property Settings
'General' tab
Width: 400px
Widget No.
5
Widget Type
Input Box
Name
Company
Widget Property Settings
'General' tab
Textbox: Multiple Line
Width: 400px
Height: 50px
Widget No.
6
Widget Type
Input Box
Name
Address
Widget Property Settings
'General' tab
Textbox: Multiple Line
Width: 400px
Height: 50px
Widget No.
7
Widget Type
Input Box
Name
Phone
Widget Property Settings
'General' tab
Width: 400px
Widget No.
8
Widget Type
Input Box
Name
Mobile
Widget Property Settings
'General' tab
Width: 400px
Widget No.
9
Widget Type
Input Box
Name
Widget Property Settings
'General' tab
Width: 400px
Widget No.
10
Widget Type
Input Box
Name
Remarks
Widget Property Settings
'General' tab
Textbox: Multiple Line
Width: 400px
Height: 50px
Section of 'Debug'
Section of 'Debug'
Widget No.
1
Widget Type
Formatted Container
Name
Formatted Container 3
Widget Property Settings
'General' tab
Untick: Show header
Sizing Mode: Auto-height
Resize widgets if necessary
Widget No.
2
Widget Type
Input Box
Name
Debug
Widget Property Settings
'General' tab
Textbox: Multiple Line
Width: 400px
Height: 100px
Workflow Builder
Workflow Builder
Click the ‘Business Card Upload Form’ widget. On the Quick Setting Panel, click the ’Connect Workflow’ button.
2. Click + , and then click ‘Create’.
3. Click the workflow name on the top of the ‘Business Card Upload Form’ widget, and then click ‘OK’ to open Workflow Builder
4. In Workflow Builder, drag and drop elements from left side menu into canvas and linking elements with Edges
Information !
Within the Workflow builder, numerous functions can be implemented. For instance:
Incorporate an additional condition by adding a converter box.
Integrate scheduled emails within a workflow state.
Define the next stakeholder in edge settings, enabling stakeholders to modify records and receive "action to do" messages on their homepage.
By clicking on an element to open its Quick Settings Panel, you can rename the element by typing its name and then press Enter
After dragging the workflow elements to the desired locations, follow the steps below to create and move edges:
Mouse over a state and drag a line from the right by clicking and holding the arrow.
Drag the arrow towards the target state.
The head of the arrow has to move inside the target state for connection.
Leave your click to complete the connection.
You can relocate the head and tail by dragging them onto any side of the states/conditions.
Click and hold the head or tail of the edge.
Move to the other side of the state/condition (or other state/condition).
Leave your click to complete the movement of the edge.
Element No.
1
Element Type
State
Element Name
Pending AI
Element No.
2
Element Type
State
Element Name
AI Processed
Element No.
3
Element Type
State
Element Name
Failed
Element No.
4
Element Type
Edge
Element Name
Submit to AI
Remarks
Stakeholder Tab
Next Stakeholder Mapping: User Role Mapping
Choose User & Group Widget: Manager
Element No.
5
Element Type
Edge
Element Name
Processed
Remarks
Stakeholder Tab
Next Stakeholders Mapping: User Role Mapping
Choose User & Group Widget: Manager
Element No.
6
Element Type
Edge
Element Name
Fail
Remarks
Stakeholder Tab
Next Stakeholders Mapping: User Role Mapping
Choose User & Group Widget: Manager
3.2 Home Page
3.2 Home Page
a. Run Time
b. Run Time
Filters
Filters
Insert the different widgets into the canvas area to create a section for filtering options.
Widget No.
1
Widget Type
Label
Widget Name
Label
Widget Property Settings
'General' tab
Font Style: select Title
'Value' tab
Default Value: Business Card Records
Widget No.
2
Widget Type
Formatted Container
Widget Name
Searching
Widget Property Settings
'General' tab
Sizing Mode: Auto-height
Frame: Border Solid
Background Color: #f8f9fc
Resize widgets if necessary
Widget No.
3
Widget Type
Search Helper
Widget Name
Company
Widget Property Settings
Default Settings
Widget No.
4
Widget Type
Search Helper
Widget Name
Widget Property Settings
Default Settings
Widget No.
5
Widget Type
Search Helper
Widget Name
English Name
Widget Property Settings
Default Settings
Widget No.
6
Widget Type
Search Helper
Widget Name
Phone
Widget Property Settings
Default Settings
Widget No.
7
Widget Type
Selection Box
Widget Name
Status
Widget Property Settings
'General' tab
Selection Box Type: Check Box
Option Per Row: 1
Sizing Mode: Auto-height
'Value' tab
Option Source Type: Use workflow States
Data From Page: Business Card Upload Form
Form: Business Card Upload Form
Form Table
Form Table
Insert the Form Table widgets into the canvas area.
Widget No.
1
Widget Type
Form Table
Widget Name
Form Table
Widget Property Settings
'General' tab
Sizing Mode: Relative Size
Bottom: 10
Right: 10
Adjust Left and Top if necessary
2. Click on the Form Table to view the Quick Setting Panel. Click Data Source Settings
3. In the 1st step Data Source, select ‘Business Card Upload Form - Business Card Upload Form’ and click Continue at top right corner
4. In 2nd step Filters, set up filtering conditions as below, and click Continue at top right corner to proceed
5. In the 3rd step Column Settings, configure as below then click Continue at top right corner to proceed
6. In the 4th step Statistical Value, click Finish at top right corner to proceed.
3.3 Web Header
3.3 Web Header
a. Set Up Web Header
In Page List, click Web Header in left side menu to open Web Header Settings page
2. Mouse over ‘Home’ tab at top left and click Homepage Settings
3. After Default Homepage, click the icon circled below and select ‘Homepage’, then click Submit at bottom right to apply
4. Click 'Save' to save the updated web header
4 AI Agent Settings
4 AI Agent Settings
1. Navigate to AI App List.
2. From the list, choose Business Card Organizer - Your Name.
3. In the Profile List, click “+ Create” and select Image-Text Vision Model.
A. Record Selector
A. Record Selector
In the Record Selector section, configure the settings as follows:
Name: Business Card Extractor
Form: Business Card Upload Form - Business Card Upload Form
State: Pending AI
B. Schedule
B. Schedule
In the Schedule section, keep the default settings.
C. AI Settings
C. AI Settings
In the AI Settings section, configure the settings as follows:
AI Model: Choose any available option (the number of options depends on how many Vision Models have been set up in the AI Model List)
System Prompt: 'You are an expert at reading business card information. Your job is to extract the details from the provided business card.'
User Prompt: Image → File Uploader
AI Output:
Required Data Key
eng_name
Data Type
String
Description
Person’s English name on the business card
Required Data Key
zh_name
Data Type
String
Description
Person’s Chinese name on the business card
Required Data Key
title
Data Type
String
Description
Job title of the contact person
Required Data Key
company_name
Data Type
String
Description
Company name shown on the business card
Required Data Key
address
Data Type
String
Description
Address shown on the business card
Required Data Key
phone_no
Data Type
String
Description
8‑digit office phone number
Required Data Key
mobile_no
Data Type
String
Description
8‑digit mobile phone number
Required Data Key
Data Type
String
Description
Contact email address of the person
Required Data Key
remarks
Data Type
String
Description
Handwritten notes on the business card
D. Form Mapping
D. Form Mapping
In the Form Mapping section, configure the settings as follows:
Key
eng_name
Value
English Name
Key
zh_name
Value
Chinese Name
Key
title
Value
Title
Key
company_name
Value
Company
Key
address
Value
Address
Key
phone_no
Value
Phone
Key
mobile_no
Value
Mobile
Key
Value
Key
remarks
Value
Remarks
E. Next Edge
E. Next Edge
In the Next Edge section, configure the settings as follows:
Success Edge: Processed
Failed Edge: Fail
Error Message: Debug
Click the save button in the top left corner to save your configuration.
5 Testing Your App
5 Testing Your App
1. Upload a business card to the business card upload form.
2. Click ‘Submit to AI’ and wait for the AI to process. Refresh the table to see the most up-to-date information.
3. Check the results. The retrieved fields should appear in the ‘From AI’ section of the form.
Page updated
Report abuse