Custom Component With AI

Help & Support 💻
,
1

First of all, I want to thank you for the new feature for creating custom components using AI — it’s very smooth and impressive.

I’m using UI Bakery self-hosted via Docker, and I tried creating a custom radio option component with icon, title, and caption.

Here is the prompt I used:

Generate a component that renders a group of radio options with the following specifications:

Each radio option appears on its own row (one option per row).

Each option includes:

An icon on the left that can be set using a Font Awesome icon name (allow me to change the icon dynamically).

A title next to the icon. The title’s font family, font size, alignment, and color should be fully configurable.

A caption below the title that can span 2-3 lines. The caption’s font size and color should also be configurable.

A value for each option that I can define and access later when the option is selected.

When a user selects an option, the component should store or emit the selected value so that it can be used by other components in the app.

The component should follow modern design with clean spacing, alignment, and responsiveness.

Ensure accessibility with semantic HTML, ARIA roles for radio groups, and alt text or labels where needed.

and the output was

image
image577×259 11.4 KB

more than beautiful

It came out more than beautiful — so thank you for that! :clap:

I then added this component to my app and checked the data field, which contained:

{
  "radioOptions": [
    {
      "value": "speed",
      "icon": "bolt",
      "iconStyle": "solid",
      "title": "Ultra Fast",
      "caption": "Lightning-quick performance with no compromise on quality."
    },
    {
      "value": "secure",
      "icon": "shieldAlt",
      "iconStyle": "solid",
      "title": "Secure",
      "caption": "Top-tier security and encrypted communications to keep your data safe."
    }
  ]
}

My question is:

:right_arrow: How can I connect this data to a database so that the radio options (value, title, caption) come from my DB rather than being static JSON in the data field?

I faced the same situation when generating a Profile Card component: the details were generated as JSON in the data field.

:backhand_index_pointing_right: I am looking for a way to bind these custom AI-generated components to my DB data instead of manually entering or editing JSON.

Is this the intended design? Or is there a recommended method to achieve dynamic binding with a datasource (e.g., MySQL)?

Thank you in advance for your guidance!

2

Hi @MotazHakim,

The JSON provided by the AI is just meant as an example:

image
image307×139 13.1 KB

Since there are users with few to no know-how about coding, the AI will provide an example for the data, so they can simply create the component with AI, see how it’s configurable and then use it.

To connect the radios with data from your DB (I assume an external DB apart from UIB), I’d say you do it like with any default component:
Set up the data source, fetch the data and set it for the component’s Data setting.

Technically, you could code the component so it would fetch the options on its own, but I think that would be out of scope. The whole point of having to set the data when deploying such a component, is its reusability.

But if you think you’ll only need the component for this app and want it to automatically and dynamically fetch the options, you could expand the component to do so. Though, I tried to change the component to do that, but ultimately, it still requires you to connect your data source, set up an action and only then you can set the options just by naming them like ['personal', 'team', 'enterprise'] (because the AI made use of UI Bakery API and tries to get the options through actions).
So it didn’t change a lot, just more prep work for a little less provided options. I think the best set up is still with the data set in the settings, as it doesn’t rely on anything but displaying the provided data.

Hope this helps :slight_smile: