All, I've just spent five frustrating days trying to create a custom component for Retool. The component will render a grid of radio buttons, a grid of checkboxes, or a list of textboxes, depending on configuration, and it is meant to pass its results back to Retool Javascript. I do not need to pass its state on to other components, and I have found on here that that remains a difficulty for custom components.
There is not great guidance available on building custom components, and Vibe coding it has gone down a lot of undesirable rabbit holes. By day three, I asked Cline to start keeping notes of the gotchas it was running into. By day four, I had stopped letting it work things out from first principle, and was pointing it at Retool's Github repo. By day five, I had to broaden its spoonfeeding to this forum and then to other blogs, which seem to have finally got things working.
v75 is the current prod solution, although things only really settled down and worked with v72, and Cline only got on the right track at v68 ("Stable Grid", when it basically threw out the big code it had been tweaking, "Dynamic Component", and started again with a smaller component based on the Tryretool samples). There is a lot of interim stuff there that represents failed attempts (even if the AI keeps confidently writing "this time, fer sher!") It's a dump of stuff, with lots of irrelevancy, but I'm hoping others will find some of it useful.
@opoudjis after about a year of being the main author and one that continues to maintain our retool custom component library and having to go through all of these same experiences myself, I created an app using retool and AI agents that cuts out all the fluff by telling you the exact steps you need to take, any packages/dependencies you need to install, commands to run in sequential order, as well as a parser that pulls the necessary files to create + code to insert within them that you can copy/paste from the app into your code editor.
This is all done after answering a few general questions to give the agent required context like your organization URL, your operating system (windows or Mac/Linux), etc., and asks whether you need to create a new library or update an existing one, and/or adding a new component or updating an existing component. Then, it generates everything you need to get surprisingly few issues!
After a lot of thorough configuration, it does a really decent job at generating highly usable code for being at such an early development stage, and does a fairly good job at separating responsibilities and being thoughtful about typing, etc. Would you find use for a tool like this?
That's really neat, @AJVancattenburch! Thanks for sharing and being a champion for custom components. I'd be interested in taking a look at the agent that you've built, if you're able to share a JSON export.
I'd love to! I could send you an exported JSON file to you in the morning, if that works. And thank you for the compliment! It's been a great learning experience getting the opportunity to be the author and maintainer of our CCL!
Thanks for sharing, AJ! And for the feedback, @opoudjis - I've passed this on to the team in charge of custom components.
The two biggest challenges that most users face when building a new component is setting up a local dev environment and general React syntax, including Retool's custom hooks. These are fairly technical tasks and I do think AI can help the latter. Given the right documentation, at least.
