HTML-Code aus ChatGPT oder Gemini ausführen und die Seite live ansehen

Der schnellste Weg, HTML-Code aus ChatGPT oder Gemini auszuführen: Drücke in der kostenlosen Erweiterung AI Code Harvester auf Anzeigen. Deine Seite öffnet sich live in einem neuen Tab, mit Knöpfen für Computer-, Tablet- und Handygröße, und du musst nie eine Datei speichern. Ohne die Erweiterung kopierst du den Code in eine Datei namens index.html und klickst doppelt darauf, wie weiter unten erklärt.

Warum Code in einem Chat noch keine Webseite ist

Wenn ChatGPT oder Gemini „eine Webseite bauen“, geben sie dir eigentlich Text: einen Block HTML (das Skelett der Seite), oft einen Block CSS (Farben und Layout) und einen Block JavaScript (Buttons und Aktionen). Denk an ein Rezept. Alle Worte sind da, aber noch hat niemand das Gericht gekocht. Der Webbrowser ist der Ofen, der aus dem Rezept etwas macht, das du ansehen kannst.

Manche Chats zeigen eine eigene kleine Vorschau, aber nicht immer, nicht für jede Art von Code, und sie ist weg, wenn du den Chat verlässt. Wenn du die Seite richtig ansehen willst, in verschiedenen Bildschirmgrößen, und später wieder zu ihr zurückkommen, musst du sie selbst ausführen.

Der einfache Weg: Anzeigen drücken

AI Code Harvester ist eine kostenlose Chrome-Erweiterung (ein kleines Zusatzprogramm, das dem Browser eine neue Funktion gibt). Sie sitzt auf den Seiten von ChatGPT und Gemini, findet die Codeblöcke in der Antwort und zeigt dir die Seite, wenn einer davon eine Webseite ist. Hier ein kurzes Video, dann die Schritte.

1. Installiere die Erweiterung. Füge sie aus dem Chrome Web Store hinzu. Sie ist kostenlos und braucht keine Anmeldung.
2. Bitte die KI um eine Seite. Zum Beispiel: „Bau mir eine einseitige Webseite für eine kleine Bäckerei mit einem Bestellknopf. Gib mir index.html, style.css und app.js.“ Es hilft, die Dateien zu benennen.
3. Warte, bis die Antwort fertig ist. Das kleine Code-Harvester-Panel auf der Seite listet die Dateien auf, die es gefunden hat.
4. Drücke Anzeigen. Deine Seite öffnet sich in einem neuen Tab. Wenn du das Panel als schmale Schublade am Bildschirmrand geparkt hast, sitzt der Anzeigen-Knopf auf der Schublade.
5. Probiere die drei Größen-Knöpfe aus: Desktop, Tablet und Handy. Sie zeigen, wie die Seite auf einen Computerbildschirm, ein Tablet und ein Handy passt.
6. Nicht zufrieden? Bitte die KI um eine Änderung. Wenn sie antwortet, aktualisiert sich die Vorschau von selbst, du kannst also weiter bitten und weiter schauen.
7. Mehr Platz gewünscht? Drücke im Panel auf Öffnen ⤢. Der Workspace öffnet sich mit einem Tab Vorschau, einem Neu-laden-Knopf und einer Liste, in der du wählst, welche Datei du ansiehst.

Wie setzt sie die Teile zusammen? Eine Webseite fragt ihre anderen Dateien meist mit Namen an, zum Beispiel style.css und app.js. Die Erweiterung findet sie in derselben Antwort und schiebt sie in die Seite, sodass sie aussieht und funktioniert, als lägen sie nebeneinander gespeichert. Hat die Antwort mehr als eine HTML-Seite, kannst du über ein Auswahlmenü wählen, welche du ansiehst.

Ist es sicher, Code auszuführen, den eine KI geschrieben hat?

Die Vorschau läuft in einem abgeschlossenen Raum, den Programmierer Sandbox nennen. Die Seite kann sich zeichnen und ihre eigenen Buttons ausführen, hat aber keinen Zugriff auf die Erweiterung, deinen Browser oder deine Daten. Lädt die Seite eine Bibliothek aus dem Internet, geschieht auch das nur in diesem abgeschlossenen Raum. Trotzdem gilt: Code ist Code, behandle also eine Seite, die du nicht gelesen hast, wie jede Datei von einem Fremden. Die Vorschau entsteht auf deinem Computer und nichts wird zu uns hochgeladen.

Keine Erweiterung? Der Weg von Hand

Es geht ohne jedes Werkzeug. Es hat nur ein paar Schritte mehr, und du wiederholst sie nach jeder Änderung.

1. Kopiere den HTML-Block aus dem Chat.
2. Füge ihn in den Editor ein (oder einen anderen Texteditor für einfachen Text) und speichere ihn als index.html. Wähle im Speichern-Fenster „Alle Dateien“, damit er nicht als index.html.txt endet.
3. Mach dasselbe mit den CSS- und JavaScript-Blöcken, mit den Namen, die das HTML verlangt (zum Beispiel style.css und app.js), im selben Ordner.
4. Klicke doppelt auf index.html. Sie öffnet sich in deinem Browser als echte Seite.
5. Etwas geändert? Speichere den neuen Code über die alte Datei und drücke im Browser auf Aktualisieren.

Der übliche Stolperstein ist eine Seite, die nackt aussieht oder Knöpfe hat, die nichts tun. Meistens passt ein Dateiname nicht zu dem, was das HTML anfragt. In der Vorschau der Erweiterung nimmt sie bei abweichenden Namen die nächste unbenutzte Datei des richtigen Typs, sie verzeiht das also. Von Hand musst du den Namen selbst korrigieren.

Wenn die Vorschau falsch aussieht

• Sie sieht leer oder halb fertig aus. Die letzte Antwort enthält vielleicht nur einen Teil des Codes, zum Beispiel eine geänderte Datei. Bitte die KI, „mir die kompletten Dateien noch einmal zu geben“.
• Bilder fehlen. Ein Chat kann keine Bilddateien senden. Nutze Bilder mit Webadressen oder füge später eigene hinzu.
• Knöpfe tun nichts. Such in der Liste des Panels nach einer JavaScript-Datei. Hat die KI sie in eine andere Antwort gepackt, bitte um alle Dateien in einer Antwort.
• Auf dem Computer gut, auf dem Handy kaputt. Drücke Handy, sieh nach, was nicht stimmt, und bitte die KI, „es für kleine Bildschirme anzupassen“.
• Seiten, die eine Anmeldung oder eine Datenbank brauchen. Hier siehst du nur, wie sie aussehen, nicht, wie sie sich verhalten. Sie brauchen einen echten Server.

Bitte die KI um Seiten, die sich gut ansehen lassen

• Bitte um alle Dateien in einer Antwort, mit dem Dateinamen über jedem Block.
• Bitte bei einer einfachen Seite um eine einzige Datei: „Pack das CSS und das JavaScript in das HTML“.
• Sag, für wen sie ist: „Sie muss auf dem Handy gut aussehen“.
• Ändere immer nur eine Sache. So siehst du leichter, was schiefgegangen ist.

Sieht die Seite richtig aus, ist die nächste Frage, wie du sie für andere online stellst. Unser Ratgeber Wo du die Webseite deiner KI veröffentlichst geht die kostenlosen und bezahlten Möglichkeiten in einfachen Worten durch. AI Code Harvester kann mehr als die Vorschau: Es lädt alles als ZIP herunter (auf Wunsch mit deinen eigenen Ordnern), exportiert eine einzelne Seite oder nimmt den Chat in eine andere KI mit. Es liest ChatGPT- und Gemini-Chats und läuft auf deinem Computer. Füge es aus dem Chrome Web Store hinzu.

Gut zu wissen, bevor du loslegst

FAQ