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": "为按钮创建 next.js + tailwind css 代码 200 x 100，浅紫色背景，在其上生成文本。请创建一个完整的next.js组件"},{"role": "assistant", "content": ` import React from '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 许可。

---

我们以大爱接受贡献！表现出你的兴趣！贡献！