auto-component 1.0.3 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +20 -18
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,14 +1,16 @@
|
|
|
1
1
|
# auto-component
|
|
2
2
|
|
|
3
|
-
[
|
|
3
|
+
[npm package](https://www.npmjs.com/package/)
|
|
4
4
|
|
|
5
|
-
[
|
|
6
|
-
|
|
7
|
-
[](https://auto-component.com)
|
|
5
|
+
[github repo](https://github.com/TimHuitt/auto-component)
|
|
9
6
|
|
|
10
7
|
> A tool to streamline UI element creation in React projects through AI prompted generation
|
|
11
8
|
|
|
9
|
+
### Demo Video
|
|
10
|
+
|
|
11
|
+
[](https://youtu.be/SYhRGkiXS_M "Auto-Component Demo")
|
|
12
|
+
|
|
13
|
+
|
|
12
14
|
## Technologies Used
|
|
13
15
|
|
|
14
16
|
| Category | Technologies |
|
|
@@ -38,9 +40,9 @@ npm install -D auto-component
|
|
|
38
40
|
import AutoComponent from 'auto-component';
|
|
39
41
|
```
|
|
40
42
|
|
|
41
|
-
<div style="display: flex; justify-content: center; align-items: center;">
|
|
43
|
+
<!-- <div style="display: flex; justify-content: center; align-items: center;">
|
|
42
44
|
<img src="https://i.imgur.com/v18uMyR.png" alt="Step 2" style="max-width: 100%; height: auto;">
|
|
43
|
-
</div>
|
|
45
|
+
</div> -->
|
|
44
46
|
|
|
45
47
|
2. Add the component to your code where you want it to be rendered:
|
|
46
48
|
|
|
@@ -48,39 +50,39 @@ import AutoComponent from 'auto-component';
|
|
|
48
50
|
<AutoComponent />
|
|
49
51
|
```
|
|
50
52
|
|
|
51
|
-
<div style="display: flex; justify-content: center; align-items: center;">
|
|
53
|
+
<!-- <div style="display: flex; justify-content: center; align-items: center;">
|
|
52
54
|
<img src="https://i.imgur.com/Hh4MV4W.png" alt="Step 3" style="max-width: 100%; height: auto;">
|
|
53
|
-
</div>
|
|
55
|
+
</div> -->
|
|
54
56
|
|
|
55
57
|
## Getting Started
|
|
56
58
|
|
|
57
59
|
3. View your page to see the auto-component tool at the bottom, indicating where it will render your code:
|
|
58
60
|
|
|
59
|
-
<div style="display: flex; justify-content: center; align-items: center;">
|
|
61
|
+
<!-- <div style="display: flex; justify-content: center; align-items: center;">
|
|
60
62
|
<img src="https://i.imgur.com/ItXg9Bd.png" alt="Step 4" style="max-width: 100%; height: auto;">
|
|
61
|
-
</div>
|
|
63
|
+
</div> -->
|
|
62
64
|
|
|
63
65
|
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:
|
|
64
66
|
|
|
65
|
-
<div style="display: flex; justify-content: center; align-items: center;">
|
|
67
|
+
<!-- <div style="display: flex; justify-content: center; align-items: center;">
|
|
66
68
|
<img src="https://i.imgur.com/DmXWPdC.gif" alt="Step 5" style="max-width: 100%; height: auto;">
|
|
67
|
-
</div>
|
|
69
|
+
</div> -->
|
|
68
70
|
|
|
69
71
|
## Making Changes
|
|
70
72
|
|
|
71
73
|
5. Ask `auto-component` to make changes to the code it provided, and see the changes rendered on the page:
|
|
72
74
|
|
|
73
|
-
<div style="display: flex; justify-content: center; align-items: center;">
|
|
75
|
+
<!-- <div style="display: flex; justify-content: center; align-items: center;">
|
|
74
76
|
<img src="https://i.imgur.com/zSqx9iP.gif" alt="Step 6" style="max-width: 100%; height: auto;">
|
|
75
|
-
</div>
|
|
77
|
+
</div> -->
|
|
76
78
|
|
|
77
79
|
## Copying Your Code
|
|
78
80
|
|
|
79
81
|
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:
|
|
80
82
|
|
|
81
|
-
<div style="display: flex; justify-content: center; align-items: center;">
|
|
83
|
+
<!-- <div style="display: flex; justify-content: center; align-items: center;">
|
|
82
84
|
<img src="https://i.imgur.com/m9KpCHL.gif" alt="Step 7" style="max-width: 100%; height: auto;">
|
|
83
|
-
</div>
|
|
85
|
+
</div> -->
|
|
84
86
|
|
|
85
87
|
## Start a New Session
|
|
86
88
|
|
|
@@ -127,4 +129,4 @@ import AutoComponent from 'auto-component';
|
|
|
127
129
|
## License
|
|
128
130
|
|
|
129
131
|
This project is licensed under the AGPL 3.0 License - see the [LICENSE](LICENSE) file for details.
|
|
130
|
-
View license at [GNU.org](https://www.gnu.org/licenses/agpl-3.0.en.html)
|
|
132
|
+
View license at [GNU.org](https://www.gnu.org/licenses/agpl-3.0.en.html)
|