Artefactos
Los artefactos convierten archivos y bloques de código generados por modelos en un panel lateral con vista previa. Son útiles para juegos, diagramas, demostraciones HTML, cargas JSON, scripts y recursos generados.
Los artefactos son distintos de Work. Un artefacto se crea a partir de una respuesta normal y se renderiza en el navegador; no proporciona al modelo un sistema de archivos persistente ni un shell. Una tarea de Work mantiene archivos y conversación duraderos y ejecuta herramientas en un contenedor Docker por tarea.
Entradas compatibles
Libre WebUI detecta:
- Bloques
<artifact>explícitos - Bloques de código cercados con lenguajes adecuados para artefactos
- Documentos HTML completos e independientes
- Paquetes HTML de varios archivos formados por
index.html, CSS y JavaScript - Componentes JSX y TSX
- Diagramas Mermaid
- Bloques SVG
- Bloques JSON
- Fragmentos de código y texto
Tipos de artefactos
| Tipo | Comportamiento de la vista previa |
|---|---|
| HTML | iframe aislado con scripts e interacción activados |
| React | JSX o TSX compilado y montado, con Tailwind y las bibliotecas |
| Mermaid | Diagrama dibujado en el entorno aislado con el tema de la aplicación |
| SVG | Vista visual integrada |
| JSON | Vista de código con formato |
| Código/texto | Vista con resaltado de sintaxis |
Paquetes HTML de varios archivos
Cuando un modelo devuelve bloques HTML, CSS y JavaScript relacionados, Libre WebUI intenta combinarlos en un artefacto ejecutable. Elimina referencias locales a hojas de estilo y scripts e integra el CSS y JavaScript generados correspondientes.
Para obtener el resultado más fiable, pide un único archivo HTML independiente:
Create a complete self-contained HTML file with inline CSS and JavaScript.
It should run in a browser without local files.
Controles del visor
Los artefactos se abren en un panel lateral redimensionable con:
- Pestañas Vista previa y Código
- Copiar
- Descargar
- Abrir en una ventana nueva
- Controles de ampliación y pantalla completa cuando estén disponibles
Si un artefacto interactivo necesita el teclado, haz clic primero dentro de la vista o ábrelo en una ventana nueva.
Comportamiento del entorno aislado
Los artefactos HTML se cargan mediante GET /api/artifacts/sandbox, un pequeño
documento del backend que aloja la vista previa. La indirección importa: un marco
srcdoc hereda la Content Security Policy del contenedor y la política de la
aplicación prohíbe scripts en línea, por lo que esos artefactos quedan bloqueados en
producción. En su lugar, el host aislado se obtiene por red, lleva su propia política
y el marco que crea la hereda.
La política permite scripts en línea y eval, porque forman parte del artefacto, y
no nombra ningún host salvo el de la aplicación. Un artefacto puede renderizar y
calcular; no puede obtener recursos de un CDN ni llamar a otros sitios.
El marco admite scripts, formularios, modales, ventanas emergentes, bloqueo del
puntero y descargas, pero nunca allow-same-origin, por lo que el artefacto se
ejecuta en un origen opaco sin acceso a cookies, almacenamiento ni DOM de la
aplicación. Su política permite portapapeles, pantalla completa y mandos de juego.
Entorno de ejecución de artefactos
Los artefactos generados suponen que hay bibliotecas disponibles. En lugar de permitirles acceder a un CDN, la aplicación incorpora lo que solicitan:
| Disponible para los artefactos | Cómo se accede |
|---|---|
| React, ReactDOM, Framer Motion | import ... from 'react' |
| JSX y TSX | compilados por Babel dentro del marco |
| Utilidades Tailwind | generadas del marcado, sin build |
| Recharts, Chart.js, Plotly, D3 | import ... from '<name>' |
| Three.js con controles, cargadores, entornos y más complementos | THREE.OrbitControls, o mediante import |
| Iconos Lucide, Lodash, MathJS, Papa Parse, Tone.js | import ... from '<name>' |
| Mermaid | artefactos mermaid, o mediante import |
Un artefacto que solicita una biblioteca fuera del conjunto recibe un aviso que la nombra, en vez de una vista vacía y un error de política en la consola.
El marco nunca obtiene esas bibliotecas. La página de la aplicación, que lleva la
sesión, carga los paquetes necesarios y los integra en el documento; las sentencias
import del artefacto se compilan como consultas a un registro pequeño en vez de
quedar como resolución de módulos por red.
La indirección no es accidental. Un marco aislado tiene origen opaco, por lo que el navegador trata sus solicitudes como entre sitios y no envía la cookie de sesión. Tras un proxy de autenticación —Cloudflare Access, Authelia, oauth2-proxy—, la solicitud vuelve como redirección a inicio de sesión, que la política se niega a cargar, y el artefacto falla con un error de Content Security Policy. Integrar los recursos elimina la solicitud, de modo que funcionan igual en un portátil y tras una puerta corporativa.
Los artefactos React se compilan y montan en el entorno: exporta el componente como valor predeterminado y se renderizará. Todas las bibliotecas resuelven React desde el mismo registro, por lo que existe una sola instancia y los hooks funcionan.
Los artefactos HTML que cargan una biblioteca de un CDN también funcionan: un
<script> o <link> que apunte a Tailwind, Chart.js, D3, Three.js, Papa Parse,
Lodash, Mermaid, React o Babel se sustituye por la compilación incorporada en la
misma posición, para que los scripts sigan encontrando Chart, d3 o React. Las
bibliotecas ajenas al conjunto no están disponibles; intégralas directamente.
Como el marco tiene origen opaco, los verdaderos localStorage, sessionStorage y
document.cookie lanzan errores. El entorno proporciona sustitutos en memoria para
que el artefacto siga funcionando; duran lo mismo que la vista y no se comparten con
la aplicación.
Los artefactos siguen ejecutando código generado: inspecciona HTML no fiable antes de descargarlo o reutilizarlo fuera de la vista, y no introduzcas secretos.
Mejores prompts
Para juegos:
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.
Para paneles:
Create one self-contained HTML dashboard.
Use semantic HTML, responsive CSS, and no build step.
Include sample data inline.
Para componentes 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.
Para SVG:
Return only one valid SVG code block with width, height, and viewBox.