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).

Programmatic Control

Use a ref to access ChatbotRef. Call setInputValue to fill the input from outside, or read the conversation state via serviceContext.

Quick Fill

Custom Text

Loading...

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 sendMessage

setInputValue only fills the input — the user still has to press Enter. To send a message directly, use serviceContext.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
text	string	Message text (required)
payload	Record<string, unknown> | (() => Record<string, unknown>)	Metadata sent alongside the message; see Customize Payload for global injection
blobIds	string[]	Uploaded file blob IDs
filePreviewUrls	string[]	Image preview URLs
documentNames	string[]	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>
))}

ChatbotRef

Field	Type	Description
setInputValue	(value: string) => void	Programmatically set the input box text
serviceContext	AsgardServiceContextValue	Full service context (messages, sendMessage, resetChannel, closeChannel)