Custom Component 2.0 is here – Build anything with AI
We’ve been working hard behind the scenes to present to you Custom Component 2.0. With it, you can now generate entire React apps using AI - right inside UI Bakery!
Inspect and fine-tune the generated code Roll back versions if needed Create actions and feed them directly to the AI And publish your component across any of your apps
From Kanban boards and to-do lists to fitness trackers, blog platforms, and more. Just describe what you want to create or upload an image for inspiration.
Don’t wait and try it now for yourself!
Hello, I have some questions about the updated Custom Components 2.0.
Firstly, the AI does an impressive job. Components are created fast and look fantastic! Furthermore, errors arising are fixed immediately and all in all, I think it’s a remarkable feature.
Now, there are some things unclear to me, or I’d like to have more understanding of:
The update notes say Inspect and fine-tune the generated code and playing around with the feature does make that clear, we can see and modify the files created by the AI. But if I would like to expand manually on the component or actually create a component from scratch myself, there isn’t any way to create files/directories or install libraries on our own.
Is this planned to be implemented in future updates, or is it intended that we are restricted in those functionalities?
I understand that we technically could just create more components inside one of the files created, but it just doesn’t sit right with me, especially in react, to hoard everything I want to create manually in files that already serve a different purpose.
While playing around with the feature, I noticed that the package @uibakery/data is used to communicate with the app outside the component. For the previous Custom Component, I assume the UB object served a similar role (see docs for Custom Component).
Is there any documentation available which shows what methods/variables/classes/components(?) this package has? I couldn’t find anything beyond the examples shown for the previous UB object in the docs for the old Custom Component.
For this one, I have low expectations, but would it be possible to add .jsx support? I’m pretty sure internally you are using TypeScript and therefore there might be some restrictions about Type- and JavaScript.
It’s just that I mainly use JavaScript and would definitely feel more confident writing Custom Components that way. But, this is a deficiency on my part, so I’m not expecting much on this “request”.
How are AI tokens distributed, used and refreshed?
At the beginning of testing the new feature, I think I had around 3M tokens and on the cloud version of UIB (free plan) I have 2M. Are there any concrete numbers assigned according to plan, or do all paid plans get 3M and free plan 2M tokens?
Then there is the question of the tokens being used. Logically, the AI uses tokens for pretty much each operation mentioned in the chat, for example
Hey @Max, thanks for the feedback! Here are some quick answers:
Yes, we’ll definitely be improving the editor, especially the ability to create files and folders. Expect this to be available quite soon.
The documentation is a work in progress. The old Custom component will be updated accordingly, and new API details will be available soon.
We don’t plan to add JSX specifically, but I believe you can use TSX in a similar way - just without the TS types.
Currently, all accounts receive 2M free tokens monthly. We’re still finalizing pricing and plans, but it’s already possible to buy more tokens. Regarding usage, it’s not exactly straightforward, as some operations happen under the hood - but generally, the smaller the request and generated files, the lower the token usage, and vice versa. I know that’s not an ideal answer, but we hope to offer a more transparent usage breakdown soon. For now, after receiving a response, the total number of tokens used is updated in the header.
We’re also working on optimizing token usage, so expect improvements there too.
And please keep sharing any new feedback - thanks!
Custom Component 2.0 is here – Build anything with AI
Inspect and fine-tune the generated code
Roll back versions if needed
Create actions and feed them directly to the AI
Watch it in action in our changelog
New and improved: Workspace Menu revamp
Two clear sections: Apps and Library
Use the + button in either section to quickly create a new app, module, or component.
Atomic drop: editablePercent just landed
