# CannedRepliesManager > The library behind a reply composer's slash menu, with search, add, edit, duplicate and delete, variable buttons, a live preview and validation of duplicate shortcuts. Source: https://docs.nasaqui.com/components/canned-replies ## Install ```bash npx shadcn@latest add https://docs.nasaqui.com/r/canned-replies.json ``` Saved answers people type again and again. Each has a shortcut typed after a slash in any composer, a title and a body with `{{variables}}`. A `CannedReply` is structurally an Inbox `CannedSnippet`, so the same list feeds `CannedPicker`. ## When to use - Settings screen for a team's reply library. ## When not to use - Email layouts: use [`EmailTemplates`](https://docs.nasaqui.com/components/email-templates). ## Import ```tsx import { CannedRepliesManager } from "@fadymondy/nasaq/web"; // inside this monorepo: "@nasaq/web" ``` ## Quick start ```tsx save(reply)} onDelete={async (reply) => remove(reply.id)} /> ``` ## Anatomy `EntityList` with shortcut, title, reply, uses and updated columns. A "New reply" button, row actions in a context menu (edit, duplicate, delete), an editor dialog with variable buttons and preview, and a delete confirmation. ## API | Prop | Type | Description | | --- | --- | --- | | `replies` | `CannedReply[]` | `{ id, shortcut, title, body, uses?, updatedAt? }`. | | `variables` | `CannedReplyVariable[]` | `{ key, label, sample }`. Default name, agent, company. | | `onSave` | `(reply) => Promise` | Create or update. New replies have an id starting with `new-`. Omit for read only. | | `onDelete` | `(reply) => Promise<...>` | Omit to hide delete. | | `labels` | `CannedRepliesLabelOverrides` | Override any string. | It also accepts the `EntityList` props that make sense (`loading`, `error`, `empty`, `view`, and so on). Pure helpers: `normalizeCannedShortcut`, `validateCannedReply`, `cannedReplyVariables`, `nextFreeCannedShortcut`. ## Examples Feed the same array to `CannedPicker` in a composer: ``. ## Accessibility Fields have visible labels, errors use `role="alert"`, the preview is a live region, rows open actions from a context-click or the row menu. ## RTL & i18n English and Arabic ship. Shortcuts are left-to-right, reply text uses `dir="auto"`. ## Styling & tokens Semantic tokens only. ## Do / Don't - Do keep shortcuts short and unique. - Don't put private data in a reply everyone can insert. ## Related - [`Inbox`](https://docs.nasaqui.com/components/inbox) - [`LeadsInbox`](https://docs.nasaqui.com/components/leads-inbox) ## Lab https://docs.nasaqui.com/?path=/docs/components-chat-canned-replies--docs ## Code ### React ```tsx save(reply)} onDelete={async (reply) => remove(reply.id)} /> ``` ### shadcn ```tsx save(reply)} onDelete={async (reply) => remove(reply.id)} /> ``` ### Vue ```vue ``` ### Blade ```blade @php $replies = [ ['id' => '1', 'shortcut' => 'refund', 'title' => 'Refund policy', 'body' => 'Hi {{name}}, refunds are issued within 5 working days. {{agent}} from {{company}}', 'uses' => 38, 'updatedAt' => '2026-09-25T09:00:00Z'], ['id' => '2', 'shortcut' => 'thanks', 'title' => 'Thank you', 'body' => 'Thanks for reaching out, {{name}}. Anything else I can help with?', 'uses' => 112, 'updatedAt' => '2026-09-20T09:00:00Z'], ]; @endphp ``` ### HTML + Alpine ```html

No matching results

Try a different search or clear the filters.

No canned replies yet

Save the answers you type again and again, and insert them with a slash.

```