DHTMLX

Was ist der DHTMLX Chatbot?

DHTMLX Chatbot ist ein JavaScript-Komponente zur Erstellung von KI-basierten Chat-Interfaces, geeignet für Kundenservice-Hilfen, Unternehmens-Wissensdatenbanken und mehragentige Dialoge in Webanwendungen. Es bietet eine konfigurierbare Benutzeroberfläche, verfügt jedoch nicht über große Sprachmodelle, Wissensdatenbanken, ein Benutzersystem oder einen gehosteten Backend.

Entwickler müssen die Komponenten mit ihrem eigenen Server oder dem Anbieter der Modelle verbinden und anschließend entscheiden, wie Authentifizierung, Speicherung von Nachrichten, Erweiterungen bei der Suche, Inhaltssensorik sowie die Kontrolle der Nutzung erfolgen sollen. Daher ähnelt es eher einem UI-Entwicklungstool für Chat-Produkte als einem sofort einsetzbaren Chatbot-Dienst.

Kernfunktionen

• Es werden vier Arten der Darstellung von Nachrichten angeboten: Blocks, Blasen, Karten und Fluss – je nach visuellem Design des Produkts kann gewählt werden.
• Es werden reiner Text sowie Markdown-Nachrichten unterstützt, und es ist möglich, den Zeichen für Zeichen-Anzeigemodus sowie den Fließtext-Eingabemodus einzustellen.
• Es ist möglich, Chats mit einem oder mehreren Agenten zu erstellen; das Seitenmenü dient zum Erstellen, Auswählen und Löschen von Sessions.
• Es wird die Ladeung vorhandener Chats und Nachrichten unterstützt, was das Verbinden mit Geschäftsdatenbanken zur Wiederherstellung von Historiedaten erleichtert.
• Es wird ein Lesmodus bereitgestellt, der sich zur Anzeige von Dialogprotokollen, Prüfseiten oder unveränderbaren Präsentationen eignet.
• Die Schnittstelle passt sich schmalen Bildschirmen und mobilen Browsern an, aber es handelt sich nicht um eine eigenständige, native Handy-App.
• Die Größe des Komponenten beträgt etwa 65 KB – sie eignet sich daher zur Einbettung in bestehende Webseiten, ohne dass die gesamte Chat-Struktur neu erstellt werden muss.

Eingabe, Ausgabe und Datensstrukturen

Die Antwortfunktion des Agents kann entweder eine Nachricht zurückgeben oder asynchrone Ergebnisse liefern. Bei der Anbindung an den Server senden Entwickler in der Regel die Nachricht an ihre eigene Schnittstelle und übergeben anschließend die Antwort dieser Schnittstelle an das Komponenten, das sie anzeigt.

Installation und Initialisierung

1. Wählen Sie die Installationsmethode aus, um die Komponentenskripte und -Styles dem Projekt hinzuzufügen.
2. Erstellen Sie einen HTML-Container und eine ChatBot-Instanz.
3. Konfigurieren des aktuellen Benutzers, des Proxys, des Nachrichtenformats, der Anordnung und des Seitenleisten.
4. Schreiben Sie eine Proxy-Antwortfunktion, um Benutzernachrichten an den eigenen Backend zu senden.
5. Die Modellschlüssel werden sicher im Backend gespeichert, und Authentifizierung, Rate Limiting sowie Fehlerbehandlung werden umgesetzt.
6. Die Modellantworten in Komponenten-Nachrichten umwandeln lässt sich durch das Hinzufügen von Nachrichten für eine fließende Anzeige erreichen.
7. Testen Sie den Historieverlauf, löschen Sie Sessions, überprüfen Sie die Layouts für mobile Geräte sowie fehlerhafte Netzwerkverbindungen, bevor Sie online gehen.

Konfiguration der Chat-Oberfläche

Nachrichtenlayout und -format

Die Konfiguration von „render“ ermöglicht den Wechsel zwischen vier verschiedenen Nachrichtenvorlagen, während „format“ die Wahl zwischen Text und Markdown bietet. Markdown eignet sich für Code, Listen sowie formatierte Texte – doch die Anwendung muss die Ausgaben des Modells dennoch sicher verarbeiten, um zu verhindern, dass unverarbeiteter Inhalt auf der Seite erscheint.

Mehrfach-Agenten und Chat-Verlauf

Agents, Chats, activeAgent und activeChat dienen dazu, mehrere Assistenten sowie Gespräche zu organisieren. Bei Kundenservice-Produkten können Agenten nach Abteilungen eingeteilt werden, während interne Assistenten nach Wissensdatenbanken oder Aufgabentypen unterschieden werden können.

Nur Lesen und lokaler Cache

Mit „readonly“ kann verhindert werden, dass der Benutzer die Daten der Benutzeroberfläche ändert. Mit „withCache“ können Nachrichten lokal im Browser gespeichert werden. Wenn die Nachrichten sensibel sind, kann das Teilen von Geräten oder der Einsatz des Browser-Caches zu Datenlecks führen. Entwickler sollten daher prüfen, ob der Cache deaktiviert werden sollte und ob stattdessen eine kontrollierte Server-Speicherung verwendet werden sollte.

Was kann die Komponenten-API leisten?

• Neue Chats hinzufügen, löschen oder auswählen.
• Neue Nachrichten hinzufügen, Text zu bestehenden Nachrichten ergänzen und den Tippzustand wechseln.
• Nachrichten an die Komponente senden oder bei der Auswahl einer Sitzung die entsprechende Nachricht anfordern.
• Lesen und dynamische Aktualisierung der aktuellen Konfiguration.
• Das Abhören oder Abfangen neuer Nachrichten, das Löschen von Sitzungen sowie die Auswahl von Sitzungen.

Die hier genannte API ist eine Programmierschnittstelle für Frontend-Komponenten, keine von DHTMLX bereitgestellte Hosted-AI-Inferenz-Schnittstelle. Um das Modell aufrufen zu können, muss weiterhin die API des Modellanbieters oder ein eigenes Inferenzservice des Unternehmens verwendet werden.

Verbindung mit OpenAI oder anderen Modellen

Das Dokument bietet Beispiele für die Anbindung an OpenAI und zeigt, wie historische Nachrichten der Komponenten in das für das Modell erforderliche Dialogformat umgewandelt werden. Das Produkt kann auch mit Claude, Gemini oder anderen Modellen verbunden werden, die Serveraufrufe unterstützen; die genauen Fähigkeiten des jeweiligen Modells werden vom jeweiligen Anbieter festgelegt.

1. Die Frontend-Logik überwacht Ereignisse, bei denen der Benutzer neue Nachrichten sendet.
2. Senden Sie den notwendigen Sitzungskontext an den geschützten Geschäftsbereich im Hintergrund.
3. Die Backend-Ebene überprüft die Identität und das Kontingent des Benutzers, bevor der Modellservice aufgerufen wird.
4. Die Antwort wird gefiltert oder umgewandelt, und die normale oder in Abschnitte unterteilte Ergebnisliste wird an die Frontend-Schicht zurückgesendet.
5. Antworten werden durch das Hinzufügen neuer oder zusätzlicher Nachrichten angezeigt, wobei Zeitüberschreitungen und Wiederholungsversuche berücksichtigt werden.

Der Demonstrationscode ruft das Modell möglicherweise direkt im Browser auf, um die Lesbarkeit zu verbessern, doch in der Produktivumgebung sollten API-Schlüssel nicht in die Frontend-Codebasis geschrieben werden. Andernfalls können Besucher die Schlüssel abrufen und unbefugte Gebühren erzeugen.

Preise und Lizenzen

Dass Chatbots kostenlos sind, bedeutet nicht, dass die gesamte KI-Anwendung kostenlos ist – und es bedeutet auch nicht, dass alle anderen DHTMLX-Komponenten kostenlos sind. Die Aufrufung von Modellen, Server, Datenbanken, Überwachungsfunktionen sowie Dienste Dritter können jeweils Gebühren verursachen.

Die MIT-Lizenz erlaubt in der Regel die Nutzung, Vervielfältigung, Änderung, Verbreitung sowie kommerzielle Nutzung, wobei bei der Verbreitung die Lizenz sowie die Urheberrechtsangabe beibehalten werden müssen. Das Team sollte eine Konformitätsprüfung durchführen, indem es den tatsächlichen Text der Lizenz herunterlädt, der dem Download-Paket beiliegt.

Version, GitHub und Open-Source-Status

• Chatbot 1.0 wurde im Jahr 2024 veröffentlicht; die derzeit verfügbare Wartungsversion ist 1.0.3.
• Komponenten können über npm, CDN oder statische Pakete bezogen werden und es stehen öffentliche Dokumentationen, API-Beschreibungen sowie Beispiele zur Verfügung.
• In der GitHub-Organisation von DHTMLX wurde derzeit kein öffentlicher Quellcode-Repository für den Chatbot-Komponenten gefunden; daher können die anderen Beispielprojekte in der Organisation nicht als Quellcode für diese Komponente herangezogen werden.
• Die Angabe der MIT-Lizenz und die Tatsache, ob etwas auf GitHub gehostet wird, sind zwei verschiedene Dinge; die Rechte der Lizenz richten sich nach der tatsächlich bereitgestellten Version des Pakets.

Privatsphäre und Sicherheit

Der DHTMLX Chatbot bietet selbst keinen zentral verwalteten Chat-Backend, wodurch die weitere Verarbeitung der Chatdaten vom Anwendungsentwickler entschieden wird. Die Aktivierung eines lokalen Caches, der Aufruf von Drittanbietermodellen oder die Speicherung in einer Unternehmensdatenbank haben unterschiedliche Auswirkungen auf Datenschutz und Verantwortlichkeiten bei der Aufbewahrung.

• Die Modell-Schlüssel werden nur auf der Serverseite gespeichert, und für verschiedene Umgebungen werden eigene Anmeldeinformationen verwendet.
• Überprüfung, Escape-Verarbeitung oder sichere Reinigung von Benutzereingaben und Markdown-Ausgaben.
• Für historische Nachrichten sollten Mindestanforderungen an die Datenerfassung, Zugriffsrechte, Aufbewahrungsfristen sowie Mechanismen zur Löschung festgelegt werden.
• Erklären Sie den Nutzern den Anbieter des verwendeten Modells, die Verwendung der Daten, die grenzüberschreitende Übertragung sowie den Umfang der manuellen Überprüfung.
• Vermeiden Sie es, im Log vollständige Anweisungen, Schlüssel sowie sensible persönliche Informationen aufzunehmen.
• Für die Aufrufe des Modells werden Authentifizierung, Geschwindigkeitsbeschränkungen, Gebührenobergrenzen sowie Abwehr von Missbrauch eingestellt.

Die Datenschutzrichtlinien der DHTMLX-Website beziehen sich auf Download-Formulare, Analysetools, Marketingmaßnahmen, Bestell- sowie Support-Daten. Es wird angegeben, dass Anfragen zur Löschung von Daten innerhalb von 30 Tagen bearbeitet werden. Dies gilt nicht automatisch für von den Nutzern selbst entwickelte Chat-Apps – die Betreiber dieser Apps müssen weiterhin ihre eigenen Datenschutzbestimmungen bereitstellen.

Passend für Nutzer und Szenarien

• Frontend-Entwickler: Schnelle Erstellung einer Chat-Oberfläche mit Historie und verschiedenen Nachrichtenlayouts.
• SaaS-Team: Bestehende Modelldienste in markenreife Kundenservice- oder Produktassistenten umwandeln.
• Unternehmens-Forschungs- und Entwicklerteam: Die interne Wissenssuche wird mit dem zentralen Dialogeingang verbunden.
• Prototypenentwerfer: Schnelle Überprüfung von Chat-Interaktionen mit CDN und simulierten Antworten.
• Bildungs- und Technologieprodukte: Zeigen Mentoren, Code-Assistenten oder mehrere Aufgabenersteller.

Vorteile und Einschränkungen

Hauptvorteile

• Kostenlose MIT-Lizenz, geeignet für private und kommerzielle Projekte.
• Fokussierung auf die UI-Schicht, ermöglicht den Austausch verschiedener Modelle und Backend-Systeme.
• Mehrere Nachrichtenlayouts, Markdown, Historie und umfassende Mehr-Proxy-Funktionalität.
• Die Installation ist flexibel, und es werden Methoden, Eigenschaften, Ereignisse sowie Integrationssbeispiele bereitgestellt.

Fähigkeitsgrenzen

• Enthält keine Modelle, Wissensdatenbanken, Vektorabfragen, Inhaltssicherung oder Produktions-Backend.
• Es gibt kein vorbereitetes Benutzer-Anmeldeverfahren, keine Berechtigungen, keine Abrechnungsfunktionen und kein Betriebskontrollpanel.
• Der lokale Cache behält die Nachrichten im Browser, in sensiblen Fällen muss die Speicherung neu gestaltet werden.
• Die Qualität des Modells, die Verzögerungen, die Kosten sowie die Datennutzungsrichtlinien hängen vom Anbieter ab.
• Die öffentlichen OpenAI-Beispiele sind keine direkt übernehmbaren, sicheren Produktarchitekturen.

Häufige Fragen

Ist der DHTMLX Chatbot ein vollwertiger KI-Roboter?

Nein. Es bietet hauptsächlich eine Chat-Oberfläche sowie Frontend-APIs. Für Modellberechnungen, Wissensdatenbanken, das Backend sowie das Benutzersystem müssen Entwickler eigene Anbindungen erstellen.

Ist der DHTMLX Chatbot kostenlos?

Die Komponenten sind kostenlos und unterliegen der MIT-Lizenz. externe Modell-APIs, Server sowie andere kommerzielle Komponenten sind nicht inbegriffen.

Kann es für Geschäftsprojekte verwendet werden?

Die MIT-Lizenz erlaubt die kommerzielle Nutzung, wobei die Lizenz sowie die Urheberrechtsangaben bei der Weiterverbreitung beibehalten werden müssen. Vor der offiziellen Veröffentlichung sollte der Lizenztext im tatsächlich heruntergeladenen Paket überprüft werden.

Welche großen Modelle werden unterstützt?

Die Komponenten sind nicht an ein bestimmtes Modell gebunden und können über die Entwickler-Backend-Schnittstelle mit OpenAI, Claude, Gemini oder anderen Systemen verbunden werden. Die Verfügbarkeit sowie die Kosten hängen vom jeweiligen Service ab.

Wird die Flussantwort unterstützt?

Die Benutzeroberfläche kann schrittweise durch das Hinzufügen von Nachrichten und den Status des Eingabes kann man aktualisieren. Ein echtes Stream-Übertragungsprotokoll sowie die Wiederherstellung nach einer Verbindungsausfall müssen auf der Serverseite selbst umgesetzt werden.

Wie wird es installiert?

Man kann npm, CDN oder statische Dateien herunterladen. Bei Produktprojekten sollte eine feste, klare Version festgelegt werden, um zu vermeiden, dass Aktualisierungen zur neuesten Version ungetestete Änderungen mit sich bringen.

Wo werden die Chatverläufe gespeichert?

Wenn withCache aktiviert ist, kann die Daten lokal im Browser gespeichert werden; ansonsten können sie vom Server des Entwicklers bereitgestellt werden. Die Komponente legt keine einheitlichen Regeln für die Haltbarkeit der Daten sowie deren Löschung fest.

Kann man es auf dem Handy verwenden?

Die Benutzeroberfläche ist für responsive, schmale Bildschirme geeignet und kann in mobile Webseiten eingebettet werden. Es handelt sich dabei nicht um eine eigenständige iOS- oder Android-App, die von DHTMLX bereitgestellt wird.

Kann der Modell-Schlüssel auf der Frontend-Seite platziert werden?

Das sollte nicht getan werden. Der Schlüssel sollte auf der Backend-Seite gespeichert werden, damit diese für die Authentifizierung, das Limitieren der Anfragen sowie den Aufruf der Modelle zuständig ist.

Gibt es öffentliche GitHub-Repositorien?

Der öffentliche Quellcode-Repository für den Hauptkomponenten des Chatbots ist derzeit nicht bekannt. Die MIT-Lizenz, die Möglichkeit zum Herunterladen und Verbreiten sowie die Hosting-Option auf GitHub sind keine identischen Konzepte.

Zusammenfassung

Der DHTMLX Chatbot eignet sich für Entwicklerteams, die bereits über Modelle oder Backend-Fähigkeiten verfügen und ihre Chat-UI schnell ergänzen möchten. Sein Vorteil liegt in der konfigurierbaren Benutzeroberfläche sowie den Frontend-APIs. Die tatsächliche Einsatzfähigkeit hängt jedoch letztendlich von der Sicherheit des Backends, der Datenverwaltung sowie der Integration der Modelle ab, die vom Team umgesetzt werden.