Артефакти
Артефакти перетворюють файли й блоки коду моделі на бічну панель перегляду. Вони корисні для ігор, діаграм, демонстрацій HTML, JSON, скриптів і ресурсів.
Артефакт відрізняється від Work: він створюється зі звичайної відповіді й відображається у браузері, не надаючи постійної файлової системи чи оболонки. Work зберігає проєкт і розмову та виконує інструменти в контейнері Docker завдання.
Підтримувані вхідні дані
Libre WebUI розпізнає:
- Явні блоки
<artifact> - Огороджені блоки коду підтримуваними мовами
- Повні самодостатні HTML-документи
- Багатофайлові пакети з
index.html, CSS і JavaScript - JSX і TSX
- Mermaid
- SVG
- JSON
- Фрагменти коду та тексту
Типи артефактів
| Тип | Перегляд |
|---|---|
| HTML | iframe у пісочниці зі скриптами та взаємодією |
| React | Скомпільований JSX/TSX із Tailwind і бібліотеками |
| Mermaid | Діаграма в пісочниці з темою застосунку |
| SVG | Вбудований візуальний перегляд |
| JSON | Форматований код |
| Код/текст | Підсвічування синтаксису |
Багатофайлові HTML-пакети
Якщо HTML, CSS і JavaScript пов’язані, Libre намагається об’єднати їх, видаляє локальні посилання та вбудовує відповідні CSS/JS.
Найнадійніший варіант — один самодостатній файл:
Create a complete self-contained HTML file with inline CSS and JavaScript.
It should run in a browser without local files.
Керування переглядом
Панель зі змінним розміром пропонує:
- Вкладки «Перегляд» і «Код»
- Копіювання
- Завантаження
- Нове вікно
- Розгортання/повний екран
Для введення з клавіатури спочатку клацніть область попереднього перегляду або відкрийте її в окремому вікні.
Пісочниця
HTML завантажується через GET /api/artifacts/sandbox, невеликий документ сервера. Це важливо: srcdoc успадковує Content Security Policy застосунку, яка забороняє вбудовані скрипти, тому у production їх було б заблоковано. Окремо завантажений хост має власну політику, яку успадковує frame.
Політика дозволяє вбудовані скрипти й eval, потрібні артефакту, та не вказує зовнішніх хостів. Артефакт може виконувати обчислення й відображати результат, але не може звертатися до CDN або зовнішніх ресурсів.
Frame дозволяє скрипти, форми, модальні та спливні вікна, захоплення вказівника й завантаження, але не allow-same-origin; непрозоре походження не має доступу до cookie, сховища й DOM. Політика функцій дозволяє буфер обміну, повноекранний режим і введення з геймпада.
Середовище артефактів
Застосунок локально постачає очікувані бібліотеки замість CDN:
| Доступно | Доступ |
|---|---|
| React, ReactDOM, Framer Motion | import ... from 'react' |
| JSX і TSX | Babel у frame |
| Утиліти Tailwind | з розмітки, без build |
| Recharts, Chart.js, Plotly, D3 | import ... from '<name>' |
| Three.js із контролерами, завантажувачами й доповненнями | THREE.OrbitControls або import |
| Lucide, Lodash, MathJS, Papa Parse, Tone.js | import ... from '<name>' |
| Mermaid | артефакт mermaid або import |
Для невідомої бібліотеки відображається повідомлення з її назвою замість порожнього екрана й помилки CSP.
Frame нічого не завантажує. Сторінка застосунку з активним сеансом завантажує пакети й вбудовує їх у документ; оператори import компілюються у звернення до реєстру.
Причина — непрозоре походження: браузер вважає його міжсайтовим і не надсилає сесійні файли cookie. За використання Cloudflare Access, Authelia або oauth2-proxy надходить переспрямування на сторінку входу, яке CSP відхиляє. Вбудовування усуває цей запит і забезпечує однакову роботу.
React компілюється й монтується: експортуйте компонент за замовчуванням. Усі бібліотеки використовують один екземпляр React, тож хуки працюють.
HTML із посиланнями CDN також працює: <script> або <link> для Tailwind, Chart.js, D3, Three.js, Papa Parse, Lodash, Mermaid, React чи Babel замінюється вбудованою збіркою в тому самому місці, і скрипти знаходять Chart, d3, React. Решту ресурсів вбудовуйте самостійно.
Справжні localStorage, sessionStorage, document.cookie спричиняють помилку. Пісочниця надає замінники в пам’яті на час перегляду, які не є спільними із застосунком.
Артефакти виконують створений код: перевіряйте недовірений HTML поза попереднім переглядом і не додавайте секрети.
Кращі промпти
Для ігор:
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.
Для 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.
Для SVG:
Return only one valid SVG code block with width, height, and viewBox.