DHTMLX ChatBot

DHTMLX ChatBot

DHTMLX (XB Software Ltd) · 聊天機器人

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

DHTMLX ChatBot 的介面預覽

關於 DHTMLX ChatBot

About

什麼是 DHTMLX ChatBot

DHTMLX ChatBot 是在瀏覽器端執行的 JavaScript 元件,能畫出完整的客服代理對話介面。背後的 DHTMLX 長年推出網頁應用程式的介面函式庫,這次把同一套做法搬到對話場景。模型由你提供,元件負責訊息列表、輸入框、代理側邊欄與樣式。

它解決的問題很明確。已經有 LLM 端點的團隊,往往要花好幾週重做訊息泡泡、自動捲動、輸入中提示與 Markdown 呈現。這個 AI 聊天介面元件接手這一層,把時間留給提示詞設計與伺服器邏輯。

限制值得先講清楚。它是介面套件,不是託管的聊天機器人平台。沒有內建模型、沒有訓練後台、沒有使用分析,也沒有轉接真人的機制。需要這些功能,就得自己開發或改選其他產品。

快速上手

  1. 從 DHTMLX 的 npm 註冊表安裝套件,或從 CDN 載入 CSS 與 JS,也可把靜態檔案放進專案。
  2. 在頁面建立容器元素,用 new ChatBot(container, config) 初始化。
  3. 挑一種訊息版面,設定代理名稱、頭像與歡迎訊息。
  4. 把送出事件接到自家端點,由端點呼叫 LLM,再把回覆推回元件。
  5. 若希望對話在重新整理後仍在,啟動時載入先前的訊息。

產品資訊

快速了解 DHTMLX ChatBot 的定價、支援平台與效能。

免費方案是
付費方案$0
平台Web (JavaScript, any modern browser)
開發者DHTMLX (XB Software Ltd)
類別聊天機器人
發布日期Jul 2024
最近更新Jul 2024
網站訪問量66K
網站全球排名549K
API 提供狀態是

適合對象

這項工具最適合的使用者、任務與情境。

使用者

  • 需要聊天介面但不想自己設計的前端開發者:版面、捲動與輸入都由元件處理,一個下午就能做出可用的雛形。
  • 要在既有網頁應用裡加入 AI 助理的小型產品團隊:MIT 授權省去採購流程與每位使用者的費用問題。
  • 預算固定的接案公司:換上客戶品牌就能在不同專案重複使用同一個元件。

任務

  • 在 SaaS 儀表板加入客服面板:接上自家的檢索或提示流程,回覆內容完全由你掌控。
  • 製作多代理展示:側邊欄把不同助理的對話分開,適合比較型內容與內部工具。
  • 呈現較長的 Markdown 回覆:程式碼區塊、清單與表格都能正常顯示,不會出現一堆星號。

情境

  • 對話功能的早期雛形:切換版面與打字速度,在定案設計系統前先感受哪種節奏順手。
  • 使用者已經登入的內部工具:元件直接畫在自家應用裡,權限與驗證都留在你的程式碼。
  • 彈窗或側邊抽屜裡的聊天面板:元件貼合容器,整頁與彈窗都能用。

主要功能

四種訊息版面

訊息能以區塊、泡泡、卡片或串流呈現。卡片適合帶標題與短文的結構化回覆,串流則讓長對話保持緊湊。切換版面只是改設定,可以用真實對話測哪一種更好讀。

多代理與側邊欄

元件支援單一助理,也支援多個助理。每個代理有名稱、頭像與歡迎訊息,側邊欄列出各段對話方便切換。內部工具常有寫作助理與程式助理各自負責不同任務,這種結構正好合用。

打字機效果與 Markdown 呈現

回覆能以可調速度逐字出現,讓串流文字不那麼突然。Markdown 會被解析,標題、清單、連結與程式碼區塊都顯示為排版後的樣子。技術性長回覆仍然好讀。

載入聊天紀錄

啟動時可以傳入初始訊息陣列,重新整理後對話就會回來。紀錄來自你自己的儲存空間,保存多久、誰能讀都由你決定。元件只負責畫出你交給它的內容。

輕量安裝,不綁框架

套件約 65 KB,能用 npm、CDN 連結或靜態檔案安裝。內容不假設 React、Vue 或 Angular,這套聊天機器人介面函式庫在純 HTML 頁面與元件樹裡都能運作。原始碼公開,團隊要稽核上線內容時很方便。

響應式與唯讀模式

版面會配合窄螢幕調整,手機上開啟客服面板時很重要。唯讀模式關掉輸入框,適合逐字稿、法遵存檔,或只讓訪客閱讀的示範頁。

優缺點

優點

  • 開源聊天機器人元件,採 MIT 授權,沒有每人費用,也沒有用量上限。
  • 體積約 65 KB,不會讓放聊天面板的頁面變重。
  • 後端可接任何 LLM 聊天介面,不被單一供應商綁住。
  • 附文件、線上範例與 OpenAI 串接教學。
  • 多種顯示模式,從緊湊紀錄到卡片式回覆都涵蓋。

缺點

  • 只做介面層,回答問題之前仍得自備後端、提示邏輯與錯誤處理。
  • 沒有使用分析、對話紀錄與真人接手,客服團隊得另外建報表。
  • 外掛數量比完整聊天機器人平台少,現成元件不多。
  • 超出內建選項的外觀調整,需要自己改 CSS。

常見問題

它在網頁應用裡建立 AI 助理的聊天介面。你提供模型端點,訊息、輸入、代理與格式都由元件處理。