gen ui

GenUI

テキストまたは画像のプロンプトを使用して、React で構築された UI コンポーネントとアプリを生成します。 OpenAI のアシスタント API と CodeSandbox のサンドパックを利用しています。

始めましょう

OpenAI APIキーを取得する

プロジェクトのルートに.env.localファイルを作成し、OpenAI API キーを追加します。

OPENAI_API_KEY=sk-...

インストール

yarn install

アプリを起動する

yarn dev

http://localhost:3000 を開いてブラウザで表示します。

1. 新しいアシスタントを作成する

• これらは汎用的なもの (React など)、またはコンポーネント ライブラリに固有のもの (React Spectrum など) の場合もあります。
• これらは GenUI 内または OpenAI のプラットフォーム上で管理できます。 OpenAI のプラットフォームを使用して、ナレッジ検索用のファイル (マークダウン ファイル内のコンポーネント ライブラリ ドキュメントなど) を追加します。

2. そのアシスタントで新しいスレッドを作成します

• これは、構築しているアプリとそのすべての反復を表します。

3. テキスト プロンプトを入力し、必要に応じて画像を追加します。

• 注: 画像をアップロードするには、OpenAI アカウントがgpt-vision-previewモデルにアクセスできる必要があります。

5. プロンプトに基づいて、動作する React アプリが生成されます。

6. アプリに変更を加えたり、機能を追加したりするよう要求し、これを繰り返します。