# Hayde

![](https://github.com/Sly777/hayde/assets/694940/c28e8507-eae9-4e9a-99f9-9a2f4487c79a)

Hayde 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.

***

[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.1-4baaaa.svg)](https://github.com/Sly777/hayde/blob/main/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\&metric=reliability_rating)](https://sonarcloud.io/summary/new_code?id=Sly777_hayde) [![Vulnerabilities](https://sonarcloud.io/api/project_badges/measure?project=Sly777_hayde\&metric=vulnerabilities)](https://sonarcloud.io/summary/new_code?id=Sly777_hayde) [![Security Rating](https://sonarcloud.io/api/project_badges/measure?project=Sly777_hayde\&metric=security_rating)](https://sonarcloud.io/summary/new_code?id=Sly777_hayde) [![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=Sly777_hayde\&metric=sqale_rating)](https://sonarcloud.io/summary/new_code?id=Sly777_hayde) [![Lines of Code](https://sonarcloud.io/api/project_badges/measure?project=Sly777_hayde\&metric=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\&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=Sly777_hayde)

![Hayde Quick Start](https://github.com/Sly777/hayde/assets/694940/dd7aa686-1c59-444f-98a5-490eaef8e86b)

### Quick Start

To use Hayde, simply run the following command:

```bash
npx hayde@latest
```

This will launch the CLI tool and guide you through the process of creating a new React component.

**Local Installation**

If you want to install Hayde locally, you can run the following command:

```bash
npm install hayde --save-dev
```

or

```bash
yarn add hayde --dev
```

**Online Demo**

[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square\&logo=codesandbox)](https://codesandbox.io/p/sandbox/react-vite-ts-with-hayde-n3ktql)

### Features

* **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.
* **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.
* **Customizable** 🪄 - Hayde is highly customizable. You can configure it to suit your needs and preferences.
* **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.
* **No Installation Required** 📦 - Hayde doesn't require any installation. You can use it right away without having to install anything.
* **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](https://github.com/Sly777/hayde/blob/main/src/features/builderIO/README.md) integration.
* **AI Support** 🤖 - Hayde supports AI tools such as OpenAI (gpt-3.5 & gpt-4) and Ollama. You can create your components with AI easily! You can check it on [AI](https://github.com/Sly777/hayde/blob/main/src/features/AI/README.md) integration. **It also supports GPT-4 Vision with URL and File Upload!**

### Table of Contents

* [Hayde](#hayde)
  * [Quick Start](#quick-start)
    * [Local Installation](#local-installation)
    * [Online Demo](#online-demo)
  * [Features](#features)
  * [Table of Contents](#table-of-contents)
  * [Settings](#settings)
  * [Profiles](#profiles)
  * [Examples](#examples)
  * [Supported Libraries on Component Creation](#supported-libraries-on-component-creation)
  * [NPM Scripts](#npm-scripts)
  * [CLI Arguments](#cli-arguments)
  * [How to create custom plugin](#how-to-create-custom-plugin)
  * [Contributing](#contributing)
  * [License](#license)

### Settings

There 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.

Here's an example of what the .hayde.json file might look like:

```json
{
  "plugins": [
    {
      "name": "general",
      "options": {
        "srcFolderLocation": "./src"
      }
    },
    "css",
    {
      "name": "reactJS",
      "options": {
        "createInterface": true,
        "styleLibrary": "chakraUI"
      }
    },
    "chakraUI"
  ]
}
```

or if you want to use AI only with hayde, you can use `.hayde.json` file like below:

```json
{
  "plugins": [
    "general",
    "AI"
  ]
}
```

This 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.

After creating `.hayde.json` file, you can run Hayde with the following command:

```bash
npx hayde
```

For more information on the available options, please check the [options](https://docs.haydejs.com/docs/options) page.

### Profiles

If 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.

```bash
npx hayde --profile ai
```

### Examples

For Examples, please check the [examples](https://github.com/Sly777/hayde/blob/main/examples/README.md) 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;

* [React Component with Chakra UI](https://github.com/Sly777/hayde/blob/main/examples/with-react-chakraui.json)
* [React Component with Material UI](https://github.com/Sly777/hayde/blob/main/examples/with-react-materialui.json)
* [Component with AI (OpenAI GPT-4)](https://github.com/Sly777/hayde/blob/main/examples/with-openai-gpt-4.json)
* [Using Ollama with llama2](https://github.com/Sly777/hayde/blob/main/examples/with-ollama-llama2.json)
* [Component with AI Image Recognition (OpenAI GPT-4 Vision)](https://github.com/Sly777/hayde/blob/main/examples/with-openai-vision.json)

You can find more examples in the [examples](https://github.com/Sly777/hayde/blob/main/examples/README.md) folder.

### Supported Libraries on Component Creation

You 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.

* [Chakra UI](https://chakra-ui.com/) - [Source](https://github.com/Sly777/hayde/blob/main/src/features/chakraUI/README.md)
* [Material UI](https://material-ui.com/) - [Source](https://github.com/Sly777/hayde/blob/main/src/features/materialUI/README.md)
* [Emmet](https://emmet.io/) - [Source](https://github.com/Sly777/hayde/blob/main/src/features/emmet/README.md)
* [Storybook](https://storybook.js.org/) - [Source](https://github.com/Sly777/hayde/blob/main/src/features/storybook/README.md)
* [Builder.io](https://www.builder.io/) - [Source](https://github.com/Sly777/hayde/blob/main/src/features/builderIO/README.md)
* [React.js](https://reactjs.org/) - [Source](https://github.com/Sly777/hayde/blob/main/src/features/reactJS/README.md)
* CSS and SCSS support - [Source](https://github.com/Sly777/hayde/blob/main/src/features/css/README.md)
* [TypeScript](https://www.typescriptlang.org/)
* [OpenAI](https://platform.openai.com) - [Source](https://github.com/Sly777/hayde/blob/main/src/features/AI/README.md)
* [Ollama](https://ollama.ai) - [Source](https://github.com/Sly777/hayde/blob/main/src/features/AI/README.md)

### NPM Scripts

You can call any script you want before or after component creation! For NPM Scripts, please check the [npm scripts](https://docs.haydejs.com/docs/npm-scripts) page.

### CLI Arguments

For CLI Arguments, please check the [CLI arguments](https://docs.haydejs.com/docs/cli-arguments) page.

### How to create custom plugin

For creating custom plugin, please check the [custom plugin](https://docs.haydejs.com/docs/how-to-create-custom-plugin) page. You can create your own libraries' plugin easily with extensive functionality and [Handlebars](https://handlebarsjs.com/) template engine.

Also; you can create your hayde plugin with hayde. Just update your `.hayde.json` file like below:

```json
{
  "plugins": [
    "createPlugin"
  ]
}
```

then run the following command:

```bash
npx hayde
```

### Contributing

If you'd like to contribute to Hayde, please check the [contributing](https://docs.haydejs.com/docs/contributing) page. Contributions are always welcome!

If you want to integrate your library/plugin/boilerplate to Hayde, please check the [how to create custom plugin](https://docs.haydejs.com/docs/how-to-create-custom-plugin) page.

### License

Distributed under the GPL-3.0 License. See [LICENSE](https://github.com/Sly777/hayde/blob/main/LICENSE/README.md) for more information.