Zum Hauptinhalt springen

KI-Editor

Mit dem KI-Editor erstellst und änderst du Widget Builder Inhalte per Chat, statt Code zu schreiben. Du beschreibst in normaler Sprache, was du möchtest — „eine Karte, die unsere Unternehmensnews zeigt" oder „füge eine Farbauswahl für die Überschrift hinzu" — und der Assistent erstellt oder bearbeitet das Widget für dich. Eine Live-Vorschau steht neben der Unterhaltung, sodass du jede Änderung sofort siehst.

Er funktioniert mit zwei Arten von Inhalten: Widgets und Datentabellen. Alles geschieht innerhalb deines eigenen Widget Builder Kontos und nutzt deine vorhandenen Widgets, Einstellungen und Daten.

info

Der KI-Editor ist nur verfügbar, wenn die KI-Funktionen für deine Organisation freigeschaltet sind. Siehst du ihn nicht, lies KI-Editor ist nicht verfügbar.

Erste Schritte​

Es gibt drei Wege zum Assistenten. Nimm den, der zu deinem Vorhaben passt:

EinstiegWoNutze ihn, wenn
Prompt-Feld im DashboardDashboard, unter „So startest du"du ein neues Widget willst und die Idee in einem Satz hast.
KI-Editor im klassischen EditorWidget Editor, Karte KI-Editor in der Seitenleistedu schon an einem Widget arbeitest und der Assistent es ändern soll.
Datentabellen-KI-EditorDatentabellen, Button KI-Editordu eine Datentabelle anlegen oder befüllen willst.

Aus dem Dashboard​

Schreib einen Satz in das Prompt-Feld im Dashboard und klick auf Starten. Der KI-Editor öffnet sich und schickt deinen Text als erste Nachricht. Klickst du ohne Text auf Starten, öffnet sich der KI-Editor leer.

Das Prompt-Feld im Dashboard mit einer eingetippten Widget-Beschreibung

Der Widget-KI-Editor​

Im Widget-KI-Editor steht die Live-Vorschau links und der Chat rechts. Vor der ersten Nachricht bietet der Chat Vorschläge an, etwa KPI-Dashboard Widget, News-Feed Widget, Wetter Widget und Eigenes Widget. Ein Vorschlag füllt nur das Eingabefeld: Du kannst den Text vor dem Senden noch ändern.

Der leere KI-Editor mit dem Vorschaubereich links und den Vorschlägen über dem Eingabefeld

Auf schmalen Bildschirmen (unter 900 px) werden Vorschau und Chat zu zwei Tabs, Chat und Vorschau.

Was du anfragen kannst​

Der Assistent kann das gesamte Widget bearbeiten, nicht nur das Layout:

  • Ein neues Widget erstellen aus einer Beschreibung
  • Ein bestehendes Widget ändern — Layout, Texte, Farben oder Verhalten
  • Einstellungsfelder ergänzen, damit Redakteure das Widget in Staffbase konfigurieren können
  • Übersetzungen ergänzen für die Sprachen, die du unterstützt
  • API-Daten anbinden, damit das Widget Live-Inhalte zeigt
  • Eine Datentabelle mit einem Widget verbinden
  • Testweise rendern, um das Handlebars-Layout zu prüfen

Beispiel-Prompts:

  • „Erstelle ein Willkommensbanner mit Titel, kurzer Nachricht und einem Button."
  • „Füge ein Einstellungsfeld hinzu, mit dem Redakteure die Hintergrundfarbe wählen können."
  • „Übersetze die Beschriftungen ins Deutsche und Französische."
  • „Hol die letzten drei Artikel von dieser API und zeige sie als Liste."

Die Unterhaltung lesen​

Während der Assistent arbeitet, erscheinen seine Schritte nacheinander als Karten im Chat, und der Senden-Button wird zum Stoppen-Button. Die Vorschau zeigt den zuletzt gespeicherten Stand des Widgets.

Der KI-Editor während einer Antwort: Die Vorschau zeigt das gerade gespeicherte Widget, im Chat erscheinen die Schritte als Karten, unten der Stoppen-Button

Der Assistent ändert das echte Widget​

Der Assistent schlägt keine Änderung vor, die du erst annehmen musst. Jeder seiner Schritte wird direkt im Widget gespeichert. Deshalb steht über der Vorschau Automatisch gespeichert, sobald es ein Widget gibt. Hat ein Schritt das Widget gespeichert, lädt die Vorschau neu und zeigt den neuen Stand.

Ein neues Widget ist inaktiv, in Staffbase sieht es also noch niemand. Die Statusleiste zeigt den nächsten Schritt: Aktivieren, danach Widgets neu registrieren, falls Staffbase das Widget noch nicht kennt, und schließlich das Platzieren auf einer Seite in Staffbase Studio.

Ein fertiges Widget: Die Vorschau zeigt das Wochenmenü, der Chat fasst zusammen, was der Assistent gebaut hat, die Statusleiste zeigt „Automatisch gespeichert" und „Inaktiv"

Nach einer Antwort erscheinen neue Vorschläge: Übersetzungen hinzufügen, Design verbessern, Einstellungsfelder hinzufügen und API-Daten verbinden.

Aktionskarten​

Jede Aktion des Assistenten erscheint als Karte im Chat, zum Beispiel Widget lesen, Widget erstellen, Widget aktualisieren, Rendering testen oder Vorschau erzeugen. Die Karten zeigen dir, was der Assistent tatsächlich getan hat, nicht nur, was er darüber schreibt. So kannst du jede Änderung nachvollziehen und prüfen.

Eine Karte zeigt:

  • ein Status-Symbol: läuft, fertig oder fehlgeschlagen (Fehlgeschlagen: … mit dem Grund)
  • ein kurzes Ergebnis, etwa den Widget-Titel oder einen Vorschau-Link
  • Im Editor öffnen bei Karten, die ein Widget betreffen
  • Technische Details: Klick darauf, um die genauen Argumente zu sehen, die der Assistent geschickt hat, und das Ergebnis, das zurückkam

Eine aufgeklappte Karte „Widget erstellen" mit technischen Details: gesendete Argumente und zurückgegebenes Ergebnis

Bevor der Assistent etwas löscht oder aktiviert, fragt er dich. Die Karte zeigt dann Wartet auf deine Bestätigung, und es passiert nichts, bis du im Chat antwortest.

Eine Antwort stoppen​

Klick auf Stoppen, um eine Antwort zu beenden. Der Chat zeigt Abgebrochen: Der Assistent macht keine weiteren Änderungen. Schritte, die schon fertig waren, bleiben gespeichert. Mit Erneut versuchen schickst du die Nachricht noch einmal.

Zum klassischen Editor und zurück​

Klick im Kopf des KI-Editors auf Klassischer Editor, um das Widget im Widget Editor zu öffnen. Er lädt das Widget so, wie der Assistent es gespeichert hat: Layout, Einstellungsfelder, Übersetzungen, API-Anfrage und Variablen. Dort kannst du von Hand nacharbeiten.

Um mit dem Assistenten weiterzumachen, klick in der Seitenleiste des Editors auf die Karte KI-Editor (oder oben im Editor auf KI-Editor). Der Chat öffnet sich im Widget Editor selbst, Zurück und deine ungespeicherten Änderungen bleiben also beim Widget. Du kannst beliebig oft wechseln.

KI im klassischen Editor​

Die Karte KI-Editor im Widget Editor öffnet einen Chat für das geöffnete Widget. Links steht der Chat, rechts die Vorschau. Über der Vorschau wechselst du zwischen Handy-, Tablet- und Desktop-Breite und lädst sie mit Aktualisieren neu.

Der KI-Editor im Widget Editor: Seitenleiste links, Chat in der Mitte, Vorschau rechts

Hier kann der Assistent alles am Widget ändern, was er auch im Widget-KI-Editor kann: Layout, Einstellungsfelder, Übersetzungen und Datenanbindung. Es gibt keinen eigenen Übernehmen-Schritt: Speichert der Assistent das Widget, übernimmt der Editor diesen Stand.

Die Karte erscheint, wenn die KI freigeschaltet ist und das Widget den Handlebars-Layout-Editor nutzt.

Gesprächsverlauf​

Unterhaltungen werden gespeichert, du kannst also an einer früheren Iteration weitermachen, statt neu anzufangen. Gespeichert werden deine Nachrichten, die Antworten des Assistenten und seine Aktionskarten. Der Titel ist deine erste Nachricht.

  • Im Widget-KI-Editor listet das Gesprächsmenü im Kopf die 50 neuesten Gespräche deiner Organisation, das neueste zuerst. Neu startet ein neues Gespräch, Gespräch löschen entfernt es endgültig. Die Widgets, die dabei entstanden sind, bleiben erhalten.
  • Im klassischen Editor listet Gespräche zu diesem Widget nur die Gespräche, die am geöffneten Widget gearbeitet haben, mit Datum und Anzahl der Nachrichten. Neues Gespräch startet ein frisches.

Das Menü „Gespräche zu diesem Widget" mit mehreren gespeicherten Gesprächen

Gespräche gehören deiner Organisation, nicht dir persönlich: Alle in deiner Organisation, die den KI-Editor nutzen dürfen, sehen sie.

Datentabellen-KI-Editor​

Öffne den Datentabellen-KI-Editor über den Button KI-Editor auf der Seite Datentabellen, oder auf der Detailseite einer Tabelle, um an genau dieser Tabelle zu arbeiten. Links steht der Chat, rechts die Tabellenvorschau. Ihr Kopf zeigt die Anzahl der Spalten und Zeilen, Öffnen führt zur Tabelle, Neu beginnt von vorn.

Der Datentabellen-KI-Editor mit dem Chat links und der Tabellenvorschau mit Spalten und Beispielzeilen rechts

Der Assistent kann:

  • eine neue Datentabelle erstellen
  • Spalten definieren und ihre Typen festlegen
  • Beispielzeilen einfügen für den Start
  • vorhandene Zeilen auflisten
  • das Tabellenschema ändern
  • eine Tabelle mit einem Widget verbinden

Vor der ersten Nachricht bieten die Vorschläge Mitarbeiterverzeichnis, Produktinventar und Eigene Tabelle an, danach Beispieldaten hinzufügen, Weitere Spalten hinzufügen und Aktuelle Daten anzeigen. Die Vorschau lädt nach jeder Antwort neu.

Wie im Widget-KI-Editor beendest du eine Antwort mit Stoppen, und deine Nachrichten bleiben in einem Gespräch, solange du nicht auf Neu klickst. Ein Gesprächsmenü gibt es hier nicht: Nach Neu oder einem Neuladen der Seite beginnt ein neues Gespräch.

Ideal für schnelle Erstentwürfe, Beispieldaten und wiederholbare Tabellen-Setups. Prüfe die erzeugten Spalten und Zeilen, bevor du die Tabelle in einem produktiven Widget verwendest.

Berechtigungen und Grenzen​

  • Nur deine Organisation. Der KI-Editor nutzt deine aktuelle Widget Builder Session. Er kann nur innerhalb deiner Organisation handeln und Inhalte anderer Organisationen weder sehen noch ändern.
  • Deine Rechte. Er kann nur, was dein Konto darf. Ohne Editor-Rechte antwortet der Chat „Du darfst keine Widgets bearbeiten".
  • Lizenz. Ist deine Widget Builder Lizenz abgelaufen, ist der KI-Editor pausiert.
  • Pro Antwort macht der Assistent höchstens 15 Schritte. Deine Organisation kann bis zu 20 Nachrichten pro Minute schicken.
Vor dem Aktivieren prüfen

Der Assistent schreibt echte Änderungen in dein Widget. Bevor du ein Widget für deine Mitarbeiter aktivierst, prüfe das Layout in der Vorschau, die Einstellungsfelder und ihre Standardwerte, die Übersetzungen und bei Datentabellen die Spalten und Zeilen. Aktiviere nur, was du geprüft hast.

Fehlerbehebung​

KI-Editor ist nicht verfügbar​

Sind die KI-Funktionen für deine Organisation nicht freigeschaltet, zeigt der KI-Editor KI-Editor ist nicht verfügbar. Die Buttons KI-Editor auf der Widget-Seite und im Widget Editor tragen ein Schloss-Symbol, auf den Datentabellen-Seiten fehlt der KI-Button ganz.

Die Seite „KI-Editor ist nicht verfügbar" mit einem Link zu dieser Dokumentation und einem Button zurück zu den Widgets

Freischalten kann die KI-Funktionen nur das JASP-Team: Schreib an support@jasp.eu.

Eine Antwort bricht mittendrin ab​

  • Anfrage fehlgeschlagen mit Erneut versuchen: Die KI konnte nicht antworten. Deine Nachricht steht wieder im Eingabefeld, schick sie noch einmal. Schritte, die vor dem Fehler fertig waren, bleiben gespeichert.
  • Zu viele Anfragen: Warte eine Minute, dann klick auf Erneut versuchen.
  • Keine Verbindung zum Server: Prüf deine Netzwerkverbindung, dann klick auf Erneut versuchen.
  • Deine Lizenz ist abgelaufen oder Die KI ist auf diesem Server noch nicht eingerichtet: Ein neuer Versuch hilft nicht, wende dich an deinen Administrator oder an JASP.
  • Eine lange Aufgabe braucht mehr als 15 Schritte: Schick eine kurze Folgenachricht wie „mach weiter", dann setzt der Assistent dort an, wo er aufgehört hat.

Die Vorschau zeigt nicht die letzte Änderung​

Lade die Seite neu, oder klick im Widget Editor über der Vorschau auf Aktualisieren. Bleibt die Vorschau leer oder zeigt sie einen Fehler, öffne das Widget im klassischen Editor: Der Layout-Editor zeigt Handlebars-Fehler mit ihrer Zeile. Du kannst den Assistenten auch bitten: „Teste das Rendering und behebe die Fehler."

Verwandte Seiten​