> ## Documentation Index
> Fetch the complete documentation index at: https://docs.vivi.bot/llms.txt
> Use this file to discover all available pages before exploring further.

# Apps

export const FlipCard = ({title, icon, iconColor = "#0066ff", children}) => {
  const [isFlipped, setIsFlipped] = useState(false);
  const handleMouseEnter = () => {
    setIsFlipped(true);
  };
  const handleMouseLeave = () => {
    setIsFlipped(false);
  };
  const handleTouchStart = () => {
    setIsFlipped(true);
  };
  const handleTouchEnd = () => {
    setTimeout(() => {
      setIsFlipped(false);
    }, 2000);
  };
  return <div className="group relative w-full h-36 perspective-1000" onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} onTouchStart={handleTouchStart} onTouchEnd={handleTouchEnd}>
      <div className={`relative w-full h-full transition-transform duration-700 transform-style-preserve-3d ${isFlipped ? 'rotate-y-180' : ''}`} style={{
    transformStyle: 'preserve-3d',
    transition: 'transform 0.7s cubic-bezier(0.4, 0.0, 0.2, 1)'
  }}>
        {}
        <div className="absolute inset-0 w-full h-full backface-hidden" style={{
    backfaceVisibility: 'hidden',
    transform: 'rotateY(0deg)'
  }}>
          <div className="h-full bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-xl p-4 flex items-center shadow-sm hover:shadow-md transition-shadow duration-300">
            <div className="flex items-center space-x-3 w-full">
              <div className="flex-1 min-w-0">
                <div className="flex-shrink-0 mb-2">
                    <Icon icon={icon} iconType="regular" size={36} color={iconColor} />
                </div>
                <h3 className="text-lg font-semibold text-zinc-900 dark:text-white truncate">{title}</h3>
              </div>
            </div>
          </div>
        </div>

        {}
        <div className="absolute inset-0 w-full h-full backface-hidden" style={{
    backfaceVisibility: 'hidden',
    transform: 'rotateY(180deg)'
  }}>
          <div className="h-full bg-gradient-to-br from-blue-50 to-purple-50 dark:from-zinc-800 dark:to-zinc-900 border border-blue-200 dark:border-zinc-700 rounded-xl p-4 shadow-lg">
            <div className="h-full flex flex-col">
              <div className="flex items-center justify-between mb-3">
                <h3 className="text-lg font-semibold text-zinc-900 dark:text-white">
                  {title}
                </h3>
              </div>
              <div className="flex-1 overflow-hidden">
                <div className="text-sm text-zinc-700 dark:text-zinc-300 leading-relaxed">
                  {children}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <style jsx>{`
        .perspective-1000 {
          perspective: 1000px;
        }
        .transform-style-preserve-3d {
          transform-style: preserve-3d;
        }
        .backface-hidden {
          backface-visibility: hidden;
        }
        .rotate-y-180 {
          transform: rotateY(180deg);
        }
      `}</style>
    </div>;
};

<video autoPlay muted loop playsInline className="w-full aspect-video rounded-xl" src="https://mintcdn.com/ksg-ea85c748/FXxI67Vy7ozwhAqv/videos/vivi_integrations.mp4?fit=max&auto=format&n=FXxI67Vy7ozwhAqv&q=85&s=92d53b92ab2f4537a1dd8c7e64e23acf" data-path="videos/vivi_integrations.mp4" />

**Apps** are business software tools such as HubSpot, Salesforce, or DocuSign. Each app comes with a number of **tools**, which are functions that help your agent correctly complete tasks. All tools inside apps are enabled by default, but you can disable them as needed or for security reasons when configuring your agent. Each app is unique and has provider requirements. Some apps require an account admin to setup the integration while others require system knowledge, such as API keys or credentials.

***

## Supported Apps

<Columns cols={2} className="gap-4">
  <FlipCard title="Outreach & CRM" icon="chart-line-up">
    Apollo.io / HubSpot / Lusha / SmartReach.io
  </FlipCard>

  <FlipCard title="Productivity" icon="pen-nib">
    DocuSign / Stripe
  </FlipCard>

  <FlipCard title="Google Workspace" icon="Google">
    Google Drive / Google Docs / Gmail / Google Calendar / Google Sheets / Google Analytics
  </FlipCard>

  <FlipCard title="Microsoft 365" icon="Microsoft">
    Microsoft Admin / Power BI / Excel / Outlook / SharePoint / OneDrive
  </FlipCard>

  <FlipCard title="Search & Scraping" icon="magnifying-glass">
    Firecrawl / SerpApi
  </FlipCard>

  <FlipCard title="Miscellaneous" icon="puzzle-piece">
    Duffel / HeyGen
  </FlipCard>
</Columns>

<Note>
  Not seeing the app you need? Please reach out to us [here](https://vivi.bot/contact-vivi/) to request a new app or to check if we're already working on it!
</Note>

***

## Best Practices

* Check **functions** on apps to verify that the app offers the tools you need.