We’re testing a new capability to let you share, reuse, and import AI Custom components between Glide apps.
Here’s a quick demo from Christian, our lead designer on the project:
https://www.loom.com/share/6395eb2ca992427199958f222e58f81e
The feature is in Public Beta. Our team is watching this thread, so please give it a try, and reply with whatever feedback you have.
Learn more in our Glide docs for the AI Custom component:
Thank you! 
This would fit perfectly in @John_Romano’s app: https://ailibrary.glide.page
Now we need a library and potentially a marketplace.
Also - @ThinhDinh , I used your implementation of this feature back in the day…remember your Social ribbon !?
This is very neat, thanks @Christian_G !
Hehe, glad to have helped. It was an Experimental Code URL hosted on Github I believe.
Just tried this. Kudos to the team, this is superb.
OMG that is great ! I wish you could do that for workflows as well 
Hi!
Does some one have a link to Custom AI component which simply renders text with Markdown?
Or prompt.
I tried several but it renders with many scratches
Why not using the Rich Text component?
Because i want to construct component with features which is not avalailbe in Rich text.
For example select the part of the text and do action with selected text(actually ask AI to craft new one)
Here is where I landed in tweaking in Glide AI (standard big numbers below). The whitespace/padding is still a little much but better than the original. I could not get Glide to ‘hide’ a badge if the input data is empty to I will try in Claude if I can nuance this. But the BadgeGrid is coming together.
Last update: Before and after. I have not updated the color or font but hiding Badge1, 2 or 3 works! (if it does not have a title that badge is hidden), Below is the Claude code I used in the AI component plus I added the Input data (title1,2,3; rank 1,2,3 etc) so it would map to my columns. Also with Claude Cowork it actually showed me a responsive preview for both LARGE and SMALL screens (below).
2 BADGES
3 BADGES
Here’s the updated Glide AI prompt reflecting all the changes:
Generate a responsive HTML badge grid using the inputs below. Only render a badge if its Title is not empty or blank. Badge 1 — Title: {{Title1}}, Rank: {{Rank1}}, Score: {{Score1}}, Description: {{Description1}} Badge 2 — Title: {{Title2}}, Rank: {{Rank2}}, Score: {{Score2}}, Description: {{Description2}} Badge 3 — Title: {{Title3}}, Rank: {{Rank3}}, Score: {{Score3}}, Description: {{Description3}} Layout rules: - Wrap all visible badges in a CSS grid container - Large screens (≥600px): up to 3 columns using grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) - Small screens (<600px): 1 column, badges stacked vertically - Use a media query for the breakpoint - Gap between badges: 16px - Max grid width: 680px, centered Badge design (apply to each visible badge only): - Rounded card (border-radius 10px), box-shadow: 0 3px 12px rgba(0,0,0,0.11), overflow hidden - Title section: background #E3F2FD, padding 8px 12px, centered, font-size 11px, font-weight 600, uppercase, letter-spacing 1px, color #333333 - Body section: background #ffffff, padding 12px 12px 14px, centered, flex column, gap 2px - Rank: font-size 14px, bold, color by value: ELITE or EXCEPTIONAL = #6A0DAD STRONG or EXCELLENT = #1565C0 GOOD or SOLID = #2E7D32 MODERATE or AVERAGE = #E65100 WEAK or POOR = #C62828 Default = #757575 - Score: font-size 42px, font-weight 800, color #1A1A1A, line-height 1, margin 2px 0 - Description: font-size 11px, margin-top 4px, color by content: Starts with “+” or contains “up” or “increase” = #2E7D32 Starts with “-” or contains “down” or “decrease” = #C62828 Otherwise = #757575 Return only raw HTML with an inline block for media queries. No explanations, no markdown, no code blocks.
Change Badge1 to Title1, Rank1, Score1 and Description1. Change Badge2 to Title2, Rank2, Score2 and Description2
Change Badge3 to Title3, Rank3, Score3 and Description3
Hi:
This team has reached its user limit. Please contact the app owner to resolve this issue
