🆕 Custom Component (AI Generated)

We’ve created a preview of a new Custom Component. Take a look at this demo, try it for yourself, and share what you’ve built here!

39 Likes

Ah! this is awesome – gonna have a play around!

This is awesome!! :star_struck:

Thanks guys for your hard work

Might be able to use this to finally get required checkboxes on forms :wink:

Holy smokes this is next level innovation for sure. Staggering. Can’t wait to brainstorm some ideas…

First up - displaying the formation of a football team with some cool interactions to add player names…. Can the input data be in the form of an array?

Pretty sure this solves the half star rating challenge too… eg. How to display fractions of a star rating since emojis don’t offer them.

I could see a fitness App displaying dynamic measurements for a body silhouette… or a training program designed by AI displaying a figure that shows focus zones on the body.

4 Likes

is this staying on the Starter plan? Or is this going to be Free at a later time?

You mentioned a calculator - and I do remember a march months challenge (in 2021) by @Jeff_Hager where I worked quite a few hours creating a calculator.

Using the new component with the following prompt

create an old fashion calculator. Make the buttons work so
input can be given on the calculator. clicking the result
button must show the result of the calculation the
calculator should fill the whole screen

gives a calculator app like below - and it works.
This beyond belief

11 Likes

@david To me, the most interesting thing to know is whether you can freeze/lock the functionality of the component when you have got it working. If the app is working and the AI model behind the component changes and thereby changes the functionality of the component then i won’t feel comfortable implementing it in a business app.

8 Likes

The components generated will be stable — not during the experimental preview phase, but when we release them will keep them stable.

9 Likes

Created a double sided switch that properly writes to my database. Also highlighted the 50% savings automatically with my App’s color!

12 Likes

I haven’t tried but if an array doesn’t work, maybe you can try a JSON. It would be cool if you can specify a table, with columns to use.

That might be a good one to get. Since you might be able to actually use frontend JS here, we can get that.

3 Likes

What kind of witchcraft is this? :exploding_head:

Amazing!

5 Likes

Mind blowing what this entails for the future… Congratulations Glide, it’s really exciting!

2 Likes

Is it possible to create some sort of gallery/library of user examples in the community chat with the prompts? This would be so useful - inspirational - for fellow Gliders?

5 Likes

it would be great to be able to pull the code after generated, for manual finetuning

5 Likes

I have managed to get the AI generated code by inspecting the component in the browser dev tools. That way I can copy and paste the code into the HTML section of the custom component

it seems that the components are built using alpineJS and tailwind? which has allowed me to write custom components into the HTML section of the custom component… I have been playing around with components from here Tailwind CSS and Alpine JS Accordion | Penguin UI

but also found you can search alpinejs and tailwind components and there are heaps online… it does mean you might have to write some code but it’s not too bad and using the ai generated code first and then tweaking it in code is what I’ve found the easiest

it also seems that we can perform some javascript inside this code component for transitions and calculations and a whole lot more… this is very very cool!

6 Likes

Maybe this could be added into @ThinhDinh 's CSS Library

Or a dedicated library….

2 Likes

I was imagining the ‘CSS’ part is then just a section of a bigger Library too.

2 Likes