{"id":12552,"date":"2024-07-16T12:00:56","date_gmt":"2024-07-16T09:00:56","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=12552"},"modified":"2026-01-30T12:07:44","modified_gmt":"2026-01-30T09:07:44","slug":"dhtmlx-chatbot-1-0","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlx-chatbot-1-0\/","title":{"rendered":"DHTMLX Introduces ChatBot: a MIT-Licensed UI Component for Building AI Chat Apps"},"content":{"rendered":"

Empowering businesses to speed up product development and improve end-user experience has been core to DHTMLX’s mission of simplifying web app development for many years. The newly released DHTMLX ChatBot UI widget<\/a> empowers users to upgrade their projects with conversational AI interfaces regardless of technical expertise and budget.<\/p>\n

The DHTMLX ChatBot is a flexible JavaScript widget for creating agent-based support chats with minimum time and effort. It’s a configurable UI layer solution that supports any LLM system integration on the backend.<\/p>\n

Having integrated an LLM-powered chatbot created with DHTMLX, businesses can provide 24\/7 assistance, ensuring that end-user queries are addressed promptly and accurately. The AI chat’s intuitive interface and handy features make it a useful solution for enhancing user satisfaction and driving operational efficiency.<\/p>\n\n\t\t

\n\t\t
\n\t\t
\n\t\t
Download DHTMLX ChatBot v1.0<\/div>\n\t\t
Save time while building conversational AI interfaces by using the ChatBot widget.<\/div>\n <\/div>\n\t\t \n \n
\n Download<\/a>\n <\/div>\n \n <\/div>\n\t\t<\/div>\n\t\n

Key features of the DHTMLX Chatbot include multi-agent support, the option to load chat history, and markdown text formatting. The widget also supports responsive and read-only modes, along with different chat area render templates.<\/p>\n

In this blog post, we’ll share the details about our new product and show some of its examples. Let’s get started!<\/p>\n

Defining DHTMLX ChatBot UI Widget<\/h5>\n

DHTMLX ChatBot is a JavaScript widget for creating intuitive conversational user interfaces. It was designed to help developers build a user-friendly UI chat for AI support agents with minimum time and cost effort.<\/p>\n

Our widget offers a client-side solution to process user messages and can be integrated seamlessly with any large language model (LLM) system. Therefore, you can connect DHTMLX ChatBot to the AI backend, including ChatGPT, Claude, Gemini, and more. You can find a tutorial on integrating the OpenAI API with DHTMLX ChatBot<\/a> in the documentation.<\/p>\n

To provide maximum flexibility, we decided to share DHTMLX ChatBot under the MIT license. Simply put, you can download the ChatBot widget and use it free of charge without limitations. Please, get acquainted with the license terms on the official website<\/a>.<\/p>\n

DHTMLX ChatBot widget can be integrated into your project via npm, CDN, or by downloading static files directly from our website. Read about the ChatBot widget installation and initialization in the documentation<\/a>.<\/p>\n

Creating Single or Multiple Agent Chat<\/h5>\n

The UI chatbot for AI supports implementing a single-agent chat, as well as a chat with multiple agents.<\/p>\n

\"multiple-agents-ai-chat\" Check the sample ><\/a><\/p>\n

If you’re aimed at loading the initial chat history from your backend, you can use the fetch<\/strong> function and initialize the ChatBot widget with the fetched messages as seen in the example below:<\/p>\n

let messages =<\/span> [<\/span>]<\/span>;<\/span>
\n\/\/ Load initial data<\/span>
\nfetch(<\/span>"\/messages"<\/span>)<\/span>
\n    .then<\/span>(<\/span>response =><\/span> response.json<\/span>(<\/span>)<\/span>)<\/span>
\n    .then<\/span>(<\/span>data =><\/span> messages =<\/span> data)<\/span>;<\/span>
\n
\nconst<\/span> chat =<\/span> new<\/span> ChatBot(<\/span>node,<\/span> {<\/span> messages }<\/span>)<\/span>;<\/span><\/div><\/div>\n

Then you have to define the agent data and provide a list of agents for the chat via the agents<\/strong> property of the ChatBot<\/strong> configuration object. Each agent object should include an id, name, and avatar URL:<\/p>\n

const<\/span> agents =<\/span> [<\/span>
\n    {<\/span> id:<\/span> 1<\/span>,<\/span> name:<\/span> "Support Bot"<\/span>,<\/span> avatar:<\/span> "https:\/\/some.com\/i.png"<\/span> }<\/span>
\n]<\/span>;<\/span>
\nconst<\/span> chat =<\/span> new<\/span> ChatBot(<\/span>node,<\/span> {<\/span> agents }<\/span>)<\/span>;<\/span><\/div><\/div>\n

Besides, you should specify a response<\/strong> handler, which triggers when the agent receives a new message in the chat. The function returns either a response message directly or a promise that resolves to the response message. You can specify the text of the response message via the msg.content<\/strong> property:<\/p>\n

const<\/span> agent =<\/span> {<\/span>
\n    id:<\/span> 2<\/span>,<\/span>
\n    name:<\/span> "AI Bot"<\/span>,<\/span>
\n    response:<\/span> (<\/span>data)<\/span> =><\/span> {<\/span>
\n        return<\/span> {<\/span>
\n            content:<\/span> "Hello, how can I assist you today?"<\/span>
\n        }<\/span>;<\/span>
\n    }<\/span>
\n}<\/span>;<\/span><\/div><\/div>\n
Markdown Text Format Support<\/h5>\n

You can use markdown formatting and configure the ChatBot widget to display headers, links, or bold and italic text. You should set the format<\/strong> property to “markdown”<\/strong> during initialization:<\/p>\n

const<\/span> chat =<\/span> new<\/span> ChatBot(<\/span>node,<\/span> {<\/span> format:<\/span> "markdown"<\/span> }<\/span>)<\/span>;<\/span><\/div><\/div>\n

To use the plain text format and display all messages sent and received without any special formatting, you have to initialize the widget with the format<\/strong> property set to “text”<\/strong>:<\/p>\n

const<\/span> chat =<\/span> new<\/span> ChatBot(<\/span>node,<\/span> {<\/span> format:<\/span> "text"<\/span> }<\/span>)<\/span>;<\/span><\/div><\/div>\n
Configurable AI Chatbot Widget Structure<\/h5>\n
Modifiable Sidebar and Chat Window Elements<\/h6>\n

The DHTMLX UI chat for AI component is made up of the Sidebar and Chat Window key sections.<\/p>\n

The Sidebar is located on the left side and includes such elements as a New Chat button to initiate a new chat session, a chat list to display a chat history list, and a Delete button to remove the specific session.<\/p>\n

\"ai-chat-ui-sidebar\"<\/p>\n

You can hide the Sidebar by setting the sidebar<\/strong> property in the ChatBot<\/strong> configuration object. It\u2019s displayed by default and set to true<\/strong>:<\/p>\n

const<\/span> chat =<\/span> new<\/span> ChatBot(<\/span>node,<\/span> {<\/span> sidebar:<\/span> true<\/span> }<\/span>)<\/span>;<\/span><\/div><\/div>\n

The Chat Window covers the right part of the DHTMLX ChatBot widget. It displays the conversation history, which is grouped by the date of the last message in each chat, and the textarea control. The control is attached to the bottom of the chat and allows end-users to type and send their messages.<\/p>\n

\"ai-chat-ui-chat-window\"<\/p>\n

Different Render Modes for Chat Area<\/h6>\n

The ChatBot widget offers multiple render modes to customize the appearance of the chat area. These render modes determine the way messages are presented within the chat interface.<\/p>\n

You can set one of the following render modes:<\/p>\n

Responsive and Readonly Modes<\/h5>\n

The JavaScript AI chatbot widget<\/a> allows holding a conversation in a narrow mode. It maintains the core functionality and ensures that the chat UI remains usable and visually appealing across various screen sizes, including mobile devices or smaller browser windows.<\/p>\n

Responsive mode works both with single and multiple agent chats. End-users can create a new chat, select an agent to communicate, review chat history, etc.<\/p>\n

\"chatbot-narrow-mode\"Check the sample ><\/a><\/p>\n

Moreover, you can set a read-only mode<\/a> thus ensuring the ChatBot widget’s content can be viewed but not modified by the end-user.<\/p>\n

\"chatbot-markdown\"Check the sample ><\/a><\/p>\n

Responding to user messages can be done on the client or server side. Get more detailed information about implementing chatbot agents in the documentation<\/a>.<\/p>\n