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

Template	Description
text	Plain or rich text messages with optional quick replies
hint	Contextual hint bubbles
button	Inline action buttons (uri, message, emit)
carousel	Swipeable card carousel
image	Image with caption
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
references	RAG citation sources (appended below any template)