Artefatti
Gli artefatti trasformano i file e i blocchi di codice generati dai modelli in un pannello laterale con anteprima. Sono utili per giochi, diagrammi, demo HTML, payload JSON, script e risorse generate.
Gli artefatti sono diversi da Work. Un artefatto viene creato da una normale risposta della chat e visualizzato nel browser; non fornisce al modello un file system o una shell persistenti. Un'attività Work conserva file di progetto e cronologia della conversazione in modo permanente ed esegue gli strumenti del modello in un container Docker limitato all'attività.
Input supportati
Libre WebUI rileva:
- Blocchi
<artifact>espliciti - Blocchi di codice delimitati in linguaggi adatti agli artefatti
- Documenti HTML completi autonomi
- Bundle HTML con più file formati da blocchi
index.html, CSS e JavaScript - Componenti JSX e TSX
- Diagrammi Mermaid
- Blocchi SVG
- Blocchi JSON
- Frammenti di codice e testo
Tipi di artefatto
| Tipo | Comportamento dell'anteprima |
|---|---|
| HTML | Anteprima in iframe con sandbox, script e interazione abilitati |
| React | JSX o TSX compilato e montato, con Tailwind e il set di librerie |
| Mermaid | Diagramma disegnato nella sandbox e adattato al tema dell'applicazione |
| SVG | Anteprima visiva incorporata |
| JSON | Vista del codice formattata |
| Codice/testo | Vista del codice con evidenziazione della sintassi |
Bundle HTML con più file
Quando un modello restituisce blocchi HTML, CSS e JavaScript correlati, Libre WebUI prova a unirli in un artefatto HTML eseguibile. Rimuove i riferimenti a fogli di stile e script locali e incorpora il CSS e JavaScript generati corrispondenti.
Per ottenere il risultato più affidabile, chiedi al modello un singolo file HTML autonomo:
Create a complete self-contained HTML file with inline CSS and JavaScript.
It should run in a browser without local files.
Controlli del visualizzatore
Gli artefatti si aprono in un pannello laterale ridimensionabile con:
- Schede Anteprima e Codice
- Copia
- Download
- Apertura in una nuova finestra
- Controlli di espansione/schermo intero, quando disponibili
Se un artefatto interattivo richiede l'input da tastiera, fai prima clic nell'anteprima oppure aprilo in una nuova finestra.
Comportamento della sandbox
Gli artefatti HTML vengono caricati tramite GET /api/artifacts/sandbox, un piccolo documento del backend che ospita l'anteprima. Questa indirezione è importante: un frame srcdoc eredita la Content Security Policy dell'elemento incorporante e la policy dell'applicazione vieta gli script inline, quindi gli artefatti visualizzati in quel modo vengono bloccati in produzione. L'host della sandbox viene invece recuperato tramite la rete, dispone di una propria policy e questa viene ereditata dal frame di anteprima che crea.
La policy degli artefatti consente script inline ed eval, perché sono elementi costitutivi di un artefatto, e non indica alcun host oltre a quello dell'applicazione stessa. Un artefatto può eseguire rendering e calcoli; non può recuperare risorse da una CDN né comunicare con servizi esterni.
Il frame consente script, moduli, finestre modali, popup, blocco del puntatore e download, ma mai allow-same-origin: l'artefatto viene quindi eseguito su un'origine opaca senza accesso ai cookie, allo spazio di archiviazione o al DOM dell'applicazione. La relativa policy delle funzionalità permette l'accesso agli appunti, la modalità schermo intero e l'input da gamepad.
Runtime degli artefatti
Gli artefatti generati presuppongono la disponibilità di alcune librerie. Invece di consentire loro di raggiungere una CDN, l'applicazione include localmente ciò che richiedono:
| Disponibile per gli artefatti | Modalità di accesso |
|---|---|
| React, ReactDOM, Framer Motion | import ... from 'react' |
| JSX e TSX | compilati nel frame da Babel |
| Utilità Tailwind | generate dal markup, senza build |
| Recharts, Chart.js, Plotly, D3 | import ... from '<name>' |
| Three.js con controlli, loader, ambienti e altri addon | THREE.OrbitControls, oppure tramite import |
| Icone Lucide, Lodash, MathJS, Papa Parse, Tone.js | import ... from '<name>' |
| Mermaid | artefatti mermaid oppure tramite import |
Quando un artefatto tenta di usare una libreria non inclusa in questo insieme, viene mostrato un avviso che ne indica il nome, anziché un'anteprima vuota e un errore di policy nella console.
Il frame non recupera mai queste librerie. La pagina dell'applicazione, che contiene la sessione dell'utente, carica i bundle necessari e li incorpora nel documento dell'artefatto; le istruzioni import dell'artefatto vengono compilate come ricerche in un piccolo registro anziché lasciate alla risoluzione dei moduli in rete.
Questa indirezione non è casuale. Un frame in sandbox ha un'origine opaca, quindi il browser considera le sue richieste cross-site e non invia cookie di sessione. Dietro un proxy con autenticazione, come Cloudflare Access, Authelia o oauth2-proxy, una richiesta del genere riceve come risposta un reindirizzamento a una pagina di accesso, che la policy della sandbox rifiuta poi di caricare; l'artefatto non riesce e mostra un errore di Content Security Policy. L'incorporamento elimina la richiesta, così gli artefatti si comportano allo stesso modo su un portatile e dietro un gateway aziendale.
Gli artefatti React vengono compilati e montati nella sandbox: esporta il componente come valore predefinito del modulo e verrà visualizzato. Ogni libreria risolve React dallo stesso registro, quindi esiste una sola istanza di React e gli hook funzionano normalmente.
Gli artefatti HTML che caricano una libreria da una CDN continuano a funzionare: un elemento <script> o <link> che punta a Tailwind, Chart.js, D3, Three.js, Papa Parse, Lodash, Mermaid, React o Babel viene sostituito dalla build inclusa localmente nella stessa posizione del documento, così gli script inline trovano comunque Chart, d3 o React quando vengono eseguiti. Le librerie esterne a questo insieme non sono disponibili: incorporale direttamente.
Poiché il frame ha un'origine opaca, i veri localStorage, sessionStorage e document.cookie generano un errore. La sandbox fornisce sostituti in memoria, così gli artefatti che li usano continuano a funzionare; i contenuti durano quanto l'anteprima e non vengono condivisi con l'applicazione.
Gli artefatti eseguono comunque codice generato: esamina il codice HTML non attendibile prima di scaricarlo o riutilizzarlo fuori dall'anteprima e non inserire segreti in un artefatto.
Prompt migliori
Per i giochi:
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.
Per i dashboard:
Create one self-contained HTML dashboard.
Use semantic HTML, responsive CSS, and no build step.
Include sample data inline.
Per i componenti React:
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.
Per SVG:
Return only one valid SVG code block with width, height, and viewBox.