# One-shot Custom Components with Claude 3.5 Sonnet **URL:** \ **Category:** Project Showcase\ **Tags:** tutorial, custom-code\ **Created:** [July 11, 2024, 3:49pm UTC](https://community.glideapps.com/t/one-shot-custom-components-with-claude-3-5-sonnet/74828 "2024-07-11T15:49:16Z")\ **Posts on this page:** 3\ **Page:** 1
**Author:** ![nixkulinax](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nixkulinax/32/73708_2.png) [@nixkulinax](https://community.glideapps.com/u/nixkulinax)\ **Post date:** [July 11, 2024, 3:49pm UTC](https://community.glideapps.com/t/one-shot-custom-components-with-claude-3-5-sonnet/74828/1 "2024-07-11T15:49:16Z")
Hi! Just found custom components, and it’s amazing! I asked Claude 3.5 Sonnet to generate calculator: ![Screenshot 2024-07-11 at 12.45.10 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/b/db88a44761d3006c74925123fe92a634d7d221db.jpeg) and used this html code within glide custom components: ![Screenshot 2024-07-11 at 12.42.45 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/d/2df7fd6342af5227bcc24226f59b270531842bd2.jpeg) What can be really fascinating is the option to include actions anywhere within the HTML code manually, making any buttons work with the actions! Thanks Glide Team! ---
**Author:** ![nixkulinax](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nixkulinax/32/73708_2.png) [@nixkulinax](https://community.glideapps.com/u/nixkulinax)\ **Post date:** [July 11, 2024, 4:06pm UTC](https://community.glideapps.com/t/one-shot-custom-components-with-claude-3-5-sonnet/74828/2 "2024-07-11T16:06:26Z")
If you somewhy need calculator in glide: ```auto { "kind": "ai-custom-component", "componentID": "c13", "visibilityFilters": [], "generator": { "kind": "enum", "value": "html-tailwind-alpine" }, "prompt": { "kind": "string", "value": "" }, "fields": { "kind": "array", "value": [ { "value": { "kind": "column", "value": { "kind": "default-ctx", "name": "AjbWM" } }, "name": { "kind": "string", "value": "{Name}" } } ] }, "actions": { "kind": "array", "value": [ { "title": { "kind": "string", "value": "Go!" }, "action": { "kind": "action", "value": { "kind": "show-toast", "message": { "kind": "string", "value": "" }, "icon": { "kind": "enum", "value": "success" } } } } ] }, "builderDisplayName": "Code", "html": { "kind": "string", "value": "\n\n \n \n \n Functional Beautiful Math Calculator\n \n \n \n
\n
0
\n
\n \n \n \n \n ÷\n \n \n \n \n \n ×\n \n \n \n \n \n -\n \n \n \n \n \n +\n \n
\n
\n\n \n \n\n" } } ``` ---
**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\ **Post date:** [July 11, 2024, 4:23pm UTC](https://community.glideapps.com/t/one-shot-custom-components-with-claude-3-5-sonnet/74828/3 "2024-07-11T16:23:26Z")
> [@new Custom Component (AI Generated)](https://community.glideapps.com/t/custom-component-ai-generated/74533/53): > > The HTML mode uses [Alpine.js](https://alpinejs.dev/) – check it out for details. Use @click to connect a click to an action in Glide > [@new Custom Component (AI Generated)](https://community.glideapps.com/t/custom-component-ai-generated/74533/61): > > @doslab the data names are exposed to Alpinejs. Try this: \

\