show_chat_widget

Hinweise:

Diese Dokumentation bezieht sich auf die aktuellste Version des Plugins ALBERT | AI Agents. Aktualisieren Sie das hier beschriebene Plugin, um die Dokumentation verwenden zu können.
Wie Sie die KI-Tools in Ihren KI-Voreinstellungen verwenden, erfahren Sie hier: ALBERT | AI agents tools einrichten

Anzeigename: Show Chat Widget

Hinweis: Im Wissensbereich stehen Informationen zur Verwendung dieses KI-Tools zur Verfügung. Binden Sie nicht nur das Tool selbst, sondern auch das Wissen in Ihre KI-Voreinstellungen ein, um dieses Tool optimal zu nutzen.

Was macht das Tool?

Das Tool rendert ein interaktives HTML-Widget direkt inline im Chat. Dazu wird ein HTML-Fragment (kein komplettes HTML-Dokument) entgegengenommen, validiert (u. a. Struktur und erlaubte externe Ressourcen), als temporäre Datei mit der Endung .dynamic.html gespeichert und anschließend als Widget im Chat angezeigt.

Achtung: Die Endung .dynamic.html ist zwingend erforderlich. Ohne diese Dateiendung wird der Inhalt nicht als interaktives Widget gerendert.

Empfohlener Einsatzzweck

Verwenden Sie das Tool, wenn Inhalte im Chat besser als visuelle oder interaktive Oberfläche dargestellt werden sollen. Beispiele:

Diagramme und Visualisierungen (z. B. Chart.js, D3.js)
Dashboards, Statusanzeigen, Ampeln
Formulare, Filter, kleine Rechner/Converter
Tabellen mit Interaktion (Sortierung/Filter)

Das Tool ist nicht geeignet für reine Textausgaben oder einfache Aufzählungen. Dafür genügen normale Chat-Antworten.

Sie können die eigentlich nur temporär erstellte HTML-Datei weiterverwenden. Berücksichtigen Sie dabei, dass die Datei statische Daten enthält, die sich nicht aktualisieren.

Funktionsbeschreibung

Parameter Beschreibung

Parameter	Beschreibung
html (Pflicht)	Selbstenthaltendes HTML-Fragment inkl. inline CSS und inline JavaScript, das im Chat als Widget gerendert wird. Hinweis: Übergeben Sie kein komplettes HTML-Dokument. Tags wie `<!DOCTYPE>`, `<html>`, `<head>`, `<body>` sind nicht erlaubt. Erlaubte externe Hosts (nur diese): `cdnjs.cloudflare.com` `cdn.jsdelivr.net` `esm.sh` `unpkg.com` Chat-Interaktion: Zur Interaktion mit dem Chat kann die Funktion `sendPrompt("...")`⁣ verwendet werden (z. B. bei einem Button-Klick). Theming: Für ein konsistentes Erscheinungsbild sollten CSS-Variablen aus der Render-Umgebung verwendet werden (siehe Abschnitt „Theming“).

html
(Pflicht)

Selbstenthaltendes HTML-Fragment inkl. inline CSS und inline JavaScript, das im Chat als Widget gerendert wird.

Hinweis: Übergeben Sie kein komplettes HTML-Dokument. Tags wie <!DOCTYPE>, <html>, <head>, <body> sind nicht erlaubt.

Erlaubte externe Hosts (nur diese):

cdnjs.cloudflare.com
cdn.jsdelivr.net
esm.sh
unpkg.com

Chat-Interaktion: Zur Interaktion mit dem Chat kann die Funktion sendPrompt("...")⁣ verwendet werden (z. B. bei einem Button-Klick).

Theming: Für ein konsistentes Erscheinungsbild sollten CSS-Variablen aus der Render-Umgebung verwendet werden (siehe Abschnitt „Theming“).

Gestaltungsrichtlinien (Theming)

Die Widget-Umgebung stellt CSS-Variablen auf :root bereit. Verwenden Sie diese Variablen statt fester Farben/Fonts.

Variable	Zweck	Beispielwert	Hinweis
`--color-text-primary`	Haupttext	`#3B3B3B`	Standard für Fließtext
`--color-text-secondary`	Labels/Sekundärtext	`#666666`	z. B. Beschriftungen
`--color-background-secondary`	Karten/Container	`#F0F0F0`	z. B. Card-Hintergrund
`--color-border-primary`	Rahmen	`#CECECE`	z. B. Card-Border
`--color-accent`	Akzent/Buttons/Links	`#006BFF`	Primärfarbe
`--font-sans`	Schrift	`Tahoma, system-ui, -apple-system, sans-serif`	Für konsistente Typografie

Beispiele

Einfacher Beispiel-Prompt (nur Prompt, ohne weitere Tool-Konfiguration)

Bitte zeige mir ein kleines interaktives Widget im Chat:
- Überschrift: "Ausgaben-Rechner"
- Eingabe: Betrag
- Button: "Berechnen"
- Ausgabe: Betrag inkl. 19% MwSt.
Nutze sendPrompt(), wenn der Nutzer auf "Berechnen" klickt, um den Betrag zur weiteren Verarbeitung an den Chat zu senden.

Chat zum Beispiel-Prompt

Minimales Widget-Fragment

<style>
  .card {
    font-family: var(--font-sans);
    color: var(--color-text-primary);
    background: var(--color-background-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--border-radius-md);
    padding: 16px;
  }
  .title { color: var(--color-accent); font-weight: 600; margin-bottom: 8px; }
  .row { display: flex; gap: 8px; align-items: center; }
  input {
    flex: 1;
    border: 1px solid var(--color-border-primary);
    border-radius: 6px;
    padding: 8px;
  }
  button {
    border: 0;
    border-radius: 6px;
    padding: 8px 12px;
    background: var(--color-accent);
    color: white;
    cursor: pointer;
  }
</style>

<div class="card">
  <div class="title">Ausgaben-Rechner</div>
  <div class="row">
    <input id="amount" placeholder="Betrag" />
    <button id="btn">Berechnen</button>
  </div>
  <div id="out" style="margin-top:10px; color: var(--color-text-secondary)"></div>
</div>

<script>
  document.getElementById('btn').addEventListener('click', function () {
    const val = document.getElementById('amount').value;
    sendPrompt('Bitte berechne Betrag inkl. 19% MwSt. fcr: ' + val);
  });
</script>

Mit diesem HTML-Fragment wird ein einfaches Formular im Chat wie folgt dargestellt:

Screenshot der Darstellung im Chat

CDN-Library dynamisch laden

Wenn Sie externe Bibliotheken benötigen (z. B. Chart.js), laden Sie sie per JavaScript dynamisch und mit Fallback-URLs. Verwenden Sie nicht einfach statische <script src>-Tags.

<script>
function loadScript(urls, callback) {
  var i = 0;
  function tryNext() {
    if (i >= urls.length) { console.error('All CDN URLs failed to load'); return; }
    var s = document.createElement('script');
    s.src = urls[i++];
    s.onload = callback;
    s.onerror = tryNext;
    document.head.appendChild(s);
  }
  tryNext();
}

loadScript([
  'https://cdn.jsdelivr.net/npm/chart.js/dist/chart.umd.min.js',
  'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.6/chart.umd.min.js',
  'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.4/chart.umd.min.js'
], function () {
  // initCharts();
});
</script>

Sie können durch das Einbinden von Chart.js auf diese Weise etwa interaktive Diagramme im Chat wie das folgende erstellen:

Beispiel für ein Diagramm im Chat

Infinite Growth vermeiden

Sobald Sie Chart.js im Chat-Widget verwenden, setzen Sie immer einen Wrapper mit fixer Höhe und verwenden Sie maintainAspectRatio: false. Das ist keine Option „für den Fall“, sondern ein Standard, um Layout-Probleme zu vermeiden. Ohne feste Container-Höhe kann die Canvas-Höhe sonst den Container vergrößern.

Wenn Sie Chart.js verwenden, muss das <canvas> immer in einem Wrapper mit fester Höhe liegen und maintainAspectRatio: false gesetzt sein. Das erreichen Sie etwa wie folgt:

<style>
  .chart-container { position: relative; width: 100%; height: 400px; }
</style>

<div class="chart-container">
  <canvas id="myChart"></canvas>
</div>

<script>
// new Chart(document.getElementById('myChart'), {
//   type: 'bar',
//   data: { /* ... */ },
//   options: { responsive: true, maintainAspectRatio: false }
// });
</script>

Im Prompt könnten Sie Folgendes angeben:

Erstelle einen Canvas-Wrapper mit fixer Höhe und maintainAspectRatio:false

Tipps und Tricks

Tipp: Erstellen Sie nur ein Fragment (kein vollständiges HTML-Dokument) und halten Sie das Widget möglichst kompakt. Nutzen Sie für ein einheitliches Erscheinungsbild die beschriebenen CSS-Variablen (Theme-Farben/Spacing) und binden Sie externe Bibliotheken ausschließlich über die erlaubten CDNs ein. Nutzen Sie scrollbare Container, Tabs oder einklappbare Bereiche, wenn das Widget größer wird.