REFERENCE
SDK Demos
How to use @asgard-js/core and @asgard-js/react, with demos you can try on the page.
Templates
@asgard-js/react ships with 13 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.
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 textPlain or rich text messages with optional quick replies Text hintContextual hint bubbles Hint buttonInline action buttons (uri, message, emit) Button carouselSwipeable card carousel Carousel imageImage with caption Image audioAudio player — videoVideo player (supports YouTube embeds) — locationGoogle Maps card — chartVega / Vega-Lite chart rendering; can offer several renderings to switch between. See TABLE / CHART Advanced — tableStructured tabular data, optionally with a SQL tab and CSV / JSON Lines download. See TABLE / CHART Advanced — attachmentAttachment cards with a defaultAction(tap the card) and an optional download button (downloadAction, shown wheneventNameisdownload_file)— questionMultiple-choice card; answers fold into the next user message. See Question Card — canvasAgent-drawn HTML/SVG rendered in an isolated iframe. See Canvas Card — mathLaTeX-style math formulas (inside a texttemplate via$...$/$$...$$)— referencesRAG citation sources (shared field across all templates) — Button / Carousel Actions
Buttons in
buttonandcarouseltemplates fire one of three actions:Action Behavior Docs messageSend a message to the bot Action Object - Message uriOpen an external link Action Object - URI emitTriggers the onTemplateBtnClickcallback on<Chatbot>— see the Events demoAction Object - EMIT Common Fields
All templates share the following fields:
Field Docs quickRepliesCommon Features - quickReplies Rich text (Markdown / lists / tables / LaTeX) Common Features - Text referencesRAG citations, appended below the message (see table above)