thesysdev/open-intelligent-ui

これは何？

主な機能

• 01モデルの回答を、地図、チャート、テーブル、フォーム、入力欄を備えたインタラクティブなUIとして描画します。
• 02変数で回答の状態を保持し、組み込み関数で値を計算します。
• 03マーカー、カテゴリ、道路ルートに対応したMapLibreの地図を利用できます。
• 04OpenUI Cloud、任意のOpenAI互換API、またはローカルのOllamaモデルに対応しています。
• 05開発時のみ利用できる、コンポーネントとサンプルプログラムのギャラリーを提供します。

ユースケース

• テキストではなくツールを使って回答する、生成AIチャットインターフェースのプロトタイピング。
• AIチャット製品内で、旅行プランナー、ダッシュボード、計算ツールを構築する。
• 生成UI向けに、ローカルまたは代替のLLMプロバイダーを試す。

クイックスタート

1. 1

   環境ファイルをコピーする

   cp .env.example .env
2. 2

   依存関係をインストールする

   npm install
3. 3

   APIキーを.envに生成する

   npm run generate:apiKey
4. 4

   開発サーバーを起動して、http://localhost:3000を開く

   npm run dev

使う前に知っておきたいこと

• !回答を生成するには、Node 24とOpenUI Cloudのキー、または別のOpenAI互換APIキーが必要です。
• !道路ルートには公開OSRMデモサーバーを使用しており、徒歩や公共交通機関の経路ではなく、道路の概略のみを表示します。
• !READMEでは、本番用ライブラリではなく、ChatGPTの機能を再現したデモとして説明されています。
• !ローカルモデルの実行には、大容量のダウンロード（デフォルトで約18 GB）と多くのメモリが必要です。

トピック

よくある質問

open-intelligent-ui とは？

OpenUIを基盤に、モデルの回答をインタラクティブな地図、チャート、フォーム、実際に使えるツールとしてストリーミング表示する、ChatGPTのIntelligent UIを再現したオープンソースのNext.jsデモ。 Open Intelligent UIは、ChatGPTのIntelligent UIのインタラクティブな回答体験を再現します。たとえばサンフランシスコでの1日の計画をリクエストすると、プレーンテキストではなく、地図、写真、編集可能な旅程を含む生成インターフェースが返されます。モデルはOpenUI Langをストリーミングし、アプリはモデル自身がレイアウトを決めるコンポーネントライブラリを使って描画します。

open-intelligent-ui は無料で使えますか？ライセンスは？

open-intelligent-ui は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

open-intelligent-ui は今もメンテナンスされていますか？

活発にメンテナンス中。open-intelligent-ui の最終コミットは 2026年10月17日 です。

open-intelligent-ui は何に使えますか？

テキストではなくツールを使って回答する、生成AIチャットインターフェースのプロトタイピング。 AIチャット製品内で、旅行プランナー、ダッシュボード、計算ツールを構築する。 生成UI向けに、ローカルまたは代替のLLMプロバイダーを試す。

open-intelligent-ui のインストール方法は？

環境ファイルをコピーする: cp .env.example .env 依存関係をインストールする: npm install APIキーを.envに生成する: npm run generate:apiKey 開発サーバーを起動して、http://localhost:3000を開く: npm run dev

open-intelligent-ui はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/thesysdev/open-intelligent-ui