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

# Introduction

> Build AI agents once. Deploy everywhere. Connect to anything.

export const HeroCard = ({ filename, title, description, href, icon }) => {
  return (
    <a className="group cursor-pointer pb-8" href={href}>
    
        <div
            className="frame p-2 not-prose relative bg-gray-50/50 rounded-2xl overflow-hidden dark:bg-gray-800/25 group-hover:scale-105 transition-all duration-100"
        >
            <div
                className="absolute inset-0 bg-grid-neutral-200/20 [mask-image:linear-gradient(0deg,#fff,rgba(255,255,255,0.6))] dark:bg-grid-white/5 dark:[mask-image:linear-gradient(0deg,rgba(255,255,255,0.1),rgba(255,255,255,0.5))]"
            ></div>
            <div className="relative rounded-xl overflow-hidden flex justify-center">
                <div className="flex items-center justify-center h-[200px] md:w-64 lg:w-80 p-4 text-gray-400 dark:text-zinc-500  transition-colors duration-100">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-[70px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" dangerouslySetInnerHTML={{ __html: icon }}></svg>
                </div>
            </div>
            <div className="absolute inset-0 pointer-events-none border border-black/5 rounded-2xl dark:border-white/5"></div>
        </div>

        <h3 className="mt-5 text-gray-900 dark:text-zinc-50 font-medium">
            {title}
        </h3>
        <span className="mt-1.5">{description}</span>
    </a>
  );
};

<div className="relative">
  <div className="relative z-10 px-4 py-16 lg:py-48 lg:pb-24 max-w-3xl mx-auto">
    <h1 className="block text-4xl font-medium text-center text-gray-900 dark:text-zinc-50 tracking-tight">
      Documentation
    </h1>

    <div className="max-w-xl mx-auto px-4 mt-4 text-lg text-center text-gray-500 dark:text-zinc-500">
      Build AI agents once. Deploy everywhere. Connect to anything.
    </div>

    <div className="px-6 lg:px-0 mt-12 lg:mt-24 grid sm:grid-cols-2 lg:grid-cols-2 gap-x-6 gap-y-4">
      <HeroCard icon={'<path d="M4 14h6"/><path d="M4 2h10"/><rect x="4" y="18" width="16" height="4" rx="1"/><rect x="4" y="6" width="16" height="4" rx="1"/>'} filename="C" title="For Creators" description="Launch branded agents that capture subscribers—no code required" href="/creators/introduction" />

      <HeroCard icon={'<path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/>'} filename="S" title="For SaaS" description="Proactive AI agents that engage users at friction points" href="/saas/introduction" />

      <HeroCard icon={'<path d="m10 9-3 3 3 3"/><path d="m14 15 3-3-3-3"/><path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"/>'} filename="D" title="For Developers" description="Ship multi-channel agents with one unified SDK" href="/developers/introduction" />

      <HeroCard icon={'<path d="M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z"/><path d="m2 22 3-3"/><path d="M7.5 13.5 10 11"/><path d="M10.5 16.5 13 14"/><path d="m18 3-4 4h6l-4 4"/>'} filename="I" title="Integrations" description="Connect your agents to 50+ services or build custom ones" href="/integrations/introduction" />
    </div>
  </div>
</div>