auto-component

A tool to streamline UI element creation in React projects through AI prompted generation

Demo Video

Technologies Used

Dependency Uses

Babel - Transpile JSX to JS for publishing
JSXParser - Dynamically render generated code
js-beautify - Format JSX/HTML for UI display

Installation

Install auto-component as a development dependency within your project:

npm install -D auto-component

Usage

1. Import AutoComponent in the file where you're building the new component:

import AutoComponent from 'auto-component';

2. Add the component to your code where you want it to be rendered:

<AutoComponent />

Getting Started

3. View your page to see the auto-component tool at the bottom, indicating where it will render your code:

4. Start building by telling auto-component what you want and clicking "Generate." The result will be rendered on the page. You can view the "Request" or "Response" tabs to inspect what is being sent to the AI and what was returned:

Making Changes

5. Ask auto-component to make changes to the code it provided, and see the changes rendered on the page:

Copying Your Code

6. When satisfied with the response, click on the "Response" tab underneath the input. Copy the code from the AI to use it in your codebase:

Start a New Session

7. Click the red X button to start a new session.

Planned Features

User Features

1. Personal Page:

   • Allow users to create a personal page to store and manage their created components.
   • Efficiently reuse and keep track of components.

2. Save and Manage Code:

   • Provide a "Save" button to store the returned code from the AI.
   • Users can easily manage their components within their user page.

3. Position Customization:

   • Allow users to shift the position of the request/code box around the screen.
   • Ensure it doesn't obscure anything in their project.

Developer Features

1. Code Integration Walkthrough:

   • Include an optional walkthrough of code integration.
   • Help developers understand how to implement generated components into their projects.

2. Code Editing in the Browser:

   • Enable developers to edit displayed code directly in the browser.
   • Allow quick adjustments without leaving the platform.

3. Access Saved Components:

   • Provide developers with the ability to access their saved components directly from the AutoComponent component.

4. Multiple AutoComponent Instances:

   • Notify developers if there is more than one <AutoComponent /> creation component added to the project.
   • Prevent potential functionality issues that may arise from multiple instances.

5. Multiple Components with Single Request Box:

   • Allow developers to add multiple components to the page.
   • Provide an easy way to switch between them using a single request box.

License

This project is licensed under the AGPL 3.0 License - see the LICENSE file for details. View license at GNU.org