ai コンポーネントジェネレーターダウンロード - ai コンポーネントジェネレーターソースコードのダウンロード

ai component generator

その他のソースコード

1.0.0

ダウンロード

ChatGPT を使用した AI コンポーネントジェネレーターへようこそ

このプロジェクトは、OpenAI の ChatGPT を使用してほぼすべての UI コンポーネントを生成し、HTML コードをコピーできるようにします。

Twitterバイオジェネレーター

AI2UI コンポーネントジェネレーター

仕組み

このプロジェクトでは、ChatGPT API と Vercel Edge 機能を使用します。フォームとユーザー入力に基づいてプロンプトを構築し、それを Vercel Edge 関数経由で chatGPT API に送信し、応答をアプリケーションにストリーミングして返します。任意の UI コンポーネントを自由なスタイルで要求できます。ほとんどの場合、それはあなたにとって適切なものを生成するでしょう。これは、プロジェクトの優れたブートストラップとしても使用できます。私はスタイルをマテリアル UI スタイルにしようとしましたが、この動作は変更できます。

コンポーネントをエクスポートする

UI コンポーネントの HTML エクスポートと、Tailwind CSS、Next.js、React.js、マテリアル UI の好みの組み合わせから選択できるようになりました。

ローカルで実行する

このプロジェクトはNext.jsとTailwindCSSを使用して構築されているため、Vercel に直接デプロイできます。

リポジトリのクローンを作成した後、OpenAI に移動してアカウントを作成し、 .env (OPENAI_API_KEY) という名前のファイルに API キーを入力します。その後、コマンドラインでアプリケーションを実行すると、 http://localhost:3000で利用できるようになります。

 npmインストール

糸開発

ChatGPT プロンプトとリクエストの変更

ChatGPT 応答を変更するには、返したいものの例を与えるだけです (アシスタントの役割を使用して、適切な応答の例を生成します)。以下の例では、TailwindCSS と Next を生成する方法を示しています。 .js コンポーネントを呼び出し、後で対応する HTML コードを返すように要求します。

 // /api/generate.tsconst handler = async (req: Request): Promise => {const {prompt} = (await req.json()) as {prompt?: string;};if (!prompt ) {return new Response("リクエストにプロンプトがありません", {status: 400});}const payload: OpenAIStreamPayload = {model: "gpt-3.5-turbo",messages: [{"role": "user","content": "ボタン 200 x 100 の next.js + tailwind CSS コードを作成し、薄紫色の背景にテキストを生成します。作成してください。完全な next.js コンポーネント"},{"role": "assistant", "content": ` import React from 'react';                    const MyComponent = () => { return (  Hello World Tailwind CSS を使用した Next.js コンポーネントへようこそ
   );                    };                    デフォルトの MyComponent をエクスポートします。                `},{"role": "user","content": "次のコンポーネント、Meterial UI のルック アンド フィールを作成する HTML コードをインライン CSS で作成してください。コードのみを返します"},{"role": "user" , "コンテンツ": プロンプト},],};const stream = await OpenAIStream(payload);return new Response(stream);};