Artefak
Artefak mengubah file dan blok kode model menjadi panel preview di samping. Cocok untuk game, diagram, demo HTML, JSON, skrip, dan sumber daya.
Artefak berbeda dari Work: dibuat dari jawaban biasa dan dirender di browser tanpa filesystem atau shell persistent. Work menyimpan proyek dan percakapan serta menjalankan alat dalam kontainer Docker tugas.
Input yang didukung
Libre WebUI mengenali:
- blok
<artifact>eksplisit; - fenced code bahasa yang didukung;
- dokumen HTML mandiri;
- bundle multi-file dengan
index.html, CSS, dan JavaScript; - JSX dan TSX;
- Mermaid;
- SVG;
- JSON;
- fragmen kode dan teks.
Tipe artefak
| Tipe | Preview |
|---|---|
| HTML | iframe sandbox dengan skrip dan interaksi |
| React | JSX/TSX terkompilasi dengan Tailwind dan library |
| Mermaid | Diagram sandbox memakai tema aplikasi |
| SVG | Preview visual inline |
| JSON | Kode terformat |
| Kode/teks | Syntax highlighting |
Bundle HTML multi-file
Libre mencoba menggabungkan HTML, CSS, dan JavaScript yang saling terhubung, menghapus referensi lokal, dan menyematkan CSS/JS terkait.
Pilihan paling andal adalah satu file mandiri:
Create a complete self-contained HTML file with inline CSS and JavaScript.
It should run in a browser without local files.
Kontrol preview
Panel resizable menyediakan tab Preview/Kode, copy, download, jendela baru, dan fullscreen. Klik preview sebelum mengirim input keyboard.
Sandbox
HTML dimuat melalui GET /api/artifacts/sandbox. srcdoc mewarisi CSP aplikasi yang memblokir inline script; host terpisah memberi policy sendiri. Policy mengizinkan inline script dan eval tetapi tidak mendeklarasikan host eksternal.
Frame mengizinkan script, form, modal, popup, pointer capture, dan download, tetapi bukan allow-same-origin. Origin opaque tidak dapat mengakses cookie, storage, atau DOM. Feature policy mengizinkan clipboard, fullscreen, dan gamepad.
Lingkungan artefak
Aplikasi menyediakan library secara lokal: React, ReactDOM, Framer Motion, Babel JSX/TSX, Tailwind, Recharts, Chart.js, Plotly, d3, Three.js (THREE.OrbitControls), Lucide, Lodash, MathJS, Papa Parse, Tone.js, dan mermaid. Import dapat memakai import ... from 'react' atau import ... from '<name>'; import dikompilasi menjadi lookup registry. Library tak dikenal menampilkan error jelas.
Origin opaque tidak mengirim session cookie; embedding menghindari redirect Cloudflare Access, Authelia, atau oauth2-proxy. Tag <script> dan <link> CDN diganti bundle lokal, termasuk global Chart dan React. localStorage, sessionStorage, dan document.cookie memakai pengganti memory-only selama preview.
Artefak menjalankan kode hasil generasi: tinjau HTML yang tidak tepercaya dan jangan masukkan secret.
Prompt yang lebih baik
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.
Create one self-contained HTML dashboard.
Use semantic HTML, responsive CSS, and no build step.
Include sample data inline.
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.
Return only one valid SVG code block with width, height, and viewBox.