4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T7508,"use client" // react import { ChangeEvent, useEffect, useState } from "react" // shadcn import { Badge } from "@/components/ui/badge" import { Card } from "@/components/ui/card" import { Input } from "@/components/ui/input" // third-party import { motion } from "framer-motion" // project-imports import ButtonAI from "@/components/uiable/button/button-ai" // assets import { Sparkles, Bot, Puzzle, Wand2, Play, ZapIcon, BarChart2, } from "lucide-react" // ------------------------------ | TYPEWRITER INPUT | ------------------------------ // const AUTOMATION_PROMPTS = [ "Describe the automation you want to create...", "Send a Slack alert when a Stripe payment fails...", "Sync new Shopify orders to Google Sheets and QuickBooks...", "Summarize daily customer support tickets with AI...", "Trigger deployment and alert dev team when PR is merged...", "Onboard new team members across Slack and Jira...", ] function TypewriterInput() { const [promptIndex, setPromptIndex] = useState(0) const [displayedText, setDisplayedText] = useState("") const [isDeleting, setIsDeleting] = useState(false) const [userValue, setUserValue] = useState("") useEffect(() => { if (userValue) return const currentPrompt = AUTOMATION_PROMPTS[promptIndex] let timer: ReturnType if (!isDeleting) { if (displayedText.length < currentPrompt.length) { timer = setTimeout(() => { setDisplayedText(currentPrompt.slice(0, displayedText.length + 1)) }, 45) } else { timer = setTimeout(() => { setIsDeleting(true) }, 2200) } } else { if (displayedText.length > 0) { timer = setTimeout(() => { setDisplayedText(currentPrompt.slice(0, displayedText.length - 1)) }, 22) } else { timer = setTimeout(() => { setIsDeleting(false) setPromptIndex((prev) => (prev + 1) % AUTOMATION_PROMPTS.length) }, 350) } } return () => clearTimeout(timer) }, [displayedText, isDeleting, promptIndex, userValue]) return (

) => setUserValue(e.target.value) } className="h-auto border-0 bg-transparent p-0 text-sm text-slate-900 shadow-none focus:border-transparent focus:outline-none sm:text-base dark:text-white" /> {!userValue && (

{displayedText}

)}

) } // ------------------------------ | SVG COMPONENTS | ------------------------------ // function LaserFlowSvg() { return ( ) } function SquiggleSvg() { return ( ) } // ------------------------------ | BENTO 4 | ------------------------------ // export default function Bento4() { return (

Automate smarter.
Let AI{" "} do more.

Build powerful workflows without the busywork.

AI Workflows Build smart, automate

AI Decisions Real-time insights

Integrations Connect your tools

Smart Triggers Run actions on events

AI Agents Handle tasks for you

Automations Turn tasks into actions

OpenAI

Claude

Gemini

Zapier

Make

Turn ideas into{" "} workflows

Describe it. AI builds it.

AI AUTOMATION PLATFORM

What do you want
to{" "} automate with AI?

) } 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","framer-motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/framer-motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"framer-motion"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4f",null,{"namespace":"@uiable","registryDependencies":["@uiable/badge","@uiable/button-ai","@uiable/card","@uiable/input"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"src/components/uiable/blocks/bento/bento-4/bento-4.tsx","content":"$51","type":"registry:component","target":"@components/uiable/blocks/bento/bento-4/bento-4.tsx"}],"className":"h-[70svh] min-h-80"}]]}]

Automate smarter. Let AI{" "} do more.

Turn ideas into{" "} workflows

What do you want to{" "} automate with AI?

Automate smarter.
Let AI{" "} do more.

What do you want
to{" "} automate with AI?