インライン・ビジュアライザー：ローカルAIモデルがインタラクティブなHTMLビジュアライゼーションをレンダリング可能に

Inline Visualizerは、Open WebUI向けのプラグインで、ローカルAIモデルにインタラクティブなHTML/SVGビジュアライゼーションをチャット内で直接レンダリングし、ビジュアル要素とAIモデル間で双方向通信を行う能力を与えます。

機能概要

このプラグインは、モデルにデザインシステムとレンダリングツールを提供します。モデルがHTML/SVGフラグメントを記述すると、このツールがダークモード対応のテーマ付きシェルでラップし、チャット内にインラインでレンダリングします。JavaScriptブリッジにより、ビジュアライゼーション内の要素がチャットインターフェースにメッセージを送り返すことができます。

主な特徴

• ツール呼び出しをサポートするあらゆるモデルで動作: Qwen、Mistral、Gemma、DeepSeek、Gemini、Claude、GPT
• BSD-3ライセンス - フォーク、修正、自由に使用可能
• iframe内iframeなし、外部サービス不要、APIキー不要
• インタラクティブ要素がAIモデルにメッセージを送り返すことが可能

使用例

• ノードをクリックするとAIがそのコンポーネントについて説明するアーキテクチャ図
• 適切なダーク/ライトモードテーマ対応のChart.jsダッシュボード
• AIが回答を採点するインタラクティブクイズ
• 選択肢を収集してモデルに送信する設定フォーム
• 展開可能なセクションとホバー効果付きの解説
• モデルが記述できるあらゆるHTML/SVG/JSコンテンツ

必要条件

• Open WebUI（セルフホスト）
• ツール呼び出しをサポートする任意のモデル
• 2つのファイルを貼り付けてインストール設定を行うだけで1分未満

パフォーマンスに関する考慮事項

作成者は、パフォーマンスがモデルの秒間トークン数（TPS）に依存すると指摘しています。1桁のTPSでは、レンダリングされた成果物が表示されるまで約1分待つ可能性があります。デモでは速度のためにClaude Haikuを使用していますが、このツールはQwen3.5 27b（遅いが機能する）でもテストされています。

インストール

このプラグイン（ツール＋スキル）はhttps://github.com/Classic298/open-webui-pluginsで利用可能です。インストールチュートリアルはプラグインフォルダのREADMEにあります。