Agent UI
Enable AI assistants to automatically send visual information cards with interactive buttons during conversations, delivering a richer response experience beyond plain text.
1. What Is Agent UI?
Traditional AI assistants can only reply with plain text. Agent UI lets you design visual "information cards" for your AI assistant — when users ask questions, the AI assistant doesn't just talk, it can also send beautifully structured cards with images and buttons.
The currently supported card format is FlexMessage, which can render rich card UIs in Web Chat and LINE channels.
Agent UI Highlights: The AI assistant automatically determines when to send a card based on the conversation context, fills in the corresponding information, and users can tap card buttons to continue interacting.
Comparison: Plain Text vs. Agent UI Cards
Industrial Equipment Spec Inquiry
"IBX-7800 Industrial Motherboard, Intel i7, DDR5, NT$28,500"
Spec sheet (CPU/I/O/Operating Temp) + Stock tag + Request Quote / Download Spec Sheet buttons
Credit Card Statement Inquiry
"Current spending $6,508, payment due 06/15"
Transaction details + Current period/Rewards/Amount due + Pay Now button
Medical Appointment Confirmation
"Cardiology 06/03 14:00, Registration No. R2026053-088"
Doctor/Time/Location + Check-in QR Code + View Waiting Status button
Electronic Boarding Pass
"JX 802, TPE 09:25 → NRT 13:35, Seat 12A"
Flight segment/Class/Seat/Baggage + Boarding QR Code + Online Seat Selection button
Live Conversation Demo
Whether it's B2B manufacturers inquiring about product specs, customers checking appointment information, or users viewing boarding passes directly in a conversation — the AI assistant automatically sends the corresponding card based on the conversation context, presenting all information clearly at once.
For more industry scenarios, see "5. Use Case Examples: Six Industry Scenarios" below.
2. Core Concepts
Fixed Fields vs. AI-Generated Content
Each field in a card can be set to either a "fixed default value" or "let AI fill in dynamically from the conversation context":
Fixed Value (Default)
Enter fixed text directly
Brand name, card title, fixed labels (e.g., TRANSACTION, BOOKING PASS)
AI-Generated (AI Prompt)
Describe in natural language what AI should fill in
Last four digits of customer account, spending amount, amount due — any information that needs to be retrieved from the knowledge base or conversation
Example (Financial Statement Card):
What Can Card Buttons Do?
FlexMessage cards support two types of interactive buttons:
Opens a specified URL when clicked.
Use Cases:
Manufacturing: Open product technical spec PDF, schedule a Demo form
Finance: Jump to statement payment page, credit card application form
Education: Open admissions brochure, registration link
Medical: View waiting status, cancel appointment page
Airlines: Online seat selection, add-on baggage or meals
Configuration: In the "Link" field's AI prompt, enter "Retrieve the corresponding page link from the knowledge base," and AI will automatically populate the correct URL.
Automatically sends a message to the AI assistant when clicked, and AI continues the conversation.
Workflow (Education enrollment scenario example):
Use Cases:
Trigger follow-up processes (enrollment, appointments, applications, reservations)
Ask "View full details" or "View other room types" to expand more information
Collect additional information AI needs to continue serving the user
3. Creating an Agent UI (FlexMessage)
Fill In Basic Information
Display Name
Name shown in the admin dashboard for easy identification (e.g., Finance/Banking/Securities Product Card)
Tool Name
English name for AI model identification. Naming rules: English letters, underscores, no spaces (e.g., finance_product_card, medical_clinic_card, airline_flight_card)
Description
Describe the purpose of this card tool (optional)
Prompt
Tell the AI assistant when to use this card (e.g., "When users ask about credit card statements, payment information, or current spending details, return the statement card")
The prompt is the trigger key. The more specific you write it, the better AI knows when to proactively send a card instead of just replying with text.
Select a Template
Click a preset template on the left to preview the card style on the right in real time. After confirming, click Apply This Template.
12 Built-in Templates and Applicable Industries:
Restaurant
Store recommendations, reservations
Food & Beverage, Tourism
Hotel
Room type display, booking
Hotels, Accommodations
Local Search
Location search, nearby recommendations
Tourism, Retail
Real Estate
Property introduction, viewing appointments
Real Estate, Rentals
Apparel
Product display, spec introduction
Retail, E-commerce, Manufacturing
Transit
Routes/Flights/Schedules
Transportation, Airlines, Logistics
Shopping
Product comparison, shopping cart
Retail, E-commerce
Menu
Item display, menu
Food & Beverage, Retail
Receipt
Statements, order receipts, transaction details
Finance, Retail, E-commerce
Ticket
Tickets, boarding passes, appointment confirmations
Airlines, Events, Medical Registration
Social
Profile cards, social profiles
Education, HR, Social
TODO app
Task lists, course progress, work order status
Education, Customer Service, Manufacturing Work Orders
Custom
Paste custom FlexMessage JSON
Any scenario requiring custom layouts
Selecting a template is just the starting point. After applying, you can freely adjust the content and logic of each field in the "AI Field Settings."
Configure AI Fields
After applying a template, the system automatically parses all editable fields in the card:
Each field has three properties:
Type: The field's data type (text, image, button, link)
Default Value: Fixed content to display (if an AI prompt is also set, AI-generated content takes priority)
AI Prompt: Tells AI what to fill in this field, e.g., "Based on the user's query, retrieve the corresponding product name / account information / department from the knowledge base"
The live preview on the right updates with your settings, so you can confirm the card's visual appearance.
4. Binding to an AI Assistant
After creating an Agent UI, you need to attach it to an AI assistant so the assistant knows it can use this card.
5. Use Case Examples: Six Industry Scenarios
From manufacturing, finance, and education to medical, hospitality, and airlines — every industry can design custom cards tailored to their needs, enabling AI assistants to respond to users in the most intuitive way. Below are actual conversation demos from six typical enterprise scenarios.
All examples in this section have been built and tested on the MaiAgent platform. A single AI assistant can bind multiple Agent UIs simultaneously, and AI will automatically select the appropriate card based on the user's question.
Multi-Card Management for One Assistant
Configure multiple industry scenarios in the admin dashboard and attach them to the same AI assistant:
Example Configuration Tutorial: Financial Statement Card
Below is a complete walkthrough using the "Finance — Statement Inquiry" as an example, demonstrating the entire process from zero configuration to live conversation. Other industries can follow the same approach.
Scenario Description
A bank wants members to receive a statement card (with transaction details, amount due, payment deadline, and a "Pay Now" button) when they ask about their current statement on LINE or Web Chat, instead of a plain text reply.
Configuration Details
Agent UI Settings:
Display Name
Finance/Banking/Securities Product Card
Tool Name
finance_product_card
Prompt
When users ask about current spending, payment information, credit card statements, or transaction details, return the statement card
Template
Receipt
AI Field Settings:
Title Label
TRANSACTION
─
Card Title
Credit Card Statement
─
Statement Period Description
─
Retrieve statement period and last four card digits from the billing database
Transaction List
─
List major merchants and amounts for this period
Total Spending
─
Retrieve total spending for this period from the billing database
Rewards
─
Retrieve current period rewards from the membership system
Amount Due
─
Calculate amount due after deducting rewards from total spending
Payment Deadline
─
Retrieve payment deadline from the billing database
Statement Number
─
Retrieve statement number from the billing database
Button Text
Pay Now
─
Payment Link
─
Generate personalized payment link using statement number
Logic for choosing "Fixed Value" vs. "AI Prompt": Use fixed values for content that doesn't change with conversations, such as brand labels and button text. Use AI prompts for content that needs to be retrieved from systems, such as customer accounts, spending amounts, and payment links.
Live Conversation Result
After the user asks a question, the AI assistant automatically triggers the card tool, retrieves data from the billing database and membership system, and fills in the fields:
Six Industry Scenario Overview
Once you understand the configuration logic above, you can apply the same approach to different industries. Here are six typical scenarios:
1. Tech/Electronics Manufacturing: Product Catalog and Spec Inquiry
When customers or sales teams inquire about industrial computers, embedded systems, AOI inspection equipment, and other products, the AI assistant automatically returns product cards with complete specs, pricing, stock status, and "Request Quote / Schedule Demo" buttons, accelerating the B2B sales process.
2. Finance/Banking/Securities: Statements and Product Recommendations
For financial scenarios such as statements, credit card recommendations, financial plans, and insurance inquiries, the AI assistant can integrate internal system data to return structured financial information cards with "Pay Now / Apply" CTAs.
3. Educational Institutions: Course Progress and Enrollment
Students can instantly check course progress, pending assignments, completed grades, and admissions information. Schools can also use the AI assistant to push campus announcements and registration links.
4. Medical Clinics: Appointment Registration and Clinic Information
For scenarios including department introductions, clinic schedules, appointment registration, QR Code check-in, and health education information — patients can complete appointments and check waiting status directly on LINE or Web Chat, reducing call center workload.
5. Hospitality/Hotel Industry: Room Booking and Marketing Recommendations
For hospitality scenarios including room type recommendations, restaurant reservations, event registration, and membership benefits — visual cards display pricing, ratings, promotions, and booking CTAs, improving conversion rates.
6. Airlines: Flight Information and Electronic Boarding Passes
For scenarios including flight inquiries, class comparisons, baggage regulations, and online seat selection, the AI assistant can directly present electronic boarding pass QR Codes, seats, baggage allowances, and other key information — no need to open a separate app.
6. FAQ
What are the naming rules for tool names?
The tool name is the unique identifier for AI models to recognize this tool. It must:
Use English letters
May include underscores (
_)No spaces or non-English characters
Use descriptive names, e.g.,
finance_statement_card,medical_clinic_card,airline_flight_card
How should I write an effective prompt?
The prompt tells AI "when" to use this card. Write specific trigger conditions:
Too vague (poor results): "Use when needed"
Specific (good results):
"When users ask about industrial computers, embedded systems, inspection equipment specs or pricing, return the product catalog card"
"When users ask about current spending, payment deadline, or statement details, use the statement card"
"When flight, class, seat, or boarding information needs to be displayed, present it as an electronic boarding pass card"
What happens if the AI prompt for a field is not filled in?
If a field only has a "Default Value" set, AI will not dynamically generate content — it will display the default value directly. If neither is filled in, the field will appear blank. It's recommended to at least fill in a default value to avoid blank fields on the card.
Last updated
Was this helpful?