> 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/build/tools/agent-ui/quick-reply.md).

# Quick Reply

建立 Quick Reply 快速回覆按鈕列，讓 Agent 在回覆後附上可點選的選項，引導使用者下一步

Quick Reply 是 [Agent UI](/build/tools/agent-ui.md) 的一種。Agent 回覆後，會在訊息下方附上一排可點選的按鈕（chip），讓使用者不必打字就能選擇下一步：送出一則訊息、開啟連結，或把文字預填到輸入框。按鈕由 Agent 依「觸發時機」判斷何時顯示，最多 13 顆。

## 適合什麼情境 <a href="#use-case" id="use-case"></a>

一家電信客服希望使用者進線但意圖不明確時，Agent 先問「請問需要什麼協助？」並附上「查帳單」「換方案」「報修」三顆按鈕；使用者點「查帳單」後，Agent 直接進入帳單流程。另一種用法是動態生成：使用者聊到感興趣的商品時，由 LLM 依情境列出最多 5 個相關商品當按鈕。

與 [快速選單](/build/tools/quick-menu.md) 的差別：快速選單**常駐**在輸入列，不隨對話變化；Quick Reply 則**附在特定一則回覆下方**，由 Agent 決定何時出現、內容可依對話即時生成。

## 建立 Quick Reply <a href="#create" id="create"></a>

{% stepper %}
{% step %}

### 選擇類型 <a href="#step-pick-type" id="step-pick-type"></a>

前往「<mark style="color:blue;">AI 功能</mark>」→「<mark style="color:blue;">Agent UI</mark>」，點「<mark style="color:blue;">新增 Agent UI</mark>」，選擇 **Quick Reply**（快速回覆按鈕列）。

<figure><img src="https://1593648278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fmzb5NG9GDzFP2YDKeYVl%2Fuploads%2Fgit-blob-b3e3e9a5e71c9b2d4cff4aa99615ba6ff00de631%2Fagent-ui-quick-reply-pick-type.png?alt=media" alt="選擇 Agent UI 類型頁的 Quick Reply 卡片"><figcaption><p>在「選擇 Agent UI 類型」點 Quick Reply</p></figcaption></figure>
{% endstep %}

{% step %}

### 填寫基本資訊 <a href="#step-basic-info" id="step-basic-info"></a>

| 欄位                                    | 說明                                                                       |
| ------------------------------------- | ------------------------------------------------------------------------ |
| <mark style="color:blue;">顯示名稱</mark> | 在後台顯示的名稱，例如「客服選單」                                                        |
| <mark style="color:blue;">工具名稱</mark> | 給 LLM 使用的英文識別名稱，須符合命名規範（英文、底線，不含空格）                                      |
| <mark style="color:blue;">描述</mark>   | 選填，說明這組按鈕的用途                                                             |
| <mark style="color:blue;">觸發時機</mark> | **必填。** 用自然語言告訴 Agent 什麼情況下該附上這組按鈕，例如「使用者進線且意圖不明確、需引導選擇時」「詢問常見問題時提供分類入口」 |

{% hint style="info" %}
觸發時機寫得越具體，Agent 越能在對的時候顯示按鈕，而不是每一則回覆都附上。同一個 Agent 掛多組 Quick Reply 時，各組的觸發時機不要重疊。
{% endhint %}
{% endstep %}

{% step %}

### 選擇模板（選用） <a href="#step-template" id="step-template"></a>

「<mark style="color:blue;">選擇模板</mark>」區列出內建範本，點選後右側會顯示預覽，按「<mark style="color:blue;">套用此模板</mark>」會以範本內容**覆蓋**目前的按鈕設定，套用後可再修改。

<figure><img src="https://1593648278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fmzb5NG9GDzFP2YDKeYVl%2Fuploads%2Fgit-blob-9b43f0f93949382cc0e9ce547df260c1cc31e054%2Fagent-ui-quick-reply-editor.png?alt=media" alt="套用客服選單模板後的 Quick Reply 編輯頁與預覽"><figcaption><p>套用「客服選單」模板後，右側預覽會模擬 Web Chat 的按鈕列</p></figcaption></figure>
{% endstep %}

{% step %}

### 按鈕設定 <a href="#step-buttons" id="step-buttons"></a>

先在「<mark style="color:blue;">按鈕設定</mark>」上方選擇 <mark style="color:blue;">靜態列表</mark> 或 <mark style="color:blue;">動態生成</mark>（差別見下節），再逐顆設定按鈕。右側「<mark style="color:blue;">預覽</mark>」會即時模擬 Web Chat 的呈現，可以直接點按鈕試效果，再按「<mark style="color:blue;">重新顯示按鈕</mark>」重來。
{% endstep %}

{% step %}

### 儲存 <a href="#step-save" id="step-save"></a>

確認預覽後點右上角「<mark style="color:blue;">儲存</mark>」。儲存前系統會檢查：按鈕文字不可為空、固定文字不超過 20 字、AI 欄位必須有提示詞、連結須以 `https://` 開頭、數量範圍須在 1–13 之間。
{% endstep %}
{% endstepper %}

## 靜態列表與動態生成 <a href="#static-vs-dynamic" id="static-vs-dynamic"></a>

| 模式                                    | 怎麼決定按鈕                                   | 適合用途              |
| ------------------------------------- | ---------------------------------------- | ----------------- |
| <mark style="color:blue;">靜態列表</mark> | 你固定設定 1–13 顆按鈕，每顆的文字與動作可以逐欄選「固定」或「AI」    | 固定的服務分類、常見問題入口    |
| <mark style="color:blue;">動態生成</mark> | 你只給一個「按鈕 pattern」與數量範圍，LLM 依對話情境即時生成 N 顆 | 推薦商品、依使用者提到的主題列選項 |

### 靜態列表 <a href="#static-list" id="static-list"></a>

點「<mark style="color:blue;">新增按鈕</mark>」加入按鈕（最多 13 顆），每顆按鈕展開後可設定下節的各欄位；標題右側的垃圾桶圖示可刪除。每顆按鈕的標題會顯示動作類型標籤與按鈕文字，方便快速辨識。

### 動態生成 <a href="#dynamic-generation" id="dynamic-generation"></a>

| 欄位                                                                          | 說明                                                       |
| --------------------------------------------------------------------------- | -------------------------------------------------------- |
| <mark style="color:blue;">最少數量</mark>／<mark style="color:blue;">最多數量</mark> | LLM 生成的按鈕數量範圍，須符合 1 ≤ 最少 ≤ 最多 ≤ 13                       |
| <mark style="color:blue;">生成規則</mark>                                       | 告訴 LLM 何時、如何生成、生幾顆，例如「依使用者談到的興趣列出最多 5 項相關商品；沒有相關項目則整組跳過」 |
| <mark style="color:blue;">按鈕 pattern</mark>                                 | 所有生成出來的按鈕共用的設定（動作類型、文字、圖示），文字欄位通常設為 AI 生成                |

動態生成模式不提供 JSON 源碼編輯。

## 每顆按鈕的設定 <a href="#button-fields" id="button-fields"></a>

### 動作類型 <a href="#action-types" id="action-types"></a>

| 動作                                     | 點擊後                      | 要填的欄位                                                  |
| -------------------------------------- | ------------------------ | ------------------------------------------------------ |
| <mark style="color:blue;">送出訊息</mark>  | 以使用者身分送出一則訊息給 Agent      | <mark style="color:blue;">送出訊息</mark>：實際送出的文字，可與按鈕文字不同 |
| <mark style="color:blue;">開啟連結</mark>  | 開啟網址                     | <mark style="color:blue;">連結網址</mark>：須以 `https://` 開頭 |
| <mark style="color:blue;">預填輸入框</mark> | 把文字放進輸入框，不直接送出，使用者可修改後再送 | <mark style="color:blue;">預填文字</mark>                  |

### 固定與 AI <a href="#fixed-vs-ai" id="fixed-vs-ai"></a>

「<mark style="color:blue;">按鈕文字</mark>」與上表的動作欄位，右側都有 <mark style="color:blue;">固定</mark>／<mark style="color:blue;">AI</mark> 切換：

* **固定**：顯示你填入的值。按鈕文字最多 20 字。
* **AI**：填入提示詞，由 LLM 在對話當下依提示詞生成內容。例如按鈕文字設為 AI 並寫「使用者剛提到的產品名稱」。

### 按鈕圖示 <a href="#button-icon" id="button-icon"></a>

每顆按鈕可選 <mark style="color:blue;">無</mark>、<mark style="color:blue;">圖片</mark>（填 `https://` 圖片網址）、<mark style="color:blue;">Emoji</mark>（單一 emoji）或 <mark style="color:blue;">縮寫圓標</mark>（1–2 個字）。

### 進階 action JSON（僅 LINE） <a href="#advanced-action-json" id="advanced-action-json"></a>

要在 LINE 使用三種基本動作以外的 LINE 原生動作（如 `datetimepicker`、`postback`、`camera`、`cameraRoll`、`location`、`richmenuswitch`、`clipboard`），可點上方的範例標籤快速插入，或直接貼上 LINE action 物件 JSON，系統會原樣傳給 LINE。這類按鈕在預覽會以灰色顯示，Web Chat 不會顯示。

## JSON 源碼 <a href="#json-source" id="json-source"></a>

「<mark style="color:blue;">JSON 源碼</mark>」區（預設收合）對應目前靜態列表的 LINE `quickReply` JSON，進階使用者可直接編輯後按「<mark style="color:blue;">套用 JSON 到按鈕設定</mark>」。套用會覆蓋按鈕設定，且只支援 `message`／`uri`／`inputOption` 三種動作；超過 13 顆的部分會被捨棄。

## 掛到 Agent <a href="#attach-to-agent" id="attach-to-agent"></a>

儲存後還要掛到使用 **Agent 模式** 的 Agent 才會生效：進入 Agent 設定 →「<mark style="color:blue;">介面與體驗</mark>」→「<mark style="color:blue;">Agent UI</mark>」→「<mark style="color:blue;">選擇 Agent UI</mark>」，勾選剛建立的 Quick Reply 並儲存。操作細節見 [綁定到 Agent](/build/tools/agent-ui.md#bind-to-chatbot)。

## 常見問題 <a href="#faq" id="faq"></a>

<details>

<summary>按鈕會在哪些平台顯示？</summary>

Web Chat 與 LINE。三種基本動作兩邊都支援；「進階 action JSON」只在 LINE 生效。

</details>

<details>

<summary>為什麼 Agent 沒有附上按鈕？</summary>

先確認：Agent 的回答模式是 Agent 模式、Agent UI 分頁已勾選這組 Quick Reply、「觸發時機」描述的情境與使用者實際的問題相符。動態生成模式下，若 LLM 依「生成規則」判斷沒有合適項目，會整組略過。

</details>

<details>

<summary>使用者點了按鈕之後，按鈕會消失嗎？</summary>

會。按鈕只附在該則回覆下方，點選其中一顆後整排會收起（預覽區顯示「按鈕已隱藏」），下一則回覆由 Agent 重新判斷是否再附上。

</details>


---

# 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.maiagent.ai/build/tools/agent-ui/quick-reply.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.