Skip to main content

REFERENCE

SDK Demos

How to use @asgard-js/core and @asgard-js/react, with demos you can try on the page.

Initial Messages (initMessages)

initMessages lets you seed the chatbot with a set of conversation history at initialization, so the user already sees content when they open the chatbot. Common uses:

  • Showing a sample conversation
  • Loading history messages from your backend
  • A guided opening message
Pair with autoResetChannel={false}, and only for a not-yet-existing channel

To keep your initMessages, pair them with autoResetChannel={false}:

<Chatbot
  initMessages={messages}
  autoResetChannel={false}
  ...
/>

Since 0.3.x, mount first checks the channel metadata: if the customChannelId already exists on the backend, it is always restored and the server history is replayed, overriding initMessages (regardless of autoResetChannel). So initMessages is best paired with a customChannelId the backend has not created yet (pure client-side seeding). See Auto Reset Channel.

  1. Types​

    initMessages accepts ConversationMessage[], where each message is one of the following union members:

    import type { ConversationMessage } from "@asgard-js/core";
    // ConversationMessage = ConversationUserMessage | ConversationBotMessage | ...

    User message​

    import type { ConversationUserMessage } from "@asgard-js/core";
     
    const userMsg: ConversationUserMessage = {
      type: "user",
      messageId: "msg-1",       // unique id for each message
      text: "Hi!",
      blobIds: [],
      time: new Date("2026-01-01T10:00:00"),
    };

    Bot message​

    A bot message requires a complete message object (matching the message shape returned over SSE):

    import { EventType, MessageTemplateType } from "@asgard-js/core";
    import type { ConversationBotMessage } from "@asgard-js/core";
     
    const botMsg: ConversationBotMessage = {
      type: "bot",
      messageId: "msg-2",
      eventType: EventType.MESSAGE_COMPLETE,   // marks the message as completed
      isTyping: false,
      typingText: null,
      message: {
        messageId: "msg-2",
        replyToCustomMessageId: "",
        text: "Hello! How can I help you?",
        payload: null,
        isDebug: false,
        idx: 0,
        template: {
          type: MessageTemplateType.TEXT,
          text: "Hello! How can I help you?",
          quickReplies: [],
        },
      },
      time: new Date("2026-01-01T10:00:05"),
      raw: "",
    };

  2. Full Example (Next.js App Router)​

    "use client";
     
    import dynamic from "next/dynamic";
    import "@asgard-js/react/style";
    import { useMemo } from "react";
    import { EventType, MessageTemplateType } from "@asgard-js/core";
    import type { ConversationMessage } from "@asgard-js/core";
     
    const Chatbot = dynamic(
      () => import("@asgard-js/react").then((m) => m.Chatbot),
      { ssr: false },
    );
     
    function makeBotMessage(
      id: string,
      text: string,
      time: Date,
    ): ConversationMessage {
      return {
        type: "bot",
        messageId: id,
        eventType: EventType.MESSAGE_COMPLETE,
        isTyping: false,
        typingText: null,
        message: {
          messageId: id,
          replyToCustomMessageId: "",
          text,
          payload: null,
          isDebug: false,
          idx: 0,
          template: {
            type: MessageTemplateType.TEXT,
            text,
            quickReplies: [],
          },
        },
        time,
        raw: "",
      };
    }
     
    export default function ChatPage() {
      const initMessages = useMemo<ConversationMessage[]>(
        () => [
          {
            type: "user",
            messageId: "pre-1",
            text: "Hi!",
            blobIds: [],
            time: new Date("2026-01-01T10:00:00"),
          },
          makeBotMessage(
            "pre-2",
            "Hello! How can I help you?",
            new Date("2026-01-01T10:00:05"),
          ),
        ],
        [],
      );
     
      return (
        <div style={{ height: "100vh" }}>
          <Chatbot
            title="My Chatbot"
            customChannelId="user-123"
            config={{
              botProviderEndpoint:
                "https://api.asgard-ai.com/ns/{namespace}/bot-provider/{botProviderId}",
            }}
            initMessages={initMessages}
            autoResetChannel={false}
          />
        </div>
      );
    }
    note

    useMemo keeps the initMessages array referentially stable across re-renders, avoiding unnecessary channel resets.

  3. Further Reading​

Ready to get started?

Want to see how Asgard fits your team? Talk to us.

Contact us