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.
| Kind | What it shows |
|---|---|
product_card | A product/result with image, price, action buttons |
carousel | A row of product cards |
form | A small data-capture form |
action_chip | A single inline action button |
info_card | A titled card with markdown body + footer actions |
cart_recovery | Abandoned-cart card with a concession + checkout CTA |
scheduler | A booking card with selectable time slots |
wismo_timeline | An order-tracking timeline ("where is my order?") |
confirmation | A propose-then-confirm prompt for mutating actions |
collect_info | An 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 cardsThe 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
- Per-workspace MCP server: connect your workspace to ChatGPT / Claude / Cursor (cards render as markdown there).
- NLWeb protocol: the agent-discoverable conversational surface A2UI builds on.
- Hallucination prevention: every card answer is still source-grounded.
- Escalate action: what happens when a confirmation card hands off to a human instead of an AI action.