場景集
Agent UI 介紹 下一個即時逐字稿

3 分鐘建一張卡 — AI 自己填動態欄位

挑一個模板(這裡用 Hotel 演飯店房型推薦)→ 標記哪些欄位讓 AI 自動從 KB 取值 → 綁到助理 → LINE 與 Web Chat 同時觸發。每個欄位三屬性:類型/預設值/AI 提示詞。

ID 顯示名稱 工具類型 關聯助理
8f3a…MaiAgent 銀行 · 對帳單卡FlexMessageMaiAgent 銀行
1d7e…MaiAgent 醫療 · 看診憑證卡FlexMessageMaiAgent 醫療
7c2e…MaiAgent 航空 · 電子登機證FlexMessageMaiAgent 航空
選擇 Agent UI 類型
選一種類型開始設定
1 選擇模板
挑選一個範本作為起點,套用後可再修改
Restaurant
Apparel
Hotel
Local Search
Receipt
Ticket
Transit
Shopping
Real Estate
Social
TODO
Menu
MaiAgent 海景酒店
★★★★☆ 4.0
NT$ 4,800 NT$ 6,200
預覽
即時呈現設定結果
MaiAgent 海景酒店
★★★★☆ 4.0
NT$ 4,800 NT$ 6,200
3 AI 欄位設定
每個欄位三屬性:類型/預設值/AI 提示詞。固定值寫死,變動值給 AI prompt 自動取值。
固定
按鈕文字
立即訂房
(不需 AI prompt — 寫死即可)
AI 動態
飯店名稱
MaiAgent 海景酒店 |
從知識庫取得使用者目的地匹配的飯店
AI 動態
每晚房價
NT$ 4,800 |
取得本日剩餘房型即時房價
AI 動態
星級評分
★★★★☆ 4.0 |
從評論 KB 計算平均評分
固定
品牌 Logo
M
(不需 AI prompt — 寫死即可)
關鍵差異:以前每張卡都要工程師寫死規則,現在 PM 自助 — AI 看欄位敘述就自己填,新增 / 修改不用排工程資源。
即時預覽
MaiAgent 海景酒店
NT$ 4,800
★★★★☆ 4.0
基本設定
角色指令
知識庫
技能
工具
Agent UI
部署
為這個助理選擇 Agent UI 卡片
勾選即可使用 — AI 會依描述自動判斷何時觸發哪張卡
搜尋名稱或 ID
MaiAgent 銀行 · 對帳單卡
金融帳單 · Receipt 模板
MaiAgent 醫療 · 看診憑證卡
醫療掛號 · Ticket 模板
NEW
MaiAgent 海景酒店 · 飯店房型卡
飯店推薦 · Hotel 模板
MaiAgent 航空 · 電子登機證
航空行程 · Ticket 模板
MaiAgent 學院 · 課程資訊卡
教育招生 · Local Search 模板
MaiAgent 醫療 · 衛教資訊卡
醫療科普 · Social 模板
飯店房型卡 已綁定到「MaiAgent 訂房」
MaiAgent 訂房
週末想去花蓮住兩天
MaiAgent 海景酒店
★★★★☆ 4.0
NT$ 4,800 NT$ 6,200
💳 立即訂房
✓ 已訂房成功,訂單編號 #MA-2026-3081
📱 LINE App
hotel.example.com
MaiAgent 訂房
週末想去花蓮住兩天
為您推薦房型:
MaiAgent 海景酒店
★★★★☆ 4.0
NT$ 4,800
💳 立即訂房
✓ 已訂房成功,訂單編號 #MA-2026-3081
💻 網站 Web Chat
核心流程
1
從 AI 功能新增
進入 AI 功能 → Agent UI 列表,點右上「+ 新增」,從卡片類型選擇器挑「FlexMessage 卡片資訊展示」。
2
12 模板挑一個
12 個 FlexMessage 模板涵蓋飯店、餐廳、機票、對帳單等情境。本範例使用 Hotel 模板,套用後可在右側即時看到預覽。
3
AI 自動填值
每個欄位三屬性:類型/預設值/AI 提示詞。固定值(按鈕、Logo)寫死,變動值(飯店名、房價、評分)給 AI 提示詞,AI 自動從知識庫取值填入。
4
綁到助理
進入 AI 助理設定頁 → Agent UI 分頁,勾選剛建立的卡片,AI 之後依對話脈絡自動判斷何時觸發。
5
雙通路觸發
設定完成後,客戶問訂房 — LINE App 與網站 Web Chat 同時觸發同一張飯店房型卡,使用者一鍵完成訂房。