概要
Web アプリを作成していく中で大変な作業として、UI コンポーネントの構築や整備があると思います。
CSS やデザイン、細かい挙動などを整備していくと本当にきりがないですよね。
そんな UI コンポーネントの構築を AI プロンプトの力を借りて素早くお香ことができる OSS がありましたので今回はこちらについてご紹介したいと思います。
今回ご紹介する OSS は、UI コンポーネントの構築プロセスを楽しく、早く、そして柔軟に行うことができる「OpenUI」になります。
こちらの「OpenUI」を使用することで、これまで大変だったフロントエンドサイドのデザイン構築をとても簡単に行うことができます。
それでは早速詳細についてみていきましょう！
目次
特徴
「OpenUI」の大きな特徴としてはやはりチャット形式で UI の構築を行うことができるところかと思います。
基本は英語だけですが、簡単な英語でもそれなりの UI コンポーネントを構築することができます！
利用手順
デモ版
デモ版を利用したい場合は、以下のデモサイトを参照することで利用可能です。
ローカル環境起動（Python）
ローカル環境に資材をクローンして利用することが可能です。
以下のコマンドを入力してください（Python が必要になりますので、まだの方は Python をインストールしてきましょう）。
git clone https://github.com/wandb/openui cd openui/backend pip install . export OPENAI_API_KEY=xxx python -m openui
起動後は http://localhost:7878/ にアクセスすることで、「OpenUI」を利用することが可能です。
ローカル環境起動（Docker Compose）
Docker Compose を利用する場合は、資材をクローンした後、以下コマンドを入力することで利用可能です。
docker-compose up -d docker exec -it openui-ollama-1 ollama pull llava
起動後は http://localhost:7878/ にアクセスすることで、「OpenUI」を利用することが可能です。
ローカル環境起動（Docker）
Docker を利用して動作させたい場合は /backend ディレクトリから docker ファイルを手動で構築して起動することができます。
docker build . -t wandb/openui --load docker run -p 7878:7878 -e OPENAI_API_KEY wandb/openui
起動後は http://localhost:7878/ にアクセスすることで、「OpenUI」を利用することが可能です。
使用感
早速自分のほうでも「OpenUI」を使って UI コンポーネントを作成してみました。
試しに「コールセンター向けのダッシュボード画面を作成して！」と入力してみたところ、以下の画面が数秒で作成されました！
上記の画面に対して「背景色を赤色にして！」とプロンプトで入力したところ、以下のような画面が表示されました！
こんな感じで簡単に UI を構築することができました！
今回は簡単なことしか記載していませんが、もっと複雑な指示を出すことでより魅力的な UI を構築することができると思いますので、ぜひ使いこなしてみてください。
まとめ
今回は、UI コンポーネントの構築プロセスを楽しく、早く、そして柔軟に行うことができる「OpenUI」という OSS についてご紹介しました。
ChatGPT が最近とても流行っており、プロンプトで UI 資材を構築することができる時代になりました！
こちらを使用することでこれまで時間のかかっていたフロンエンド側の構築が簡単に素早く行えるため、気になった方はぜひ一度、こちらの OSS「OpenUI」を使ってみてはいかがでしょうか？
