アーティファクト
アーティファクトは、モデルが生成したファイルやコードブロックを、プレビュー可能なサイドパネルに変換します。ゲーム、図、HTML デモ、JSON ペイロード、スクリプト、生成アセットに便利です。
アーティファクトは Work とは異なります。アーティファクトは通常のチャット応答から作成され、ブラウザ内でレンダリングされます。モデルに永続ファイルシステムやシェルを与えるものではありません。Work タスクは永続的なプロジェクトファイルと会話履歴を保持し、タスク単位の Docker コンテナ内でモデルツールを実行します。
対応する入力
Libre WebUI は、次の入力を検出します。
- 明示的な
<artifact>ブロック - アーティファクト向きの言語を指定したコードフェンス
- 単独の完全な HTML ドキュメント
index.html、CSS、JavaScript のブロックで構成された複数ファイルの HTML バンドル- JSX と TSX のコンポーネント
- Mermaid 図
- SVG ブロック
- JSON ブロック
- コードとテキストのスニペット
アーティファクトの種類
| 種類 | プレビュー動作 |
|---|---|
| HTML | スクリプトと操作を有効にしたサンドボックス iframe プレビュー |
| React | JSX または TSX をコンパイルしてマウント。Tailwind とライブラリセットを利用可能 |
| Mermaid | アプリケーションのテーマを使い、サンドボックス内で図を描画 |
| SVG | インラインのビジュアルプレビュー |
| JSON | 整形済みコードビュー |
| コード／テキスト | 構文強調表示付きコードビュー |
複数ファイルの HTML バンドル
モデルが関連する HTML、CSS、JavaScript ブロックを返すと、Libre WebUI はそれらを実行可能な HTML アーティファクトへ統合しようとします。ローカルのスタイルシート／スクリプト参照を削除し、一致する生成済み CSS と JavaScript をインライン化します。
最も確実な結果を得るには、自己完結した 1 つの HTML ファイルをモデルに依頼してください。
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 を継承し、アプリケーションのポリシーはインラインスクリプトを禁止するため、その方法でレンダリングしたアーティファクトは本番環境でブロックされます。代わりにサンドボックスホストをネットワーク経由で取得すると、サンドボックス独自のポリシーが適用され、作成されたプレビューフレームもそのポリシーを継承します。
アーティファクトはコードそのものなので、アーティファクト用ポリシーではインラインスクリプトと eval を許可しますが、このアプリケーション自身以外のホストは指定しません。アーティファクトは描画と計算はできますが、CDN から取得したり、外部へ通信したりできません。
フレーム自体では、スクリプト、フォーム、モーダル、ポップアップ、ポインターロック、ダウンロードを許可しますが、allow-same-origin は決して許可しません。そのためアーティファクトは不透明なオリジンで動作し、アプリケーションの Cookie、ストレージ、DOM にはアクセスできません。Feature Policy では、クリップボードアクセス、全画面表示、ゲームパッド入力を許可しています。
アーティファクトのランタイム
生成されたアーティファクトは、ライブラリを利用できる前提で作られています。CDN へのアクセスを許可する代わりに、アプリケーションが必要なライブラリを同梱します。
| アーティファクトで利用可能 | 利用方法 |
|---|---|
| React、ReactDOM、Framer Motion | import ... from 'react' |
| JSX と TSX | フレーム内で Babel によりコンパイル |
| Tailwind ユーティリティ | マークアップから生成。ビルド不要 |
| Recharts、Chart.js、Plotly、D3 | import ... from '<name>' |
| Three.js とコントロール、ローダー、環境などのアドオン | THREE.OrbitControls または import |
| Lucide icons、Lodash、MathJS、Papa Parse、Tone.js | import ... from '<name>' |
| Mermaid | mermaid アーティファクトまたは import |
この一覧にないライブラリを要求したアーティファクトには、空白のプレビューとコンソールのポリシーエラーではなく、そのライブラリ名を示す通知が表示されます。
フレーム自身がライブラリを取得することはありません。ユーザーのセッションを保持するアプリケーションページが必要なバンドルを読み込み、アーティファクトドキュメントへインライン化します。アーティファクト内の import 文は、ネットワーク上のモジュール解決として残さず、小さなレジストリから参照するようコンパイルされます。
この間接経路は偶然ではありません。サンドボックス化されたフレームは不透明なオリジンを持つため、ブラウザはそのリクエストをクロスサイトとして扱い、セッション Cookie を送信しません。Cloudflare Access、Authelia、oauth2-proxy などの認証プロキシを介した環境では、このリクエストにログインページへのリダイレクトが返ります。サンドボックスポリシーはそのページの読み込みを拒否し、アーティファクトは Content Security Policy エラーで失敗します。インライン化によりリクエスト自体をなくすことで、アーティファクトはノートパソコンでも企業のアクセスゲート内でも同じように動作します。
React アーティファクトは、サンドボックス内でコンパイルしてマウントされます。コンポーネントをモジュールのデフォルトとしてエクスポートすればレンダリングされます。すべてのライブラリが同じレジストリから React を解決するため、React インスタンスは 1 つだけになり、フックは正常に動作します。
CDN からライブラリを読み込む HTML アーティファクトも動作します。Tailwind、Chart.js、D3、Three.js、Papa Parse、Lodash、Mermaid、React、Babel を指す <script> または <link> は、ドキュメント内の同じ位置で同梱ビルドに置き換えてインライン化されます。そのため、インラインスクリプトの実行時にも 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.