{"id":13455172,"url":"https://github.com/yuvalsuede/ai-component-generator","last_synced_at":"2025-04-13T04:57:20.780Z","repository":{"id":118704044,"uuid":"609369375","full_name":"yuvalsuede/ai-component-generator","owner":"yuvalsuede","description":null,"archived":false,"fork":false,"pushed_at":"2024-11-12T07:02:41.000Z","size":937,"stargazers_count":1359,"open_issues_count":10,"forks_count":126,"subscribers_count":17,"default_branch":"main","last_synced_at":"2025-04-13T04:57:15.396Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://ai2ui.co","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yuvalsuede.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-03-04T01:12:52.000Z","updated_at":"2025-04-01T18:38:38.000Z","dependencies_parsed_at":null,"dependency_job_id":"964aa226-cd41-4a36-af90-d7ed8f8d6e5d","html_url":"https://github.com/yuvalsuede/ai-component-generator","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuvalsuede%2Fai-component-generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuvalsuede%2Fai-component-generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuvalsuede%2Fai-component-generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuvalsuede%2Fai-component-generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yuvalsuede","download_url":"https://codeload.github.com/yuvalsuede/ai-component-generator/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248665762,"owners_count":21142123,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T08:01:02.052Z","updated_at":"2025-04-13T04:57:20.757Z","avatar_url":"https://github.com/yuvalsuede.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","others"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://ai2ui.co\"\u003e\n    \u003cimg style=\"max-width: 400px;\"  alt=\"logo\" src=\"https://ai2ui.co/ai-component-generator-logo.png\"\u003e\n  \u003c/a\u003e\n\n\u003c/p\u003e\n\u003ch1 align=\"center\"\u003eWelcome to AI Component Generator with ChatGPT\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://opensource.org/licenses/MIT\" target=\"_blank\"\u003e\n    \u003cimg alt=\"License: MIT License\" src=\"https://img.shields.io/badge/License-MIT License-yellow.svg\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\nThis project generates almost any UI components with OpenAI's ChatGPT and allows you to copy the html code\n\n[![Twitter Bio Generator](./public/screenshot.png)](https://ai2ui.co)\n\n# [AI2UI](https://ai2ui.co/) component generator\n\n## How it works\n\nThis project uses the [ChatGPT API](https://openai.com/api/) and [Vercel Edge functions](https://vercel.com/features/edge-functions). \nIt constructs a prompt based on the form and user input, sends it to the chatGPT API via a Vercel Edge function, then streams the response back to the application.\nYou can ask for any UI component, free style. Most likely it will generate the right thing for you.\nThis can also be used as a great bootstrap for projects, I tried to make the style Material-UI styled, but you can change this behavior.\n\n## Export your components\nYou can now choose between HTML export of your UI components and your preferred combination of Tailwind CSS, Next.js, React.js, Material UI \n\n## Running Locally\nThis project is built with `Next.js` and `TailwindCSS`, so you can deploy it directly to Vercel.\n\nAfter cloning the repo, go to [OpenAI](https://beta.openai.com/account/api-keys) to make an account and put your API key in a file called `.env`(OPENAI_API_KEY)\nThen, run the application in the command line and it will be available at `http://localhost:3000`.\n\n```bash\nnpm install\n\nyarn dev\n```\n\n## Changing ChatGPT prompts and requests\nIn order to change ChatGPT response you only need to give it an example of what you wish to get back (use the assistant role to generate an example of a good response)\".\nIn the example below I show it how to generate TailwindCSS and Next.js component, and later ask just to return the corresponding HTML code.\n\n```javascript\n\n// /api/generate.ts\n\nconst handler = async (req: Request): Promise\u003cResponse\u003e =\u003e {\n    const {prompt} = (await req.json()) as {\n        prompt?: string;\n    };\n\n    if (!prompt) {\n        return new Response(\"No prompt in the request\", {status: 400});\n    }\n\n    const payload: OpenAIStreamPayload = {\n        model: \"gpt-3.5-turbo\",\n        messages: [\n            {\n                \"role\": \"user\",\n                \"content\": \"create next.js + tailwind css code for button 200 x 100, light purple background, generate text on it. Please create a complete next.js component\"\n            },\n            {\n                \"role\": \"assistant\", \"content\": `\n                    import React from 'react';\n                    const MyComponent = () =\u003e {\n                      return (\n                        \u003cdiv className=\"flex flex-col items-center justify-center h-screen\"\u003e\n                          \u003ch1 className=\"text-3xl font-bold mb-4\"\u003eHello World\u003c/h1\u003e\n                          \u003cp className=\"text-lg mb-4\"\u003eWelcome to my Next.js component using Tailwind CSS\u003c/p\u003e\n                          \u003cbutton className=\"bg-purple-500 text-white px-4 py-2 rounded-lg shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-opacity-50\"\u003eClick Me\u003c/button\u003e\n                        \u003c/div\u003e\n                      );\n                    };\n                    export default MyComponent;\n                `\n            },\n            {\n                \"role\": \"user\",\n                \"content\": \"Please create html code with inline css what create the following component, Meterial UI look and feel, return only code\"\n            },\n            {\"role\": \"user\", \"content\": prompt},\n        ],\n    };\n\n    const stream = await OpenAIStream(payload);\n    return new Response(stream);\n};\n\n```\n\n## Who made this project\n\nMy name is [Yuval](https://www.linkedin.com/in/yuval-suede/) - an entrepreneur at heart , I ❤️ building end-to-end systems that not only look amazing and feel state-of-the-art, but also have real meaning and impact.\n\n## 🤝 Contributing\nContributions, issues and feature requests are welcome!\u003cbr /\u003e\n* Fork the repository, Clone it on your device. That's it 🎉\n* Finally make a pull request :)\n\n## 📝 License\n\nThis project is [MIT License](https://opensource.org/licenses/MIT) licensed.\n\n***\nWe accept contribution with great love! Show your interest! Contribute!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyuvalsuede%2Fai-component-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyuvalsuede%2Fai-component-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyuvalsuede%2Fai-component-generator/lists"}