DHTMLX ChatBot
DHTMLX (XB Software Ltd) · 챗봇
DHTMLX ChatBot은 AI 채팅 화면을 만들기 위한 무료 자바스크립트 위젯이다. MIT 라이선스로 공개되며 ChatGPT, Claude, Gemini 같은 어떤 LLM 백엔드에도 붙는다.
DHTMLX ChatBot 소개
About
DHTMLX ChatBot이란
DHTMLX ChatBot은 브라우저에서 돌아가는 자바스크립트 챗봇 위젯으로, AI 지원 에이전트용 채팅 화면을 통째로 그린다. 만든 곳은 DHTMLX다. 오랫동안 웹앱용 UI 라이브러리를 내온 회사이고, 같은 방식을 대화 화면에 적용했다. 모델은 쓰는 쪽이 준비한다. 위젯이 맡는 부분은 메시지 목록, 입력창, 에이전트 사이드바, 스타일이다.
해결하는 문제는 분명하다. LLM 엔드포인트를 이미 가진 팀도 말풍선, 자동 스크롤, 입력 중 표시, 마크다운 렌더링을 다시 만드는 데 몇 주를 쓴다. 이 AI 채팅 UI 컴포넌트가 그 층을 대신 처리하니, 작업은 프롬프트 설계와 서버 로직으로 옮겨간다.
한계는 미리 알아두는 편이 낫다. UI 키트이지 호스팅형 챗봇 플랫폼이 아니다. 자체 모델도, 학습 대시보드도, 사용 분석도, 상담원 연결도 없다. 그런 기능이 필요하면 직접 만들거나 다른 제품을 골라야 한다.
시작하는 순서
- DHTMLX 레지스트리에서 npm으로 설치하거나, CDN의 CSS와 JS를 불러오거나, 정적 파일을 프로젝트에 넣는다.
- 페이지에 컨테이너 요소를 만들고
new ChatBot(container, config)로 초기화한다. - 메시지 표시 방식을 고르고 에이전트 이름, 아바타, 환영 문구를 설정한다.
- 전송 이벤트를 자체 엔드포인트에 연결해 LLM을 호출하고, 응답을 위젯에 되돌려 넣는다.
- 새로고침 후에도 대화가 남아야 한다면 시작할 때 이전 메시지를 넘긴다.
제품 정보
DHTMLX ChatBot의 요금, 지원 플랫폼, 성능을 한눈에 확인해 보세요.
추천 대상
이 도구가 가장 잘 맞는 사용자, 작업, 상황입니다.
사용자
- 채팅 화면을 처음부터 디자인하고 싶지 않은 프런트엔드 개발자. 레이아웃과 스크롤, 입력 처리가 이미 들어 있어 동작하는 시제품을 반나절에 만든다.
- 기존 웹앱에 AI 어시스턴트를 붙이려는 작은 제품 팀. MIT 라이선스라 구매 절차나 사용자당 비용 문제가 없다.
- 예산이 빠듯한 외주 개발사. 브랜딩만 바꾸면 다른 프로젝트에서 같은 컴포넌트를 다시 쓴다.
작업
- SaaS 대시보드에 지원 패널을 넣기. 자체 검색이나 프롬프트 파이프라인을 연결하고 답변 내용은 직접 통제한다.
- 여러 에이전트를 보여주는 데모 만들기. 이 멀티 에이전트 채팅 위젯은 사이드바에 대화가 나뉘어 있어 비교 콘텐츠와 사내 도구에 맞는다.
- 긴 마크다운 답변 표시하기. 코드 블록과 목록, 표가 제대로 나온다. 별표가 그대로 쏟아지지 않는다.
활용 상황
- 대화 기능의 초기 검증. 표시 방식과 타이핑 속도를 바꿔가며 디자인 시스템을 확정하기 전에 감각을 확인한다.
- 이미 로그인한 사용자가 쓰는 사내 도구. 위젯이 앱 안에서 그려지므로 인증과 권한은 자체 코드에 남는다.
- 모달이나 옆으로 열리는 드로어에 넣는 채팅 패널. 컨테이너에 맞춰지므로 전체 페이지든 모달이든 동작한다.
주요 기능
네 가지 메시지 표시 방식
메시지는 블록, 말풍선, 카드, 플로우로 그린다. 카드는 제목과 짧은 본문이 있는 정형 답변에 어울리고, 플로우는 긴 대화를 간결하게 유지한다. 방식 전환은 설정 한 줄이라 실제 대화로 가독성을 비교할 수 있다.
다중 에이전트와 사이드바
에이전트 하나로도 여러 개로도 운영한다. 에이전트마다 이름, 아바타, 환영 문구가 있고 사이드바에 대화가 나열돼 전환할 수 있다. 글쓰기 담당과 코드 담당을 나누는 사내 도구에 그대로 맞는 구조다.
타이핑 효과와 마크다운 렌더링
응답이 설정한 속도로 한 글자씩 나타난다. 스트리밍 텍스트가 갑자기 튀어나오는 느낌을 줄인다. 마크다운은 해석해서 제목, 목록, 링크, 코드 블록을 서식 있는 텍스트로 보여준다. 기술적으로 긴 답변도 읽기 편하다.
대화 기록 불러오기
시작할 때 메시지 배열을 넘길 수 있어 새로고침 후에도 대화가 돌아온다. 기록은 자체 저장소에서 오므로 보관 기간과 열람 권한을 직접 정한다. 위젯은 받은 내용을 그리기만 한다.
가볍고 프레임워크에 얽매이지 않는 설치
패키지는 약 65KB이고 npm, CDN 링크, 정적 파일 어느 쪽으로도 설치한다. React나 Vue, Angular를 전제하지 않으므로 이 챗봇 UI 라이브러리는 순수 HTML 페이지에서도 컴포넌트 트리 안에서도 똑같이 돈다. 소스가 공개돼 있어 배포 대상을 감사하려는 팀에 유리하다.
반응형과 읽기 전용 모드
좁은 화면에 맞춰 레이아웃이 바뀐다. 휴대폰에서 여는 지원 패널에 중요한 부분이다. 읽기 전용 모드는 입력창을 끈다. 녹취록, 규정 보관용 자료, 방문자가 읽기만 해야 하는 데모에 쓴다.
장단점
장점
- 오픈소스 챗봇 위젯에 MIT 라이선스라 사용자당 요금도 사용량 상한도 없다.
- 약 65KB로 가벼워 채팅 패널을 넣은 페이지가 무거워지지 않는다.
- 백엔드는 어떤 LLM 채팅 인터페이스와도 붙어 특정 업체에 묶이지 않는다.
- 문서와 온라인 예제, OpenAI 연동 안내가 함께 온다.
- 표시 모드가 여러 가지라 간결한 기록부터 카드형 답변까지 소화한다.
단점
- 화면 층만 제공하므로 답변이 나오기 전에 백엔드와 프롬프트 처리, 오류 처리를 직접 갖춰야 한다.
- 사용 분석, 대화 로그, 상담원 연결이 없어 지원팀은 보고서를 따로 만들어야 한다.
- 확장 목록이 종합 챗봇 플랫폼보다 적어 바로 쓸 수 있는 부품이 한정적이다.
- 기본 옵션을 넘어서는 디자인 변경에는 CSS 작업이 필요하다.
자주 묻는 질문
웹앱 안에 AI 어시스턴트의 채팅 화면을 만든다. 모델 엔드포인트는 쓰는 쪽이 제공하고 메시지, 입력, 에이전트, 서식은 위젯이 처리한다.
관련 콘텐츠
DHTMLX ChatBot와 관련된 도구, 스킬, 아티클을 살펴보세요.
DHTMLX ChatBot 대안
Knocket
Knocket (Tencent RTC team) · 생산성 · 비즈니스 · 챗봇Knocket은 무료 라이브 채팅과 연락처 페이지 도구다. 방문자는 웹사이트, 앱, 공유 링크에서 메시지를 보내고, 운영자는 텔레그램이나 하나의 받은편지함에서 답한다.
Agibot
Agibot · 생산성 · AI 어시스턴트 · 챗봇Agibot은 Mac용 개인 AI 에이전트다. 창을 닫아도 계속 동작하고 예약 루틴을 실행하며, 자체 API 키로 Telegram이나 Slack에서 명령을 받는다.
Melete
Melete · 생산성 · AI 어시스턴트 · 챗봇Melete는 팀용 AI 워크스페이스다. 에이전트가 Slack, Notion, Linear, GitHub에서 조사하고 초안을 쓰고 실행하며, 공유 메모리와 승인 절차가 사람의 통제를 유지한다.