> For the complete documentation index, see [llms.txt](https://docs.maiagent.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.maiagent.ai/maiagent-user-guide/maiagent-user-guide-en/tools/agent-ui.md). # Agent UI ## 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. {% hint style="success" %} **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. {% endhint %} ### Comparison: Plain Text vs. Agent UI Cards | Scenario | Plain Text Reply | Agent UI Card Reply | | --------------------------------- | ------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------- | | 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](#use-case-examples)" 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": | Field | Configuration | Use Case | | ---------------------------- | --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | | **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):** ``` Field Default Value (Fixed) AI Prompt (Dynamic) ────────────────────────────────────────────────────────── Title Label TRANSACTION (fixed) ─ Card Title Credit Card Statement ─ (fixed) Statement Period ─ Retrieve statement period and last four card Description 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 Button Text Pay Now (fixed) ─ Payment Link ─ Generate personalized payment link using statement number ``` ### What Can Card Buttons Do? FlexMessage cards support two types of interactive buttons: {% tabs %} {% tab title="URL Button" %} 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. {% endtab %} {% tab title="Prompt Button" %} Automatically sends a message to the AI assistant when clicked, and AI continues the conversation. **Workflow (Education enrollment scenario example):** ``` User: "Tell me about courses or admissions" ↓ AI returns a course progress card (In-progress courses / Pending assignments / Open enrollment) ↓ User clicks "Enroll Now" button ↓ (Button triggers prompt: "I want to enroll in the summer internship") AI continues: "What is your current department and year? What is your preferred internship field?" ``` **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 {% endtab %} {% endtabs %} *** ## 3. Creating an Agent UI (FlexMessage) {% stepper %} {% step %} ### Navigate to the Agent UI Page In the left menu, click AI Features → Agent UI, then click Add Agent UI in the top right corner. {% endstep %} {% step %} ### Select Card Type Currently available: **FlexMessage Card Information Display**. Click to enter the configuration page. {% endstep %} {% step %} ### Fill In Basic Information | Field | Description | | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **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") | {% hint style="info" %} **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. {% endhint %} {% endstep %} {% step %} ### 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:** | Template | Use Case | Suitable 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 | {% hint style="info" %} 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." {% endhint %} {% endstep %} {% step %} ### 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. {% endstep %} {% step %} ### Save After confirming all settings, click Save in the top right corner. The Agent UI tool is now created and will appear in the list. {% endstep %} {% endstepper %} *** ## 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. {% stepper %} {% step %} ### Go to AI Assistant Settings Navigate to AI Features → AI Assistants, select the AI assistant you want to configure, and click Settings. {% endstep %} {% step %} ### Open the Agent UI Tab In the settings page tab bar, click Agent UI. {% endstep %} {% step %} ### Add Agent UI Click Select Agent UI and choose the card tool to add from the list. * A single AI assistant can bind **multiple** Agent UIs * Each Agent UI's **prompt** determines when AI uses which card {% endstep %} {% step %} ### Save Click Save in the bottom right corner. The settings take effect immediately. {% endstep %} {% endstepper %} *** ## 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. {% hint style="info" %} 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. {% endhint %} ### 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:** | Field | Setting | | ------------ | ------------------------------------------------------------------------------------------------------------------------------------- | | 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:** | Field | Default Value | AI Prompt | | ---------------------------- | --------------------- | ----------------------------------------------------------------------------- | | 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 | {% hint style="info" %} **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. {% endhint %} #### 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.
Can a single AI assistant have multiple Agent UIs attached? Yes. The AI assistant uses each Agent UI's "Prompt" to determine which card to use in the current conversation. It's recommended to write clear, non-overlapping prompts for each Agent UI to prevent AI from selecting the wrong card.
Can Agent UI be used on LINE channels? FlexMessage natively supports LINE's card format, and the rendering in LINE channels is the same as in Web Chat — full visual cards. Make sure the AI assistant is associated with a LINE conversation platform and the LINE channel settings are complete.
--- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.maiagent.ai/maiagent-user-guide/maiagent-user-guide-en/tools/agent-ui.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.