The AI Custom component uses AI to generate custom components for Glide. Create new components that don’t exist in the Glide builder by prompting the AI in a chat format.
Please note that this feature is currently in development and is changing rapidly as we make improvements. We would love to hear your feedback and ideas in our community!
Feature in Beta
This feature is in beta. Features in beta can be unpredictable and may change as development continues.
In the Layout Editor, select the tab you want to edit.
Click on the plus symbol in the Components panel.
Select AI Custom or search for AI Custom.
Drag the component to the position you want in the component menu.
The component can also be added within a collection, which enables the component to be repeated and applied to every item in that collection.
Using the AI Custom Component
To get started, begin prompting the AI to create the component you want from your data. Be as specific as possible, but know that you will likely need to iterate and chat more with the AI before you get the exact component you want. You can even create interactive features like sliders, maps, toggles, and more.
If you’d like the AI to consider an image as part of your prompt, select the image icon in the upper right of the prompt chat box and choose a file from your device. Make sure you also include a prompt when uploading a photo, so the AI knows what you’d like to do with the image.
Note that the custom component will bind by default to a single row from your data. It will not see other rows from your data unless you adjust the data fields in the configuration menu. If the component suggests a field of data that doesn't exist yet, it will likely create a custom value as text and generate that data manually. This can also be adjusted in the component configuration menu. If you'd like to use the custom component with more than one row of data, consider adding it to a custom collection.
If you prompt the component and don't like a change that it made, you can click the trash icon to the right of a prompt to delete it and revert back to the previous iteration of the component. You can also remove bindings to data fields or actions by clicking the x to the right of each one, then sending that change through the chat prompt to confirm it.
When adding data items, it's important to manually name each field with a custom value, as plain text. This helps the AI understand what each field is for.
A note about prompting
Prompting is an iterative process. If your first prompt doesn’t give an expected result, try adding more detail or asking a different way. In general, AI models respond best to specific, detailed instructions. If you want to see something in the component that isn’t there, describe it as clearly as you can. It's also helpful to provide an image or include an example in the prompt, if one already exists. Read more about prompt engineering here.
Actions and Workflows
Custom components can support actions and workflows, as long as you've created a button or interactive feature for users to trigger. Actions are configured manually in the configuration menu on the right, above the chat. To add an action to a custom component:
Select the custom component you want to add actions to.
In the configuration menu on the right, select + Add action.
Give the action a title.
Select an icon.
Choose which action to trigger.
Configure the required action fields.
Click away to exit the configuration.
Once you've created the action, use the chat prompting section to bind the action to your custom component.
Options
Like all components, you can add visibility conditions to the component in the Options tab of the configuration menu. You can also add Custom CSS to manually adjust the styling of the component.