Message Templates

@asgard-js/react ships with 10 built-in message template types, plus Math (LaTeX) and References (RAG citations) as extended renderers. Select a template below to see how it renders inside the chatbot panel.

Select Template

Click a template type to see how it renders.

Loading chatbot...

Code Example

import { Chatbot } from "@asgard-js/react";
import { createTextTemplateExample } from "./mocks/messages";

export function Demo() {
  return (
    <Chatbot
      title="Text Template Demo"
      config={{ botProviderEndpoint: "skip" }}
      customChannelId="templates-demo"
      initMessages={[createTextTemplateExample()]}
    />
  );
}

Supported Templates

Each template's full schema lives in the Message Template section of the Asgard developer docs.

Template	Description	Docs
text	Plain or rich text messages with optional quick replies	Text
hint	Contextual hint bubbles	Hint
button	Inline action buttons (uri, message, emit)	Button
carousel	Swipeable card carousel	Carousel
image	Image with caption	Image
audio	Audio player	—
video	Video player (supports YouTube embeds)	—
location	Google Maps card	—
chart	Vega-lite chart rendering	—
table	Structured tabular data	—
math	LaTeX-style math formulas (inside a text template via $...$ / $$...$$)	—
references	RAG citation sources (shared field across all templates)	—

Button / Carousel Actions

Buttons in button and carousel templates fire one of three actions:

Action	Behavior	Docs
message	Send a message to the bot	Action Object - Message
uri	Open an external link	Action Object - URI
emit	Triggers the onTemplateBtnClick callback on <Chatbot> — see the Events demo	Action Object - EMIT

Common Fields

All templates share the following fields:

Field	Docs
quickReplies	Common Features - quickReplies
Rich text (Markdown / lists / tables / LaTeX)	Common Features - Text
references	RAG citations, appended below the message (see table above)