Weber AI Systems Demo

Eingebetteter Assistent

Ein Chat, der Werkzeuge benutzt.

Diese Seite ist statisch — kein Anwendungsserver, keine Datenbank. Jede Nachricht geht an einen Agenten auf AWS Lambda, der ein Sprachmodell und angebundene Werkzeuge aufruft und die Antwort zurückgibt. Probieren Sie es unten rechts.

Einbinden

Eine Zeile im <head> oder am Ende des <body>. Widget, Design und Verbindung kommen mit.

  1. Skript einfügen

    <script src="https://chat.carl.ai.weber-systems.com/static/weber-chat.js" defer></script>

<weber-chat webhook="https://chat.carl.ai.weber-systems.com/chat/demo"></weber-chat>

  2. Beschriftung anpassen

    Nichts einzutragen. Titel, Untertitel, Begrüßung und alle Schaltflächen kommen aus der Konfiguration der Instanz — je Sprache — und werden dort geändert, nicht im Seitenquelltext.

  3. Domain freischalten

    Die einbettende Domain muss in der Konfiguration der jeweiligen Instanz hinterlegt sein — sonst blockiert der Browser die Anfrage per CORS.

Im Einsatz sehen

Der Assistent auf einer echten Kundenseite — dieselbe Website, ein eigener Instanz-Eintrag, eigene Farben, eigene Wissensbasis:

WEBER-HYDRAULIK mit Assistent öffnen →

Mehrere Instanzen

Die letzte Pfadkomponente ist die Instanz-Kennung. Modell, System-Prompt, Werkzeuge und erlaubte Domains liegen pro Instanz in einer Konfigurationstabelle — eine weitere Instanz ist ein neuer Eintrag, kein neues Deployment: 

https://demo.weber-ai-systems.dphx.eu/chat/<instanz>

Farben

Die Styles liegen in einem Shadow-Root, CSS von außen greift also nicht hinein. CSS-Variablen schon — damit lässt sich das Widget überschreiben, hell und dunkel: 

weber-chat {
  --primary: #1a3f6c;
  --ink:     #0f1c28;
  --surface: #ffffff;
  --rule:    #c6d2dc;
}