Interaktive Dashboards über die Canvas-Funktion erstellen (lassen)

Veröffentlicht am 22. September 20257. Oktober 2025 von Matthias Kindt

Interaktive Dashboards lassen sich sehr simpel mit einem Chatbot erstellen, um diese dann in einer Umgebung wie ChatGPT, Gemini oder Claude direkt nutzen zu können. Es bedarf hierbei keinerlei Programmierkenntnisse, sondern ausschließlich eines vernünftigen Prompt und mögliche Folgeprompts, um im Anschluss das Dashboard gezielt anzupassen. Mit Klick auf Enter startet das Sprachmodell selbstständig den Code-Prozess. Dieser Prozess wird auch gerne als „Vibe-Coding“ bezeichnet.

Und so kann es gehen:

1) Prompt formulieren und gezielt z.B. ganz am Ende „Canvas“ ansprechen. Beispielprompt:
***erstelle eine interaktive simulation zum einsatz von künstlicher intelligenz in unternehmen hinsichtlich effizienzsteigerungen. nutze canvas***
2) Nun teilt sich automatisch der Bildschirm in ein kleines linkes Chatfenster und großes rechtes Fenster mit Code
3) Warten, bis das Dashboard fertig erstellt wurde und direkt in der Umgebung ausführen lassen. In ChatGPT über Button-Klick auf Vorschau
4) Wird die Anwendung wegen einer Fehlermeldung nicht ausgeführt, dann Folgeprompt setzen wie „Behebe den Fehler“
5) Möchtet Ihr Veränderungen im Dashboard dann Folgeprompt setzen wie ***füge [XYZ] hinzu***, ***Button [XYZ] funktioniert nicht, bitte beheben*** und Ähnliches. Sprecht dies einfach ganz direkt an

Der obere Screenshot zeigt die Umgebung von ChatGPT und zwar die Startseite. Ihr habt die Möglichkeit, solch eine interaktive Anwendung wie ein Dashboard ausschließlich über den Prompt zu formulieren, mit einem Zusatz wie ***...nutze Canvas*** oder Ihr könnt die Canvas-Funktion ebenfalls über die Menüauswahl aktivieren, in dem Ihr auf das „Plus“ an der Promptleiste klickt, dann unten auf „Mehr“ und nun auf „Canvas“. In diesem Beispielbeitrag führe ich dies ausschließlich über den Prompt durch und zwar Copy & Paste. Dies geht schneller.

Die obere Abbildung zeigt nun den Splitscreen in ChatGPT. Links oben den ursprünglichen Prompt und den weiteren Chatverlauf bzw. eure Kommunikation mit ChatGPT. Das große Fenster zeigt das fertige Dashboard einer „KI-Effizienz-Simulation“, das man nun selbstständig verändern kann, um die Werte anzupassen. Solche Anwendungen können sehr komplex oder auch eher simpel sein. Ist das Dashboard eventuell zu klein geraten, dann schreibt eure Wunschänderung einfach links in das Chatfenster und ChatGPT gibt nun im Anschluss die Versionen 2,3,4…. bis X aus.

Tauchen wie oben Fehler auf, dann teilt dies direkt mit in einem Prompt wie ***Es ist eine Fehlermeldung aufgetaucht. Bitte behebe dies*** und schon wird die Anwendung überarbeitet. Dies läuft sehr unkompliziert. Drückt euch hierbei kurz und klar aus. Im oberen Beispiel habe ich nur die Fehlermeldung per Copy & Paste als Prompt eingegeben und schon geht ChatGPT von oben nach unten wirklich jede Zeile Code einzeln durch und überprüft, wo der Fehler ist. Die blaue Markierung zeigt an, welche Zeile aktuell auf Fehler durchsucht wird.

Wird bei euch nur der Code angezeigt, ohne den Splitscreen, dann klickt oben rechts den schwarzen Button „Vorschau“. Dies wird u.a. so dargestellt, falls man das Dashboard wiederholt als Chat aufruft. Auch der umgekehrte Weg ist möglich, also oben rechts über „Anhalten“ vom Dashboard zurück zum Code, wobei sich der Code im Rahmen eines Texteditors selbstständig bearbeiten lässt.

Im Weiteren wird der gleiche Prompt 1:1 in Gemini und Claude übertragen und mit ChatGPT verglichen.

***erstelle eine interaktive simulation zum einsatz von künstlicher intelligenz in unternehmen hinsichtlich effizienzsteigerungen. nutze canvas***

Auch Gemini (siehe oben) verfügt ebenso wie Claude und auch viele weitere Chatbots über die Canvas-Funktion mit automatisiertem Programmieren von diversen Anwendungen wie z.B. Spielen oder Simulationen. Mit dem „Vibe-Coding“, also dem Schreiben von simplen Text als Input und dem Output vollständig programmierter Programme, können auch Laien wirklich tolle Ergebnisse erzielen und diese öffentlich teilen.

Übrigens, dies klappt alles sehr gut kostenfrei, um erst einmal zu testen, was denn in diesem Bereich überhaupt momentan möglich ist. Es lohnt sich aus meinen Erfahrungen eigentlich fast immer, dies zumindest kurz auszuprobieren, ohne direkt ein Premium-Abo abschließen zu müssen.

Zu Schluss schauen wir uns noch den Chatbot Claude an, bei dem solche Anwendungen auch als Artefakte bezeichnet werden, die sich frei zugänglich machen lassen, damit jeder die App testen darf. Dazu rechts oben auf „veröffentlichen“ klicken und den Link kopieren. Jeder kann nun auf dieser Grundlage ganz eigene Artefakte remixen. Insgesamt gibt es wirklich sehr viele Möglichkeiten, eigene Anwendungen erstellen zu lassen, um bestimmte Prozesse zu visualisieren oder einfach spielerisch zu lernen. Viel Spaß!

Update ChatGPT: Prompt erweitert für ein moderneres Design

***erstelle eine futuristische interaktive simulation zum einsatz von künstlicher intelligenz in unternehmen hinsichtlich effizienzsteigerungen. nutze canvas und kräftige bunte farbtöne mit leuchtenden elementen***