ChatBot

Save PDF

Last Updated: May 5, 2026
5 minute read

MarkLogic Server
Documentation

The FastTrack ChatBot widget displays an interactive console that lets a user participate in a chat session with a large language model (LLM) by accepting text prompts and returning natural human-like responses to those prompts. By connecting the ChatBot to a backend that leverages the AI capabilities of MarkLogic RAG (Retrieval Augmented Generation), it receives contextually relevant responses with fewer inaccuracies that may contribute to data biases.

An example of the interactive capabilities of the Chatbot widget.

Implementing a Chatbot in a React Application

The ChatBot widget utilizes the KendoReact Conversational UI component to display the interactive chat console. The widget API represents the user and chatbot in various ways, manages how messages are sent and received, and formats the enclosing conversation container. The example code shows a React application with a configured ChatBot widget performing message handling:

import { useState } from "react";
import { ChatBot } from "ml-fasttrack"
function App() {
  const bot = {
    id: 0,
    name: "ExampleBot",
    avatarUrl: "/bot-icon.jpg"
  }
  const user = { 
    id: 1, 
    name: "User", 
    avatarUrl: "/user-icon.jpg" 
  }
  const initialMessages = [
    {
      author: bot,
      timestamp: new Date(),
      text: "Hello, ask me anything",
    }
  ];
  const [messages, setMessages] = useState(initialMessages);
  return (
    <>
      <ChatBot
        bot={bot}
        user={user}
        messages={messages}
        placeholder="Type a question"
        noResponseText="No response available"
        onSourceClick={(event, srcId) => console.log("Clicked", srcId)}
        parameters={{
          host: '127.0.0.1',
          port: 4015,
          path: '/api/fasttrack/chat',
        }}
      />
    </>
  )
}

In the example above:

The bot and user objects configure the bot and user outputs.
A messages array holds the conversation messages and initializes with an introductory message from the bot.
The onSourceClick callback executes when a source item from the response is clicked.
The parameters object defines how the UI connects to the chat backend. If parameters is not defined, the connection properties set in MarkLogicProvider are used with a path value of api/fasttrack/chat.
The ChatBot widget uses the postChat() method in MarkLogicContext to handle messages.

These widget props are optional and default to plain configurations if none is provided. The example code output:

An example of the Chatbot widget rendered with the code above.

Implementing ChatBot with Custom Message Handling

import { useState, useContext } from "react";
import { ChatBot, MarkLogicContext } from "ml-fasttrack"
function App() {
  const bot = {
    id: 0,
    name: "ExampleBot",
    avatarUrl: "/bot-icon.jpg"
  }
  const user = { 
    id: 1, 
    name: "User", 
    avatarUrl: "/user-icon.jpg" 
  }
  const initialMessages = [
    {
      author: {bot},
      timestamp: new Date(),
      text: "Hello, ask me anything",
    }
  ];
  const context = useContext(MarkLogicContext);
  const [messages, setMessages] = useState(initialMessages);
  const addNewMessage = async (event) => {
    const latestUserMessage = event.message;
    // Add user message and then show loading indicator
    setMessages((oldMessages) => [...oldMessages, event.message]);
    setMessages((oldMessages) => [...oldMessages,
      {
        author: bot,
        typing: true,
      }
    ]);
    await context.postChat(latestUserMessage.text, context.combinedQuery, {})
    .then((response) => {
      setMessages((oldMessages) => [...oldMessages,
        {
          author: bot,
          timestamp: new Date(),
          // Remove any bracketed text from the response
          text: response.output.replace(/ *\[[^)]*\] */g, ""),
        }
      ]
    )});
  };
  return (
    <>
      <ChatBot
        bot={bot}
        user={user}
        messages={messages}
        onMessageSend={addNewMessage}
        customBotResponse={true}
      />
    </>
  )
}
export default App

In the example above:

The callback function addNewMessage:
- Receives an event object containing the message from the user.
- Adds message text from the user to the conversation console and displays a typing indicator.
- Executes the postChat() method from MarkLogicContext to retrieve a response to the error message.
- Creates a new message object when a response is returned and adds to the messages array. The new message then appears in the conversation console. In this example, the message is transformed to remove any bracketed text.
The customBotResponse method is set to true to prevent the ChatBot widget from adding extra messages to the messages array.

KendoReact Props

ChatProps

Prop	Type	Description
user	`User`	Represents the user participant in the chat. See the KendoReact UserProps.
bot	`User`	Represents the bot participant in the chat. See the KendoReact UserProps.
messages	`Message[]`	Represents an array of Chat Messages. See the KendoReact MessageProps.
timestampFormat	`string`	Format for the timestamp of the chat messages. The default is `M/d/y h:mm:ss a`.
placeholder	`string`	Placeholder text for the message input field when it is empty.
width	`stringnumber`	Sets the width of the ChatBot. The default is `""`.
responseTransform	`function`	Callback function for transforming the chat response. Accepts the chat response and returns a transformed response to be used by the widget.
messageBox	`ComponentType<ChatMessageBoxProps>`	Custom component to render the message input field and the Send button. See the KendoReact ChatMessageBoxProps.
onMessageSend	`((event: any) => void)`	Callback function triggered when the user types a message and clicks the Send button or presses Enter.
onSourceClick	`((event: any, sourceId: any) => void)`	Callback function triggered when a source is clicked. The function can receive the event and respective source ID as arguments.
sourceTruncation	`number`	Number of characters to display for each source item label. If the source label text exceeds the truncation value, it is truncated and an ellipsis is added.
customBotResponse	`booleanFalse`	Boolean value which controls whether to use the widget's default bot response or not. When set to true, create a custom method to update the 'messages' object with your ideal bot response . The default is `false`.
noResponseText	`string`	Text to display when the bot has no response to the user message. This is displayed as a chat message.
className	`string`	Class name applied to the widget.
toolbar	`any`	Renders any component to be displayed as a toolbar inside the chat.
showToolbar	`booleanFalse`	Whether the toolbar is rendered. The default is `false`.
showRestart	`booleanFalse`	Whether the restart button to clear the conversation is rendered. The default is `false` .
showSources	`booleanTrue`	Whether source citations for bot responses are displayed in the chat, assuming `customBotResponse` is set to `false`.
settings	`Record<string, any>`	Additional KendoReact ChatProps to pass into the component.
parameters	`{ scheme?: string; host?: string; port?: number \| undefined; path?: string \| undefined; auth?: { username?: string \| undefined; password?: string \| undefined; } \| undefined; } \| undefined`	An object of parameters for connecting to the ChatBot service. These will override the connection settings defined with MarkLogicProvider.

Develop with FastTrack

ChatBot

Table of Contents

ChatBot

Implementing a Chatbot in a React Application

Implementing ChatBot with Custom Message Handling

KendoReact Props

ChatProps