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] and used this html code within glide custom components: [Screenshot 2024-07-11 at 12.42.45 PM] 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!

If you somewhy need calculator in glide: { "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 body {\n font-family: Arial, sans-serif;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n margin: 0;\n background-color: #f5f5f5;\n }\n .calculator {\n background-color: #ededed;\n border-radius: 10px;\n box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);\n padding: 20px;\n width: 300px;\n }\n .display {\n background-color: #d4d4d4;\n border: 2px solid #ff9800;\n border-radius: 5px;\n font-size: 24px;\n height: 60px;\n margin-bottom: 20px;\n padding: 10px;\n text-align: right;\n overflow: hidden;\n }\n .buttons {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 10px;\n }\n button {\n background-color: #ededed;\n border: 2px solid #ff9800;\n border-radius: 5px;\n color: #333;\n cursor: pointer;\n font-size: 18px;\n padding: 15px;\n transition: all 0.3s ease;\n }\n button:hover {\n background-color: #ff9800;\n color: white;\n }\n .operator {\n background-color: #d4d4d4;\n }\n .equals {\n background-color: #ff9800;\n color: white;\n }\n .equals:hover {\n background-color: #f57c00;\n }\n \n \n \n \n 0 \n \n 7 \n 8 \n 9 \n \n ÷\n \n 4 \n 5 \n 6 \n \n ×\n \n 1 \n 2 \n 3 \n \n -\n \n 0 \n . \n \n =\n \n \n +\n \n \n \n\n \n let displayValue = \"0\";\n let firstOperand = null;\n let operator = null;\n let waitingForSecondOperand = false;\n\n const display = document.querySelector(\".display\");\n\n function updateDisplay() {\n display.textContent = displayValue;\n }\n\n function appendNumber(number) {\n if (waitingForSecondOperand) {\n displayValue = number;\n waitingForSecondOperand = false;\n } else {\n displayValue =\n displayValue === \"0\"\n ? number\n : displayValue + number;\n }\n updateDisplay();\n }\n\n function appendDecimal() {\n if (!displayValue.includes(\".\")) {\n displayValue += \".\";\n updateDisplay();\n }\n }\n\n function setOperation(op) {\n if (operator && waitingForSecondOperand) {\n operator = op;\n return;\n }\n\n if (firstOperand === null) {\n firstOperand = parseFloat(displayValue);\n } else if (operator) {\n const result = calculate();\n displayValue = `${parseFloat(result.toFixed(7))}`;\n firstOperand = result;\n }\n\n waitingForSecondOperand = true;\n operator = op;\n updateDisplay();\n }\n\n function calculate() {\n if (operator === null || waitingForSecondOperand) {\n return displayValue;\n }\n\n const secondOperand = parseFloat(displayValue);\n let result;\n\n switch (operator) {\n case \"+\":\n result = firstOperand + secondOperand;\n break;\n case \"-\":\n result = firstOperand - secondOperand;\n break;\n case \"*\":\n result = firstOperand * secondOperand;\n break;\n case \"/\":\n result = firstOperand / secondOperand;\n break;\n default:\n return;\n }\n\n displayValue = `${parseFloat(result.toFixed(7))}`;\n firstOperand = result;\n operator = null;\n waitingForSecondOperand = false;\n updateDisplay();\n return result;\n }\n\n updateDisplay();\n \n \n \n" } }

[image] new Custom Component (AI Generated) Announcements The HTML mode uses Alpine.js – check it out for details. Use @click to connect a click to an action in Glide [CleanShot 2024-07-08 at 18.26.09@2x] [image] new Custom Component (AI Generated) Announcements @doslab the data names are exposed to Alpinejs. Try this:

One-shot Custom Components with Claude 3.5 Sonnet

Project Showcase

Jeff_Hager July 11, 2024, 4:23pm 3

Topic		Replies	Views
Custom Component (AI Generated) - Feedback wanted! 💡 Archived Announcements ai , layout , components	203	7650	February 19, 2025
Making image smaller Ask for Help	22	365	November 9, 2024
Beta: Share & reuse AI Custom components Archived Announcements ai , layout , ai-custom	14	718	April 23, 2026
Custom Component and AI builders Ask for Help	0	52	May 6, 2026
March Challenge - Calculator Project Showcase	82	3429	April 10, 2021

One-shot Custom Components with Claude 3.5 Sonnet

Related topics