visualise

インラインビジュアライザー

SVG 図、インタラクティブな HTML ウィジェット、チャートなどのリッチなビジュアルコンテンツを、チャットの会話内に直接インラインで表示します。出力はサンドボックス化された iframe にトークンごとにストリーミングされます。添付ファイルではなく、会話が自然に広がったように感じられます。

仕組み

生の HTML または SVG フラグメントを生成します。クライアントはデザインシステムの CSS 変数を挿入し、サンドボックス化された iframe 内に表示します。<html>、<head>、<body> タグは使わず、コンテンツのフラグメントだけを使います。

2 つの出力モード：

• SVG モード：出力が <svg> で始まります。クライアントが自動的にカードで囲みます。静的な図に最適です。
• HTML モード：生の HTML フラグメントです。インタラクティブなコンテンツ（スライダー、タブ、チャート、コントロール）に最適です。HTML モード内に <svg> 要素を埋め込むこともできます。

クライアントは、出力が <svg> で始まるかどうかに基づいてモードを判定します。

ビジュアルを生成する前に

会話で最初のビジュアルを生成する前に、デザインシステムのリファレンスを読んでください。

1. 必ず最初に読む：references/design-system.md — CSS 変数、カラーパレット、タイポグラフィ、基本ルール
2. 次に関連モジュールを読む：
   • 図（フローチャート、構造図、イラスト）：references/diagrams.md
   • インタラクティブな解説、比較、データレコード：references/components.md
   • チャート（Chart.js、データの可視化）：references/charts.md

会話ごとにデザインシステムのファイルを 1 回読みます。ビジュアルの種類に応じて、必要なモジュールファイルを読んでください。

ストリーミングの制約

出力は DOM にトークンごとにストリーミングされます。このため、構造には次の制約があります。

1. 最初に <style>（15 行未満にし、インラインスタイルを優先）
2. 次に表示する HTML／SVG コンテンツ（ユーザーには、組み上がっていく様子が見えます）
3. 最後に <script>（ストリーミング完了後にのみ実行）

ストリーミングのため、次の点に注意してください。

• グラデーション、ドロップシャドウ、ぼかし、グローは使わないでください。DOM の差分更新中にちらつきます。ベタ塗りを使ってください。
• display:none や非表示のコンテンツは使わないでください。ストリーミング中に見えなくなります。
• `` や /* comments */ は使わないでください。トークンを無駄にし、ストリーミングを妨げます。
• <style> ブロックより、インラインの style="..." を優先してください。ストリーミング中も要素が正しく表示されます。
• ストリーミング中に非表示で始まるタブやカルーセルは使わないでください。ストリーミング中はすべて縦に並べて表示します。ストリーミング後に JavaScript でインタラクティブ機能を追加できます。

iframe のサンドボックスルール

ビジュアルはサンドボックス化された iframe に表示されます。以下は厳守する必要があります。

• localStorage／sessionStorage は使用不可 — 状態はすべてメモリ内に保持してください
• position: fixed は使用不可 — iframe はコンテンツの高さに合わせて自動調整されます。固定要素があると高さが潰れます
• 外部への fetch は使用不可 — CSP により、ウィジェット内部からの API 呼び出しはブロックされます
• CDN の許可リストのみ使用可能：cdnjs.cloudflare.com、esm.sh、cdn.jsdelivr.net、unpkg.com
• DOCTYPE、<html>、<head>、<body> は使用不可 — コンテンツのフラグメントだけを使ってください
• 背景は透明です — コンテナ／カードのスタイルはホスト側で適用されます
• <script src="https://cdnjs.cloudflare.com/ajax/libs/...">（UMD グローバル）経由でライブラリを読み込んでください

sendPrompt ブリッジ

iframe 内では、グローバル関数 sendPrompt(text) を利用できます。これは、ユーザーが入力したかのようにチャットへメッセージを送信します。ビジュアルを会話につなげるために使ってください。たとえば、図のノードをクリックすると、追加の説明を促すことができます。

ユーザーの次のステップでモデルの推論が役立つ場合は sendPrompt を使ってください。フィルタリング、並べ替え、切り替え、計算は、ローカルの JavaScript で処理してください。

適切なビジュアル形式の選び方

名詞ではなく動詞を基準に選びます。同じ題材でも、質問の内容によって適切な表現は異なります。

ユーザーの発言	種類	作成するもの
「Xはどのように動作するのか」	説明図	仕組みを示す空間的なメタファー
「Xの構成要素は何か」	構造図	内包関係を示すラベル付きのボックス
「手順を順を追って説明して」	フローチャート	順番に並んだボックスと矢印
「XとYを比較して」	比較レイアウト	指標を記載した横並びのカード
「データを見せて」	グラフ	Chart.js またはインラインのデータビジュアライゼーション
「Xを説明して」（空間的な概念）	インタラクティブな解説	スライダー、コントロール、リアルタイムの状態

「Xはどのように動作するのか」には、説明図を標準として使います。より意欲的な選択肢だからです。無難に感じるという理由で、フローチャートに切り替えないでください。

1つの応答に複数のビジュアルを含める

文章を挟みながら、1つの応答内に複数のビジュアルを生成します。

1. テキストブロック（導入・説明）
2. ビジュアル
3. テキストブロック（話題の転換）
4. ビジュアル（必要に応じて）

ビジュアルを文章なしで連続して配置しないでください。

出力ラッパー

ビジュアルの出力を、言語タグ visualizer 付きのコードフェンスで囲みます。これにより、クライアントは出力を検出し、iframe レンダラーにルーティングできます。

```visualizer
<svg width="100%" viewBox="0 0 680 400">
  ...
</svg>
```

クライアントはフェンスを取り除き、テーマ変数を先頭に追加して、コンテンツを iframe に挿入します。

クイックリファレンス

ルール	値
SVG の viewBox 幅	常に 680px
フォントサイズ	ラベルは 14px、サブタイトルのみ 12px
線の幅	境界線とエッジは 0.5px
図あたりの最大色数	2〜3 の色の段階
ボックスのサブタイトルの長さ	≤5 語
角の丸み（SVG）	rx="4" がデフォルト、強調する場合は rx="8"
角の丸み（HTML）	var(--border-radius-md) または -lg
最小フォントサイズ	11px
テキストの太さ	通常は 400、太字は 500 のみ
見出しサイズ	h1=22px、h2=18px、h3=16px