Artefacte
Artefactele transformă fișiere și blocuri generate în panou cu preview. Sunt utile pentru jocuri, diagrame, demo HTML, JSON, scripts și assets.
Sunt diferite de Work: provin din răspuns chat și se randează în browser, fără filesystem persistent sau shell. Work păstrează fișiere/istoric și rulează unelte în container Docker per task.
Intrări acceptate
- Blocuri
<artifact>, fenced code, documente HTML complete - Bundle
index.html, CSS, JavaScript - JSX/TSX, Mermaid, SVG, JSON, cod și text
Tipuri
| Tip | Preview |
|---|---|
| HTML | iframe sandbox cu scripts/interacțiune |
| React | JSX/TSX compilat cu Tailwind și biblioteci |
| Mermaid | Diagramă în sandbox cu tema aplicației |
| SVG | Vizualizare inline |
| JSON | Cod formatat |
| Cod/text | Syntax highlighting |
Bundle HTML
Libre încearcă să unească HTML/CSS/JS, eliminând referințele locale și integrând blocurile.
Create a complete self-contained HTML file with inline CSS and JavaScript.
It should run in a browser without local files.
Controale
Panoul redimensionabil are Preview/Code, Copy, Download, fereastră nouă și fullscreen. Pentru tastatură, faceți click în preview sau deschideți separat.
Sandbox
HTML se încarcă prin GET /api/artifacts/sandbox. Un frame srcdoc ar moșteni Content
Security Policy care interzice inline scripts în producție; hostul de rețea are propria
politică, moștenită de preview.
Politica permite inline și eval, dar niciun host în afara aplicației. Artefactul poate
calcula, nu poate apela CDN sau acasă. Frame permite scripts, forms, modals, popups,
pointer lock și downloads, dar niciodată allow-same-origin, deci origin opac fără
cookies/storage/DOM. Clipboard, fullscreen și gamepad sunt permise.
Runtime
Aplicația furnizează local bibliotecile:
| Disponibil | Acces |
|---|---|
| React, ReactDOM, Framer Motion | import ... from 'react' |
| JSX/TSX | Babel în frame |
| Tailwind | Din markup fără build |
| Recharts, Chart.js, Plotly, D3 | import ... from '<name>' |
| Three.js cu controls/loaders/addons | THREE.OrbitControls sau import |
| Lucide, Lodash, MathJS, Papa Parse, Tone.js | import ... from '<name>' |
| Mermaid | artefact mermaid sau import |
O bibliotecă externă primește mesaj, nu preview gol. Frame nu descarcă nimic; pagina cu
sesiunea încarcă și integrează bundles, iar import devine lookup în registry.
Originul opac trimite cereri cross-site fără cookie. În spatele Cloudflare Access, Authelia sau oauth2-proxy, redirectul la login este refuzat de CSP. Integrarea elimină cererea.
React se compilează și montează cu default export și o singură instanță. Un <script>
sau <link> către Tailwind, Chart.js, D3, Three.js, Papa Parse, Lodash, Mermaid, React,
Babel este înlocuit inline, astfel Chart, d3, React rămân disponibile.
localStorage, sessionStorage, document.cookie reale eșuează; sandboxul oferă
înlocuitori în memorie pe durata previewului. Codul generat tot se execută: verificați
HTML neîncrezut și nu puneți secrete.
Prompturi mai bune
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.