# Claude Ai and Custom Components **URL:** \ **Category:** Elements\ **Created:** [July 15, 2026, 6:22pm UTC](https://forums.realmacsoftware.com/t/claude-ai-and-custom-components/57011 "2026-07-15T18:22:38Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![ercross](https://avatars.discourse-cdn.com/v4/letter/e/c57346/32.png) [@ercross](https://forums.realmacsoftware.com/u/ercross)\ **Post date:** [July 15, 2026, 6:22pm UTC](https://forums.realmacsoftware.com/t/claude-ai-and-custom-components/57011/1 "2026-07-15T18:22:38Z")
I have to say, I am truly enjoying the power of Claude and Custom Components. I’ve started converting some of my HTML components over to actual custom components with inspector controls. I am no programmer, but evidently Claude is. I’ve converted my Read by Author, Copy Article and created a Read Time component (until Massimo gets back from vacation and I will revert back to his ReadTime). It was able to incorporate the Gradient background functionality of Tailwind 4 as well. You can see them on my article post page: [Following Paul with WTBC - Rightly Dividing the Righteous Man](https://followingpaul.org/pastor-s-desk/post/rightly-dividing-the-righteous-man) ![image](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/4/b/4ba07d6a23b8d8b40f299ad3ab6a63fa2d2e7158.png) ![image](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/7/e/7ed394142475a96f3be31366efab2ab29f29a9f2.png) ![image](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/4/a/4a45f38e9034d7213877030ca3bf0ea17c0dc697.png) ---
**Author:** ![MichaelDroste](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/michaeldroste/32/37212_2.png) [@MichaelDroste](https://forums.realmacsoftware.com/u/MichaelDroste)\ **Post date:** [July 15, 2026, 7:36pm UTC](https://forums.realmacsoftware.com/t/claude-ai-and-custom-components/57011/2 "2026-07-15T19:36:56Z")
Wow 😮 very cool - I like it a lot!!! I want to make some also… Can you tell us more? What were the prompts? Etc…. Really great 👍 ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [July 15, 2026, 8:04pm UTC](https://forums.realmacsoftware.com/t/claude-ai-and-custom-components/57011/3 "2026-07-15T20:04:23Z")
That is very cool… but you ain’t seen nothing yet 😉 ---
**Author:** ![ercross](https://avatars.discourse-cdn.com/v4/letter/e/c57346/32.png) [@ercross](https://forums.realmacsoftware.com/u/ercross)\ **Post date:** [July 15, 2026, 8:09pm UTC](https://forums.realmacsoftware.com/t/claude-ai-and-custom-components/57011/4 "2026-07-15T20:09:30Z")
My initial prompt was: can you program custom Elements components including inspector controls? See the following website for Elements API. [Elements API | API | RapidWeaver Elements Docs](https://docs.realmacsoftware.com/elements-docs/elements-language) It said it was possible and told me how to add create a Dev Pack. So then my second prompt was: Elements 3 now supports Tailwind 4. What I would like is a component that estimates Read time for the articles with a styleable button that uses svg icon that can be colored and the text of the button supplied by the user in a text box. It would need margin and padding controls. From that point on it was a back and forth of adding things to the inspector until I had what I wanted. ---
**Author:** ![Flash](https://avatars.discourse-cdn.com/v4/letter/f/f475e1/32.png) [@Flash](https://forums.realmacsoftware.com/u/Flash)\ **Post date:** [July 15, 2026, 9:15pm UTC](https://forums.realmacsoftware.com/t/claude-ai-and-custom-components/57011/5 "2026-07-15T21:15:44Z")
Nice work! May I ask which Claude model you used? Sonnet, Opus, Fable? Effort level? Obviously the lessor the model the more efficient it is, that’s why I ask. ---
**Author:** ![ercross](https://avatars.discourse-cdn.com/v4/letter/e/c57346/32.png) [@ercross](https://forums.realmacsoftware.com/u/ercross)\ **Post date:** [July 15, 2026, 10:15pm UTC](https://forums.realmacsoftware.com/t/claude-ai-and-custom-components/57011/6 "2026-07-15T22:15:28Z")
I use Opus with CoWork. ---
**Author:** ![MichaelDroste](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/michaeldroste/32/37212_2.png) [@MichaelDroste](https://forums.realmacsoftware.com/u/MichaelDroste)\ **Post date:** [July 16, 2026, 2:25pm UTC](https://forums.realmacsoftware.com/t/claude-ai-and-custom-components/57011/7 "2026-07-16T14:25:49Z")
Here is a prompt I’m running: ![Screenshot 2026-07-16 at 9.17.23 AM](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/b/f/bf5ae1c0b29fbc93d0a3ecd31443954accef2533.png) using the real mac software elements api and resources create a pdf viewer plugin component with the following screen breakpoints - i want field options for lazy loading on/off - alternate plain title screen with name field on/off - border colors choices - header color choices - included svg logo placement in upper left hand corner - print / download / email icons and buttons on the bottom and any other features we discussed in the past ---
**Author:** ![MichaelDroste](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/michaeldroste/32/37212_2.png) [@MichaelDroste](https://forums.realmacsoftware.com/u/MichaelDroste)\ **Post date:** [July 16, 2026, 2:42pm UTC](https://forums.realmacsoftware.com/t/claude-ai-and-custom-components/57011/8 "2026-07-16T14:42:33Z")
gave me an html code snippet - redirecting to making a custom component ---
**Author:** ![thominator](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/thominator/32/35233_2.png) [@thominator](https://forums.realmacsoftware.com/u/thominator)\ **Post date:** [July 16, 2026, 2:53pm UTC](https://forums.realmacsoftware.com/t/claude-ai-and-custom-components/57011/9 "2026-07-16T14:53:46Z")
AI is extremely sensitive to patterns. So when your pattern doesn’t match a specific pattern, that’s when you get a lot of thinking and often wind through detours. So, in your prompt, first start with the context: “I am designing a Web site using Realmac Software Elements.” Next make sure you match exactly what you need: “I need an installable custom Component that will display PDF files that is created using the DevPack. The PDF files will be in [/resources, /cms/pdf, URLx, or chosen directly]. The Component needs to be responsive to the Breakpoints in my Project.” When any of these things is a close match but not an exact match to naming Elements uses, you’ll start getting misunderstandings and conflations. Finally, wrap up with your additions: “In the Inspector for the Component there needs to be an option for Lazy Loading.” Now, as to the border, text, SVG options, I wouldn’t start with those. Get the PDF Component working first. Then ask Claude to add a header section for text header (with text entered in Inspector) and SVG (with SVG also entered in Inspector). But when you do this you’re opening up sizing complexities. My approach has been to just get a PDF Component, and then put the PDF Component in a Container that also contains a text header and image field and controls background/border/etc. ---
**Author:** ![MichaelDroste](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/michaeldroste/32/37212_2.png) [@MichaelDroste](https://forums.realmacsoftware.com/u/MichaelDroste)\ **Post date:** [July 16, 2026, 2:56pm UTC](https://forums.realmacsoftware.com/t/claude-ai-and-custom-components/57011/10 "2026-07-16T14:56:12Z")
WOW MY FIRST COMPONENT ![Screenshot 2026-07-16 at 9.48.57 AM](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/a/e/ae8385bf5064e599be922950cc3abe054604103e.webp) ![Screenshot 2026-07-16 at 9.55.06 AM](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/b/0/b02a7bab058bb53a5dc2b6f8eb284ed46b1b1b76.webp) ---
**Author:** ![MichaelDroste](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/michaeldroste/32/37212_2.png) [@MichaelDroste](https://forums.realmacsoftware.com/u/MichaelDroste)\ **Post date:** [July 16, 2026, 3:17pm UTC](https://forums.realmacsoftware.com/t/claude-ai-and-custom-components/57011/11 "2026-07-16T15:17:54Z")
![Screenshot 2026-07-16 at 10.15.44 AM](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/1/d/1d320c507f6b7df8d8260e6ad43018e5c02ea94b.webp) ![Screenshot 2026-07-16 at 10.15.39 AM](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/e/7/e761de301c8987c903f885b19d53407408575b2f.webp) Very Happy! 🙂 I like having all the options showing for editing in the inspector ---
**Author:** ![thominator](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/thominator/32/35233_2.png) [@thominator](https://forums.realmacsoftware.com/u/thominator)\ **Post date:** [July 16, 2026, 5:27pm UTC](https://forums.realmacsoftware.com/t/claude-ai-and-custom-components/57011/12 "2026-07-16T17:27:28Z")
Nicely done. ---
**Author:** ![Fuellemann](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/fuellemann/32/22871_2.png) [@Fuellemann](https://forums.realmacsoftware.com/u/Fuellemann)\ **Post date:** [July 16, 2026, 5:32pm UTC](https://forums.realmacsoftware.com/t/claude-ai-and-custom-components/57011/13 "2026-07-16T17:32:11Z")
It is really fun. I am just creating my own video player with many additional controls, using perplexity.