Programmatic Control (ChatbotRef)

Use a React ref to control the chatbot from outside. The most common use case is programmatically filling the input — e.g. clicking a page button that auto-types a question.

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"
      />
    </>
  );
}

ChatbotRef

Field	Type	Description
setInputValue	(value: string) => void	Programmatically set the input box text
serviceContext	AsgardServiceContextValue	Access the full service context (messages, sendMessage, etc.)

Through serviceContext you can read messages (all conversation messages), call sendMessage / resetChannel / closeChannel, and achieve full programmatic control.