Artefacts
Les artefacts transforment les fichiers et blocs de code générés par un modèle en aperçus dans un volet latéral. Ils sont utiles pour les jeux, diagrammes, démos HTML, charges utiles JSON, scripts et ressources générées.
Les artefacts diffèrent de Work. Un artefact est créé à partir d’une réponse de chat ordinaire et affiché dans le navigateur ; il ne donne au modèle ni système de fichiers persistant ni shell. Une tâche Work conserve des fichiers de projet et un historique de conversation durables, et exécute les outils du modèle dans un conteneur Docker propre à la tâche.
Entrées prises en charge
Libre WebUI détecte :
- Les blocs
<artifact>explicites - Les blocs de code délimités dont le langage convient aux artefacts
- Les documents HTML complets autonomes
- Les ensembles HTML multifichiers composés de blocs
index.html, CSS et JavaScript - Les composants JSX et TSX
- Les diagrammes Mermaid
- Les blocs SVG
- Les blocs JSON
- Les extraits de code et de texte
Types d’artefacts
| Type | Comportement de l’aperçu |
|---|---|
| HTML | Aperçu en iframe isolée, avec scripts et interaction activés |
| React | JSX ou TSX compilé et monté, avec Tailwind et le jeu de bibliothèques |
| Mermaid | Diagramme tracé dans le bac à sable selon le thème de l’application |
| SVG | Aperçu visuel intégré |
| JSON | Vue de code mise en forme |
| Code/texte | Vue de code avec coloration syntaxique |
Ensembles HTML multifichiers
Lorsqu’un modèle renvoie des blocs HTML, CSS et JavaScript associés, Libre WebUI tente de les fusionner en un artefact HTML exécutable. Il supprime les références locales aux feuilles de style et aux scripts, puis intègre les contenus CSS et JavaScript générés correspondants.
Pour obtenir le résultat le plus fiable, demandez au modèle un seul fichier HTML autonome :
Create a complete self-contained HTML file with inline CSS and JavaScript.
It should run in a browser without local files.
Commandes du visualiseur
Les artefacts s’ouvrent dans un volet latéral redimensionnable qui propose :
- Les onglets Aperçu et Code
- Copier
- Télécharger
- Ouvrir dans une nouvelle fenêtre
- Des commandes d’agrandissement et de plein écran lorsqu’elles sont disponibles
Si un artefact interactif a besoin d’une saisie au clavier, cliquez d’abord dans l’aperçu ou ouvrez-le dans une nouvelle fenêtre.
Comportement du bac à sable
Les artefacts HTML se chargent via GET /api/artifacts/sandbox, un petit document
du backend qui héberge l’aperçu. Cette indirection est importante : une frame
srcdoc hérite de la politique de sécurité du contenu de l’intégrateur, et la
politique de l’application interdit les scripts intégrés. Les artefacts ainsi
affichés sont donc bloqués en production. L’hôte du bac à sable est plutôt récupéré
sur le réseau, ce qui lui permet de disposer de sa propre politique, dont hérite la
frame d’aperçu qu’il crée.
La politique des artefacts autorise les scripts intégrés et eval, car ils
constituent précisément le contenu d’un artefact, et n’autorise aucun autre hôte que
celui de l’application. Un artefact peut effectuer un rendu et des calculs ; il ne
peut ni récupérer du contenu depuis un CDN ni appeler un service distant.
La frame elle-même autorise les scripts, formulaires, fenêtres modales, fenêtres
contextuelles, le verrouillage du pointeur et les téléchargements, mais jamais
allow-same-origin. L’artefact s’exécute donc sur une origine opaque, sans accès
aux cookies, au stockage ou au DOM de l’application. Sa politique de fonctionnalités
autorise l’accès au presse-papiers, le plein écran et les manettes de jeu.
Environnement d’exécution des artefacts
Les artefacts générés supposent que certaines bibliothèques sont disponibles. Au lieu de les laisser accéder à un CDN, l’application fournit localement celles qu’ils demandent :
| Éléments disponibles pour les artefacts | Mode d’accès |
|---|---|
| React, ReactDOM, Framer Motion | import ... from 'react' |
| JSX et TSX | compilés dans la frame par Babel |
| Utilitaires Tailwind | générés à partir du balisage, sans build |
| Recharts, Chart.js, Plotly, D3 | import ... from '<name>' |
| Three.js avec commandes, chargeurs, environnements et autres modules complémentaires | THREE.OrbitControls, ou par importation |
| Icônes Lucide, Lodash, MathJS, Papa Parse, Tone.js | import ... from '<name>' |
| Mermaid | artefacts mermaid, ou par importation |
Un artefact qui tente d’utiliser une bibliothèque absente de cet ensemble reçoit une notification qui la nomme, plutôt qu’un aperçu vide accompagné d’une erreur de politique dans la console.
La frame ne récupère jamais ces bibliothèques. La page de l’application — qui porte
la session de l’utilisateur — charge les bundles nécessaires et les intègre au
document de l’artefact. Les instructions import propres à l’artefact sont quant à
elles compilées pour effectuer des recherches dans un petit registre, au lieu
d’utiliser la résolution de modules sur le réseau.
Cette indirection n’est pas accessoire. Une frame isolée possède une origine opaque ; le navigateur traite donc ses requêtes comme intersites et n’envoie aucun cookie de session. Derrière un proxy d’authentification — Cloudflare Access, Authelia, oauth2-proxy — une telle requête reçoit une redirection vers une page de connexion, que la politique du bac à sable refuse ensuite de charger. L’artefact échoue alors avec une erreur de politique de sécurité du contenu. L’intégration supprime la requête, si bien que les artefacts se comportent de la même façon sur un ordinateur portable et derrière une passerelle d’entreprise.
Les artefacts React sont compilés et montés dans le bac à sable : exportez le composant comme valeur par défaut du module pour l’afficher. Toutes les bibliothèques obtiennent React depuis le même registre ; il n’existe donc qu’une seule instance de React et les hooks fonctionnent normalement.
Les artefacts HTML qui chargent une bibliothèque depuis un CDN fonctionnent tout de
même : un élément <script> ou <link> pointant vers Tailwind, Chart.js, D3,
Three.js, Papa Parse, Lodash, Mermaid, React ou Babel est remplacé en place par la
version locale intégrée. Les scripts intégrés trouvent donc toujours Chart, d3
ou React lors de leur exécution. Une bibliothèque absente de cet ensemble n’est
pas disponible ; intégrez-la plutôt dans le document.
Comme la frame possède une origine opaque, les véritables localStorage,
sessionStorage et document.cookie lèvent une erreur. Le bac à sable fournit des
substituts en mémoire pour que les artefacts qui les utilisent continuent de
fonctionner ; leur contenu ne dure que le temps de l’aperçu et n’est pas partagé
avec l’application.
Les artefacts exécutent tout de même du code généré : examinez tout contenu HTML non fiable avant de le télécharger ou de le réutiliser en dehors de l’aperçu, et ne placez aucun secret dans un artefact.
Invites plus efficaces
Pour les jeux :
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.
Pour les tableaux de bord :
Create one self-contained HTML dashboard.
Use semantic HTML, responsive CSS, and no build step.
Include sample data inline.
Pour les composants 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.
Pour SVG :
Return only one valid SVG code block with width, height, and viewBox.