Hayde

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.

Quick Start

To use Hayde, simply run the following command:

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:

npm install hayde --save-dev

or

yarn add hayde --dev

Online Demo

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 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 integration. It also supports GPT-4 Vision with URL and File Upload!

Table of Contents

• Hayde
  • Quick Start
    • Local Installation
    • Online Demo
  • Features
  • Table of Contents
  • Settings
  • Profiles
  • Examples
  • Supported Libraries on Component Creation
  • NPM Scripts
  • CLI Arguments
  • How to create custom plugin
  • Contributing
  • 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:

{
  "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:

{
  "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:

npx hayde

For more information on the available options, please check the 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.

npx hayde --profile ai

Examples

For Examples, please check the 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;

• React Component with Chakra UI
• React Component with Material UI
• Component with AI (OpenAI GPT-4)
• Using Ollama with llama2
• Component with AI Image Recognition (OpenAI GPT-4 Vision)

You can find more examples in the examples 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 - Source
• Material UI - Source
• Emmet - Source
• Storybook - Source
• Builder.io - Source
• React.js - Source
• CSS and SCSS support - Source
• TypeScript
• OpenAI - Source
• Ollama - Source

NPM Scripts

You can call any script you want before or after component creation! For NPM Scripts, please check the npm scripts page.

CLI Arguments

For CLI Arguments, please check the CLI arguments page.

How to create custom plugin

For creating custom plugin, please check the custom plugin page. You can create your own libraries' plugin easily with extensive functionality and Handlebars template engine.

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

{
  "plugins": [
    "createPlugin"
  ]
}

then run the following command:

npx hayde

Contributing

If you'd like to contribute to Hayde, please check the 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 page.

License

Distributed under the GPL-3.0 License. See LICENSE for more information.