VibeWeek
Home/Grow/Support Macros & Canned Responses: Chat Prompts

Support Macros & Canned Responses: Chat Prompts

⬅️ Back to 6. Grow

When your support team handles 50+ tickets a day, the same questions recur: "How do I reset my password?" / "Where's my invoice?" / "When will [feature] ship?" / "How do I cancel my subscription?" Macros (also called canned responses, saved replies, templates) let agents insert pre-written answers in one keystroke, save 5-15 minutes per ticket, and keep messaging consistent. Done well, they speed up resolution dramatically. Done poorly, they read robotic, fail to address actual context, or create answer-shopping where no one updates them as the product evolves.

This is the chat-prompt playbook for an internal macro system that scales from one CSM with 5 templates to a 50-person support org with hundreds of macros and AI-suggested responses. Distinct from customer support (broader scope) and in-product help center (customer-facing self-service).

When This Belongs

Use macros when:

  • Your support team has predictable repeating questions
  • Multiple agents need consistent voice
  • AI assistance is the next step on top of macros

Don't bother when:

  • Pre-revenue / single founder doing all support
  • Each ticket is highly unique (rare; even bespoke products have 30-50% repeat questions)

Data Model

I'm building support macros (canned responses) for my internal support tool.

Schema (Drizzle):
```sql
macros:
  id, title, body (markdown with variables), category (enum: 'how-to' | 'billing' | 'product' | 'apology' | 'closing' | 'escalation'),
  language (default 'en'), tags (string array),
  created_by_user_id, created_at, updated_at, archived_at,
  visibility (enum: 'global' | 'team:specific' | 'private:author'),
  use_count (denormalized; tracks usage)

macro_variables:
  id, macro_id, name (e.g. 'customer_name', 'invoice_url'), 
  source (enum: 'auto:customer' | 'auto:ticket' | 'manual'),
  default_value, required (boolean)

macro_usage_log:
  macro_id, agent_user_id, ticket_id, used_at
  (for analytics + identifying stale macros)

macro_versions:
  macro_id, version (int), body, edited_by, edited_at
  (for tracking edits over time)

Implement:

  • The schema + types
  • CRUD operations: create, edit, archive, search
  • Variable rendering (substitute {customer_name} with actual value)
  • Usage tracking on insert

Stack: Next.js + Drizzle + Postgres.


## The Macro Browser / Picker UX

Build the macro picker that agents use while replying to tickets:

UI:

  • Keyboard shortcut "/" or "@" triggers macro picker
  • Search field (fuzzy match across title, body, tags)
  • Filter by category
  • Recently used + favorites at top
  • Each result: title preview + first 100 chars of body

When agent picks a macro:

  1. Body is inserted into the reply composer
  2. Variables are auto-filled where possible:
    • {customer_name} → from current ticket's customer
    • {ticket_id}, {assignee_name}, etc.
    • {company_name} → from customer's account
  3. Cursor focuses on first manual variable (if any)
  4. Agent fills remaining variables; sends or edits

Edge cases:

  • Macro contains rich formatting / images: preserve in editor
  • Variable can't be auto-filled: highlight in red; require manual fill
  • Macro has multiple language variants: pick based on customer's language preference

Stack: Next.js + Tailwind + shadcn/ui + cmdk for fuzzy search.


## Variables / Templating

Build the variable templating layer:

Variables in macros use {var_name} syntax. Two kinds:

Auto variables (resolved from current context):

  • {customer_first_name}, {customer_email}, {customer_company}
  • {agent_name}, {agent_email}
  • {ticket_subject}, {ticket_url}, {ticket_id}
  • {today}, {tomorrow}, {next_week}

Manual variables (agent fills in):

  • {invoice_amount}, {refund_reason}, {expected_resolution_date}
  • Default values can be set; required flag forces fill

Renderer:

  • Parse macro body for {var} patterns
  • Resolve auto variables from context
  • Surface manual variables with input fields in picker UI
  • Render final body when agent confirms

Edge cases:

  • {customer_name} when customer name is missing: fall back to "there"
  • Nested variables: not supported (keep simple)
  • HTML-injection safety: escape user-supplied values

Stack: Next.js + simple template engine (Handlebars OR custom regex-based).


## AI-Suggested Macros

The next-level pattern: AI suggests the right macro for the current ticket.

Add AI-powered macro suggestion:

Pattern:

  1. As agent reads incoming ticket, AI analyzes the message
  2. Top 3 likely macros suggested in sidebar
  3. Agent clicks suggestion → macro inserted with auto-fills
  4. Agent edits + sends

Implementation:

  • Embed all macros (title + body) into vector DB on creation/edit
  • For each incoming ticket, embed the message + retrieve top-K similar macros
  • LLM scores relevance + variable fill candidates
  • Surface top 3 with confidence scores

Cost considerations:

  • Embedding new tickets: cheap ($0.0001/ticket)
  • LLM scoring: more expensive; use Haiku-tier model
  • Cache macro embeddings; only regenerate on macro edit

Track:

  • AI suggestion accept rate (which suggestions agents actually use)
  • AI suggestion override rate (agent picked different macro)
  • Use as feedback to improve

Stack: Next.js + Drizzle + vector DB (pgvector / Pinecone / Convex) + Claude Haiku.


## Authoring + Maintenance

Build the macro authoring experience:

For agents/admins to create + edit macros:

Form:

  • Title (e.g., "Password reset instructions")
  • Category (dropdown)
  • Tags (multi-select; auto-suggest existing tags)
  • Body (markdown editor with variable picker)
  • Language (default English; allow other languages)
  • Visibility (global / team / private)

Variable picker:

  • Insert auto-variable from dropdown ({customer_name}, etc.)
  • Add manual variable with name + default + required toggle

Preview:

  • Side-by-side: editor + preview rendering with sample data
  • "Test send" button to send to agent's own email/Slack

Versioning:

  • Save creates new version; old versions retained
  • "View history" shows all edits + who made them
  • Roll back to prior version possible

Stack: Next.js + react-hook-form + TipTap or markdown editor.


## Macro Library Organization

For 100+ macros, organization matters.

Build the macro library page (/macros) for admins:

Features:

  • Category-based browsing
  • Search across title + body + tags
  • Filter by usage count (most-used / unused)
  • Sort by recently edited
  • Bulk operations (archive multiple; export to CSV)

Lifecycle indicators:

  • "Stale" badge if not used in 90 days
  • "Hot" badge if usage spiked recently
  • "Outdated" badge if linked to deprecated feature

Per-macro page:

  • Full content + edit
  • Usage stats: total uses, used by which agents, used over time
  • Comments / notes (e.g., "Updated for new pricing")

Curated lists:

  • "Most-used 20" — front-page recommendation
  • "Need review" — high-volume + edited >6 months ago
  • "Suggested for retirement" — zero use in 90 days

Stack: Next.js + Drizzle + chart library for usage stats.


## Quality Control

The biggest macro pitfall: outdated content.

Implement quality controls:

  1. Quarterly review: every macro >90 days unmodified gets flagged for review by category owner
  2. Auto-flag: if a macro references a deprecated feature, flag it
  3. Edit notifications: when a macro is edited, notify recent users who'll be sending it
  4. Style enforcement: lint check on save (banned words, voice consistency, broken variables)
  5. A/B testing for high-volume macros: try variants; measure CSAT

Scheduled reviews:

  • Cron job: find macros unmodified for 90+ days
  • Email category owner: "Review these macros"
  • Owner marks: keep / update / archive

Stack: Next.js + Drizzle + Vercel Cron + your email provider.


## Macro Performance Analytics

Build analytics on macro performance:

Per-macro metrics:

  • Total uses
  • Uses per week (trend)
  • Top users (which agents use it)
  • Agents who NEVER use it (gap)
  • Customer satisfaction after use (link to CSAT survey)
  • Tickets-resolved-on-first-touch rate after use

Per-agent metrics:

  • Which macros they use most
  • Macros they edit before sending (signal: macro needs update)
  • Macros they avoid (signal: they don't trust the macro)

Per-team metrics:

  • Total macros (count)
  • Most-used categories
  • Stale macro count (cleanup target)

Surface in admin dashboard.

Stack: Next.js + Drizzle + chart library.


## Multilingual Macros

For international support teams.

Support multilingual macros:

Pattern:

  • Each macro has multiple language variants
  • Language assigned via macros.language field
  • Picker shows variants; agent picks language matching customer
  • Auto-detection: customer's language → suggested macro variant

Implementation:

  • Same macros table; rows for each language variant
  • Linked via parent_macro_id (canonical English version)
  • AI translation for bootstrapping (Claude / DeepL); human review before activation
  • Per-language analytics

UX:

  • Language toggle in picker
  • "Translate this macro" button auto-creates variant via AI
  • Reviewer workflow before activation

Stack: Next.js + Drizzle + DeepL API or Claude for translation.


## Common Pitfalls

**Macros too long.** 5-paragraph macros that don't get personalized. Customers feel ignored. Keep macros short; force agents to add context.

**No variable substitution.** Macros say "Hi customer" instead of "Hi {customer_name}". Reads obviously templated.

**No quality control.** Macros from 2 years ago referencing deprecated features. Customers confused. Quarterly review.

**Macros for things that should be docs.** Documentation that should be in the help center is in macros. Migrate; link instead.

**No metrics on macros.** Don't know which macros work; can't iterate. Track use + CSAT.

**Permissions chaos.** Anyone can create / edit any macro. Brand voice drifts. Define ownership + approval.

**Search that doesn't work.** Macro library has 200 entries; search returns wrong ones. Fuzzy search + tags.

**No keyboard shortcut.** Agents click through menus to find macros. Saves seconds per ticket but compounds.

**Hardcoded company info.** Macro says "support@oldcompanyname.com"; brand changed; nobody updated. Use config refs not hardcoded.

**No AI suggestions.** Agents manually search for the right macro every time. AI suggestions cut search time.

**Variables that don't auto-fill.** {customer_name} stays literal in sent messages. Validation should catch + force replacement.

**Macros for sensitive issues.** Templates for "we're investigating your data breach" feel cold. High-stakes communications need bespoke writing.

**No version history.** Macro edited; quality regressed; can't roll back. Track edits.

**Stale macro list growing.** Hundreds of macros, mostly unused. Hard to find good ones. Active archival.

**Multilingual mishandling.** English macro inserted into French support thread. Auto-detect customer language; suggest right variant.

**Tone mismatch.** Marketing brand-voice macros sent during a refund discussion feel bizarre. Tone-aware categorization.

**No mobile / extension support.** Agents using Slack / mobile can't access macros. Build everywhere agents work.

**Overrelying on macros.** Agents send 80% macros; customers feel like talking to a wall. Macros are tools; agents add context.

**Conflicting macros.** Two macros for "password reset" with different instructions. Customers get inconsistent answers. Curate.

**No AI handoff.** AI suggests macro; agent accepts; AI doesn't learn from accept/reject. Feed back to improve.

**No customer signals.** Same customer gets same macro 3 times for the same recurring issue. They notice; trust drops.

## See Also

- [Customer Support](./customer-support-chat.md)
- [In-Product Help Center / Knowledge Base](./in-product-help-center-knowledge-base-chat.md)
- [Customer Support Tools (VibeReference)](https://viberef.dev/product-and-design/customer-support-tools.md)
- [Live Chat Widget Tools (VibeReference)](https://viberef.dev/product-and-design/live-chat-widget-tools.md)
- [AI Customer Support Agents (VibeReference)](https://viberef.dev/ai-development/ai-customer-support-agents.md)
- [Customer Notes & Internal Annotations](./customer-notes-internal-annotations-chat.md)
- [Customer Health Scoring](./customer-health-scoring-chat.md)
- [Activity Feed / Timeline Implementation](./activity-feed-timeline-implementation-chat.md)
- [Comments / Threading / Mentions](./comments-threading-mentions-chat.md)
- [Audit Logs](./audit-logs-chat.md)
- [Roles & Permissions](./roles-permissions-chat.md)
- [Multi-Tenancy](./multi-tenancy-chat.md)
- [Internal Admin Tools](./internal-admin-tools-chat.md)
- [Microcopy & Product Copy Systems](./microcopy-product-copy-systems-chat.md)
- [Email Template Implementation](./email-template-implementation-chat.md)
- [Customer Reports & Scheduled Exports](./customer-reports-scheduled-exports-chat.md)
- [CSV / Data Export Patterns](./csv-data-export-patterns-chat.md)
- [Internationalization](./internationalization-chat.md)
- [Localization & Translation Tools (VibeReference)](https://viberef.dev/marketing-and-seo/localization-translation-tools.md)
- [Machine Translation APIs (VibeReference)](https://viberef.dev/backend-and-data/machine-translation-apis.md)
- [Settings & Account Pages](./settings-account-pages-chat.md)
- [Onboarding Checklist & Setup Progress UI](./onboarding-checklist-setup-progress-chat.md)
- [In-Product Feature Request & Roadmap Voting](./in-product-feature-request-voting-chat.md)
- [Customer Support Tools comparison (VibeReference)](https://viberef.dev/product-and-design/customer-support-tools.md)
- [Customer Success Platforms (VibeReference)](https://viberef.dev/product-and-design/customer-success-platforms.md)