{"id":13601296,"url":"https://github.com/Sly777/hayde","last_synced_at":"2025-04-11T04:30:28.906Z","repository":{"id":193954366,"uuid":"689801995","full_name":"Sly777/hayde","owner":"Sly777","description":"Open Source Component-Driven Code Generator; It supports OpenAI, Ollama, ChakraUI, MaterialUI, BuilderIO, and more.","archived":false,"fork":false,"pushed_at":"2024-09-06T08:26:55.000Z","size":827,"stargazers_count":21,"open_issues_count":9,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-10-18T07:08:11.633Z","etag":null,"topics":["ai","ai-helper","builder-io","chakra-ui","cli","cli-app","cli-tool","cli-tools","cli-utility","component-library","material-ui","node","node-cli","ollama","openai","react","reactjs","typescript"],"latest_commit_sha":null,"homepage":"https://docs.haydejs.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Sly777.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"docs/contributing.md","funding":".github/FUNDING.yml","license":"LICENSE","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},"funding":{"github":["Sly777"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2023-09-10T23:47:56.000Z","updated_at":"2024-07-09T05:00:16.000Z","dependencies_parsed_at":null,"dependency_job_id":"865a7a75-f7c2-4532-81b7-7cd1adb99181","html_url":"https://github.com/Sly777/hayde","commit_stats":null,"previous_names":["sly777/hayde"],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sly777%2Fhayde","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sly777%2Fhayde/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sly777%2Fhayde/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sly777%2Fhayde/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Sly777","download_url":"https://codeload.github.com/Sly777/hayde/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223458216,"owners_count":17148434,"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":["ai","ai-helper","builder-io","chakra-ui","cli","cli-app","cli-tool","cli-tools","cli-utility","component-library","material-ui","node","node-cli","ollama","openai","react","reactjs","typescript"],"created_at":"2024-08-01T18:01:00.028Z","updated_at":"2024-11-07T04:30:35.332Z","avatar_url":"https://github.com/Sly777.png","language":"TypeScript","funding_links":["https://github.com/sponsors/Sly777"],"categories":["cli"],"sub_categories":[],"readme":"# Hayde\n\n![](https://github.com/Sly777/hayde/assets/694940/c28e8507-eae9-4e9a-99f9-9a2f4487c79a)\n\nHayde is CLI tool transforms React component creation, supporting frameworks like ChakraUI, MaterialUI, and leveraging AI tools like OpenAI and Ollama for smart, efficient coding. Perfect for developers seeking a fast, intuitive code generation experience.\n\n***\n\n[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.1-4baaaa.svg)](code\\_of\\_conduct.md) [![GitHub](https://img.shields.io/github/license/sly777/hayde)](https://github.com/sly777/hayde/blob/main/LICENSE) [![GitHub commit activity](https://img.shields.io/github/commit-activity/m/sly777/hayde)](https://github.com/sly777/hayde/pulse) [![GitHub last commit](https://img.shields.io/github/last-commit/sly777/hayde)](https://github.com/sly777/hayde/commits/main) [![Reliability Rating](https://sonarcloud.io/api/project\\_badges/measure?project=Sly777\\_hayde\\\u0026metric=reliability\\_rating)](https://sonarcloud.io/summary/new\\_code?id=Sly777\\_hayde) [![Vulnerabilities](https://sonarcloud.io/api/project\\_badges/measure?project=Sly777\\_hayde\\\u0026metric=vulnerabilities)](https://sonarcloud.io/summary/new\\_code?id=Sly777\\_hayde) [![Security Rating](https://sonarcloud.io/api/project\\_badges/measure?project=Sly777\\_hayde\\\u0026metric=security\\_rating)](https://sonarcloud.io/summary/new\\_code?id=Sly777\\_hayde) [![Maintainability Rating](https://sonarcloud.io/api/project\\_badges/measure?project=Sly777\\_hayde\\\u0026metric=sqale\\_rating)](https://sonarcloud.io/summary/new\\_code?id=Sly777\\_hayde) [![Lines of Code](https://sonarcloud.io/api/project\\_badges/measure?project=Sly777\\_hayde\\\u0026metric=ncloc)](https://sonarcloud.io/summary/new\\_code?id=Sly777\\_hayde) [![Known Vulnerabilities](https://snyk.io/test/github/Sly777/hayde/badge.svg)](https://snyk.io/test/github/Sly777/hayde) [![npm version](https://badge.fury.io/js/hayde.svg)](https://badge.fury.io/js/hayde) [![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/) [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=Sly777_hayde\u0026metric=alert_status)](https://sonarcloud.io/summary/new_code?id=Sly777_hayde)\n\n![Hayde Quick Start](https://github.com/Sly777/hayde/assets/694940/dd7aa686-1c59-444f-98a5-490eaef8e86b)\n\n### Quick Start\n\nTo use Hayde, simply run the following command:\n\n```bash\nnpx hayde@latest\n```\n\nThis will launch the CLI tool and guide you through the process of creating a new React component.\n\n**Local Installation**\n\nIf you want to install Hayde locally, you can run the following command:\n\n```bash\nnpm install hayde --save-dev\n```\n\nor\n\n```bash\nyarn add hayde --dev\n```\n\n**Online Demo**\n\n[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square\u0026logo=codesandbox)](https://codesandbox.io/p/sandbox/react-vite-ts-with-hayde-n3ktql)\n\n### Features\n\n* **Quick and Easy** 🚀 - Hayde allows you to create React components quickly and easily. With Hayde, you can focus on writing code instead of setting up boilerplate files.\n* **Clean DX** ⭐ - Hayde is designed to be as simple as possible. It doesn't require any configuration or setup, so you can start using it right away. It's built with TypeScript.\n* **Customizable** 🪄 - Hayde is highly customizable. You can configure it to suit your needs and preferences.\n* **Modular** 🧩 - Hayde is modular. You can use it with any React project (create-react-app, next.js, astro, ...etc.), regardless of its size or complexity. Also it's easy to extend Hayde with new features.\n* **No Installation Required** 📦 - Hayde doesn't require any installation. You can use it right away without having to install anything.\n* **Auto Import** ⏩ - Hayde automatically imports your components into your project if you want. You just need to add tags into target file and voila! You can check it on [BuilderIO](src/features/builderIO/) integration.\n* **AI Support** 🤖 - Hayde supports AI tools such as OpenAI (gpt-3.5 \u0026 gpt-4) and Ollama. You can create your components with AI easily! You can check it on [AI](src/features/AI/) integration. **It also supports GPT-4 Vision with URL and File Upload!**\n\n### Table of Contents\n\n* [Hayde](./#hayde)\n  * [Quick Start](./#quick-start)\n    * [Local Installation](./#local-installation)\n    * [Online Demo](./#online-demo)\n  * [Features](./#features)\n  * [Table of Contents](./#table-of-contents)\n  * [Settings](./#settings)\n  * [Profiles](./#profiles)\n  * [Examples](./#examples)\n  * [Supported Libraries on Component Creation](./#supported-libraries-on-component-creation)\n  * [NPM Scripts](./#npm-scripts)\n  * [CLI Arguments](./#cli-arguments)\n  * [How to create custom plugin](./#how-to-create-custom-plugin)\n  * [Contributing](./#contributing)\n  * [License](./#license)\n\n### Settings\n\nThere are two options for running Hayde. Just simply run `npx hayde` or You can also run Hayde with `.hayde.json` file. This file allows you to specify default options for Hayde.\n\nHere's an example of what the .hayde.json file might look like:\n\n```json\n{\n  \"plugins\": [\n    {\n      \"name\": \"general\",\n      \"options\": {\n        \"srcFolderLocation\": \"./src\"\n      }\n    },\n    \"css\",\n    {\n      \"name\": \"reactJS\",\n      \"options\": {\n        \"createInterface\": true,\n        \"styleLibrary\": \"chakraUI\"\n      }\n    },\n    \"chakraUI\"\n  ]\n}\n```\n\nor if you want to use AI only with hayde, you can use `.hayde.json` file like below:\n\n```json\n{\n  \"plugins\": [\n    \"general\",\n    \"AI\"\n  ]\n}\n```\n\nThis file sets the default options for Hayde to avoid having to enter them every time you run the tool. And when you create a new component, Hayde will create react component with Chakra UI and interface support on `./src` folder.\n\nAfter creating `.hayde.json` file, you can run Hayde with the following command:\n\n```bash\nnpx hayde\n```\n\nFor more information on the available options, please check the [options](docs/options.md) page.\n\n### Profiles\n\nIf you want to have multiple `.hayde` file, you can just create the file with your profile. For example; you can create two files called `.hayde.json` and `.hayde.ai.json`. And then you can run the following command to use the `.hayde.ai.json` file.\n\n```bash\nnpx hayde --profile ai\n```\n\n### Examples\n\nFor Examples, please check the [examples](examples/) folder. You can just copy JSON files from this folder and paste to root folder of your project. Then you can just run Hayde. Some examples are;\n\n* [React Component with Chakra UI](examples/with-react-chakraui.json)\n* [React Component with Material UI](examples/with-react-materialui.json)\n* [Component with AI (OpenAI GPT-4)](examples/with-openai-gpt-4.json)\n* [Using Ollama with llama2](examples/with-ollama-llama2.json)\n* [Component with AI Image Recognition (OpenAI GPT-4 Vision)](examples/with-openai-vision.json)\n\nYou can find more examples in the [examples](examples/) folder.\n\n### Supported Libraries on Component Creation\n\nYou can create React components with the following libraries, you just need to add the library name to the plugins array in the `.hayde.json` file.\n\n* [Chakra UI](https://chakra-ui.com/) - [Source](src/features/chakraUI/)\n* [Material UI](https://material-ui.com/) - [Source](src/features/materialUI/)\n* [Emmet](https://emmet.io/) - [Source](src/features/emmet/)\n* [Storybook](https://storybook.js.org/) - [Source](src/features/storybook/)\n* [Builder.io](https://www.builder.io/) - [Source](src/features/builderIO/)\n* [React.js](https://reactjs.org/) - [Source](src/features/reactJS/)\n* CSS and SCSS support - [Source](src/features/css/)\n* [TypeScript](https://www.typescriptlang.org/)\n* [OpenAI](https://platform.openai.com) - [Source](src/features/AI/)\n* [Ollama](https://ollama.ai) - [Source](src/features/AI/)\n\n### NPM Scripts\n\nYou can call any script you want before or after component creation! For NPM Scripts, please check the [npm scripts](docs/npm-scripts.md) page.\n\n### CLI Arguments\n\nFor CLI Arguments, please check the [CLI arguments](docs/cli-arguments.md) page.\n\n### How to create custom plugin\n\nFor creating custom plugin, please check the [custom plugin](docs/how-to-create-custom-plugin.md) page. You can create your own libraries' plugin easily with extensive functionality and [Handlebars](https://handlebarsjs.com/) template engine.\n\nAlso; you can create your hayde plugin with hayde. Just update your `.hayde.json` file like below:\n\n```json\n{\n  \"plugins\": [\n    \"createPlugin\"\n  ]\n}\n```\n\nthen run the following command:\n\n```bash\nnpx hayde\n```\n\n### Contributing\n\nIf you'd like to contribute to Hayde, please check the [contributing](docs/contributing.md) page. Contributions are always welcome!\n\nIf you want to integrate your library/plugin/boilerplate to Hayde, please check the [how to create custom plugin](docs/how-to-create-custom-plugin.md) page.\n\n### License\n\nDistributed under the GPL-3.0 License. See [LICENSE](LICENSE/) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSly777%2Fhayde","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSly777%2Fhayde","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSly777%2Fhayde/lists"}