Agent UI

AI アシスタントが会話の中で視覚的な情報カードを自動的に送信し、操作可能なボタンと組み合わせることで、純粋なテキストよりも豊かな応答体験をユーザーに提供します。

一、Agent UI とは？

従来の AI アシスタントは、テキストでしか応答できませんでした。Agent UI を使えば、AI アシスタント向けに視覚的な「情報カード」をデザインできます。ユーザーが質問すると、AI アシスタントは言葉で答えるだけでなく、構成が明確で、画像やボタンを備えた洗練されたカードを直接送信できます。

現在サポートしているカード形式は FlexMessage で、Web Chat および LINE チャネルで豊かなカード UI を表示できます。

Agent UI のポイント： AI アシスタントは会話の内容に応じて、いつカードを出すべきかを自動で判断し、対応する情報をカードに入力します。ユーザーがカードのボタンをクリックすれば、さらに操作を続けることもできます。

比較：純粋なテキスト vs. Agent UI カード

シーン	テキストのみの応答	Agent UI カードの応答
工業用機器の仕様・見積もり問い合わせ	「IBX-7800 産業用マザーボード、Intel i7、DDR5、425,000円」	仕様表（プロセッサ／I/O／動作温度）＋ 在庫タグ ＋ 今すぐ見積もり ／ 仕様書をダウンロード ボタン
クレジットカード明細の照会	「今期のご利用額 97,600円、お支払い期限 06/15」	利用明細表 ＋ 当期／キャッシュバック／お支払い金額 ＋ 今すぐ支払う ボタン
診察予約の確認	「循環器内科 06/03 14:00、受付番号 R2026053-088」	医師／時間／場所 ＋ 受付用 QR Code ＋ 待ち状況を確認 ボタン
電子搭乗券	「JX 802 便、TPE 09:25 → NRT 13:35、座席 12A」	区間／クラス／座席／手荷物 ＋ 搭乗用 QR Code ＋ オンライン座席指定 ボタン

実際の会話イメージ

B2B 製造業での製品仕様の問い合わせ、顧客による予約情報の照会、ユーザーが会話の中で搭乗券を直接確認するケースなど、いずれの場合も AI アシスタントは会話の状況に応じて対応するカードを自動で返信し、情報を一度に分かりやすく提示できます。

製造業の例：顧客が「産業用 PC のマザーボードを推薦してほしい」と尋ねると、AI アシスタントがプロセッサ、I/O、動作温度などの仕様と「今すぐ見積もり」ボタンを含む製品カードを返信します

医療機関の例：ユーザーが診察情報を照会すると、AI アシスタントが診療科、時間、場所、QR Code の受付コードを含む予約確認カードを返信し、「待ち状況を確認」ボタンを提供します

航空業の例：ユーザーがフライト情報を照会すると、AI アシスタントが区間、クラス、座席、手荷物許容量、搭乗用 QR Code を含む電子搭乗券カードを直接表示します

その他の業界シーンについては、下記の「五、活用例：6 大業界シーン」をご覧ください。

---

二、コアコンセプト

固定フィールド vs. AI 動的生成

各カードのそれぞれのフィールドは、「固定のデフォルト値を設定する」か「AI に会話の状況からリアルタイムで入力させる」かを選択できます。

フィールド	設定方法	適した場面
固定値（デフォルト値）	固定テキストを直接入力	ブランド名、カードのタイトル、固定タグ（例：TRANSACTION、BOOKING PASS）
AI 動的生成（AI プロンプト）	入力すべき内容を自然言語で AI に指示	顧客口座番号の下 4 桁、利用金額、当期お支払い金額など、ナレッジベースや会話から取得する必要のあるあらゆる情報

例（金融の明細書カード）：

フィールド        デフォルト値（固定）    AI プロンプト（動的）
──────────────────────────────────────────────────────────
タイトルタグ      TRANSACTION（固定）    ─
カードタイトル    クレジットカード明細（固定）  ─
照会期間の説明    ─                     明細データベースから照会期間とカード番号下 4 桁を取得
利用明細リスト    ─                     当期の主な利用先と金額を一覧表示
当期利用合計額    ─                     明細データベースから当期の利用合計額を取得
キャッシュバック  ─                     会員システムから当期のキャッシュバックを取得
お支払い金額      ─                     当期利用額からキャッシュバックを差し引いたお支払い金額を計算
お支払い期限      ─                     明細データベースからお支払い期限を取得
ボタンテキスト    今すぐ支払う（固定）    ─
お支払いリンク    ─                     明細番号を組み合わせてパーソナライズされたお支払いリンクを生成

カードのボタンで何ができる？

FlexMessage カードは、2 種類の操作ボタンをサポートしています。

URL ボタン

クリックすると、指定した URL を直接開きます。

活用シーン：

• 製造業：製品の技術仕様書 PDF、Demo 予約フォームを開く

• 金融業：明細書のお支払いページ、クレジットカード申し込みフォームへ遷移

• 教育機関：募集要項、申し込みリンクを開く

• 医療機関：待ち状況の確認、予約キャンセルページ

• 航空業：オンライン座席指定、手荷物や機内食の追加購入

設定方法：「リンク」フィールドの AI プロンプトに「ナレッジベースから当該項目に対応するページのリンクを取得する」と入力すると、AI が正しい URL を自動で挿入します。

Prompt ボタン

クリックすると、AI アシスタントに自動でメッセージを送信し、AI が会話を続けます。

利用フロー（教育機関の募集シーンを例に）：

ユーザー：「コースや募集情報を紹介して」
        ↓
AI がコース進捗カードを返信（進行中のコース ／ 未提出の課題 ／ 募集受付中）
        ↓
ユーザーが「今すぐ申し込む」ボタンをクリック
        ↓  （ボタンが prompt をトリガー：「夏季インターンシップに申し込みたい」）
AI が会話を続ける：「現在の学科と学年を教えてください。希望するインターンシップの分野は何ですか？」

活用シーン：

• 後続のフローをトリガー（申し込み、予約、申請、座席予約）

• 「詳細をすべて確認」「他の部屋タイプを確認」などで、より多くの情報を展開する

• AI がサービスを継続するために必要な補足情報を収集する

---

三、Agent UI（FlexMessage）を作成する

1

Agent UI ページに入る

左側メニューで AI 機能 → Agent UI をクリックし、右上の Agent UI を新規作成 をクリックします。

Agent UI 管理一覧。作成済みのカードツールと、その関連付けられた AI アシスタントが表示されます

2

カードタイプを選択する

現在は FlexMessage カード情報表示 を提供しています。選択すると設定ページに進みます。

カードタイプを選択します。現在は FlexMessage をサポートしています

3

基本情報を入力する

基本情報を入力すると、テンプレートの選択と AI フィールドの設定が行えます

フィールド	説明
表示名	管理画面に表示される名前で、識別しやすくするためのものです（例：金融／銀行／証券業 商品カード）
ツール名	AI モデルが識別するための英語名。命名規則：英字、アンダースコア、スペースなし（例：finance_product_card、medical_clinic_card、airline_flight_card）
説明	このカードツールの用途を記載します（任意）
プロンプト	AI アシスタントがこのカードをいつ使うべきかを指示します（例：「ユーザーがクレジットカード明細、お支払い情報、当期の利用明細について尋ねたときは、明細書カードを返信する」）

プロンプトがトリガーの鍵です。 具体的に書くほど、AI はテキストだけで答えるのではなく、いつカードを自発的に送信すべきかを正しく判断できます。

4

テンプレートを選択する

左側のプリセットテンプレートをクリックすると、右側でカードのスタイルをリアルタイムにプレビューできます。確認後、このテンプレートを適用 をクリックします。

12 種類の組み込みテンプレートと適用業界：

テンプレート	適したシーン	適した業界
Restaurant	店舗のおすすめ、予約	飲食、観光
Hotel	部屋タイプの紹介、宿泊予約	ホテル、宿泊
Local Search	場所の検索、周辺のおすすめ	観光、小売
Real Estate	物件紹介、内見予約	不動産、賃貸
Apparel	商品紹介、仕様の説明	小売、EC、製造業
Transit	路線／フライト／時刻	交通、航空、物流
Shopping	商品比較、ショッピングカート	小売、EC
Menu	品目紹介、メニュー	飲食、小売
Receipt	明細書、注文レシート、利用明細	金融、小売、EC
Ticket	チケット、搭乗券、予約確認	航空、イベント、医療受付
Social	プロフィールカード、ソーシャルプロフィール	教育、HR、ソーシャル
TODO app	タスクリスト、コース進捗、作業票のステータス	教育、カスタマーサポート、製造業の作業票
カスタム	独自の FlexMessage JSON を貼り付け	カスタムレイアウトが必要なあらゆるシーン

テンプレートの選択は出発点にすぎません。適用後は「AI フィールド設定」で、各フィールドの内容とロジックを自由に調整できます。

5

AI フィールドを設定する

テンプレートを適用すると、システムがカード内の編集可能なすべてのフィールドを自動で解析します。

各フィールドは固定のデフォルト値を設定するか、AI プロンプトを入力して AI に動的に内容を生成させることができます

各フィールドには 3 つの属性があります。

• タイプ：フィールドのデータ型（テキスト、画像、ボタン、リンク）

• デフォルト値：固定で表示される内容（AI プロンプトも同時に設定されている場合は、AI が生成した内容が優先されます）

• AI プロンプト：このフィールドに何を入力すべきかを AI に指示します。例：「ユーザーの照会に基づいて、ナレッジベースから対応する製品名／口座情報／診療科を取得する」

右側のリアルタイムプレビューは設定に応じて更新され、カードの見た目を確認できます。

6

保存する

すべての設定を確認したら、右上の 保 存 をクリックします。これで Agent UI ツールの作成が完了し、追加された項目を一覧で確認できます。

---

四、AI アシスタントに紐付ける

Agent UI を作成したら、AI アシスタントに割り当てる必要があります。そうすることで、AI アシスタントがこのカードを使えるようになります。

1

AI アシスタント設定に入る

AI 機能 → AI アシスタント へ進み、設定したい AI アシスタントを選択して 設定 をクリックします。

2

Agent UI タブを開く

設定ページのタブ列で Agent UI をクリックします。

AI アシスタントの設定ページで、紐付け済みのすべての Agent UI ツールを管理できます

3

Agent UI を追加する

Agent UI を選択 をクリックし、一覧から追加したいカードツールを選択します。

• 1 つの AI アシスタントには複数の Agent UI を紐付けできます

• 各 Agent UI のプロンプトが、AI がどの状況でどのカードを使うかを決定します

4

保存する

右下の 保 存 をクリックすると、設定が即座に反映されます。

---

五、活用例：6 大業界シーン

製造、金融、教育から医療、サービス、航空まで、各業界が自社のニーズに合わせて専用のカードをデザインでき、AI アシスタントが最も直感的な方法でユーザーに応答できます。以下は、6 種類の代表的な企業シーンにおける実際の会話イメージです。

本節の例は、いずれも MaiAgent プラットフォーム上で実際に作成・テストされたものです。同一の AI アシスタントに複数の Agent UI を同時に紐付けることができ、AI はユーザーの質問に応じて対応するカードを自動で選択します。

複数カードの同一アシスタント管理

管理画面で複数の業界シーンをまとめて設定し、同一の AI アシスタントに割り当てます。

同一の AI アシスタントに 6 種類の業界カードを紐付け、AI はユーザーの質問に応じて対応するカードを自動で選択します

設定チュートリアル例：金融の明細書カード

以下では「金融業 明細照会」を例に、1 枚のカードをゼロから設定し実際の会話に至るまでの流れを完全に示します。他の業界も同様に進めることができます。

シーンの説明

ある銀行では、会員が LINE または Web Chat で当期の明細を尋ねたときに、AI アシスタントが単なるテキスト応答ではなく、明細書カード（利用明細、当期お支払い金額、お支払い期限、「今すぐ支払う」ボタンを含む）を直接返信することを望んでいます。

設定内容

Agent UI の設定：

フィールド	設定
表示名	金融／銀行／証券業 商品カード
ツール名	finance_product_card
プロンプト	ユーザーが当期の利用、お支払い情報、クレジットカード明細、または利用明細について尋ねたときは、明細書カードを返信する
テンプレート	Receipt

AI フィールドの設定：

フィールド	デフォルト値	AI プロンプト
タイトルタグ	TRANSACTION	─
カードタイトル	クレジットカード明細	─
照会期間の説明	─	明細データベースから照会期間とカード番号下 4 桁を取得
利用明細リスト	─	当期の主な利用先と金額を一覧表示
当期利用合計額	─	明細データベースから当期の利用合計額を取得
キャッシュバック	─	会員システムから当期のキャッシュバックを取得
お支払い金額	─	当期利用額からキャッシュバックを差し引いたお支払い金額を計算
お支払い期限	─	明細データベースからお支払い期限を取得
明細番号	─	明細データベースから明細番号を取得
ボタンテキスト	今すぐ支払う	─
お支払いリンク	─	明細番号を組み合わせてパーソナライズされたお支払いリンクを生成

「固定値」vs.「AI プロンプト」の選び方： ブランドタグ、ボタンテキストなど会話によって変わらない内容には固定値を、顧客口座、利用金額、お支払いリンクなどシステムから取得する必要のある内容には AI プロンプトを使います。

実際の会話イメージ

ユーザーが質問すると、AI アシスタントは自動的にカードツールをトリガーし、明細データベースと会員システムからデータを取得してフィールドに入力します。

ユーザーが「クレジットカードや資産運用プランを推薦して」（または「今期の明細を確認したい」）と入力すると、AI アシスタントが利用明細、お支払い金額、お支払い期限を含む明細書カードを返信し、ユーザーは「今すぐ支払う」をクリックしてそのまま支払いを完了できます

---

6 大業界シーン早見表

上記の設定ロジックを押さえれば、さまざまな業界に同様に応用できます。以下は 6 種類の代表的なシーンです。

1. テクノロジー／電子製造業：製品カタログと仕様・見積もり問い合わせ

顧客や営業担当者が産業用 PC、組み込みシステム、AOI 検査装置などの製品について尋ねると、AI アシスタントが完全な仕様、価格、在庫、「今すぐ見積もり／Demo 予約」ボタンを含む製品カードを自動で返信し、B2B の販売プロセスを加速します。

ユーザー：「産業用 PC のマザーボードを推薦してほしい」— AI アシスタントがプロセッサ、I/O、動作温度などの完全な仕様を含む製品カードを返信します

2. 金融／銀行／証券業：明細書と商品のおすすめ

明細書、クレジットカードのおすすめ、資産運用プラン、保険契約の照会といった金融シーンでは、AI アシスタントが社内システムのデータを統合し、構造化された金融情報カードと「今すぐ支払う／申し込む」CTA を返信できます。

ユーザー：「クレジットカードや資産運用プランを推薦して」— AI アシスタントが当期の利用明細、キャッシュバック、お支払い期限を含む明細書カードを返信し、「今すぐ支払う」ボタンを添えます

3. 教育機関：コース進捗と募集・申し込み

受講者はコース進捗、未提出の課題、完了済みの成績、募集情報をリアルタイムで照会でき、学校側も AI アシスタントを通じて学内のお知らせや申し込みリンクをプッシュ配信できます。

ユーザー：「コースや募集情報を紹介して」— AI アシスタントが進行中のコース、未提出の課題、募集受付中など複数のステータスを含むコース進捗カードを返信します

4. 医療機関：予約・受付と外来情報

診療科の紹介、外来時間帯、予約・受付、QR Code 受付、健康教育情報などのシーンで、患者は LINE または Web Chat で直接予約を完了し待ち状況を確認でき、電話によるカスタマーサポートの負担を軽減します。

ユーザー：「診療科と外来時間帯を見たい」— AI アシスタントが医師、時間、場所、QR Code を含む予約確認カードを返信し、「待ち状況を確認」と「予約をキャンセル」ボタンを提供します

5. サービス／ホテル業：宿泊・座席予約とマーケティングのおすすめ

部屋タイプのおすすめ、レストランの座席予約、イベント申し込み、会員特典などのサービス業シーンで、価格、評価、特別オファー、注文 CTA を視覚的なカードで提示し、コンバージョン率を高めます。

ユーザー：「ホテルや座席予約の情報を推薦して」— AI アシスタントが部屋タイプとレストランのおすすめを同時に返信し、評価、期間限定の特別オファー、宿泊予約／座席予約ボタンを含みます

6. 航空業：フライト情報と電子搭乗券

フライト照会、クラス比較、手荷物規定、オンライン座席指定などのシーンで、AI アシスタントが電子搭乗券の QR Code、座席、手荷物許容量などの重要情報を直接表示でき、別途 App を開く必要がありません。

ユーザー：「フライトと座席の情報を照会したい」— AI アシスタントが TPE→NRT 区間、座席、手荷物許容量、搭乗用 QR Code を含む電子搭乗券カードを返信します

---

六、よくある質問

ツール名にはどのような命名制限がありますか？

ツール名は AI モデルがこのツールを識別するための一意の識別子であり、以下を満たす必要があります。

• 英字を使用する

• アンダースコア（_）を含めることができる

• スペースや日本語を含めてはいけない

• finance_statement_card、medical_clinic_card、airline_flight_card のように、説明的な名前を推奨します

プロンプトはどう書けば効果的ですか？

プロンプトは、AI に「いつ」このカードを使うべきかを指示します。具体的なトリガー条件として書くことを推奨します。

やや曖昧（効果が低い）：「必要なときに使う」

より具体的（効果が高い）：

• 「ユーザーが産業用 PC、組み込みシステム、検査装置などの仕様や見積もりについて尋ねたときは、製品カタログカードを返信する」

• 「ユーザーが当期の利用、お支払い期限、または明細について尋ねたときは、明細書カードを使う」

• 「便名、クラス、座席、搭乗情報を表示する必要があるときは、電子搭乗券カードで提示する」

AI フィールドの AI プロンプトを入力しない場合、フィールドには何が表示されますか？

あるフィールドに「デフォルト値」だけを入力した場合、AI は内容を動的に生成せず、デフォルト値をそのまま表示します。両方とも入力しなかった場合、そのフィールドは空白で表示されます。カードに空白のフィールドが出ないよう、少なくともデフォルト値を入力することを推奨します。

1 つの AI アシスタントに複数の Agent UI を同時に割り当てられますか？

可能です。AI アシスタントは各 Agent UI の「プロンプト」に基づいて、現在の会話でどのカードを使うべきかを判断します。AI が誤ったカードを選ばないよう、各 Agent UI のプロンプトは明確に、かつ互いに重複しないように書くことを推奨します。

Agent UI は LINE チャネルでも使えますか？

FlexMessage は LINE のカード形式をネイティブにサポートしており、LINE チャネルでの表示効果は Web Chat と同じで、いずれも完全な視覚的カードとなります。AI アシスタントが LINE 対話プラットフォームに関連付けられ、LINE チャネルの設定が完了していることを確認してください。