# New Custom AI Component

**URL:** https://community.glideapps.com/t/new-custom-ai-component/75402
**Category:** Ask for Help
**Created:** [August 3, 2024, 7:59pm UTC](https://community.glideapps.com/t/new-custom-ai-component/75402 "2024-08-03T19:59:26Z")
**Posts on this page:** 13
**Page:** 1

<div class="post-metadata">

### Author: ![mrt224](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mrt224/32/490_2.png) [@mrt224](https://community.glideapps.com/u/mrt224)
#### Post date: [August 3, 2024, 7:59pm UTC](https://community.glideapps.com/t/new-custom-ai-component/75402/1 "2024-08-03T19:59:26Z")

</div>

I am having trouble connecting my new AI custom component to my Actions (button). Any suggestions?

---

<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: [August 4, 2024, 12:09am UTC](https://community.glideapps.com/t/new-custom-ai-component/75402/2 "2024-08-04T00:09:40Z")

</div>

Can you elaborate on what type of component are you making and your current setup?

---

<div class="post-metadata">

### Author: ![mrt224](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mrt224/32/490_2.png) [@mrt224](https://community.glideapps.com/u/mrt224)
#### Post date: [August 4, 2024, 12:27am UTC](https://community.glideapps.com/t/new-custom-ai-component/75402/3 "2024-08-04T00:27:09Z")

</div>

I wanted to create 3 buttons & have each do a different action but I am having trouble getting the action paired with the correct button.

I am in testing phase to see what I can do with the new custom AI component. Any help would be appreciated.

---

<div class="post-metadata">

### Author: ![mrt224](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mrt224/32/490_2.png) [@mrt224](https://community.glideapps.com/u/mrt224)
#### Post date: [August 4, 2024, 12:48am UTC](https://community.glideapps.com/t/new-custom-ai-component/75402/4 "2024-08-04T00:48:31Z")

</div>

here is my info

> **(attachments)**
>
> ![ai.png](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/c/3c2ae37da1c3a4bddd42acdf5a82b7d9abc859c4.png)  
> ![3 actions.png](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/8/880cf1c803568659a933b7e88ca0a15575889457.png)

---

<div class="post-metadata">

### Author: ![mrt224](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mrt224/32/490_2.png) [@mrt224](https://community.glideapps.com/u/mrt224)
#### Post date: [August 4, 2024, 12:48am UTC](https://community.glideapps.com/t/new-custom-ai-component/75402/5 "2024-08-04T00:48:56Z")

</div>

i want to connect button1 with action 1 and so on

---

<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: [August 4, 2024, 2:17am UTC](https://community.glideapps.com/t/new-custom-ai-component/75402/6 "2024-08-04T02:17:59Z")

</div>

Here’s something you can use in a Code component.

```auto
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>AlpineJS Circle Buttons</title>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.10.5/cdn.min.js"
      defer
    ></script>
    <style>
      .button-container {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 60px;
          gap: 20px;
      }
      .circle-button {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          border: none;
          background-color: #3498db;
          color: white;
          font-weight: bold;
          cursor: pointer;
          transition: background-color 0.3s;
      }
      .circle-button:hover {
          background-color: #2980b9;
      }
    </style>
  </head>
  <body>
      <div class="button-container">
        <button class="circle-button" @click="action1">
          1
        </button>
        <button class="circle-button" @click="action2">
          2
        </button>
        <button class="circle-button" @click="action3">
          3
        </button>
      </div>
    </div>
  </body>
</html>

```

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/1/b152d1d9ce14963cb6ba21dd8ee9a5c3ed7efb4f.png)

---

<div class="post-metadata">

### Author: ![mrt224](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mrt224/32/490_2.png) [@mrt224](https://community.glideapps.com/u/mrt224)
#### Post date: [August 4, 2024, 2:34am UTC](https://community.glideapps.com/t/new-custom-ai-component/75402/7 "2024-08-04T02:34:50Z")

</div>

thank you that worked but I have 2 questions

1. how/where did you get the html code?
2. can you do this with AI component?

---

<div class="post-metadata">

### Author: ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [August 4, 2024, 3:13am UTC](https://community.glideapps.com/t/new-custom-ai-component/75402/8 "2024-08-04T03:13:29Z")

</div>

Since the last update, using AI has become easier.

 ![Screenshot 2024-08-04 at 10.10.33](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/1/612abee497808c76c48a02a86ae2af0afa90ec47.png)

 ![Screenshot 2024-08-04 at 10.10.23](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/2/62d7a0a55f961ba6669978d1272f0e81fcd7ca04.png)  
 ![Screenshot 2024-08-04 at 10.10.53](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/7/071023aa80b22a377707a52b8e195f510b9f66de.png)

---

<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: [August 4, 2024, 8:13am UTC](https://community.glideapps.com/t/new-custom-ai-component/75402/9 "2024-08-04T08:13:13Z")

</div>

I usually just talk to Claude directly if I have an idea about the component to get a start, then dive in to adjust things myself when something is not working correctly.

I never used the AI component since I want to see and edit the code directly.

---

<div class="post-metadata">

### Author: ![mrt224](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mrt224/32/490_2.png) [@mrt224](https://community.glideapps.com/u/mrt224)
#### Post date: [August 4, 2024, 12:47pm UTC](https://community.glideapps.com/t/new-custom-ai-component/75402/10 "2024-08-04T12:47:53Z")

</div>

thank you for your fast response.  
when you use the AI component, have you noticed that after creating the clickable button if works fine but if you leave the page/tab and come back to it, the button does not work.

---

<div class="post-metadata">

### Author: ![Trustin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/trustin/32/88217_2.png) [@Trustin](https://community.glideapps.com/u/Trustin)
#### Post date: [August 20, 2024, 4:58am UTC](https://community.glideapps.com/t/new-custom-ai-component/75402/11 "2024-08-20T04:58:46Z")

</div>

The possibility is mind blowing! but also challenging the way to build things in Glide.

---

<div class="post-metadata">

### Author: ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [August 20, 2024, 5:23am UTC](https://community.glideapps.com/t/new-custom-ai-component/75402/12 "2024-08-20T05:23:34Z")

</div>

Yes, while waiting for them to develop it to make it better.

---

<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: [August 20, 2024, 1:37pm UTC](https://community.glideapps.com/t/new-custom-ai-component/75402/13 "2024-08-20T13:37:48Z")

</div>

Patiently waiting again this week as it’s broken again 😅
