OpenUI：AI駆動のUIジェネレーター

1. プロジェクト概要

OpenUIは、オープンソースのLLM駆動アプリケーションであり、開発者が自然言語でユーザーインターフェースを記述すると、ブラウザ上で即座にライブレンダリングされた結果を確認でき、その後、クリーンなHTML/CSSやフレームワーク固有のコード（React、Svelte、Web Componentsなど）としてエクスポートできます。

2. 背景と位置づけ

OpenUIは、機械学習の実験トラッキングで最もよく知られている企業である**Weights & Biases (W&B)**によって、次世代のLLM駆動開発ツールがどのようなものになるかを探求するための社内プロトタイプとして作成されました。より広いコミュニティが同じアイデアを試せるように公開されました。そのアイデアとは、手作業でマークアップを記述することなく、自然言語の意図を動作するフロントエンドコードに変換することです。

概念上、OpenUIはプロプライエタリな「テキストからUIへ」のジェネレーターと同じ領域に位置づけられますが、寛容なライセンスの下で完全にオープンソースであること、プロバイダーに依存しないこと（単一のAIベンダーにロックインされないこと）、そしてセルフホスト可能であることで差別化されています。チームは、クローズドなホステッドサービスに依存するのではなく、Ollamaを介したローカルモデルの使用を含め、独自のインフラストラクチャ上で完全に実行できます。

3. 機能カテゴリ

🤖 LLMプロバイダー統合 — 9つのサポート対象バックエンド — OpenAI、Anthropic Claude、Google Gemini、Groq、Mistral、Cohere、Ollama（ローカルモデル）、任意のOpenAI互換エンドポイント、そして統合プロキシとしてのLiteLLM — コスト、プライバシー、レイテンシのニーズに応じて、チームはクラウドベンダー、セルフホスト型ローカルモデルを選択するか、複数を組み合わせることができます。
🎨 コードエクスポート対象 — 4つ以上の出力形式 — 生のHTML/CSS、React、Svelte、Web Components — 生成されたマークアップをチームがすでに使用しているフレームワークに変換するため、出力を既存のコードベースに直接貼り付けることができます。
🖥️ ライブプレビューと反復 — チャット駆動の改良、即時レンダリングされたプレビュー、メッセージごとの履歴 — 開発者は変更を記述し続け（「ボタンを大きくする」「ダークテーマに切り替える」など）、コードに触れることなくUIがリアルタイムで更新されるのを見ることができます。
👁️ ビジョン支援による改良 — ビジョン対応モデル向けのスクリーンショットベースのフィードバック — ユーザーはスクリーンショット（デザインモックやレンダリングバグなど）を添付できるため、LLMは生成されたUIを視覚的な参照と一致させることができます。
🐳 デプロイメントオプション — 4つのセットアップパス — プリビルド済みのDockerイメージ、Docker Compose（Ollama同梱）、uvによるソースインストール、GitHub Codespaces/Gitpod用の既製のDev Containers — 1行のデモから完全にカスタマイズされたローカル開発環境まで、すべてをカバーします。

4. 主な特徴

自然言語からUIへの生成 — コンポーネントや完全なレイアウトを1文で記述するだけで、数秒でレンダリングされた編集可能な結果が得られ、ゼロから新しいUIを始める際の真っ白なキャンバス問題を解消します。
プロバイダー非依存のアーキテクチャ — 内部でLiteLLMによって駆動されているため、例えばOpenAIからローカルのOllamaモデルへの切り替えはコードの変更ではなく、設定の変更で済みます。
マルチフレームワークエクスポート — 同じ生成されたデザインをプレーンなHTML、React、Svelte、またはWeb Componentsに変換できるため、デザインを特定の技術スタックに移行する必要がある場合の手直しを減らすことができます。
Ollamaを介したローカルファーストのオプション — データプライバシーやコストの制約があるチームは、スクリーンショットベースの改良用のLlavaのようなビジョンモデルを含め、ローカルのオープンウェイトモデルを使用してパイプライン全体をオフラインで実行できます。
会話型の反復ループ — 改良は手作業でのCSS調整ではなくチャットを通じて行われるため、技術的なユーザーとそうでないユーザーの両方にとってフィードバックループが高速に保たれます。
摩擦のない試用 — APIキーを伴う1回のdocker runコマンドで動作するインスタンスを用意するのに十分であり、ローカルでのセットアップ前に評価用の公開デモが利用可能です。

5. 役割別のユースケース

一般の開発者 — 平易な言語の記述からUIコンポーネントやプロトタイプのレイアウトを迅速にスキャフォールドし、現在のプロジェクトで使用されているフレームワークに直接エクスポートします。
データ/研究科学者 — フロントエンドの専門知識がなくても、内部ツール、ダッシュボード、またはMLデモアプリ用のシンプルなフロントエンドを構築します。特に実験トラッキングにすでにW&Bを使用しているチームに役立ちます。
プロジェクトマネージャー/プロダクトオーナー — 機能の説明やワイヤーフレームのアイデアを、数分でクリック可能な視覚的なプロトタイプに変換し、エンジニアリング作業を開始する前にステークホルダーの認識を合わせます。

6. はじめに

必要な情報を見つける — メインのREADMEおよびbackend/README.mdとフロントエンドのREADMEにあるコンポーネント固有のドキュメントを読むか、何もインストールする前にホステッドデモを試してください：

open https://openui.fly.dev

インストール / 統合 — 最速のパスはプリビルド済みのDockerイメージです：

docker run --rm --name openui -p 7878:7878 -e OPENAI_API_KEY ghcr.io/wandb/openui

次にhttp://localhost:7878にアクセスします。ソースから実行する場合（gitとuvが必要）：

git clone https://github.com/wandb/openui.git
cd openui/backend
uv sync --all-extras
export OPENAI_API_KEY=xxxx
uv run python -m openui --dev

貢献する — リポジトリをフォークし、mainに対してブランチを切り、既存のPRの慣例に従ってプルリクエストを送信してください：

git clone https://github.com/wandb/openui.git
cd openui
git checkout -b my-feature

新しい作業を始める前に、最初のタスクに最適なものがないか未解決のissuesを確認してください。

7. プロジェクト構造

openui/
├── backend/          # Python APIサーバー：LLMオーケストレーション、LiteLLM設定、HTML生成
│   └── README.md     # バックエンド固有のセットアップと環境変数
├── frontend/         # ReactベースのWeb UI：チャットインターフェース、ライブプレビュー、コードエクスポート
├── .devcontainer/     # Codespaces / Gitpod用の事前設定済み開発環境
└── docker-compose.yml # OpenUIとローカルのOllamaインスタンスを同梱するComposeセットアップ

主要なファイル：backend/にはチャットプロンプトをレンダリングされたマークアップに変換するモデルルーティングロジックが含まれています。frontend/はライブプレビューをレンダリングし、React/Svelte/Web Componentsへの変換を処理します。.devcontainer/により、貢献者はワンクリックで動作する環境を入手できます。

8. 関連エコシステム

上流の依存関係：LiteLLM（統合LLM APIプロキシ）、Ollama（ローカルモデルランタイム）、およびそれが統合する様々なクラウドLLM API（OpenAI、Anthropic、Google Gemini、Groq、Mistral、Cohere）。
起源組織：Weights & Biasesによって構築されました。OpenUIは元々、その実験トラッキングプラットフォームを補完する社内ツールのプロトタイプとして構築されました。
補完ツール：より広範なAI支援フロントエンド開発領域において他の「プロンプトからUIへ」のツールと並んで存在し、クローズドなホステッドジェネレーターに対するオープンソースでセルフホスト可能な代替手段を提供します。

9. ライセンス

OpenUIはApache License 2.0の下で公開されています。

✅ 商用利用、改変、配布、および私的利用はすべて許可されています。
✅ ライセンスおよび著作権表示が保持されている限り、サブライセンスし、その上にプロプライエタリな製品を構築することができます。
❌ ライセンスは一切の保証を提供せず、著作者からの責任補償もありません。
ℹ️ Apache-2.0には貢献者からの明示的な特許許諾が含まれており、多くのチームがエンタープライズでの採用において、明示性の低い寛容なライセンスよりも好ましいと考えています。

10. FAQ

Q: OpenUIを使用するためにすべてのLLMプロバイダーのAPIキーは必要ですか？
A: いいえ。すべてのプロバイダーキーは任意です。使用する予定のプロバイダーのキーのみを設定する必要があります。例えばOPENAI_API_KEYのみ、またはOllamaを介して完全にローカルで実行する場合はまったく不要です。

Q: データをクラウドAIプロバイダーに送信せずにOpenUIを使用できますか？
A: はい。OpenUIは同梱のdocker-compose.ymlセットアップを介して、ビジョンモデルを含むOllamaを通じてローカルモデルに対して完全に実行できます。

Q: 生成されたUIをどのフレームワークにエクスポートできますか？
A: プレーンなHTML/CSS、React、Svelte、およびWeb Componentsがすべてエクスポート対象としてサポートされています。

Q: 何もインストールする前にOpenUIをどこで試せますか？
A: 公開デモはopenui.fly.devで利用可能です。

Q: OpenUIが使用するモデルをカスタマイズするにはどうすればよいですか？
A: OpenUIは環境変数からLiteLLM設定を自動生成します。OPENUI_LITELLM_CONFIGパスを介して、または作業ディレクトリに設定ファイルを配置することで、カスタム設定を提供することもできます。

11. クイックリンク

リポジトリ：github.com/wandb/openui
バックエンドのドキュメント：backend/README.md
課題 / 貢献トラッカー：github.com/wandb/openui/issues
プルリクエスト：github.com/wandb/openui/pulls
ライブデモ：openui.fly.dev

12. まとめ

OpenUIは、フロントエンド開発の退屈な最初のステップ、つまりアイデアをマークアップに変換する作業を、チームが選択したクラウドまたはローカルの任意のLLMによって駆動される、会話型でほぼ瞬時のプロセスに変えます。これは、UIを迅速にプロトタイピングしたい開発者や製品チーム、LLM支援デザインワークフローを評価したいチーム、またはクローズドなテキストからUIへのツールに代わる完全にセルフホスト可能な代替手段を寛容なオープンソースライセンスの下で実行したいチームにとって最も価値があります。