# Enhancing Glide Workflows with AI: Real-Time Actions on Value Changes And Even More!

**URL:** https://community.glideapps.com/t/enhancing-glide-workflows-with-ai-real-time-actions-on-value-changes-and-even-more/79085
**Category:** Community Resources
**Tags:** ai, custom-code, actions, workflows, auto
**Created:** [January 9, 2025, 3:23pm UTC](https://community.glideapps.com/t/enhancing-glide-workflows-with-ai-real-time-actions-on-value-changes-and-even-more/79085 "2025-01-09T15:23:43Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)
#### Post date: [January 9, 2025, 3:23pm UTC](https://community.glideapps.com/t/enhancing-glide-workflows-with-ai-real-time-actions-on-value-changes-and-even-more/79085/1 "2025-01-09T15:23:43Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/a/ea4a3c247d9921dcd4aa136b2ae7f239eff83173.png)

# With Glide’s AI capabilities, you can trigger workflows and actions seamlessly.

## Here’s how:

1. Create an AI Component.

2. Add a single data point and a single action.  

3. Add a custom CSS class to the AI Component “hidden”. In custom CSS, add this code:

```css
.hidden {
    display: none;
}

```

1. Configure the action to trigger on data changes with this prompt:

```html
<html style="height: auto !important; --color-accent: 208deg 89% 32%;" class="color-scheme-light">
   <head>
      <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap" as="style">
      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap">
      <meta name="color-scheme" content="light dark">
      <style>
         html, body {
         font-family: 'Inter', sans-serif;
         background-color: transparent;
         }
      </style>
      <script type="module">
         import { init } from "https://components.glide.info/shell/v1.js";
         
         document.addEventListener("DOMContentLoaded", () => {
         
           init({"fieldsDataObject":{"data":null},"schema":[{"name":"data","type":"string","id":"data"}],"actions":[{"title":"go","id":"go"}],"debug":false})
         
         });
         
      </script>
      <style>/*! tailwindcss v3.4.10 | MIT License | https://tailwindcss.com*/*,:after,:before{border-color:hsl(var(--color-gray-200)/1);border-style:solid;border-width:0;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-moz-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-feature-settings:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:hsl(var(--color-gray-400)/1);opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.body-base{font-size:1rem;line-height:1.5rem;line-height:1.5}@media (min-width:768px){.body-base{font-size:.875rem;line-height:1.25rem}}.w-full{width:100%}.cursor-pointer{cursor:pointer}.rounded-lg{border-radius:.5rem}.bg-gray-100{--tw-bg-opacity:1;background-color:hsl(var(--color-gray-100)/var(--tw-bg-opacity))}.px-4{padding-left:1rem;padding-right:1rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.text-gray-900{--tw-text-opacity:1;color:hsl(var(--color-gray-900)/var(--tw-text-opacity))}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.\@container{container-type:inline-size}@layer colors{:root.color-scheme-auto{--color-gray-0:0deg 0% 100%;--color-gray-50:0deg 0% 98%;--color-gray-100:0deg 0% 96%;--color-gray-200:0deg 0% 94%;--color-gray-300:0deg 0% 88%;--color-gray-400:0deg 0% 68%;--color-gray-500:0deg 0% 56%;--color-gray-600:0deg 0% 44%;--color-gray-700:0deg 0% 31%;--color-gray-800:0deg 0% 20%;--color-gray-900:0deg 0% 5%;--color-gray-950:0deg 0% 0%;--color-background-DEFAULT:0deg 0% 100%;@media (prefers-color-scheme:dark){--color-gray-0:0deg 0% 4%;--color-gray-50:0deg 0% 9%;--color-gray-100:0deg 0% 12%;--color-gray-200:0deg 0% 15%;--color-gray-300:0deg 0% 20%;--color-gray-400:0deg 0% 31%;--color-gray-500:0deg 0% 44%;--color-gray-600:0deg 0% 57%;--color-gray-700:0deg 0% 72%;--color-gray-800:0deg 0% 90%;--color-gray-900:0deg 0% 100%;--color-gray-950:0deg 0% 100%;--color-background-DEFAULT:0deg 0% 9%}}:root.color-scheme-light{color-scheme:light;--color-gray-0:0deg 0% 100%;--color-gray-50:0deg 0% 98%;--color-gray-100:0deg 0% 96%;--color-gray-200:0deg 0% 94%;--color-gray-300:0deg 0% 88%;--color-gray-400:0deg 0% 68%;--color-gray-500:0deg 0% 56%;--color-gray-600:0deg 0% 44%;--color-gray-700:0deg 0% 31%;--color-gray-800:0deg 0% 20%;--color-gray-900:0deg 0% 5%;--color-gray-950:0deg 0% 0%;--color-background-DEFAULT:0deg 0% 100%}:root.color-scheme-dark{color-scheme:dark;--color-gray-0:0deg 0% 4%;--color-gray-50:0deg 0% 9%;--color-gray-100:0deg 0% 12%;--color-gray-200:0deg 0% 15%;--color-gray-300:0deg 0% 20%;--color-gray-400:0deg 0% 31%;--color-gray-500:0deg 0% 44%;--color-gray-600:0deg 0% 57%;--color-gray-700:0deg 0% 72%;--color-gray-800:0deg 0% 90%;--color-gray-900:0deg 0% 100%;--color-gray-950:0deg 0% 100%;--color-background-DEFAULT:0deg 0% 9%}}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-accent:focus{--tw-ring-opacity:1;--tw-ring-color:hsl(var(--color-accent)/var(--tw-ring-opacity))}@media (min-width:640px){.sm\:px-5{padding-left:1.25rem;padding-right:1.25rem}}@media (min-width:768px){.md\:px-6{padding-left:1.5rem;padding-right:1.5rem}}@media (min-width:1024px){.lg\:px-7{padding-left:1.75rem;padding-right:1.75rem}}@media (min-width:1280px){.xl\:px-8{padding-left:2rem;padding-right:2rem}}</style>
   </head>
   <body x-data="state" class="" :class="{ 'cursor-pointer': hasBodyAction }" style="height: auto !important;" data-iframe-overflow="">
      <div x-show="themeLoaded" class="@container w-full body-base antialiased">
         <div :class="{ 'px-4 py-1 sm:px-5 md:px-6 lg:px-7 xl:px-8': mode === 'standalone' }" class="px-4 py-1 sm:px-5 md:px-6 lg:px-7 xl:px-8">
            <div x-data="{ value: data, initialLoad: true }" class="w-full" x-effect="$watch('data', () => { if (!initialLoad) go(); initialLoad = false; })">
               <input type="text" x-model="value" x-on:input="go(); $dispatch('trigger', { value: value })" :placeholder="action" class="w-full px-4 py-2 text-gray-900 bg-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent">
            </div>
         </div>
      </div>
      <script src="//cdn.jsdelivr.net/npm/@iframe-resizer/child@5.2.1"></script>
      <div style="clear: both; display: block; height: 0px;"></div>
   </body>
</html>

```

_Note: The action won’t trigger if the initial value of the component was empty at load time._

## Here’s a demo app I made so you can try my use cases:

> **[Real-Time Workflow Automation](https://real-time-workflow.glide.page)**
>
> This demo app is designed to showcase the core functionality of automating workflows, triggering actions based on data changes, and streamlining user interactions in real time. It highlights how you can effortlessly manage tasks and processes, making...

---

<div class="post-metadata">

### Author: ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)
#### Post date: [January 9, 2025, 3:43pm UTC](https://community.glideapps.com/t/enhancing-glide-workflows-with-ai-real-time-actions-on-value-changes-and-even-more/79085/2 "2025-01-09T15:43:04Z")

</div>

@John_Romano Hey I love your app, let’s add this component there!

> **[Glide Ai Component Library](https://aicomponenents.glide.page/dl/a400f7/s/9671c3/r/1B0awJz.SIm-p5HbjaL.ng)**
>
> Ai Components

---

<div class="post-metadata">

### Author: ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)
#### Post date: [January 9, 2025, 3:54pm UTC](https://community.glideapps.com/t/enhancing-glide-workflows-with-ai-real-time-actions-on-value-changes-and-even-more/79085/3 "2025-01-09T15:54:10Z")

</div>

**Example of a use case:** Clearing a group of fields when a checkbox value changes:  
 ![chrome_zPR95wKSQC](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/a/aa8c73851cec0f8598f4a8368d207c7ebd6f12ce.gif)

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [January 10, 2025, 12:42am UTC](https://community.glideapps.com/t/enhancing-glide-workflows-with-ai-real-time-actions-on-value-changes-and-even-more/79085/4 "2025-01-10T00:42:14Z")

</div>

Lovely, I think this would help a lot with cases where you have two sets of components in a form, for two types of users.

Say I fill field A.1, field A.2 for user type A, but switches to user type B, then there’s no way of clearing A.1 and A.2 for now.

---

<div class="post-metadata">

### Author: ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)
#### Post date: [April 1, 2025, 1:52pm UTC](https://community.glideapps.com/t/enhancing-glide-workflows-with-ai-real-time-actions-on-value-changes-and-even-more/79085/6 "2025-04-01T13:52:59Z")

</div>

Link from the AI Library has changed:

> **[Glide Ai Library](https://ailibrary.glide.page/dl/home/s/3e72f5/r/GhROmwNzvsoqbKenD0T3)**

---

<div class="post-metadata">

### Author: ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)
#### Post date: [April 1, 2025, 1:54pm UTC](https://community.glideapps.com/t/enhancing-glide-workflows-with-ai-real-time-actions-on-value-changes-and-even-more/79085/7 "2025-04-01T13:54:26Z")

</div>

Share Link:

> **[Untitled - Glide custom component](https://components.glide.info/share/commit::ea2619f6-27d6-a4ee-c049-baedae33e9b7)**
>
> Custom component created in Glide

---

<div class="post-metadata">

### Author: ![Simon\_Hill](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/simon_hill/32/94730_2.png) [@Simon\_Hill](https://community.glideapps.com/u/Simon_Hill)
#### Post date: [April 1, 2025, 8:48pm UTC](https://community.glideapps.com/t/enhancing-glide-workflows-with-ai-real-time-actions-on-value-changes-and-even-more/79085/8 "2025-04-01T20:48:01Z")

</div>

This will be so great for my Chess app where you have a sequence - enter move, check validity, update board, etc…

Thanks for sharing.

---

<div class="post-metadata">

### Author: ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)
#### Post date: [April 2, 2025, 12:31am UTC](https://community.glideapps.com/t/enhancing-glide-workflows-with-ai-real-time-actions-on-value-changes-and-even-more/79085/9 "2025-04-02T00:31:09Z")

</div>

My pleasure!
