DHTMLX ChatBot
DHTMLX (XB Software Ltd) · 聊天機器人
DHTMLX ChatBot 是免費、採 MIT 授權的 JavaScript 元件,用來打造 AI 聊天介面。它負責前端呈現,可串接任何 LLM 後端,包括 ChatGPT、Claude 與 Gemini。

關於 DHTMLX ChatBot
About
什麼是 DHTMLX ChatBot
DHTMLX ChatBot 是在瀏覽器端執行的 JavaScript 元件,能畫出完整的客服代理對話介面。背後的 DHTMLX 長年推出網頁應用程式的介面函式庫,這次把同一套做法搬到對話場景。模型由你提供,元件負責訊息列表、輸入框、代理側邊欄與樣式。
它解決的問題很明確。已經有 LLM 端點的團隊,往往要花好幾週重做訊息泡泡、自動捲動、輸入中提示與 Markdown 呈現。這個 AI 聊天介面元件接手這一層,把時間留給提示詞設計與伺服器邏輯。
限制值得先講清楚。它是介面套件,不是託管的聊天機器人平台。沒有內建模型、沒有訓練後台、沒有使用分析,也沒有轉接真人的機制。需要這些功能,就得自己開發或改選其他產品。
快速上手
- 從 DHTMLX 的 npm 註冊表安裝套件,或從 CDN 載入 CSS 與 JS,也可把靜態檔案放進專案。
- 在頁面建立容器元素,用
new ChatBot(container, config)初始化。 - 挑一種訊息版面,設定代理名稱、頭像與歡迎訊息。
- 把送出事件接到自家端點,由端點呼叫 LLM,再把回覆推回元件。
- 若希望對話在重新整理後仍在,啟動時載入先前的訊息。
產品資訊
快速了解 DHTMLX ChatBot 的定價、支援平台與效能。
適合對象
這項工具最適合的使用者、任務與情境。
使用者
- 需要聊天介面但不想自己設計的前端開發者:版面、捲動與輸入都由元件處理,一個下午就能做出可用的雛形。
- 要在既有網頁應用裡加入 AI 助理的小型產品團隊:MIT 授權省去採購流程與每位使用者的費用問題。
- 預算固定的接案公司:換上客戶品牌就能在不同專案重複使用同一個元件。
任務
- 在 SaaS 儀表板加入客服面板:接上自家的檢索或提示流程,回覆內容完全由你掌控。
- 製作多代理展示:側邊欄把不同助理的對話分開,適合比較型內容與內部工具。
- 呈現較長的 Markdown 回覆:程式碼區塊、清單與表格都能正常顯示,不會出現一堆星號。
情境
- 對話功能的早期雛形:切換版面與打字速度,在定案設計系統前先感受哪種節奏順手。
- 使用者已經登入的內部工具:元件直接畫在自家應用裡,權限與驗證都留在你的程式碼。
- 彈窗或側邊抽屜裡的聊天面板:元件貼合容器,整頁與彈窗都能用。
主要功能
四種訊息版面
訊息能以區塊、泡泡、卡片或串流呈現。卡片適合帶標題與短文的結構化回覆,串流則讓長對話保持緊湊。切換版面只是改設定,可以用真實對話測哪一種更好讀。
多代理與側邊欄
元件支援單一助理,也支援多個助理。每個代理有名稱、頭像與歡迎訊息,側邊欄列出各段對話方便切換。內部工具常有寫作助理與程式助理各自負責不同任務,這種結構正好合用。
打字機效果與 Markdown 呈現
回覆能以可調速度逐字出現,讓串流文字不那麼突然。Markdown 會被解析,標題、清單、連結與程式碼區塊都顯示為排版後的樣子。技術性長回覆仍然好讀。
載入聊天紀錄
啟動時可以傳入初始訊息陣列,重新整理後對話就會回來。紀錄來自你自己的儲存空間,保存多久、誰能讀都由你決定。元件只負責畫出你交給它的內容。
輕量安裝,不綁框架
套件約 65 KB,能用 npm、CDN 連結或靜態檔案安裝。內容不假設 React、Vue 或 Angular,這套聊天機器人介面函式庫在純 HTML 頁面與元件樹裡都能運作。原始碼公開,團隊要稽核上線內容時很方便。
響應式與唯讀模式
版面會配合窄螢幕調整,手機上開啟客服面板時很重要。唯讀模式關掉輸入框,適合逐字稿、法遵存檔,或只讓訪客閱讀的示範頁。
優缺點
優點
- 開源聊天機器人元件,採 MIT 授權,沒有每人費用,也沒有用量上限。
- 體積約 65 KB,不會讓放聊天面板的頁面變重。
- 後端可接任何 LLM 聊天介面,不被單一供應商綁住。
- 附文件、線上範例與 OpenAI 串接教學。
- 多種顯示模式,從緊湊紀錄到卡片式回覆都涵蓋。
缺點
- 只做介面層,回答問題之前仍得自備後端、提示邏輯與錯誤處理。
- 沒有使用分析、對話紀錄與真人接手,客服團隊得另外建報表。
- 外掛數量比完整聊天機器人平台少,現成元件不多。
- 超出內建選項的外觀調整,需要自己改 CSS。
常見問題
它在網頁應用裡建立 AI 助理的聊天介面。你提供模型端點,訊息、輸入、代理與格式都由元件處理。
相關內容
探索與 DHTMLX ChatBot 相關的工具、技能與文章。
DHTMLX ChatBot 替代方案
Griffin by Tavus
Tavus · 語音與語言 · 影片 · 聊天機器人Griffin by Tavus 是第一個稱為人類互動模型的系統,採全雙工、影片對影片架構,在 AI 視訊通話中即時觀察、聆聽並回應。
Claude Haiku 5.5
Anthropic · 寫作 · 程式設計 · 聊天機器人Claude Haiku 5.5 是 Anthropic 最快也最便宜的小型模型,每百萬輸入詞元 0.10 美元,上下文視窗達 100 萬詞元。
Wabi
Wabi, Inc. · 生產力 · AI 助理 · 聊天機器人Wabi 是長得像通訊軟體的個人 AI 助理,支援 iOS、Android 與 Mac。它把生活拆成一個個共享對話串,在串裡生成小工具,並在你點頭後處理信件、行事曆與雜事。
