Artifact
Artifact biến file và code block của model thành panel preview bên cạnh. Hữu ích cho game, diagram, demo HTML, JSON, script và resource.
Artifact khác Work: được tạo từ response thường và render trong browser mà không có filesystem hay shell persistent. Work lưu project/conversation và chạy tool trong Docker container của task.
Input được hỗ trợ
Libre WebUI nhận:
- block
<artifact>rõ ràng; - fenced code của language hỗ trợ;
- document HTML tự chứa;
- bundle nhiều file với
index.html, CSS và JavaScript; - JSX/TSX;
- Mermaid;
- SVG;
- JSON;
- fragment code/text.
Loại artifact
| Loại | Preview |
|---|---|
| HTML | iframe sandbox có script và tương tác |
| React | JSX/TSX compile với Tailwind và library |
| Mermaid | Diagram sandbox dùng theme app |
| SVG | Preview hình inline |
| JSON | Code đã format |
| Code/text | Syntax highlighting |
Bundle HTML nhiều file
Libre cố gộp HTML, CSS và JavaScript liên kết, bỏ reference local và embed CSS/JS liên quan.
Lựa chọn đáng tin nhất là một file tự chứa:
Create a complete self-contained HTML file with inline CSS and JavaScript.
It should run in a browser without local files.
Điều khiển preview
Panel resizable có tab Preview/Code, copy, download, cửa sổ mới và fullscreen. Click preview trước khi gửi input keyboard.
Sandbox
HTML load qua GET /api/artifacts/sandbox. srcdoc kế thừa CSP app chặn inline script; host riêng cung cấp policy riêng. Policy cho inline script và eval nhưng không khai báo host ngoài.
Frame cho script, form, modal, popup, pointer capture và download, nhưng không allow-same-origin. Origin opaque không truy cập cookie, storage hay DOM. Feature policy cho clipboard, fullscreen và gamepad.
Môi trường artifact
App cung cấp library local: React, ReactDOM, Framer Motion, Babel JSX/TSX, Tailwind, Recharts, Chart.js, Plotly, d3, Three.js (THREE.OrbitControls), Lucide, Lodash, MathJS, Papa Parse, Tone.js và mermaid. Import dùng import ... from 'react' hoặc import ... from '<name>'; import compile thành registry lookup. Library lạ hiện error rõ.
Origin opaque không gửi session cookie; embedding tránh redirect Cloudflare Access, Authelia hoặc oauth2-proxy. Tag <script>/<link> CDN được thay bằng bundle local, gồm global Chart và React. localStorage, sessionStorage, document.cookie dùng bản thay memory-only trong preview.
Artifact chạy code được tạo: review HTML không tin cậy và không đưa secret.
Prompt tốt hơn
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.
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.
Return only one valid SVG code block with width, height, and viewBox.