Kachelvisu per Claude erstellen lassen?

Hallo zusammen,

ich fasse die Frage bewusst kurz:

Gibt es bereits Erfahrungen, ob es funktioniert, sich eine Kachelvisu von Null an komplett per agentischer KI erstellen zu lassen, basierend auf Bildern als Designvorlagen und der Struktur der alten Webfront-Visu?

Klingt vielleicht komisch, aber nach meinen Erfahrungen mit Claude Code für andere Projekte (erstellen komplexer Software incl. GUI) sind die Zeiten vorbei, wo man sich irgendwas händisch zusammenklicken will. Darum die Frage: hat jemand in dieser Richtung schon experimentiert?

Neugierige Grüße
Volker

PS: Den parallelen Thread zu IPS-View hatte ich gesehen, frage hier aber bewusst zur Kachelvisu ohne IPS-View.

Soweit ich weiß, kann der MCP-Server das nicht.

Grüße,
Kai

Ja, ich denke das würde über die Dateien selbst gehen (müssen).

Ich finde die Idee aber cool. Nur bisher habe ich nicht nicht ganz die Idee wie oder was genau die KI dort sinnvoll umsetzen können. Was wäre dort deine Vorstellungen?

paresy

Naja man könnte der Ki eine Skizze oder Screenshots geben, dann könnte sie diese idealerweise nachbauen.

Kachgelgrößen, Kategorieren.
Somit würde sehr viel Handarbeit entfallen.

Grüße,
Kai

Kategorien geht ja über MCP. Theoretisch können wir auch das Format der Gitter Komfiguration dokumentieren. Dann würde man die Größen auch anpassen können.

paresy

Das mit den Formaten wäre cool.
Dann könnte man Standards überall ausrollen.

Grüße,
Kai

1 „Gefällt mir“

Hallo @paresy,

Meine Ausgangssituation: Webfront-Visu mit grob zweigeteilter Struktur, die zwei Sichten auf die Installation gibt: einerseits nach Räumen (eher kompakt, innerhalb der Räume sortiert nach Gewerken, viel Info auf wenig Raum) und andererseits weitere Seiten aufgeteilt nach Gewerken (Heizung, Media, Webdienste) mit mehr Detailtiefe.

Weiterhin Ausgangssituation: Ihr habt mich irgendwann bei den Verfeinerungen der Kachelvisu-Konfiguration und ihrer Möglichkeiten abgehängt. Da einen Überblick über die Möglichkeiten zu bekommen, die zu meinem Bedarf passen, wäre mit sehr großem Zeitaufwand (Leseaufwand Doku + Forum) verbunden und vermutlich verpasst man trotzdem was.

Und da ist mein Ansatz: solche großen Mengen an Information zusammenzutragen und zu bewerten und daie “passende” Lösung zu finden, das kann Calude inzwischen sehr gut. Auch die Implementierung mit automatischen Tescases und Korrekturen funktioniert gut.

Darum der Gedanke, mit Hilfe von Claude die bestehende Grundstruktur automatisiert in eine Kachelvisu zu überführen. Oben hatte ich was von Designvorlagen geschrieben, das bezieht sich auf die gewünschte Darstellung (zur Zeit kompakte Listen ggf. mit horizontalen Slider) aber hier kann die KI auch helfen, meine Viessmann bzw. Miele-Geräte ggf. mit passenden Kacheln (Community-Code) auszustatten. Denn wie gesagt - da habe ich inzwischen völlig den Überblick verloren, was es gibt und was geht.

In diesem Sinne: Designvorlagen eher als grobe Richtung zu verstehen, von der aus man Alternativen präsentiert bekommt. Meine Vorstellung ist, dass Claude dann kleine Test-Visus baut mit den alternativen Darstellungsmöglichkeiten zur Auswahl, ausgehend von meinen Startvorgaben. Und dann umsetzen auf der Struktur der vorhandenen Kachelvisu (nicht einfach dem rohem Objektbaum).

Klingt wahrscheinlich etwas fuzzy, aber das wäre meine Vorstellung basierend auf der Erfahrung beim Erstellen von komplett neuen GUI-Applikationen mit Claude. Da sollte man es doch irgendwie auch für diesen Zweck nutzen können?

Was mich davon abhält, die ganze Symcon-Datenstruktur nach Claude zu geben und einfach loszutesten sind u.a. die Zugangsdaten, die dort eingebettet sind in der sonstigen Datenstruktur.

Viele Grüße
Volker

Ohne Gewähr, dass es funktioniert. Ich habe mein Claude mal eine technische Doku für die Gitterkonfiguration machen lassen. Füttert euren Claude mal damit und wenn er per MCP oder JSON-RPC ans Symcon ran darf, dann könnte das funktionieren.

paresy

2 „Gefällt mir“

Was Claude selbst zu meiner Aufgabestellung sagt:

Kurz gesagt: Ja, das geht

Dein Vorgehen funktioniert, wenn man es in Schritte aufteilt. Den Teil, der Zeit frisst, kann Claude gut übernehmen: Doku und Forum zusammentragen und bewerten, Varianten bauen, Skripte schreiben und Fehler korrigieren. An zwei Stellen muss man aber mit Absicht vorgehen: wie die Daten zu Claude kommen (wegen der Zugangsdaten), und wo die Test-Visus wirklich angezeigt werden.

1. Das Zugangsdaten-Problem lösen: Export mit Whitelist statt Komplettdump

Du gibst Claude nicht die ganze Symcon-Datenstruktur. Stattdessen schreibt Claude ein PHP-Exportskript, das du in Symcon ausführst. Das Skript holt nur, was für die Visu gebraucht wird:

  • Objektbaum: IDs, Namen, Typen, Parent, Position, Icons, Links und Ziele

  • Variablen: Typ, Profil bzw. Darstellung, aktueller Wert (wenn gewünscht), Aktionsskript ja/nein

  • WebFront-Konfiguration: Items, Splitpanes, Kategorien, also die Struktur deiner Raum- und Gewerke-Sicht

  • Instanzen: nur Modulname und Modul-ID, keine Instanzkonfiguration (dort liegen API-Keys, Passwörter und Tokens)

  • Skripte: nur der Name, kein Inhalt

Zusätzlich gibt es einen Filter, der alles mit pass|token|secret|key|user|mail maskiert. Heraus kommt eine JSON-Datei, die du vor dem Weitergeben selbst durchsiehst. Damit hast du die Kontrolle, und Claude bekommt trotzdem alles, was es für die Visu braucht.

Direkten Zugriff per JSON-RPC würde ich zunächst nicht geben. Wer dort PHP ausführen kann, hat volle Kontrolle über die Anlage. Später ginge das mit einem Testsystem, dazu unten mehr.

2. Ablauf in Phasen

Phase A: Bestandsaufnahme und Recherche

  • Claude liest den Export und baut daraus ein Modell: Räume × Gewerke, welche Geräte, welche Variablentypen.

  • Dann recherchiert es gezielt für deine Geräte: Was bringen die Viessmann- und Miele-Module schon an Kacheln mit? Welche Community-Kacheln (HTML-SDK) gibt es im Module Store und im Forum? Welche Features der Kachelvisu kamen in den letzten Versionen dazu?

  • Ergebnis ist ein kompakter Katalog mit Bewertung („passt zu deinem Bedarf“, „aktiv gepflegt?“, „Aufwand“), statt 200 Forenseiten.

  • Wichtig: Dieser Schritt muss mit Webrecherche laufen. Die Kachelvisu entwickelt sich schnell, und Wissen aus dem Training reicht dafür nicht.

Phase B: Strukturvorschlag

  • Abbildung deiner Zweiteilung auf die Kachelvisu, zum Beispiel: Startseite mit Raumkacheln (kompakt) und daneben Gewerke-Kacheln (Heizung, Media, Webdienste) mit Unterseiten für die Details.

  • Als Diagramm bzw. Tabelle zum Abnicken, bevor irgendetwas gebaut wird.

Phase C: Designvarianten

Hier liegt der Knackpunkt: Die Kachelvisu wird von Symcon gerendert. Es gibt drei Wege, abhängig vom Ziel:

Weg Wie Vorteil Nachteil
HTML-Mockups Claude baut klickbare Nachbauten deiner Bildvorlagen im Browser sehr schnell, viele Varianten nicht originalgetreu, die echten Kacheln sehen anders aus
Echte Test-Visu Skript legt eine separate Test-Kategorie und eine eigene Visualisierungsinstanz mit Dummy-Variablen an echtes Rendering, eindeutig braucht Symcon, langsamere Iteration
HTML-SDK-Kacheln eigene Kacheln als HTML/JS, standalone im Browser mit Mock-Daten entwickelt, danach als Modul verpackt volle Gestaltungsfreiheit, z. B. für Viessmann/Miele Wartungsaufwand, eigenes Modul

Meine Empfehlung: Mockups nur zur groben Richtungswahl. Danach echte Test-Visus. HTML-SDK nur dort, wo die Standardkacheln deine Vorstellung nicht treffen.

Phase D: Umsetzung

  • Ein idempotentes Aufbauskript: Es legt die neue Kachelvisu-Struktur in einer eigenen Kategorie an, mit Links auf deine bestehenden Variablen.

  • Das alte WebFront bleibt unangetastet und läuft parallel weiter. Rückgängig machen heißt: Kategorie löschen.

  • Bei Änderungen wird das Skript angepasst und neu ausgeführt, statt die Visu von Hand zu bearbeiten. So bleibt die Konfiguration nachvollziehbar.

3. Wie die automatische Test- und Korrekturschleife hier aussieht

Am besten funktioniert das, wenn Claude das Ergebnis selbst sehen kann:

  1. Claude erzeugt das Skript, du führst es aus (oder Claude per JSON-RPC auf einem Testsystem).

  2. Claude öffnet die Test-Visu im eingebauten Browser (lokale IP, nur Lesezugriff), macht einen Screenshot und vergleicht mit der Vorlage.

  3. Claude korrigiert, und es geht in die nächste Runde.

Für ein wirklich autonomes Arbeiten gibt es eine saubere Variante: ein zweites Symcon als Testsystem (z. B. Docker oder Raspberry Pi), das nur die per Skript erzeugte Dummy-Struktur enthält und keine echten Geräte und Zugangsdaten. Dort kann Claude frei arbeiten. Erst das fertige Aufbauskript läuft dann auf deinem Produktivsystem. Ob und wie deine Lizenz ein Testsystem abdeckt, müsstest du prüfen.

4. Realistische Grenzen

  • Symcon-API-Details: Claude kennt die API grundsätzlich, wird sich bei einzelnen Funktionsnamen oder Parametern (vor allem neu bei Darstellungen bzw. Kachelvisu) aber manchmal irren. Die Testschleife fängt das ab. Ohne Testschleife wird es mühsam.

  • Von der Bildvorlage zur Kachel: Standardkacheln haben ein festes Aussehen. Einen „Look“ wie auf einem Pinterest-Bild bekommt man nur mit HTML-SDK, und das ist dann eigener Code, den du pflegen musst.

  • Community-Code bewerten: Claude kann einschätzen, ob ein Modul gepflegt wird und zu deinem Bedarf passt. Ob ein Modul auf deinem System sauber läuft, zeigt aber nur der Test.

  • Fuzzy ist okay: Dein Ansatz („grobe Richtung, dann Alternativen zur Auswahl“) passt gut zu dieser Arbeitsweise. Wichtig ist nur, dass es nach Phase B eine verbindliche Struktur gibt, sonst dreht man sich bei den Designs im Kreis.

5. Vorschlag zum Einstieg: kleiner Pilot

Nicht gleich alles umbauen, sondern ein Raum plus die Heizungsseite (Viessmann). Daran testest du den gesamten Ablauf: Export → Recherche → 2–3 Varianten → Aufbauskript. Danach weißt du, ob die Qualität passt, bevor der Rest dran ist.

Konkret wäre der erste Schritt: Claude schreibt das bereinigte Exportskript. Dafür bräuchte ich deine Symcon-Version (7.x oder 8.x, wegen Profilen bzw. Darstellungen) und die Info, ob das Skript Variablenwerte mit exportieren soll oder nur die Struktur.

~~~~

Nachtrag: Da ich keine Lust auf manuelles Copy & Paste habe und Claude Code vieles autonom erledigen soll scheint der Weg über einen hierfür von Claude erstellten MCP-Server zu sein, der die Sicherheitsaspekte implementiert: ipsymcon-mcp-server von Schimmilab forken und absichern (Whitelist, Secret-Filter, Schreiben nur in der Zielkategorie).

Ich hab mir eine Visu mit ChatGPT inkl. mehrere Module gebaut, das geht dort auf jeden Fall, also sollte das Claude sicherlich auch können. Die Visu ist als Modul eingebunden über Github.

Es geht voran; Claude hat einen neuen sicheren MCP-Server gebaut, der kritische Eingriffe in das vorhandene System unterbinden soll und nur in der neuen Kachelvisu-Kategorie schreiben darf. Die aktuelle Webfront-Struktur hat er untersucht und baut nun Demonstratoren für mögliches Kachelvisu-Design. Zum automatischen Testen haben wir eine zweite Symcon-Instant in einem WSL-Docker angelegt. Wenn ich die Nacht durchmachen ist die Kachelvisu morgen fertig :face_with_peeking_eye:

Moin Michael,

ich denke mal (und hoffe) das ist nicht explizit auf Claude gemünzt, oder?
Habe es mir noch nicht angesehen. Idee wäre, ich teste das mal mit Chattie/Codex.

LG
Burkhard

Die Anleitung geht natürlich für alle KIs :wink: Ich bin von meiner Formulierung etwas einseitig :smiley:

paresy

1 „Gefällt mir“

Es geht zügig voran, die Test-Räume stehen, nun werden mir die Designalternativen präsentiert.
Ich hatte auch mal Gira-Look angefragt, aber das benötigt zu viel Bildschirmplatz.

Mockup:

… und die Umsetzung “in echt”, die Designdatei zum Hochladen hat Calude erstellt.

Hat funktioniert, wird für die Geräte passend berechnet und am Server gesetzt.

Kachelvisu ist bald fertig, mit deiner Hilfe incl. Konfiguration für 3 unterschiedliche Endgeräte. Von Null an komplett neu aufgebaut mit Hilfe von Claude, nahezu keine Mausklicks im Symcon-GUI. Cool!

3 „Gefällt mir“

Ich hab das mal Codex gegeben, mit folgenden Anweisung:
1.) Gesamtübersicht mit Heizung, Anwesenheit und Beleuchtung
2.) Räume einzeln aufrufbar
3.) Fehlermeldungen bei Bedienung
4.) Responsiv /scrollen wenn möglich vermeiden



Find der hat das ganz gut umgesetzt.

LG
Burkhard

Ja, anderer gestalterischer Ansatz. Mein Ziel war es, erstmal nahe am gewohnten Look des Webfront zu bleiben, damit es keinen harten Bruch bei der Umgewöhnung gibt. Deshalb sollten auch die dortigen Strukturen erhalten bleiben, auch wenn manches dadurch doppelt erscheint (uin Raumstruktur und in den Gewerken). Das hat funktioniert.

Die Sicherheitsbedenken (keine volle Konfiguration incl. Passworte an Claude übergeben) konnten durch einen dafür neu erstellten MCP-Server gelöst werden, der als Gateway dazwischen sitzt und alles an kritischen Daten blockt. Auch Schreiben (nur unterhalb Kachelvisu!) und bestimmte Zugriffe müssen dort explizit vom Nutzer freigeschaltet werden. Claude hat das alles erstellt, insoweit muß man an dieser Stelle trotzdem etwas Vertrauen haben. Testphase des gewählten Designs mit einem Symcon-Testsystem im Docker, von Claude dafür automatisch installiert und konfiguriert.

Danach dann automatische Erstellung des Baums für die Kachelvisu im Produktivsystem und automatische Konfiguration aller Kachel-Größen (kein Scrollen in der Kachel) für die 4 von mir genannten Zielsysteme (Browser hoch+quer, iPad hoch, iPhone hoch). Passt alles, Danke dafür an @paresy für die Ergänzung gestern.

Was ich cool finde: keine Klickorgien im GUI, keine Leseorgien in Doku und Forum.

1 „Gefällt mir“

Nehmt es mir nicht übel, aber die Visualisierungen sehen alle aus als ob sie mit HTMLBoxen umgesetzt wurden, oder?

Das hat für mich mit TileVisu eigentlich weniger zu tun - unabhängig ob das Design gefällt oder nicht!

Oder hab ich was übersehen?

Bei mir native Listendarstellung von Symcon

1 „Gefällt mir“