Calling Actions for an AI Component

Community Resources
,
1

Frankly, my biggest struggle with AI is getting the correct actions to fire. Do I prompt call/do/execute…to get my action to fire? Nothing has been consistent.

I found “Dispatch the Show Notification action from the action section” in @MaximeBaker (thanks Maxime!) prompt and it has worked great.

Here is his full prompt:

1. In the **DATA** section, define only the `Delay` property with a milliseconds value.
2. On component load, automatically retrieve the `Delay` property. If the property is not set, use a default value of 100 milliseconds.
3. Use the retrieved `Delay` property to start a `setTimeout` function.
4. After the specified delay:  
   a. Dispatch the **Show Notification** action from the **action** section.
5. The **Show Notification** action must be defined in the **action** section.
6. There will be no visual elements, start, or stop button; the action will trigger automatically without any manual intervention.
7. Ensure that all code runs within the component's secure context to avoid violations of Content Security Policy (CSP) and prevent loading external scripts.

from this community note: ( Auto Action trigger )

3 Likes
2

I tend to use “bind” or “bound” a lot. Bind to column or field. Call bound action. Etc.

Also starting to refer to x-init or x-on more often.

I’m also still trying to grasp all of the best terminology to get the AI to do what I want. Bit of a battle sometimes.

3 Likes
3

Thank you!! I appreciate it!

Here are the other use cases I was able to do with AI components and workflows:

4

Core Directives

  1. x-data

    • Description: Initializes Alpine’s reactivity system on an element. It sets up the data for the component.
    • Example:
      <div x-data="{ name: 'Alice', count: 0 }">

  2. x-show

    • Description: Toggles the visibility of an element based on a boolean expression.
    • Example:
      <div x-show="isAdmin">Only admins can see this</div>

  3. x-bind

    • Description: Dynamically binds attributes like disabled, href, or class to an element.
    • Example:
      <button x-bind:disabled="isProcessing">Submit</button>

  4. x-on

    • Description: Listens for events (e.g., click, submit, mouseover) and triggers actions.
    • Example:
      <button x-on:click="increment">Increment</button>

  5. x-model

    • Description: Creates a two-way data binding for form elements (e.g., input, select, textarea).
    • Example:
      <input x-model="username">

  6. x-for

    • Description: Loops over an array or object to render multiple elements.
    • Example:
      <template x-for="item in items" :key="item.id">
  <div>{{ item.name }}</div>
</template>

  7. x-if

    • Description: Conditionally includes an element if the expression evaluates to true.
    • Example:
      <div x-if="isAdmin">Admin-only content</div>

  8. x-text

    • Description: Binds the text content of an element to a value.
    • Example:
      <span x-text="greeting">Loading...</span>

  9. x-html

    • Description: Binds the HTML content of an element to a value (renders as HTML).
    • Example:
      <div x-html="content"></div>

  10. x-ref

    • Description: Creates a reference to a DOM element or component for direct access.
    • Example:
      <input x-ref="usernameInput">

  11. x-spread

    • Description: Spreads multiple attributes from an object onto an element.
    • Example:
      <div x-spread="attrs">Attributes applied dynamically</div>

Event Handling

  1. @click

    • Description: Shorthand for x-on:click.
    • Example:
      <button @click="handleClick">Click me</button>

  2. @input

    • Description: Shorthand for x-on:input.
    • Example:
      <input @input="handleInput">

  3. @change

    • Description: Shorthand for x-on:change.
    • Example:
      <select @change="handleChange">
  <option>Option 1</option>
</select>

  4. @submit

    • Description: Shorthand for x-on:submit.
    • Example:
      <form @submit="handleSubmit">
  <input type="submit">
</form>

  5. @mouseover

    • Description: Shorthand for x-on:mouseover.
    • Example:
      <div @mouseover="handleMouseOver">Hover me</div>

  6. @mouseout

    • Description: Shorthand for x-on:mouseout.
    • Example:
      <div @mouseout="handleMouseOut">Hover me</div>

  7. @keydown

    • Description: Shorthand for x-on:keydown.
    • Example:
      <input @keydown="handleKeydown">

  8. @keyup

    • Description: Shorthand for x-on:keyup.
    • Example:
      <input @keyup="handleKeyup">

  9. @focus

    • Description: Shorthand for x-on:focus.
    • Example:
      <input @focus="handleFocus">

  10. @blur

    • Description: Shorthand for x-on:blur.
    • Example:
      <input @blur="handleBlur">

Lifecycle and Utility Directives

  1. x-init

    • Description: Runs once after the element is initialized.
    • Example:
      <div x-init="initialize()">Initialized!</div>

  2. x-cloak

    • Description: Hides the element until Alpine initializes (useful for avoiding flash of unrendered content).
    • Example:
      <div x-cloak x-data="{ loaded: false }">Loading...</div>

  3. x-ignore

    • Description: Ignores the element and its children from Alpine’s rendering process.
    • Example:
      <div x-ignore>Ignored content</div>
4 Likes
5

Something that might help with your prompting @MattLB .

3 Likes
6

Everything the AI Component is doing by default is alpine.js code:
https://alpinejs.dev/start-here

3 Likes
7

Can I give this response a double heart!

Thank you

3 Likes
8

Glide already does a good job to map these things from your natural language prompt, but it does help to know these to make the work easier for it to generate.

1 Like