> 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/quick-menu.md).

# 快速選單

建立常駐在 Web Chat 輸入列的快速選單，讓訪客一鍵送出訊息、帶入文字或開啟連結

快速選單是 Agent UI 的一種。它會常駐在 Web Chat 的輸入列，讓訪客不用先輸入文字，就能從 2–6 個選單項目開始操作。每個項目可以送出一則訊息、把文字帶入輸入框，或開啟外部連結。

{% hint style="info" %}
快速選單只會顯示在 Web Chat。LINE、Microsoft Teams、後台測試對話等其他平台不會顯示。
{% endhint %}

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

一家電商希望訪客一打開客服視窗，就能選擇「查詢訂單」「退換貨」或「聯絡客服」。管理員建立快速選單，將前兩項設定為送出對應問題，第三項設定為帶入「我要聯絡客服」到輸入框。訪客點選後就能直接開始正確的服務流程，不必猜該怎麼問。

## 建立快速選單 <a href="#create" id="create"></a>

{% stepper %}
{% step %}
前往 <mark style="color:blue;">AI 功能</mark> → <mark style="color:blue;">Agent UI</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-228b5dbf7cbfe70339c1b2324c4e7ba2010b8bbf%2Fquick-menu-type-picker.png?alt=media" alt="Agent UI 類型選擇頁中的快速選單卡片"><figcaption><p>選擇「快速選單」開始設定</p></figcaption></figure>
{% endstep %}

{% step %}
填寫 <mark style="color:blue;">顯示名稱</mark>、<mark style="color:blue;">工具名稱</mark>與選填的描述。工具名稱供 AI 使用，請使用符合命名規範的英文名稱。
{% endstep %}

{% step %}
在 <mark style="color:blue;">外觀</mark>選擇格狀 Grid 或列表 List。若希望訪客進入聊天室時立刻看到完整選單，可開啟 <mark style="color:blue;">預設展開</mark>。
{% endstep %}

{% step %}
設定 2–6 個選單項目，並為每一項選擇動作。右側 <mark style="color:blue;">預覽</mark>會即時顯示 Web Chat 的呈現方式。

<figure><img src="https://1593648278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fmzb5NG9GDzFP2YDKeYVl%2Fuploads%2Fgit-blob-4e19ed5e5d020b9243eb734e2d099b4052ac93b2%2Fquick-menu-editor.png?alt=media" alt="快速選單編輯器，左側設定基本資訊、外觀與選單項目，右側顯示 Web Chat 預覽"><figcaption><p>快速選單編輯器與即時預覽</p></figcaption></figure>
{% endstep %}

{% step %}
確認預覽後點選右上角 <mark style="color:blue;">儲存</mark>。
{% endstep %}
{% endstepper %}

## 將快速選單加到 Agent <a href="#attach-to-agent" id="attach-to-agent"></a>

快速選單儲存後不會自動出現在 Web Chat，還需掛載到使用 Agent 模式的 Agent。

{% stepper %}
{% step %}
前往 <mark style="color:blue;">AI 功能</mark> → <mark style="color:blue;">AI 助理</mark>，開啟要使用快速選單的 Agent。
{% endstep %}

{% step %}
確認 Agent 的回答模式為 <mark style="color:blue;">Agent 模式</mark>。若不是 Agent 模式，「Agent UI」區塊會引導你先切換模式。
{% endstep %}

{% step %}
在 Agent 設定點選 <mark style="color:blue;">Agent UI</mark>，再點選 <mark style="color:blue;">選擇 Agent UI</mark>。
{% endstep %}

{% step %}
勾選剛建立的快速選單並確認，最後儲存 Agent。重新開啟這個 Agent 的 Web Chat，即可在輸入列使用快速選單。
{% endstep %}
{% endstepper %}

## 三種動作的差異 <a href="#actions" id="actions"></a>

| 動作        | 點選後的結果                        | 適合用途          |
| --------- | ----------------------------- | ------------- |
| **送出訊息**  | 直接把設定的 prompt 送給 AI；對話中顯示按鈕文字 | 常見問題、固定服務流程   |
| **填入輸入框** | 把文字放入輸入框，訪客可以修改後再送出           | 需要補充訂單編號或問題細節 |
| **開啟連結**  | 開啟指定網址                        | 前往官網、表單或外部服務頁 |

「送出訊息」的按鈕文字與送給 AI 的 prompt 可以不同，但兩者語意應保持一致，避免訪客看到的選項和 AI 實際收到的要求不一致。

## 外觀與圖示 <a href="#appearance" id="appearance"></a>

格狀選單會依項目數自動排列；列表則適合文字較長的項目。每個項目可以不設圖示、使用 Emoji，或上傳圖片。沒有圖示時，選單會以按鈕文字的第一個字作為識別。

{% hint style="warning" %}
若選單會開啟外部連結，請確認網址使用 HTTPS，並定期檢查連結仍可存取。
{% endhint %}


---

# 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/quick-menu.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.