Okay, this is VERY interesting… it sorta works, but it gets things wrong 
However, this is going to absolutely great if we can feed it with more data, and then it can get a better understanding of the entire system.
Do you think some completed component examples would help? or perhaps we just need to write more of the documentation and that will be enough?
Dan, thank you for taking a look at it. The right answer to your question about more documentation and examples is BOTH! 
However, I don’t want you to spend time on this when you could be working on getting Elements out the door! However, if you do have examples and as you add more documentation to the website, both will help. If you happen to have a text file (or pdf) of the documentation, that will help more. I’ve found that while using websites as resources is better than nothing, it is not nearly as good as an explicit and simple but comprehensive documentation file.
I’ve updated the GPT with the full user guide (in its current state) so hopefully, it will be a little more accurate in its answers. It should also answer more than just Component questions…even some Tailwind stuff.
I apologize for the GPT’s icon…it is ugly. If someone has a better one that they don’t mind sharing, ship it my way and I’ll add it to the GPt.
Well now I’m not likely to disconnect. Thanks really huh… Seriously I play with your GPT and I can’t stop, well yes: my wife reminds me that there is a bed in the cellar… A big thank you for this tool, and this is only the beginning. Now I’m starting to have fun. AI changes everything, it’s a fact and the speed keeps increasing with each new test, I have to say that the damage will be huge in a very short time. We really need to equip the creation tools with AI otherwise the prospects will unfortunately be very short term I fear. No point in complaining or arguing, we need to act now with these tools. We have to admit it: we don’t even have time to complain anymore, it’s already outdated. Really weird situation 
B-R-E-A-T-H, just B-R-E-A-T-H
And go to bed when you’re told.
Ten minutes and… I wanted to post a video of the rotating cubes I created and I don’t see any options to post a video online, damn
hah, I use CleanShot for Mac and can highly recommend it, it’s what I use to post the quick videos here (like the one above).
Bruno, be sure to tell me what is acting weird and what is wrong. And remember that you have quite a bit of control over the conversation with the GPT. You can tell it how you want it to respond (e.g. deeper more technical explanation or more simple like for a 5 year-old) or to provide code or look for errors in your Component code for example. It should be able to tell you what selectors are currently available, etc.
If the fine folds at RM are able to get me examples of well-formed Component code, I’ll add that to the knowledge for the GPT so it can do a better job at helping to guide and correct Component development.
This GPT does know about Tailwind so that should help developers.
I have an idea for the GPT after testing it a bit. It seems to me that text is great but video might be better. If RM puts together how-to videos for Elements, I can set up the GPT to provide links to the correct video for show people how to do specific things…in addition to the text…when appropriate.
What do you guys think?
In testing, I think the GPT will need much more documentation to be good in general usage. At the moment, it goes to Tailwind for customizing even standard Components which I know will have visual controls (sliders, buttons, etc.). However, I know that the RM team has got to be very busy getting a working product out the door!
So I decided to try a little experiment. With minimal prompting, I uploaded a screenshot of the Diver Component to a plain GPT instance. I wanted to see if it would be able to generate decent documentation that I would be able to use in the Elements assistant GPT. I hope that one of the RM team will be able to look over the information and give me guidance on the accuracy and usefulness of what was produced. Here is the unedited result:
Divider Component - User’s Documentation Guide
The Divider Component in Realmac’s Elements allows you to add a simple, customizable horizontal line to your website. This component is often used to create a visual separation between sections of content. Below is a detailed guide on how to use and customize the Divider Component.
Component Overview
- Name: Divider
- Version: 1.0
- Developer: Realmac Software
The Divider Component provides a variety of customization options through its inspector panel, which is divided into several sections: Background, Borders, Spacing, and Advanced.
Inspector Panel Breakdown
1. Background
The Background section allows you to customize the color and opacity of the Divider’s background.
Style:
- Solid Color: Select the solid color style by clicking the paintbrush icon.
- Image: Choose an image as a background by clicking the image icon.
- Gradient: Apply a gradient background by selecting the gradient icon.
Color:
- Choose a background color from a preset palette.
- Opacity: Adjust the opacity of the background using the slider. The opacity value ranges from 0% (completely transparent) to 100% (fully opaque).
2. Borders
The Borders section lets you define the appearance of the Divider’s borders, including style, width, and rounding.
Style:
- No Border: Select the first icon (a diagonal line) to remove borders.
- Solid: Choose the solid line icon for a solid border.
- Dashed: Select the dashed line icon to apply a dashed border.
- Dotted: Choose the dotted line icon to create a dotted border.
Rounded:
- Set the border-radius for the corners of the Divider.
- Options:
- None: No rounding.
- Small: Slightly rounded corners.
- Medium: Moderately rounded corners.
- Large: More pronounced rounding.
3. Spacing
The Spacing section controls the Divider’s width, height, and margins.
Width:
- Full: The Divider will stretch across the full width of its container.
- Custom: Specify a custom width in pixels or percentages.
Height:
- Adjust the height of the Divider in pixels using the number input field.
Margin:
- Set the margin values around the Divider using dropdowns for each side (top, bottom, left, right).
- Auto: Automatically adjusts the margin based on other layout elements.
- Custom: You can set specific values to control the spacing around the Divider.
4. Advanced
The Advanced section offers options for visibility and adding custom CSS classes.
Visible:
- Toggle the visibility of the Divider. When turned off, the Divider will not be visible on the page, but it will remain in the HTML structure.
CSS Classes:
- Add custom CSS classes to the Divider for further styling. This allows you to apply additional styles or scripts that target the Divider.
Practical Example
Here’s a practical example of how to customize a Divider Component:
- Set a Background Color: Choose a light gray color with 80% opacity for a subtle divider.
- Apply a Solid Border: Select a solid border style with a medium rounding option to soften the corners.
- Adjust Spacing: Set the height to 2 pixels and ensure the width spans the full container width. Adjust the margin to 10 pixels on top and bottom for proper spacing.
- Toggle Visibility: If you want the divider to be hidden initially but visible later, use the visibility toggle.
By following these instructions, you can effectively utilize the Divider Component to enhance the visual structure of your web page in Elements.
Thank you for your tip. Another question : can I only post Gif video (animated) or other format allowed ?
Scott, ok I’ll send you the codes of my funny tests that work. For now the only problem I’ve encountered is the order of the elements in the code, I don’t know why but it forgets /div> from time to time and it tends to place the Class Id at the end of the code which means that obviously I get a nice white container, I could copy/paste this piece at the beginning of the code but I prefer to “torture” your Gpt so that it ends up doing it by default. A point to watch. For the rest the longest code is 107 lines, there is no superfluous code, nor error. It’s really nice to see the debug blank from the first try while I tend to make typing errors habitually (obsessive structure of failure my dear, even graduated and duly analyzed we can’t escape it ). More on the next episode as soon as I get back on my Mac (I’m still trying to disconnect a bit for the three days of vacation I have left 
) Thank you again for your GPT, it’s a great one 
ADD here’s the video :
I think it is only GIF as you use the standard Image control to add a GIF image when creating a post?
@logrunner Hi, thanks for your response. now I’m struggling to copy/paste the code without it executing, I can’t do it and it annoys me 
… hmm I mean it annoys me slightly that Markdown doesn’t immediately recognize a quote and refrains from executing lines of code when you don’t want it to, damn… sh… 
Yes, if I really put some work into it, then I can tighten up the coding practices. But I don’t know if it will be worth the effort. A lot will depend on the RM team and Apple and what they do or don’t do.
For example, if Elements integrates App Intents to the point where you can generate custom components via text-to-Component, then this GPT is useless! No complaints by the way! I would love for them to do that and so much more! (Yes, I’m referring to Relume!)
By the way, I sent a response email showing how much better then code can be with a custom GPT that is primed for coding.
We would love to provide an official ChatGPT for Elements as a stop-gap to help folks getting into using Custom Components. We’re working on building one, but it’s not quite giving us the quality of results we’d like, seems like we have more work to do…
Will be picking @jscotta’s brain to help on this 
Slim pickings…indeed!