ToyBrick

caption: (

<div>

Simply{' '}

<a href="/docs/getting_started/apps_quickstart" target="_blank">

drag and drop components

</a>

, connect your data and deploy your app in minutes.

</div>

),

caption: (

<div>

Quickly start building complex apps using our{' '}

<a href="/docs/apps/app_configuration_settings/app_component_library" target="_blank">

50 built-in components

</a>

.

</div>

),

caption: (

<div>

Windmill supports Typescript, Python, Go, Bash and SQL{' '}

<a href="/docs/getting_started/scripts_quickstart" target="_blank">

scripts

</a>

.

</div>

),

caption: (

<div>

Example of an{' '}

<a href="/docs/apps/app_e-commerce" target="_blank">

E-commerce CRM app

</a>

.

</div>

),

caption: (

<div>

Example of an{' '}

<a href="/docs/apps/app_e-commerce" target="_blank">

E-commerce CRM app

</a>

.

</div>

),

caption: (

<div>

Windmill embeds several{' '}

<a

href="/docs/apps/app_configuration_settings/app_component_library#charts"

target="_blank"

>

charts components

</a>{' '}

with unlimited customization possibilities.

</div>

),

description:

'Configure the style of each component with pre-set options, CSS, or Tailwind Classes.',

caption: (

<div>

Configure the{' '}

<a

href="/docs/apps/app_configuration_settings/app_styling#component-level"

target="_blank"

>

style of each component

</a>{' '}

with pre-set options, CSS, or Tailwind Classes.

</div>

),

altText: 'Component styling'

description:

'Apply global themes to reuse across your applications based on their purposes.',

caption: (

<div>

Apply{' '}

<a

href="/docs/apps/app_configuration_settings/app_styling#global-styling"

target="_blank"

>

global themes

</a>{' '}

to reuse across your applications based on their purposes.

</div>

),

altText: 'Global styling'

}

import React from 'react';

import RadialBlur from './RadialBlur';

import { useColorMode } from '@docusaurus/theme-common';

export default function HeroAI() {

const { colorMode } = useColorMode();

return (

<div className="relative rounded-none mx-auto max-w-screen-2xl overflow-hidden 2xl:rounded-3xl pt-32">

<RadialBlur />

<div className="grid gap-4 mx-auto max-w-7xl px-6 gap-y-8 lg:flex lg:px-8 py-16 items-center">

<div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-xl lg:flex-shrink-0 lg:pt-8">

<div className="text-sm font-semibold leading-none border p-2 w-min whitespace-nowrap flex rounded-md">

Windmill AI

</div>

<h1 className="mt-4 !text-4xl tracking-tight sm:!text-6xl">

Build internal tools with Windmill AI

</h1>

<h2 className="mt-6 text-lg leading-8 font-medium">

Windmill is a low-code platform for building endpoints, flows, and apps from simple

scripts. The presence of code at the heart of Windmill offers unlimited possibilities so

as not to rely solely on pre-built integrations.

</h2>

<h2 className="mt-6 text-lg leading-8 font-medium">

With the integration of AI models within Windmill, your willpower alone can create the

internal tools you want in just a few seconds.

</h2>

<h2 className="mt-6 text-lg leading-8 font-medium">

The AI generates code that matches Windmill's specifications, especially the interaction

with external APIs.

</h2>

<div className="mt-10 flex items-center gap-x-6">

<a

href="https://app.windmill.dev/user/login"

onClick={() => window.plausible('try-cloud')}

data-analytics='"try-cloud"'

className="rounded-md transition-all bg-blue-500 px-4 py-2 text-base font-semibold leading-7 text-white hover:bg-blue-800 hover:!text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 !no-underline"

rel="nofollow"

>

Try Windmill Cloud

</a>

<a

href="https://www.windmill.dev/docs/advanced/self_host"

onClick={() => window.plausible('self-host')}

className="text-base font-semibold leading-7 text-gray-900 dark:text-gray-200 text !no-underline"

>

Self-host yourself <span aria-hidden="true">→</span>

</a>

</div>

</div>

<div className="mt-16 sm:mt-8 h-full rounded-md overflow-hidden">

<video src="/videos/flow_ai.mp4" autoplay={true} loading="lazy" />

</div>

</div>

</div>

);

kind,

shouldShowDevModeSwitch = true

{shouldShowDevModeSwitch && <DevModeSwitch color={color} />}

{examples?.length > 0 && <SectionExamples examples={examples} kind={kind} />}

import { AnimatePresence, motion } from 'framer-motion';

import React, { useState, useEffect } from 'react';

import FeatureCard from '../FeatureCard';

import { useInView } from 'react-intersection-observer';

export default function TabContent({ data, color }) {

const { ref, inView, entry } = useInView({

threshold: 0

});

const [selectedIndex, setSelectedIndex] = useState(0);

let timeout = null;

useEffect(() => {

timeout = setTimeout(

() => {},

data[selectedIndex].video ? data[selectedIndex].video.videoLength * 1000 : 20000

);

}, [selectedIndex]);

function onSelect(index: number) {

clearTimeout(timeout);

setSelectedIndex(index);

}

return (

<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 w-full " ref={ref}>

<div className="w-full h-full flex flex-col gap-4 justify-start col-span-2 lg:col-span-1 ">

{data.map((item, index: number) => (

<button onClick={() => onSelect(index)} key={index}>

<FeatureCard

title={item.title}

color={color}

Icon={item.icon}

index={index}

selected={index === selectedIndex}

description={item.description}

/>

</button>

))}

</div>

<div className="col-span-2 relative h-full flex items-center w-full ">

<AnimatePresence mode="sync">

<motion.div

key={selectedIndex}

initial={{ opacity: 0, scale: 0.9, width: '100%' }}

animate={{ opacity: 1, scale: 1 }}

exit={{ opacity: 0, scale: 0.9, position: 'absolute' }}

>

<CarouselSlide data={data[selectedIndex]} />

</motion.div>

</AnimatePresence>

</div>

</div>

);

function CarouselSlide({ data }) {

return <p>t</p>;