thesysdev/open-intelligent-ui

Open Intelligent UI – 概要

Open Intelligent UI は、ChatGPTで示された「インテリジェントUI」の体験を再現するオープンソースのデモです。例えば「サンフランシスコで1日を計画する」といったユーザーのクエリに対し、プレーンテキストの代わりに、地図、写真、編集可能な旅程などのリッチでインタラクティブな回答を返します。このプロジェクトは、言語モデルがUIコンポーネント（OpenUI Lang 1.0）の説明をストリーミングし、フロントエンドがそれをレンダリングする、ジェネレーティブUIのオープン標準である OpenUI を基盤としています。

コアとなるアイデア

• モデル駆動型UI – LLMが、UIプリミティブ（レイアウト、テキスト、入力、メディア、チャート、マップなど）を組み立てるOpenUI Langのプログラムを生成します。静的なレイアウトはハードコードされておらず、モデルがどのコンポーネントを使用するかを決定します。
• コンポーネントライブラリ – TypeScriptライブラリ（src/lib/components/）は、30以上の再利用可能なプリミティブ（例：Col, Row, Map, Chart, SearchImage）を定義します。各コンポーネントには、スキーマ、スタイリングトークン、ダークモード対応があります。
• 組み込み関数 – 59の汎用@functions（リスト、数学、日付、色、集計など）により、生成されたプログラムが値の計算、状態の更新、インタラクティブなウィジェットの駆動を行えます。
• 状態とアクション – UI入力は$variablesにバインドされ、@Set、@CopyToClipboard、@OpenUrlなどのアクションは、サーバーへの往復なしに状態を変更します。
• プラガブルなバックエンド – デフォルトではアプリはOpenUI Cloudゲートウェイと通信しますが、OpenAI互換のAPI（OpenRouter、ローカルOllamaなど）を指定することもできます。

仕組み（高レベルのフロー）

1. ユーザーがリクエストを入力 → フロントエンドが/api/chatに送信します。
2. サーバーがシステムプロンプトを構築 し、コンポーネント仕様とプロンプトオプションを含め、選択したLLM（OpenAI、Ollamaなど）を呼び出します。
3. LLMがUIを記述するOpenUI Langをストリーミング します。
4. フロントエンドがストリームを解析 し、記述されたコンポーネントをライブでレンダリングします。状態変更（スライダー、チェックボックス）は、クライアント上で同じ関数をトリガーします。
5. オプショナルツール – SearchImageはWikipediaのリード画像を取得し、/api/street-routeはOSRMから道路形状を取得します。

初期装備として含まれるもの

• デモ用チャットUI（http://localhost:3000）は、旅行計画、ダッシュボードなどの「インテリジェントUI」プロンプトに回答できます。
• デザインサーフェス（/gallery）は、16の公式サンプルすべてと2つのダッシュボードの手書きプログラムを表示し、UIデザイナーがコンポーネントセットを探索するのに役立ちます。
• ベンチマークスクリプト は、16のサンプルと8つのダッシュボードプロンプトを任意のモデルに対して実行し、生成されたUIを検証し、スクリーンショットをキャプチャできます。

はじめに（クイックステップ）

cp .env.example .env
npm install
npm run generate:apiKey   # THESYS_API_KEYを.envに書き込む（独自のAPIを使用する場合はスキップ可）
npm run dev               # 開発サーバーを起動

ブラウザを開き、次のようなリクエストを入力します。

I'm in San Francisco for a day, plan a sightseeing route for me

UIが地図、写真、編集可能な旅程とともに表示されます。

Ollamaでローカル実行（クラウドキー不要）

1. Ollamaをインストールし、モデルをプルします（デフォルトはqwen3.8:27b）。
2. 大きなコンテキストウィンドウを確保します（OLLAMA_CONTEXT_LENGTH=32768）。
3. .envでMODEL_PROVIDER=ollamaを設定し、npm run devを実行します。
   • 出力補正ステップがないため、より大きなモデルの方が良い結果が得られます。

誰が使うべきか

• 開発者 – AI拡張製品を構築し、既製のUI生成スタックを求める方。
• デザイナー – LLM駆動のインターフェースが再利用可能なプリミティブからどのように構成されるかを探求する方。
• 研究者 – ジェネレーティブUIモデルを評価する方（ベンチマークスクリプトにより、体系的なテストが簡単に行えます）。

制限事項

• デモはかなり大きなプロンプト（約8kトークン）に依存しているため、ローカルモデルには大きなコンテキストウィンドウが必要です。
• ローカルモデルを使用する場合、OpenUIゲートウェイの検証/修正がスキップされるため、不正なUIコードがUIを壊す可能性があります。
• OpenUI 1.0のコンポーネントと関数の一部のみが実装されており、ライブラリを拡張するにはスキーマの追加と再生成のステップが必要です。

---

要約: Open Intelligent UIは、ChatGPTスタイルの「インテリジェントUI」を、OpenUIのジェネレーティブUI標準を使用して具体的に実装したオープンソース版であり、完全なコンポーネントライブラリ、状態を持つ関数、任意のOpenAI互換モデルに対応する柔軟なバックエンドオプションを備えています。