AI

<Stack spacing='10'>
    <Wrap align='center'>
        <Button variant='ai' leftIcon={<Icon><path d={mdiStarFourPoints} /></Icon>}>
            Generate
        </Button>
        <Button
            leftIcon={<Icon><path d={mdiStarFourPoints} /></Icon>}
            variant='outline'
            colorScheme='primary'
        >
            Generate
        </Button>
        <Button
            leftIcon={<Icon><path d={mdiStarFourPoints} /></Icon>}
            variant='ghost'
            colorScheme='primary'
        >
            Generate
        </Button>
        <Button leftIcon={<Icon><path d={mdiStarFourPoints} /></Icon>} variant='ghost'>
            Generate
        </Button>
    </Wrap>
    <Wrap align='center'>
        <Button variant='ai' leftIcon={<Icon><path d={mdiStarFourPoints} /></Icon>}>
            AI
        </Button>
        <Button
            leftIcon={<Icon><path d={mdiStarFourPoints} /></Icon>}
            variant='outline'
            colorScheme='primary'
        >
            AI
        </Button>
        <Button
            leftIcon={<Icon><path d={mdiStarFourPoints} /></Icon>}
            variant='ghost'
            colorScheme='primary'
        >
            AI
        </Button>
        <Button leftIcon={<Icon><path d={mdiStarFourPoints} /></Icon>} variant='ghost'>
            AI
        </Button>
    </Wrap>
    <Wrap align='center'>
        <Tooltip label='Ask AI to write anything'>
            <IconButton
                variant='ai'
                icon={<Icon><path d={mdiStarFourPoints} /></Icon>}
                aria-label={'Ask AI to write anything'}
            />
        </Tooltip>
        <Tooltip label='Ask AI to write anything'>
            <IconButton
                icon={<Icon><path d={mdiStarFourPoints} /></Icon>}
                aria-label={'Ask AI to write anything'}
                variant='outline'
                colorScheme='primary'
            />
        </Tooltip>
        <Tooltip label='Ask AI to write anything'>
            <IconButton
                icon={<Icon><path d={mdiStarFourPoints} /></Icon>}
                aria-label={'Ask AI to write anything'}
                variant='ghost'
                colorScheme='primary'
            />
        </Tooltip>
        <Tooltip label='Ask AI to write anything'>
            <IconButton
                icon={<Icon><path d={mdiStarFourPoints} /></Icon>}
                aria-label={'Ask AI to write anything'}
                variant='ghost'
            />
        </Tooltip>
    </Wrap>
    <Wrap align='center'>
    <Tooltip label='Regenerate'>
        <IconButton
            variant='ghost'
            icon={<Icon><path d={mdiCached} /></Icon>}
            aria-label={'Regenerate'}
        />
    </Tooltip>
    <Tooltip label='Copy to clipboard'>
        <IconButton
            variant='ghost'
            icon={<Icon><path d={mdiContentCopy} /></Icon>}
            aria-label={'Copy to clipboard'}
        />
    </Tooltip>
    <Button variant='outline'>Insert after</Button>
    <Button variant='solid'>Replace</Button>
</Wrap>
<Wrap align='center'>
    <Button variant='outline' leftIcon={<Icon><path d={mdiAutoFix} /></Icon>}>
        Improve writing
    </Button>
    <Button
        variant='outline'
        leftIcon={<Icon><path d={mdiSpellcheck} /></Icon>}
    >
        Fix spelling and grammar
    </Button>
    <Button
        variant='outline'
        leftIcon={<Icon><path d={mdiTextShort} /></Icon>}
    >
        Make shorter
    </Button>
    <Button
        variant='outline'
        leftIcon={<Icon><path d={mdiTextLong} /></Icon>}
    >
        Make longer
    </Button>
    <Button
        variant='outline'
        leftIcon={<Icon><path d={mdiTextBoxOutline} /></Icon>}
    >
        Summarize
    </Button>
    <Button
        variant='outline'
        leftIcon={<Icon><path d={mdiMicrophoneVariant} /></Icon>}
    >
        Change tone
    </Button>
</Wrap>
<Progress variant='ai' value={80} />
<Progress isIndeterminate variant='ai' />
<SimpleGrid minChildWidth='28'>
    <Text bgGradient='linear(to-tr, purple.50, red.50)' p='4' variant='strong'>AI bg 50</Text>
    <Text bgGradient='linear(to-tr, purple.100, red.100)' p='4' variant='strong'>AI bg 100</Text>
    <Text bgGradient='linear(to-tr, purple.200, red.200)' p='4' variant='strong'>AI bg 200</Text>
    <Text bgGradient='linear(to-tr, purple.300, red.300)' p='4' variant='strong'>AI bg 300</Text>
    <Text bgGradient='linear(to-tr, purple.400, red.400)' p='4' variant='strong'>AI bg 400</Text>
    <Text bgGradient='linear(to-tr, purple.500, red.500)' p='4' variant='strong' color='chakra-inverse-text'>AI bg 500</Text>
    <Text bgGradient='linear(to-tr, purple.600, red.600)' p='4' variant='strong' color='chakra-inverse-text'>AI bg 600</Text>
    <Text bgGradient='linear(to-tr, purple.700, red.700)' p='4' variant='strong' color='chakra-inverse-text'>AI bg 700</Text>
    <Text bgGradient='linear(to-tr, purple.800, red.800)' p='4' variant='strong' color='chakra-inverse-text'>AI bg 800</Text>
    <Text bgGradient='linear(to-tr, purple.900, red.900)' p='4' variant='strong' color='chakra-inverse-text'>AI bg 900</Text>
</SimpleGrid>
</Stack>