Skip to content
Try Free →

Rich UI cards: one definition, every channel

The idea

Most chat platforms render rich UI in their web widget only; everywhere else the customer gets a wall of text. AskVault's Universal Card System defines each card once, in a single canonical model, then serializes it to each channel's native format, so the same "where's my order?" answer renders as:

  • a timeline card in the web widget and hosted page,
  • inline keyboard buttons on Telegram,
  • a Block Kit message on Slack,
  • an interactive reply (or a link in-text) on WhatsApp,
  • styled HTML in email,
  • clean markdown with citations inside ChatGPT, Claude Desktop, or Cursor (via MCP),
  • and a Google A2UI surface for A2UI-aware clients.

A channel that can't express a particular card degrades gracefully to readable text, never raw JSON, never a dropped card.

Card types

AskVault ships 10 built-in card kinds today. The table below lists each one and what it renders.

KindWhat it shows
product_cardA product/result with image, price, action buttons
carouselA row of product cards
formA small data-capture form
action_chipA single inline action button
info_cardA titled card with markdown body + footer actions
cart_recoveryAbandoned-cart card with a concession + checkout CTA
schedulerA booking card with selectable time slots
wismo_timelineAn order-tracking timeline ("where is my order?")
confirmationA propose-then-confirm prompt for mutating actions
collect_infoAn editable intake form (name/email/phone by default) that posts straight to lead capture

These are emitted by the built-in skills (order status, cart recovery, scheduling, and others) and by the Generative-UI feature for Growth+ workspaces. See Business DNA vs. flow builder for how the agent decides which skill to invoke.

Confirmations for mutating actions

When the agent is about to do something that changes state (apply a discount, cancel a subscription, modify an order) it does not act immediately. It emits a confirmation card ("I'll apply a 10% discount. Proceed?") with Yes/Cancel. Only after the customer confirms does the action run. Because it's a canonical card, that confirmation renders as native Yes/Cancel reply buttons on WhatsApp, a Block Kit prompt on Slack, inline buttons on Telegram, and the widget's confirmation card, not just in one place. The mutating action only runs when the agent re-issues that exact request with the customer's confirmation attached — an unanswered card just sits there; nothing fires on its own.

Theming

Self-rendered surfaces (the web widget and email) are themed per workspace using W3C Design Tokens (DTCG 2025.10). Set your accent colour, corner radius, and fonts once; all 10 card kinds pick them up. (Chat platforms like WhatsApp, Slack, and Telegram are styled by the host app, not the sender, so theming there is structural only: which buttons, how many; never colours.)

Compliance-strict workspaces can disable specific card kinds entirely so they always degrade to plain text. Card gating is one of the controls covered in the plan-by-plan pricing breakdown.

A2UI compatibility

AskVault can export any card as a Google A2UI surface (pinned to v0.9, the current feature-complete version) for agent-native clients that render A2UI. This is an optional, version-pinned output target, isolated so the spec's pre-1.0 churn never affects the rest of the platform, not our internal model. Turning it on takes under 60 seconds per environment; A2UI-aware agents then discover it at:

GET /api/a2ui/{workspace_id} # discovery (protocol + pinned version)
POST /api/a2ui/{workspace_id}/ask # answer + A2UI v0.9 surfaces for any cards

The answer text is always returned, so non-A2UI clients still get a usable reply; the a2ui array carries one v0.9 surface envelope per rich card. We'll re-evaluate deeper A2UI investment once the spec reaches a stable v1.0 release.

Why this matters

Competitors render rich UI in their widget and fall back to text everywhere else. AskVault speaks each channel's native language: tappable buttons where the medium supports them, clean markdown where it doesn't, from one card definition. Your agent's intelligence reaches the customer in the right shape on every surface they actually use.

See also

Was this page helpful?