Artefatos
Os artefatos transformam arquivos e blocos de código gerados pelo modelo em um painel lateral com prévia. Eles são úteis para jogos, diagramas, demonstrações HTML, cargas JSON, scripts e ativos gerados.
Artefatos são diferentes do Work. Um artefato é criado a partir de uma resposta de chat comum e renderizado no navegador; ele não fornece ao modelo um sistema de arquivos persistente nem um shell. Uma tarefa do Work mantém arquivos persistentes do projeto e o histórico da conversa e executa as ferramentas do modelo dentro de um contêiner Docker específico da tarefa.
Entradas compatíveis
O Libre WebUI detecta:
- Blocos
<artifact>explícitos - Blocos de código cercados em linguagens adequadas para artefatos
- Documentos HTML completos e independentes
- Pacotes HTML de vários arquivos, formados por blocos de
index.html, CSS e JavaScript - Componentes JSX e TSX
- Diagramas Mermaid
- Blocos SVG
- Blocos JSON
- Trechos de código e texto
Tipos de artefato
| Tipo | Comportamento da prévia |
|---|---|
| HTML | Prévia em iframe com sandbox, scripts e interação habilitados |
| React | JSX ou TSX compilado e montado, com Tailwind e o conjunto de bibliotecas |
| Mermaid | Diagrama desenhado no sandbox, com o tema do aplicativo |
| SVG | Prévia visual embutida |
| JSON | Visualização de código formatada |
| Código/texto | Visualização de código com realce de sintaxe |
Pacotes HTML de vários arquivos
Quando um modelo devolve blocos relacionados de HTML, CSS e JavaScript, o Libre WebUI tenta combiná-los em um artefato HTML executável. Ele remove referências locais a folhas de estilo/scripts e incorpora o CSS e o JavaScript gerados correspondentes.
Para obter o resultado mais confiável, peça ao modelo um único arquivo HTML autocontido:
Create a complete self-contained HTML file with inline CSS and JavaScript.
It should run in a browser without local files.
Controles do visualizador
Os artefatos são abertos em um painel lateral redimensionável com:
- Abas Prévia e Código
- Copiar
- Baixar
- Abrir em nova janela
- Controles para expandir/tela cheia, quando disponíveis
Se um artefato interativo exigir entrada pelo teclado, primeiro clique dentro da prévia ou abra-o em uma nova janela.
Comportamento do sandbox
Artefatos HTML são carregados por meio de GET /api/artifacts/sandbox, um pequeno documento do backend que hospeda a prévia. Essa mediação é importante: um frame srcdoc herda a Política de Segurança de Conteúdo de quem o incorpora, e a política do aplicativo proíbe scripts inline; portanto, artefatos renderizados dessa maneira são bloqueados em produção. Em vez disso, o host do sandbox é buscado pela rede, o que permite que ele tenha sua própria política, herdada pelo frame de prévia que ele cria.
A política dos artefatos permite scripts inline e eval, pois eles são a essência de um artefato, e não identifica nenhum host além do próprio aplicativo. Um artefato pode renderizar e processar; não pode buscar dados em uma CDN nem chamar um serviço externo.
O próprio frame permite scripts, formulários, modais, pop-ups, bloqueio do ponteiro e downloads, mas nunca allow-same-origin; portanto, um artefato é executado em uma origem opaca, sem acesso aos cookies, ao armazenamento nem ao DOM do aplicativo. Sua política de recursos permite acesso à área de transferência, tela cheia e entrada de gamepad.
O ambiente de execução dos artefatos
Artefatos gerados pressupõem que algumas bibliotecas estejam disponíveis. Em vez de permitir acesso a uma CDN, o aplicativo inclui as dependências solicitadas:
| Disponível para os artefatos | Como é acessado |
|---|---|
| React, ReactDOM, Framer Motion | import ... from 'react' |
| JSX e TSX | compilados no frame pelo Babel |
| Utilitários Tailwind | gerados a partir da marcação, sem build |
| Recharts, Chart.js, Plotly, D3 | import ... from '<name>' |
| Three.js com controles, carregadores, ambientes e mais addons | THREE.OrbitControls ou por importação |
| Ícones Lucide, Lodash, MathJS, Papa Parse, Tone.js | import ... from '<name>' |
| Mermaid | artefatos mermaid ou por importação |
Um artefato que tentar usar uma biblioteca fora desse conjunto receberá um aviso com o nome dela, em vez de uma prévia vazia e um erro de política no console.
O frame nunca busca nenhuma dessas bibliotecas. A página do aplicativo — que contém a sessão do usuário — carrega os pacotes necessários e os incorpora ao documento do artefato; as instruções import do próprio artefato são compiladas como consultas a um pequeno registro, em vez de permanecerem como resolução de módulos pela rede.
Essa mediação não é incidental. Um frame em sandbox tem origem opaca, portanto o navegador trata suas solicitações como externas e não envia o cookie da sessão. Atrás de um proxy com autenticação — Cloudflare Access, Authelia, oauth2-proxy —, uma solicitação assim recebe um redirecionamento para a página de login, que a política do sandbox se recusa a carregar, e o artefato falha com um erro de Política de Segurança de Conteúdo. A incorporação elimina a solicitação, fazendo os artefatos se comportarem da mesma forma em um laptop e atrás de uma barreira corporativa.
Os artefatos React são compilados e montados no sandbox: exporte o componente como padrão do módulo e ele será renderizado. Todas as bibliotecas resolvem o React a partir do mesmo registro, portanto há uma única instância do React e os hooks funcionam normalmente.
Artefatos HTML que carregam uma biblioteca de uma CDN ainda funcionam — uma tag <script> ou <link> apontando para Tailwind, Chart.js, D3, Three.js, Papa Parse, Lodash, Mermaid, React ou Babel é substituída pela versão incluída, incorporada na mesma posição do documento; assim, scripts inline ainda encontram Chart, d3 ou React ao serem executados. Bibliotecas fora desse conjunto ficam indisponíveis; incorpore-as ao documento.
Como o frame tem origem opaca, localStorage, sessionStorage e document.cookie reais geram erro. O sandbox fornece substitutos na memória para que um artefato que os usa continue funcionando; o conteúdo dura enquanto a prévia estiver aberta e não é compartilhado com o aplicativo.
Os artefatos ainda executam código gerado: inspecione HTML não confiável antes de baixá-lo ou reutilizá-lo fora da prévia e não coloque segredos em um artefato.
Prompts melhores
Para jogos:
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 painéis:
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.