ai component generator

歡迎使用 ChatGPT 的 AI 組件產生器

該專案使用 OpenAI 的 ChatGPT 產生幾乎所有 UI 元件，並允許您複製 html 程式碼

AI2UI元件產生器

它是如何運作的

該專案使用 ChatGPT API 和 Vercel Edge 功能。它根據表單和使用者輸入建置提示，透過 Vercel Edge 函數將其傳送到 chatGPT API，然後將回應串流回應用程式。您可以要求任何 UI 元件，自由風格。它很可能會為您產生正確的東西。這也可以用作專案的一個很好的引導程序，我嘗試將樣式設為 Material-UI 樣式，但您可以更改此行為。

匯出您的元件

現在，您可以選擇 UI 元件的 HTML 匯出以及您首選的 Tailwind CSS、Next.js、React.js、Material UI 組合

本地運行

該專案是使用Next.js和TailwindCSS建置的，因此您可以將其直接部署到 Vercel。

克隆儲存庫後，前往 OpenAI 建立帳戶並將 API 金鑰放入名為.env (OPENAI_API_KEY) 的檔案中，然後在命令列中執行該應用程序，它將在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程式碼，在上面產生文字。 ": ` 從'react' 導入React;                    const MyComponent = () => { return ( 
 
Hello World 
歡迎使用Tailwind CSS 的Next.js 元件
 點選我 
 );                    };                    導出預設的 MyComponent；                `},{"role": "user","content": "請使用內嵌 css 建立 html 程式碼，以建立下列元件，Meterial UI 外觀，僅傳回代碼"},{"role": "user" , "內容": 提示},],};const Stream =等待OpenAIStream(payload);返回新的Response(stream);};

誰做了這個項目

我的名字是 Yuval - 一位本質上的企業家，我❤️構建的端到端系統不僅看起來令人驚嘆、感覺最先進，而且具有真正的意義和影響。

？貢獻

歡迎貢獻、問題和功能請求！

• 分叉存儲庫，將其克隆到您的設備上。就是這樣 ？

• 最後提出拉取請求:)

執照

此專案已獲得 MIT License 許可。

---

我們以大愛接受貢獻！表現出你的興趣！貢獻！