Generative KI für eigene Apps und Webseiten, Teil 3 Botpress-Chatbot erweitern und veröffentlichen

Von Mirco Lang 5 min Lesedauer

Anbieter zum Thema

Unser Bot ist bereits in der Lage, Gespräche zu führen – allerdings nur in der Sandbox. Nun wird es Zeit, den Bot in die echte Welt zu entlassen und mit der eigenen Corporate Identity zu schmücken.

Botpress-Chat-Bot per Webchat-Integration in Checkmk.(Bild:  Lang / Botpress / Checkmk)
Botpress-Chat-Bot per Webchat-Integration in Checkmk.
(Bild: Lang / Botpress / Checkmk)

Zu Beginn des dritten Teils ein ganz kurzer Rückblick: Der Botpress-Bot hat eine Wissensbasis in Form eines Handbuchs bekommen, ganz einfach per Sitemap-URL. Kann er solche Fragen nicht beantworten, fällt er auf den ChatGPT-Modus zurück und gibt generische KI-Antworten.

Darüber hinaus haben wir gesehen, wie man Gespräche führt, Daten abfragt und Variablen nutzt. Selbst eine Persönlichkeit wurde dem Bot zuteil. Nun folgen noch einige „Kleinigkeiten“, die Veröffentlichung über eine erste Integration aus Botpress-Hub, optische Anpassungen und der Einbau in eine echte App. Am Anfang stehen allerdings noch einige Grenzen der KI.

Von No- zu Low-Code

Ein großer Teil des Botpress-Universums läuft über den No-Code-Ansatz. Man muss lediglich Elemente per Drag-and-Drop platzieren und verknüpfen, Variablen benennen und Texte vorgeben. Ab und an bricht Botpress aber aus diesem Rahmen aus und präsentiert Low-Code-Elemente.

Vorgegebener Validierungscode.(Bild:  Lang / Botpress)
Vorgegebener Validierungscode.
(Bild: Lang / Botpress)

Ein Beispiel hierfür ist das „Capture Information“-Bauteil zur Abfrage des Betriebssystems. Hier wird kein beliebiger Text von Nutzern erwartet, sondern die Angabe eines tatsächlich existierenden und gegebenenfalls für den aktuellen Kontext relevanten Betriebssystems. Also bietet sich eine Validierung an, die sich über „Advanced Configuration“ hinzufügen lässt.

Erweiterter Validierungscode.(Bild:  Lang / Botpress)
Erweiterter Validierungscode.
(Bild: Lang / Botpress)

Hier bekommt man also endlich richtigen Code präsentiert, ohne selbst welchen eingeben zu müssen. Stattdessen lässt sich über die Label-Zeile schlicht eine Anweisung in natürlicher Sprache verfassen, was genau validiert werden soll, hier zum Beispiel bekannte Betriebssysteme inklusive typischer Linux-Distributionen. Und die KI setzt dies dann in Code um:

In Botpress gibt es einige Stellen, an denen sich Code mithilfe von Anweisungen in natürlicher Sprache generieren lässt. Im Grunde ist dies die perfekte Mischung aus Low- und No-Code: Man muss das Programmieren nicht beherrschen, kann aber dennoch die größere Flexibilität des Low-Code-Ansatzes nutzen.

Soweit die Theorie. Doch in unserem Beispiel geschah genau das, was ständig passiert, wenn man zum Beispiel ChatGPT anweist, irgendeinen bestimmten Code zu produzieren: Es funktionierte nicht. KIs können durchaus brauchbaren Code erstellen. Aber wie auch unser ausführliches Selbstexperiment gezeigt hat, die Entwicklung eines Browsers mit ChatGPT, ist das alles andere als zuverlässig, präzise oder belastbar.

Je komplexer der Bot werden soll, desto unumgänglicher ist es, auf ein paar Programmierkenntnisse zurückgreifen zu können. Produktiv nutzbare Bots sind aber dennoch auch für Nicht-Coder machbar! Nun aber wieder zurück zu den Stärken von Botpress.

Veröffentlichen und anpassen

Stand jetzt ist der Bot nur ein Projekt in einer Entwicklungsumgebung, nutzbar über den integrierten Emulator. Um den Code nun in eine echte App zu überführen, ist eine der „Integrationen“ aus dem Botpress-Hub vonnöten. Dort finden sich Integrationen für beispielsweise Telegram oder Slack.

Installation der Webchat-Integration.(Bild:  Lang / Botpress)
Installation der Webchat-Integration.
(Bild: Lang / Botpress)

Die einfachste Variante ist aber sicherlich „Webchat“, um den Bot wie ChatGPT nutzen zu können. Wir wählen im Hub also Webchat und installieren diesen für den gewünschten Bot im gewünschten Workspace. Die Integrationen finden sich auf der Startseite des Arbeitsbereichs im Tab „Integrations“, wo der Webchat aktiviert und deaktiviert werden kann.

Konfiguration der Webchat-Erweiterung.(Bild:  Lang / Botpress)
Konfiguration der Webchat-Erweiterung.
(Bild: Lang / Botpress)

Um den Bot nun anderen zur Verfügung stellen zu können, genügt tatsächlich ein Klick auf den „Publish“-Button im Editor. Damit wird auch der „Share“-Button daneben freigegeben und der Bot öffnet sich über einen teilbaren Link als alleinstehende Anwendung im Browser:

Der Bot als App im Browser.(Bild:  Lang / Botpress)
Der Bot als App im Browser.
(Bild: Lang / Botpress)

Ab diesem Moment ist es möglich, Dritte dazu einzuladen, den Bot in der echten Welt zu testen. Im Bild ist zu sehen, dass der Bot schlicht Bot heißt, die Botpress-Farben trägt und als Avatar nur ein „B“ zeigt. Auch die danebenstehende Botpress-Tag-Line möchte man später wohl kaum so belassen. All diese Dinge lassen sich im „Integrations“-Tab über die Workspace-Startseite anpassen.

CSS-Editor für den Webchat.(Bild:  Lang / Botpress)
CSS-Editor für den Webchat.
(Bild: Lang / Botpress)

An gleicher Stelle finden sich außerdem einige weitere Optionen, zum Beispiel um den „Created with Botpress“-Teil zu unterdrücken oder Nutzer den Chat löschen zu lassen. Am interessantesten ist aber vermutlich die Option „Stylesheet URL“. Der Botpress-Bot-Webchat lässt sich nämlich per CSS gestalten – über den wunderbaren Webchat Styler.

Jetzt Newsletter abonnieren

Täglich die wichtigsten Infos zu RZ- und Server-Technik

Mit Klick auf „Newsletter abonnieren“ erkläre ich mich mit der Verarbeitung und Nutzung meiner Daten gemäß Einwilligungserklärung (bitte aufklappen für Details) einverstanden und akzeptiere die Nutzungsbedingungen. Weitere Informationen finde ich in unserer Datenschutzerklärung. Die Einwilligungserklärung bezieht sich u. a. auf die Zusendung von redaktionellen Newslettern per E-Mail und auf den Datenabgleich zu Marketingzwecken mit ausgewählten Werbepartnern (z. B. LinkedIn, Google, Meta).

Aufklappen für Details zu Ihrer Einwilligung

Unter „Advanced Styler“ ist es möglich, direkt am bzw. mit dem CSS-Code zu arbeiten. Letztlich produziert der Editor eine Stylesheet-URL, die in der Webchat-Konfiguration angegeben wird; und damit ist der Bot aus Botpress-Sicht im Grunde fertig.

Integration integrieren

Der Vollständigkeit halber geht es nun noch einen (letzten) Schritt weiter, um zu zeigen, wie sich eigene Produkte mit dem nun vorliegenden Webchat erweitern lassen. In diesem Fall ist klar, wo der Webchat hingehört: In die Monitoring-Software Checkmk selbst, schließlich ist dessen Handbuch die primäre Wissensbasis des Bots.

Die Weboberfläche von Checkmk ermöglicht individuelle Dashboards – ein passender Ort für einen Checkmk-Hilfe-Chat. Ohne nun jeden Klick einzeln vorgeben zu wollen: Die Integration ist ziemlich simpel, wenn auch mit einem Mini-Hack umgesetzt.

Konfiguration des Dashboard-Widgets in Checkmk.(Bild:  Lang / Checkmk)
Konfiguration des Dashboard-Widgets in Checkmk.
(Bild: Lang / Checkmk)

Grundsätzlich ermöglichen Dashboards über das Element „Custom URL“ die Anzeige beliebiger Web-Inhalte. Aus Sicherheitsgründen werden allerdings keine externen Ressourcen angezeigt, der Browser würde eine Content-Blocked-Meldung ausgeben. Der Hack: Als „Custom URL“ wird hier auf eine HTML-Seite verwiesen, die im WWW-Root des Apache-Servers des Checkmk-Servers selbst liegt, beispielsweise „http://192.168.178.68/mein-chatbot.html“.

Embedded-Code für die Webchat-Integration.(Bild:  Lang / Checkmk)
Embedded-Code für die Webchat-Integration.
(Bild: Lang / Checkmk)

Die HTML-Datei wiederum verweist nun auf die Webchat-URLs, beispielsweise:

<script src="https://cdn.botpress.cloud/webchat/v1/inject.js"></script>
<script src="https://mediafiles.botpress.cloud/123-456-789/webchat/config.js" defer></script>

Diese URLs zum Einbetten finden sich in der Webchat-Konfiguration im Tab „Pre-Configured“:

Botpress-Chat-Bot per Webchat-Integration in Checkmk.(Bild:  Lang / Botpress / Checkmk)
Botpress-Chat-Bot per Webchat-Integration in Checkmk.
(Bild: Lang / Botpress / Checkmk)

Am Ende steht dann ein Dashboard mit eingebautem Support-Chat-Bot.

Unendliche Möglichkeiten

Der Workshop hat nun mit sehr wenig Aufwand einen tatsächlich nützlichen Support-Chat produziert, der sich nahtlos in Checkmk einfügt. Im Gegensatz zu traditionelleren Support-Chats ließe sich solch eine KI-Version jedoch deutlich flexibler nutzen.

Bislang könnte der Chat zum Beispiel bei Problemen mit Checkmk selbst weiterhelfen. Aber als Monitoring-Lösung ist es natürlich Checkmks Hauptanliegen, auf Probleme in der IT-Infrastruktur hinzuweisen – beispielsweise Fehlermeldungen eines Switches. Ist ein solches Problem identifiziert, eingestuft und an die zuständigen Personen gemeldet, ist Checkmk fertig.

Erweitert man nun aber den Bot mit einem Haufen Netzwerkwissen, zum Beispiel auch um Referenzen eingesetzter Switche, könnte er auch gleich Vorschläge für die Problemlösung unterbreiten. Und wenn das zu vage erscheint: Mit manuell gestalteter Gesprächsführung wäre es überhaupt kein Problem, Nutzer zu korrekten Ansprechpartnern für bestimmte Probleme zu führen.

Der Workshop sollte mindestens zwei kleine Erkenntnisse hervorgebracht haben. Zum einen, dass Botpress eine wirklich interessante, gut gemachte Beinahe-No-Code-Plattform ist, die mehr als die meisten Konkurrenten zum Spielen einlädt – trotz einiger Schwächen in den Details. Zum anderen, dass KI-betriebene Chats recht einfach zu realisieren sind und enorme Möglichkeiten bieten. Das gilt übrigens nicht nur für Kunden, auch In-House dürfte ein gut designter Bot zum Beispiel manch eine Anfrage an die Personalabteilung oder den IT-Support abbügeln können.

(ID:49812648)