Feature in Beta
This feature is in beta. Features in beta can be unpredictable and may change as development continues. The Glide Support team does not provide help with these features. Please post any questions in the Community forum.
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!
Note: Glide Support is unable to provide assistance with the AI Custom component. Because of the high degree of customization and variability in how AI prompts are designed and implemented, we cannot guarantee support or help troubleshoot individual setups.
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.
Sharing and Importing AI Custom Components
AI custom components can be shared with others and imported into other apps.
Sharing a component
Once you’ve finalized all the visual and functional configurations of the component, you can give it a final name in the component list on the left. Select Share in the right-hand configuration menu. A link will be generated and copied to your clipboard. You can preview the component sharing page by clicking the link in the popup.
Note: If you select Don’t show again, this popup will not appear in future when you share components. To reset this, clear your browser’s cookies.
The component preview page allows users to adjust the field values and see how they change the results in the component.
Importing a component
Users can copy a component from any component preview page. To do this, select Copy component on the upper-right of the preview screen. Open the Glide app you’d like to insert the component into, and use your keyboard’s paste shortcut to insert the component. The component should appear in the component list on the left-hand side of the Glide builder.
Clipboard Access Must be Enabled
If copying and pasting the component does not work, make sure you've enabled clipboard access in your web browser
Once a custom component has been imported, it can be changed and altered by further prompting the AI in the configuration menu. Note that any changes made to a copy of the component will not change the original AI Custom component that was shared. The components will not stay in sync, and changes in one will not reflect in another.
You may find that you need to adjust the field values or action in the component you have copied. This can be done in the component configuration menu on the right-hand side after a component is pasted into a new app.
Note that any images uploaded in the prompt area as an example or inspiration for the AI are not transferred when the component code copies to a new app. If you would like to host an image in your app that can be used by the component, make sure you add that image to a data table in the app you're working with.