← Alle Beiträge

Fenster im Frontend

AI Helper kennenlernen — ein in JustZix integrierter KI-Assistent

Bei JustZix ging es immer um eine Sache: das Aussehen und Verhalten von Seiten zu ändern, ohne die DevTools zu öffnen. Heute fügen wir einen Partner für diese Aufgabe hinzu — den AI Helper, einen KI-Assistenten, der innerhalb der Seite lebt, die Seite gemeinsam mit Ihnen liest und Ihnen hilft, das CSS und JS zu schreiben, das sie repariert.

Was AI Helper ist

AI Helper ist ein schwebendes Fenster — dasselbe TEMP-artige Fenster, das Sie bereits aus den CSS- und JS-Panes kennen. Es wird innerhalb der aktuellen Seite gerendert, eine Instanz pro Tab, und Sie können es verschieben, in der Größe ändern und schließen, wann immer Sie möchten. In diesem Fenster befindet sich ein Chat: Sie tippen, das Modell antwortet, und die Unterhaltung baut sich auf wie bei jedem anderen Chat-Tool.

Der Unterschied zu einem generischen Chatbot in einem anderen Tab ist, dass dieser in der Seite ist. Er weiß, wo Sie sich befinden. Er kann das DOM betrachten. Und er kann Code direkt in ein TEMP-Pane einfügen, sodass Sie das Ergebnis live auf der echten Website sehen, ohne irgendetwas kopieren und einfügen zu müssen.

Wie man ihn öffnet

Drei Möglichkeiten, wählen Sie die, die Ihnen am besten passt:

Das Fenster öffnet sich dort, wo Sie es zuletzt gelassen haben. Schließen Sie es mit dem X in seiner Ecke — es ist eine einzige Instanz pro Tab, sodass Sie nie fünf davon übereinandergestapelt haben.

Bringen Sie Ihren eigenen API-Schlüssel mit

JustZix hostet kein Modell und verkauft keine Tokens weiter. Sie bringen Ihren eigenen Schlüssel von einem Anbieter mit, dem Sie bereits vertrauen. AI Helper unterstützt drei:

AnbieterWoher der Schlüssel kommt
OpenAIplatform.openai.com
Anthropicconsole.anthropic.com
GeminiGoogle AI Studio

Sie fügen den Schlüssel einmal unter Einstellungen → AI Helper ein, wählen einen Standardanbieter und ein Modell. Die Modellliste wird live vom Anbieter abgerufen, sodass Sie immer sehen, was Ihr Konto tatsächlich nutzen kann — und der Auswähler verwendet standardmäßig das oberste Modell. Wenn Sie mehr als einen Schlüssel speichern, können Sie den Anbieter direkt im Chat-Fenster wechseln. Die vollständige Anleitung finden Sie im Einrichtungsleitfaden.

Das Chat-Fenster

Alles, was Sie brauchen, befindet sich in einem Panel:

Es sieht aus wie ein Chat, weil es einer ist. Das Neue ist, was das Modell sehen und tun kann.

Er kennt die Seite bereits

Jedes Mal, wenn Sie eine Nachricht senden, hängt AI Helper automatisch den aktuellen Seitenkontext an — die URL, den Seitentitel und ein HTML-Fragment der Seite. Sie fügen nichts ein. Statt also zu beschreiben "es gibt einen klebrigen Header, der den Inhalt überlappt", sagen Sie einfach "repariere den klebrigen Header", und das Modell hat bereits etwas Konkretes, mit dem es arbeiten kann.

Wenn es mehr Details braucht, kann es diese bei Bedarf anfordern — siehe den Beitrag über die Seiteninspektions-Werkzeuge.

Er kann echte Arbeit leisten, nicht nur reden

AI Helper ist nicht nur ein Code-Generator. Er führt einen agentischen Arbeitsablauf aus: das Modell kann Werkzeuge aufrufen, die Seite inspizieren, ein TEMP-CSS/JS-Fenster öffnen, Code hineinlegen und — nur mit Ihrer ausdrücklichen Bestätigung — einen Ordner, eine Gruppe oder eine Regel in Ihre JustZix-Bibliothek speichern.

Eine typische Sitzung sieht so aus:

Sie:    Verstecke das Newsletter-Popup auf dieser Website.
KI:     [query_page] inspiziert den Popup-Container
KI:     [open_temp_pane] + [set_temp_pane_code] legt Test-CSS ab
KI:     "Prüfe die Seite — ist das Popup weg? Soll ich das speichern?"
Sie:    Ja, speichere es.
KI:     [create_rule] (fragt nach einer ausdrücklichen Bestätigung)

Jeder Werkzeugaufruf erscheint als "Chip" im Fenster, sodass Sie immer sehen, was das Modell angefasst hat. Die Schleife läuft bis zu 8 Schritte pro Zug. Die vollständige Aufschlüsselung finden Sie im Deep Dive zum Werkzeugaufruf.

Ihre Schlüssel bleiben privat

API-Aufrufe gehen über den Background-Service-Worker der Erweiterung, niemals über das JavaScript der Seite selbst. Das bedeutet, dass Ihr Schlüssel niemals den Seitenkontext erreicht und die Anfrage die Content Security Policy der Seite umgeht. Schlüssel leben in chrome.storage.local, und jeder Schlüssel hat ein optionales Sync-Kästchen (standardmäßig deaktiviert). Das Datenschutzmodell wird ehrlich im Beitrag über Schlüssel und Datenschutz behandelt.

Für wen das gedacht ist

Wenn Sie bereits Ihr eigenes CSS schreiben, ist AI Helper ein schnellerer Weg, Selektoren gegen eine störrische Website zu entwerfen und zu testen. Wenn Sie überhaupt kein CSS schreiben, ist es eine Möglichkeit, in einfacher Sprache zu beschreiben, was Sie wollen, und am Ende eine funktionierende Regel zu erhalten. So oder so wird nichts gespeichert, ohne dass Sie auf Bestätigen klicken.

Siehe auch

AI Helper ist im aktuellen Build von JustZix enthalten — kostenlos, ohne Konto, Chrome 100+ und die Chromium-Browser. Laden Sie die Erweiterung herunter, fügen Sie einen Schlüssel hinzu und drücken Sie Ctrl+Alt+\ auf einer beliebigen Seite, um Ihren neuen Assistenten kennenzulernen.

Bewerte diesen Beitrag

Noch keine Bewertungen — sei der Erste.

Probiere es selbst aus

Installiere JustZix und füge ein beliebiges Snippet aus diesem Artikel ein. Zwei Minuten von null bis zu einer funktionierenden Regel auf allen deinen Geräten.

JustZix holen

Funktionen · So funktioniert es · Beispiele · Anwendungsfälle