Glide Custom Components

Introduction

Glide Custom Components allow you to create new, unique components for your Glide app that are not included in the standard Glide builder. Using features like the AI Custom component, you can generate interactive and visually different parts of your app, such as sliders, toggles, maps, or even custom chat windows, by simply giving detailed prompts or code snippets. This enables more tailored app experiences without needing complex development skills. The feature is still evolving but offers powerful ways to extend what you can do with Glide apps.

When to Use This

When the built-in components in Glide do not meet the specific design or interaction needs of your app.
To add custom interactive elements like sliders or voice-enabled chat that fit your app’s unique workflows.
When you want to share or import reusable custom components across multiple apps to maintain consistency.

What You Need First

Access to the Glide Layout Editor with permissions to add and edit components.
Basic understanding of Glide’s component system.
Optional: If using AI Custom components, readiness to experiment with prompts and iterative design.

Step-by-Step Guide

Step 1: Open Your Glide App Layout Editor

Open Glide and navigate to the screen where you want to add a custom component.

Step 2: Add the AI Custom Component

Click the + icon in the Components panel on the left.
Search for AI Custom and select it.
Drag the AI Custom component onto your screen layout.

Step 3: Create Your Custom Component via AI Prompt

In the AI Custom component panel, start typing what you want the component to do (for example, a slider, toggle switch, or map).
Be as specific and detailed as possible in your prompt.
If you want the AI to consider an image for your design, upload an image along with your prompt.
Review the AI-generated component and adjust your prompt iteratively until it matches your needs.

Step 4: Bind Data to the Component

The component binds automatically to a single row of data from your app by default.
You can adjust which data fields the component should use via the configuration panel.
For collections of data, add the AI Custom component inside a custom collection for repeated display.
You can use JSON as a variable for more dynamic designing.

Step 5: Customize Component Actions and Appearance

You can add actions to the custom component (like navigating to another screen or submitting data).
Adjust settings like styling, visibility, and data bindings in the configuration panel on the right.

Step 6: Share or Import Custom Components (Optional)

Once satisfied, name your component and select Share to get a link that others can use.
To import, open a shared component link and copy the component into your app using keyboard shortcuts.
Note: Clipboard permissions must be enabled for this to work.

Helpful Tips

Prompting is Iterative: The first AI prompt may not create exactly what you want—try adding more detail or different wording to improve results.
Data Naming: Name each custom value explicitly to help the AI understand the purpose of data fields.
Component Reuse: Use shared components to save time and keep design consistent across multiple apps.

Fixing Common Problems

Problem: The AI Custom component does not behave as expected or shows incorrect data.

Solution:

Check bindings: Verify data fields are correctly linked in the component settings.
Re-prompt the AI with clearer instructions or simplify the request.
Use the trash icon to discard unwanted AI changes and revert to prior versions.
If the component doesn't load, refresh your app or check if you are using a beta feature that may have limitations.