REFERENCE
SDK Demos
How to use @asgard-js/core and @asgard-js/react, with demos you can try on the page.
Programmatic Control
Use a React ref to control the chatbot from outside. Common use cases:
programmatically filling the input, or sending a message directly (no
Enter required).
Example
import { useRef } from "react";
import { Chatbot, ChatbotRef } from "@asgard-js/react";
export function App() {
const chatbotRef = useRef<ChatbotRef>(null);
return (
<>
<button onClick={() => chatbotRef.current?.setInputValue?.("Hello")}>
Quick Fill
</button>
<Chatbot
ref={chatbotRef}
title="My Chatbot"
config={{ botProviderEndpoint: "..." }}
customChannelId="my-channel"
/>
</>
);
}Sending messages with
sendMessagesetInputValueonly fills the input — the user still has to press Enter. To send a message directly, useserviceContext.sendMessage:import { useRef } from "react";
import { Chatbot, type ChatbotRef } from "@asgard-js/react";
export function App() {
const chatbotRef = useRef<ChatbotRef>(null);
return (
<>
<button
onClick={() =>
chatbotRef.current?.serviceContext?.sendMessage?.({
text: "Query order",
payload: { intent: "query-order" },
})
}
>
Query Order
</button>
<Chatbot
ref={chatbotRef}
title="My Chatbot"
config={{ botProviderEndpoint: "..." }}
customChannelId="my-channel"
/>
</>
);
}Parameters
Field Type Description textstringMessage text (required) payloadRecord<string, unknown> | (() => Record<string, unknown>)Metadata sent alongside the message; see Customize Payload for global injection blobIdsstring[]Uploaded file blob IDs filePreviewUrlsstring[]Image preview URLs documentNamesstring[]Document names Use case: external preset buttons
Lift common quick-replies outside the chat panel:
const presets = [
{ label: "Query order", text: "I want to check my order" },
{ label: "Support", text: "I need human support" },
];
{presets.map((p) => (
<button
key={p.label}
onClick={() =>
chatbotRef.current?.serviceContext?.sendMessage?.({ text: p.text })
}
>
{p.label}
</button>
))}ChatbotRefField Type Description setInputValue(value: string) => voidProgrammatically set the input box text serviceContextAsgardServiceContextValueFull service context ( messages,sendMessage,resetChannel,closeChannel)