Artefakte
Artefakte machen aus modellgenerierten Dateien und Codeblöcken ein Seitenpanel mit Vorschau. Sie eignen sich für Spiele, Diagramme, HTML-Demos, JSON-Nutzlasten, Skripte und erzeugte Ressourcen.
Artefakte unterscheiden sich von Work. Ein Artefakt entsteht aus einer normalen Chatantwort und wird im Browser gerendert; es gibt dem Modell weder dauerhaftes Dateisystem noch Shell. Work bewahrt Projektdateien und Unterhaltung und führt Werkzeuge in einem aufgabenbezogenen Docker-Container aus.
Unterstützte Eingaben
Libre WebUI erkennt:
- Explizite
<artifact>-Blöcke - Eingezäunte Codeblöcke mit geeigneten Sprachen
- Eigenständige vollständige HTML-Dokumente
- Mehrdatei-HTML-Pakete aus
index.html, CSS und JavaScript - JSX- und TSX-Komponenten
- Mermaid-Diagramme
- SVG-Blöcke
- JSON-Blöcke
- Code- und Textausschnitte
Artefakttypen
| Typ | Vorschauverhalten |
|---|---|
| HTML | Isolierter iframe mit Skripten und Interaktion |
| React | Kompiliertes und gemountetes JSX/TSX mit Tailwind und Bibliotheken |
| Mermaid | Diagramm in der Sandbox mit Anwendungsthema |
| SVG | Eingebettete visuelle Vorschau |
| JSON | Formatierte Codeansicht |
| Code/Text | Syntaxhervorgehobene Codeansicht |
HTML-Pakete mit mehreren Dateien
Bei zusammengehörigen HTML-, CSS- und JavaScript-Blöcken versucht Libre WebUI, ein ausführbares Artefakt zu erstellen. Lokale Stylesheet-/Skriptreferenzen werden entfernt und passende erzeugte Inhalte eingebettet.
Bitte das Modell für zuverlässige Ergebnisse um eine eigenständige HTML-Datei:
Create a complete self-contained HTML file with inline CSS and JavaScript.
It should run in a browser without local files.
Viewer-Steuerung
Artefakte öffnen in einem veränderbaren Seitenpanel mit:
- Vorschau- und Code-Tab
- Kopieren
- Herunterladen
- In neuem Fenster öffnen
- Vergrößerungs-/Vollbildsteuerung, sofern verfügbar
Klicke für Tastatureingaben zuerst in die Vorschau oder öffne ein neues Fenster.
Sandbox-Verhalten
HTML-Artefakte laden über GET /api/artifacts/sandbox, ein kleines Backend-Dokument.
Die Indirektion ist wichtig: Ein srcdoc-Frame erbt die Content Security Policy des
Einbetters, und die Anwendung verbietet Inline-Skripte. Der Sandbox-Host wird daher
über das Netzwerk geladen, trägt eine eigene Richtlinie und vererbt sie an den Frame.
Die Richtlinie erlaubt Inline-Skript und eval, weil Artefakte daraus bestehen, und
nennt nur den Anwendungshost. Artefakte können rendern und rechnen, aber nicht von
CDNs laden oder nach Hause telefonieren.
Der Frame erlaubt Skripte, Formulare, Modale, Pop-ups, Pointer Lock und Downloads,
aber nie allow-same-origin. Er läuft auf undurchsichtigem Ursprung ohne Zugriff
auf Cookies, Speicher oder DOM. Zwischenablage, Vollbild und Gamepad sind erlaubt.
Artefakt-Laufzeit
Erzeugte Artefakte erwarten Bibliotheken. Statt CDN-Zugriff liefert die Anwendung:
| Verfügbar | Zugriff |
|---|---|
| React, ReactDOM, Framer Motion | import ... from 'react' |
| JSX und TSX | von Babel im Frame kompiliert |
| Tailwind-Hilfsklassen | aus Markup erzeugt, kein Build |
| Recharts, Chart.js, Plotly, D3 | import ... from '<name>' |
| Three.js mit Steuerungen, Loadern, Umgebungen und Add-ons | THREE.OrbitControls oder Import |
| Lucide-Symbole, Lodash, MathJS, Papa Parse, Tone.js | import ... from '<name>' |
| Mermaid | mermaid-Artefakte oder Import |
Eine unbekannte Bibliothek erzeugt einen benennenden Hinweis statt einer leeren Vorschau und eines Richtlinienfehlers.
Der Frame lädt nichts davon. Die Anwendungsseite mit Benutzersitzung lädt Pakete und
bettet sie ein; import-Anweisungen werden zu Abfragen eines kleinen Registers statt
Netzwerkmodulauflösung kompiliert.
Diese Indirektion ist entscheidend. Ein Frame mit undurchsichtigem Ursprung gilt als siteübergreifend und sendet kein Sitzungscookie. Hinter Cloudflare Access, Authelia oder oauth2-proxy käme eine Anmeldeumleitung zurück, deren Laden die Sandbox verweigert. Einbettung entfernt die Anfrage, sodass Artefakte lokal und hinter Unternehmensgateways gleich funktionieren.
React-Artefakte werden in der Sandbox kompiliert und gemountet: Exportiere die Komponente als Standardexport. Alle Bibliotheken lösen React über dasselbe Register auf, sodass es eine Instanz gibt und Hooks normal funktionieren.
HTML-Artefakte mit CDN-Bibliotheken funktionieren ebenfalls: Ein <script> oder
<link> zu Tailwind, Chart.js, D3, Three.js, Papa Parse, Lodash, Mermaid, React oder
Babel wird an Ort und Stelle durch den eingebetteten Build ersetzt, sodass Skripte
Chart, d3 oder React finden. Andere Bibliotheken musst du selbst einbetten.
Wegen des undurchsichtigen Ursprungs werfen echtes localStorage, sessionStorage
und document.cookie Fehler. Die Sandbox bietet Ersatz im Speicher; Inhalte halten
nur für die Vorschau und werden nicht geteilt.
Artefakte führen weiterhin erzeugten Code aus: Prüfe nicht vertrauenswürdiges HTML, bevor du es außerhalb verwendest, und füge keine Geheimnisse ein.
Bessere Prompts
Für Spiele:
Build a complete browser game as one HTML file.
Use canvas.
Inline all CSS and JavaScript.
Show controls on screen.
Avoid external assets unless they are optional.
Für Dashboards:
Create one self-contained HTML dashboard.
Use semantic HTML, responsive CSS, and no build step.
Include sample data inline.
Für React-Komponenten:
Return one React component in a single jsx block.
Export it as the default export.
Style it with Tailwind classes.
Import anything you need from react, recharts, or lucide-react.
Für SVG:
Return only one valid SVG code block with width, height, and viewBox.