Aktualisiert am 17. Okt. 2026

## Wie teile ich eine HTML-Seite, die ich mit KI gebaut habe?

Speichere die Ausgabe der KI als eine .html-Datei, lade sie hier hoch und kopiere den Link. Die Seite wird live in einer abgeschotteten Browseransicht gerendert, wer den Link bekommt, sieht also die funktionierende Seite, keinen Code. Hat dein KI-Tool ein ganzes Projekt erzeugt, baue es und veröffentliche den Ausgabeordner als ZIP-Website.

### Eine Datei ist in jedem Tarif kostenlos

Die meisten Chat-Tools liefern eine einzelne Seite: ein Dashboard, einen Rechner, ein Quiz, einen Landingpage-Entwurf. Lade diese eine .html hoch, und sie wird auch im Free-Tarif zum Link, bis 250 MB pro Datei.

[HTML-Hosting](https://linkinseconds.com/de/html-hosting)

### Ganze KI-Apps als Website

Lovable, Bolt und v0 erzeugen meist ein ganzes Projekt, keine einzelne Datei. Baue es, zippe den Ausgabeordner (dist/ oder out/) und veröffentliche ihn mit dem Website-Hosting von Pro, mit allen Routen und Ressourcen.

[Vite- oder React-Build veröffentlichen](https://linkinseconds.com/de/deploy-vite-react-build)

### Lass Claude oder Cursor es für dich veröffentlichen

Verbinde unseren MCP-Server mit Claude Code, Cursor oder VS Code und sag: "Veröffentliche diese Seite als Link". Der Assistent lädt die Datei in dein Konto hoch und antwortet mit der URL.

[Doku zum MCP-Server](https://linkinseconds.com/de/docs/mcp)

### Sicher zu öffnen, für dich und für sie

Generierter Code läuft in einem abgeschotteten Frame ohne Same-Origin-Zugriff, er kann also niemandes Cookies lesen. Jeder Upload wird anhand seiner echten Bytes geprüft und gescannt, bevor er öffentlich wird.

### Was du vor dem Teilen prüfen solltest

React-Code ist noch kein HTML. Eine .jsx- oder .tsx-Komponente aus einem Chat läuft nicht allein; bitte die KI um eine einzige, in sich geschlossene HTML-Datei, oder baue das Projekt und veröffentliche die Ausgabe.

Gespeicherte Daten bleiben eventuell nicht erhalten. Ein einzelner HTML-Link läuft in der Sandbox, Code, der auf localStorage oder Cookies setzt (eine To-do-Liste, die sich Einträge merkt), speichert zwischen Besuchen eventuell nicht.

Kein Server und keine Geheimnisse. Statisches Hosting liefert nur Dateien aus; füge nie einen API-Schlüssel ins HTML ein, denn jeder, der den Link öffnet, kann ihn lesen.

## So funktioniert's

- 1 ### Hol dir eine in sich geschlossene .html-Datei Kopiere oder lade den Code aus Claude, ChatGPT, Gemini oder deinem Editor herunter und speichere ihn als index.html. Hat die KI ihn auf mehrere Dateien verteilt oder eine React-Komponente geschrieben, bitte sie um eine einzige HTML-Datei mit eingebettetem CSS und JavaScript.

- 2 ### Hochladen und anmelden Zieh die Datei auf die Karte und melde dich mit Google an. Die Datei wird anhand ihrer echten Bytes geprüft und gescannt, gratis bis 250 MB und 500 MB mit Pro. Eine gebaute App kommt als ZIP über das Website-Hosting von Pro hoch.

- 3 ### Link öffnen, dann teilen Öffne deinen Link einmal, um zu prüfen, ob die Seite funktioniert, und schick dann die URL oder den QR-Code. Füge bei Bedarf ein Passwort oder ein Ablaufdatum hinzu und sieh am Aufrufzähler, wann er geöffnet wurde.

## Claude-Artefakte: die Seite als eine HTML-Datei speichern

Wenn Claude eine Seite baut, zeigt es sie als Artefakt neben dem Chat. Öffne das Artefakt und nutze die Kopier- oder Download-Option, um den Code zu bekommen, und speichere ihn als Datei mit der Endung .html (zum Beispiel index.html). Prüfe, welche Art Artefakt du hast. Ein HTML-Artefakt kannst du direkt hochladen. Ein React-Artefakt ist eine Komponente, keine Seite, und läuft nicht allein; bitte Claude, "das als eine einzige, in sich geschlossene HTML-Datei mit eingebettetem CSS und JavaScript neu zu schreiben und Bibliotheken von einem CDN zu laden", und speichere diese Version. Zieh die .html dann auf das Upload-Feld, melde dich an und kopiere deinen Link. Nutzt du Claude Code statt des Chats, liegt die Datei schon auf deiner Festplatte, und mit unserem verbundenen MCP-Server kann Claude sie veröffentlichen und dir den Link im selben Gespräch geben.

## ChatGPT Canvas und Gemini: den Code in eine Datei kopieren

ChatGPT und Gemini können beide Webseiten schreiben und in einem Seitenbereich voranzeigen. Der einfachste verlässliche Weg ist bei beiden gleich: Kopiere den kompletten Code, füge ihn in einen reinen Texteditor ein (Editor, TextEdit im Nur-Text-Modus, VS Code) und speichere ihn als index.html. Bitte den Assistenten vor dem Kopieren, "alles in eine einzige HTML-Datei zu packen", denn Antworten teilen CSS und JavaScript manchmal in getrennte Blöcke auf, und eine einzelne .html kann keine Dateien laden, die neben ihr liegen. Bilder funktionieren, wenn sie auf vollständige https://-Adressen zeigen oder als Data-URIs eingebettet sind. Öffne die gespeicherte Datei einmal in deinem eigenen Browser; sieht sie dort richtig aus, sieht sie auch unter dem Link richtig aus. Lade sie hoch, und wer den Link bekommt, sieht die funktionierende Seite, ohne ChatGPT- oder Gemini-Konto.

## Lovable und Bolt: das Projekt bauen, dann den Ordner veröffentlichen

App-Builder wie Lovable und Bolt erzeugen ein komplettes Frontend-Projekt, meist React mit Vite, statt einer HTML-Datei. Den Quellcode hochzuladen funktioniert nicht, denn der Browser braucht die gebaute Ausgabe. Hol zuerst den Code heraus: Synchronisiere das Projekt mit GitHub oder lade es herunter, je nachdem, was dein Tool anbietet. Führe dann auf deinem Rechner npm install und npm run build aus. Das erzeugt einen dist/-Ordner mit einer index.html und dem gebündelten JavaScript und CSS. Zippe diesen Ordner und veröffentliche ihn mit dem Website-Hosting, das Pro braucht: Wir finden die index.html, liefern jede Ressource mit dem richtigen Typ aus und können für clientseitige Routen auf index.html zurückfallen, damit Neuladen und Deep Links funktionieren. Spricht die App aus dem Browser mit einem gehosteten Backend wie Supabase, laufen diese HTTPS-Aufrufe weiter, solange der Dienst Anfragen und Login-Weiterleitungen von deiner neuen Adresse akzeptiert, trag die neue URL also in seine Liste erlaubter Adressen ein.

## v0 von Vercel: schlichtes HTML für einen Entwurf, statischer Export für eine App

v0 erzeugt meist React-Komponenten für Next.js. Du hast zwei ehrliche Optionen. Für einen schnellen Entwurf oder eine Landingpage, die man sich nur ansehen soll, bitte v0 um "eine einzige statische HTML-Datei mit Tailwind von einem CDN", speichere sie als index.html und lade sie als normalen Link hoch. Für eine echte App lade den Code herunter und starte ihn lokal. Hat die App keine Server-Funktionen, setze output: 'export' in next.config, führe den Build aus, und Next.js schreibt einen statischen out/-Ordner, den du zippen und mit Pro als Website veröffentlichen kannst. Braucht sie API-Routen, Server Actions oder Rendering pro Anfrage, gehört sie auf eine Plattform, die einen Node-Server betreibt, statisches Hosting passt dann nicht; das sagen wir dir lieber, als den Upload anzunehmen.

## Cursor, Codex und Claude Code: direkt aus dem Editor veröffentlichen

Coding-Agenten schreiben echte Dateien, es gibt also nichts herauszukopieren. Eine einzelne report.html oder demo.html aus deinem Projekt kannst du direkt auf das Upload-Feld ziehen. Ein Projekt mit Build-Schritt funktioniert wie bei Lovable: Build ausführen und den Ausgabeordner mit Pro als ZIP-Website veröffentlichen. Schneller geht es mit unserem MCP-Server. Füge ihn mit einem Befehl zu Claude Code hinzu, oder über die MCP-Konfiguration zu Cursor und VS Code, mit einem API-Schlüssel aus deinem Dashboard. Dann sag dem Agenten: "Bau eine einseitige Zusammenfassung dieser Daten als HTML und veröffentliche sie als Link", und er lädt die Datei durch dieselben Prüfungen wie die Website hoch und antwortet mit der URL. Der Agent kann keine Link-Einstellungen ändern und keine Links löschen; diese Kontrolle behältst du im Dashboard.

## Eine HTML-Datei oder eine ZIP-Website: was du brauchst

Zähl die Dateien. Steckt alles in einer .html (Styles in einem <style>-Tag, Skripte in einem <script>-Tag, Bibliotheken von einem CDN), veröffentliche sie als normalen Link: Das geht in jedem Tarif, bis 250 MB pro Datei im Free-Tarif und 500 MB mit Pro, und du bekommst alle Link-Funktionen, darunter QR-Code, Aufrufstatistiken, Passwort, Ablaufdatum und deine eigene Domain. Braucht die Seite weitere Dateien daneben (eine zweite Seite, einen /assets-Ordner, ein JavaScript-Bundle), ist sie eine Website, also zippe den Ordner und veröffentliche ihn mit dem Website-Hosting von Pro. So oder so bleibt der Link gleich, wenn du die Datei ersetzt oder das ZIP neu hochlädst, liefert die KI nächste Woche eine bessere Version, braucht also niemand eine neue URL.

## Warum die Seite in einer Sandbox läuft, und worum du deine KI bitten solltest

Ein einzelner HTML-Link wird in einem abgeschotteten Frame ohne Same-Origin-Zugriff angezeigt. Skripte, Formulare, Pop-ups und Hinweisfenster funktionieren weiter, Diagramme, Spiele, Rechner und Quizze verhalten sich also normal. Was die Sandbox sperrt, ist der Zugriff auf Speicher und Cookies unserer Website, und das schützt jeden Besucher vor Code, den er nicht geschrieben hat. In der Praxis betrifft das ein häufiges KI-Muster: Apps, die ihren Zustand in localStorage speichern. Muss sich deine generierte To-do-Liste oder dein Tracker etwas merken, bitte die KI für die geteilte Version, "den Zustand im Speicher zu halten und kein localStorage zu nutzen". Und weil alles in einer statischen Seite für jeden sichtbar ist, der sie öffnet, lass die KI nie einen API-Schlüssel oder ein Passwort ins HTML schreiben.

claude-artifact.htmlHTML

canvas-dashboard.htmlHTML

landing-v0.htmlHTML

quiz-game.htmlHTML

lovable-app.zipZIP

claude-artifact.htmlHTML

canvas-dashboard.htmlHTML

landing-v0.htmlHTML

quiz-game.htmlHTML

lovable-app.zipZIP

claude-artifact.htmlHTML

canvas-dashboard.htmlHTML

landing-v0.htmlHTML

quiz-game.htmlHTML

lovable-app.zipZIP

claude-artifact.htmlHTML

canvas-dashboard.htmlHTML

landing-v0.htmlHTML

quiz-game.htmlHTML

lovable-app.zipZIP

gemini-chart.htmlHTML

pitch-onepager.htmlHTML

calculator.htmlHTML

bolt-site.zipZIP

cursor-report.htmlHTML

gemini-chart.htmlHTML

pitch-onepager.htmlHTML

calculator.htmlHTML

bolt-site.zipZIP

cursor-report.htmlHTML

gemini-chart.htmlHTML

pitch-onepager.htmlHTML

calculator.htmlHTML

bolt-site.zipZIP

cursor-report.htmlHTML

gemini-chart.htmlHTML

pitch-onepager.htmlHTML

calculator.htmlHTML

bolt-site.zipZIP

cursor-report.htmlHTML

2,300+

Menschen teilen Dateien

4,500+

geteilte Links

15,700+

Mal geöffnet

Weiterlesen

[HTML-Hosting](https://linkinseconds.com/de/html-hosting)[Ein HTML-ZIP veröffentlichen](https://linkinseconds.com/de/publish-html-zip)[Vite- oder React-Build veröffentlichen](https://linkinseconds.com/de/deploy-vite-react-build)[Statische Website hosten](https://linkinseconds.com/de/host-static-website)[Aus Claude oder Cursor veröffentlichen (MCP)](https://linkinseconds.com/de/docs/mcp)[HTML-Datei als Link teilen](https://linkinseconds.com/de/blog/share-an-html-file-as-a-link)

Source: https://linkinseconds.com/de/host-ai-generated-html
