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

# Welcome to Botpress

export const IntegrationsCard = () => <a href="/integrations/get-started/introduction" className="group cursor-pointer">
    <div className="px-6 py-5 relative flex items-center gap-x-4" data-component-part="card-content-container">
      <div className="h-6 w-6 fill-gray-800 dark:fill-gray-100 text-gray-800 dark:text-gray-100" data-component-part="card-icon">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-plug-icon lucide-plug">
          <path d="M12 22v-5" />
          <path d="M15 8V2" />
          <path d="M17 8a1 1 0 0 1 1 1v4a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1z" />
          <path d="M9 8V2" />
        </svg>
      </div>
      <div>
        <h2 className="not-prose font-semibold text-base text-gray-800 dark:text-white flex items-center gap-1" data-component-part="card-title">
          Integrations
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-chevron-right-icon lucide-chevron-right opacity-0 -translate-x-1 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200">
            <path d="m9 18 6-6-6-6" />
          </svg>
        </h2>
        <div className="prose font-normal text-sm text-gray-600 dark:text-gray-400 leading-6 mt-0">
          <span data-as="p">Channels to deploy or interact with your agent.</span>
        </div>
      </div>
    </div>
  </a>;

export const WebchatCard = () => <a href="/webchat/get-started/introduction" className="group cursor-pointer">
    <div className="px-6 py-5 relative flex items-center gap-x-4" data-component-part="card-content-container">
      <div className="h-6 w-6 fill-gray-800 dark:fill-gray-100 text-gray-800 dark:text-gray-100" data-component-part="card-icon">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-message-square-icon lucide-message-square">
          <path d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z" />
        </svg>
      </div>
      <div>
        <h2 className="not-prose font-semibold text-base text-gray-800 dark:text-white flex items-center gap-1" data-component-part="card-title">
          Webchat
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-chevron-right-icon lucide-chevron-right opacity-0 -translate-x-1 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200">
            <path d="m9 18 6-6-6-6" />
          </svg>
        </h2>
        <div className="prose font-normal text-sm text-gray-600 dark:text-gray-400 leading-6 mt-0">
          <span data-as="p">Custom frontend for your AI agent.</span>
        </div>
      </div>
    </div>
  </a>;

<div className="flex flex-wrap gap-8 max-w-[68rem] mx-auto px-8 lg:px-16 flex-col md:flex-row mb-8 lg:mb-0">
  <div className="relative z-10 lg:pt-16 pt-8 lg:pb-12 max-w-3xl ">
    <h1 className="block md:text-4xl text-3xl font-medium text-gray-900 dark:text-zinc-50 tracking-tight">
      Documentation
    </h1>

    <div className="mx-auto mt-4 md:text-lg text-md text-gray-500 dark:text-zinc-500 mb-8">
      Learn how to use Botpress, the complete AI agent platform.
    </div>

    <div className="flex gap-4">
      <button onClick={() => askAi()} className="button w-inline-block rounded-xl">
        <div className="flex items-center gap-2">
          <img id="ai-bolt" src="https://mintcdn.com/botpress/lKQBqQA1hrY6ODf5/homepage-assets/bolt-white-transparent-fill.svg?fit=max&auto=format&n=lKQBqQA1hrY6ODf5&q=85&s=fc5d0c714d53cc665a0a22ce4ffa8057" alt="bolt icon" width="90" height="126" data-path="homepage-assets/bolt-white-transparent-fill.svg" />

          <span>Ask AI</span>
        </div>
      </button>

      <a href="https://discord.gg/botpress" target="_blank" class="discord_banner w-inline-block rounded-xl">
        <div>Get help</div>
      </a>
    </div>
  </div>
</div>

<div className="flex flex-wrap md:gap-8 max-w-[68rem] mx-auto px-8 lg:px-16 flex-col md:flex-row pb-4">
  <div className="home-columns">
    <Card title="ADK" img="https://mintcdn.com/botpress/RdpLu2GLjVpl42tr/homepage-assets/adk.jpg?fit=max&auto=format&n=RdpLu2GLjVpl42tr&q=85&s=947b0d2d58eae11dc699775ce9071523" cta="Get started" href="/adk/introduction" width="1640" height="976" data-path="homepage-assets/adk.jpg">
      TypeScript library for building AI agents from code
    </Card>
  </div>

  <div className="home-columns">
    <Card title="Studio" img="https://mintcdn.com/botpress/RdpLu2GLjVpl42tr/homepage-assets/studio.jpg?fit=max&auto=format&n=RdpLu2GLjVpl42tr&q=85&s=24959a7a77f0d9aea9049e4a4c0efdcd" cta="Build an agent" href="/studio/introduction" width="1640" height="976" data-path="homepage-assets/studio.jpg">
      Visual, drag-and-drop interface for building AI agents
    </Card>
  </div>

  <div className="home-columns">
    <Card title="Botpress Desk" img="https://mintcdn.com/botpress/RdpLu2GLjVpl42tr/homepage-assets/desk.jpg?fit=max&auto=format&n=RdpLu2GLjVpl42tr&q=85&s=85eb1d1e3b36bbf30d8c755348a34925" cta="Import your customers" href="https://desk.support.channel/" width="1640" height="976" data-path="homepage-assets/desk.jpg">
      Customer support workspace for human-AI teams
    </Card>
  </div>
</div>

<div className="flex flex-wrap md:gap-8 max-w-[68rem] mx-auto px-8 lg:px-16 flex-col md:flex-row mt-4">
  <div className="lower-columns">
    <WebchatCard />
  </div>

  <div className="lower-columns">
    <IntegrationsCard />
  </div>
</div>