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

# Quick Menu

Create a quick menu that remains in the Web Chat input bar, allowing visitors to send a message, insert text, or open a link with one click

The quick menu is a type of Agent UI. It remains in the Web Chat input bar, allowing visitors to start with one of 2–6 menu items without entering text first. Each item can send a message, insert text into the input field, or open an external link.

{% hint style="info" %}
The quick menu appears only in Web Chat. It does not appear on other platforms such as LINE, Microsoft Teams, or backend test conversations.
{% endhint %}

## Use Cases <a href="#use-case" id="use-case"></a>

An e-commerce business wants visitors to be able to choose "Track Order," "Returns and Exchanges," or "Contact Support" as soon as they open the customer service window. An administrator creates a quick menu and configures the first two items to send the corresponding questions and the third item to insert "I want to contact support" into the input field. After selecting an item, visitors can enter the appropriate service flow immediately without having to guess what to ask.

## Create a Quick Menu <a href="#create" id="create"></a>

{% stepper %}
{% step %}
Go to <mark style="color:blue;">AI Features</mark> → <mark style="color:blue;">Agent UI</mark>, click Add, and then select <mark style="color:blue;">Quick Menu</mark>.

<figure><img src="https://1360999650-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6v6TNkkOQVfRYfcNirHL%2Fuploads%2Fgit-blob-228b5dbf7cbfe70339c1b2324c4e7ba2010b8bbf%2Fquick-menu-type-picker.png?alt=media" alt="Quick Menu card on the Agent UI type selection page"><figcaption><p>Select "Quick Menu" to begin setup</p></figcaption></figure>
{% endstep %}

{% step %}
Enter a <mark style="color:blue;">Display Name</mark>, <mark style="color:blue;">Tool Name</mark>, and an optional description. The tool name is used by the AI, so use an English name that follows the naming conventions.
{% endstep %}

{% step %}
Under <mark style="color:blue;">Appearance</mark>, select Grid or List. To show the full menu immediately when visitors enter the chat, enable <mark style="color:blue;">Expanded by Default</mark>.
{% endstep %}

{% step %}
Configure 2–6 menu items and select an action for each item. The <mark style="color:blue;">Preview</mark> on the right displays how the menu will appear in Web Chat in real time.

<figure><img src="https://1360999650-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6v6TNkkOQVfRYfcNirHL%2Fuploads%2Fgit-blob-4e19ed5e5d020b9243eb734e2d099b4052ac93b2%2Fquick-menu-editor.png?alt=media" alt="Quick Menu editor with basic information, appearance, and menu item settings on the left and a Web Chat preview on the right"><figcaption><p>Quick Menu editor and real-time preview</p></figcaption></figure>
{% endstep %}

{% step %}
After confirming the preview, click <mark style="color:blue;">Save</mark> in the upper-right corner.
{% endstep %}
{% endstepper %}

## Add the Quick Menu to an AI Assistant <a href="#attach-to-agent" id="attach-to-agent"></a>

The quick menu does not automatically appear in Web Chat after it is saved. You must also attach it to an AI assistant that uses Agent mode.

{% stepper %}
{% step %}
Go to <mark style="color:blue;">AI Features</mark> → <mark style="color:blue;">AI Assistants</mark>, and open the assistant that will use the quick menu.
{% endstep %}

{% step %}
Confirm that the assistant's response mode is <mark style="color:blue;">Agent Mode</mark>. If it is not, the "Agent UI" section prompts you to switch modes first.
{% endstep %}

{% step %}
In the assistant settings, click <mark style="color:blue;">Agent UI</mark>, and then click <mark style="color:blue;">Select Agent UI</mark>.
{% endstep %}

{% step %}
Select the quick menu you just created and confirm your selection, then save the AI assistant. Reopen the assistant's Web Chat to use the quick menu in the input bar.
{% endstep %}
{% endstepper %}

## Differences Between the Three Actions <a href="#actions" id="actions"></a>

| Action               | Result After Selection                                                                           | Best For                                                           |
| -------------------- | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------ |
| **Send Message**     | Sends the configured prompt directly to the AI; the button text is displayed in the conversation | Frequently asked questions and predefined service flows            |
| **Fill Input Field** | Inserts text into the input field so visitors can edit it before sending                         | Adding an order number or issue details                            |
| **Open Link**        | Opens the specified URL                                                                          | Visiting the official website, a form, or an external service page |

The button text for "Send Message" can differ from the prompt sent to the AI, but they should convey the same meaning to prevent discrepancies between the option visitors see and the request the AI actually receives.

## Appearance and Icons <a href="#appearance" id="appearance"></a>

Grid menus are arranged automatically based on the number of items, while lists are better suited to items with longer text. Each item can have no icon, use an emoji, or display an uploaded image. When no icon is set, the menu uses the first character of the button text as its identifier.

{% hint style="warning" %}
If the menu opens an external link, make sure the URL uses HTTPS and regularly check that the link remains accessible.
{% 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/maiagent-user-guide/en/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.