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

# Alloy Docs

export const ExtraDocsSection = () => {
  const docs = [{
    title: "Buy With Prime Docs",
    icon: "cart-shopping",
    links: [{
      text: "Quick Start",
      href: "/buy-with-prime/quick-start"
    }, {
      text: "Supported Apps",
      href: "/buy-with-prime/supported-apps/amazon-eventbridge"
    }]
  }, {
    title: "Best Buy Docs",
    icon: "store",
    links: [{
      text: "Getting Started",
      href: "/best-buy/introduction"
    }, {
      text: "App Configuration",
      href: "/best-buy/app-configuration"
    }]
  }, {
    title: "Xero Docs",
    icon: "file-lines",
    links: [{
      text: "Integration Guide",
      href: "/xero/introduction"
    }]
  }];
  return <div style={{
    marginTop: '3rem',
    marginBottom: '5rem',
    maxWidth: '70rem',
    marginLeft: 'auto',
    marginRight: 'auto',
    paddingLeft: '1.25rem',
    paddingRight: '1.25rem'
  }}>
        <div className="mt-4 grid gap-6 sm:gap-8 md:grid-cols-2 lg:grid-cols-3">
          {docs.map(doc => <div key={doc.title} className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-[#0b0b0b] p-6 shadow-sm hover:shadow-md transition-shadow">
              <h3 className="flex items-center gap-2 text-[16px] sm:text-[17px] font-semibold text-black dark:text-white mb-4">
                <Icon icon={doc.icon} color="#212bc4" iconType="duotone" />
                {doc.title}
              </h3>


              <ul className="space-y-2 text-[15px]">
                {doc.links.map(link => <li key={link.text}>
                    <a href={link.href} className="block text-black dark:text-white hover:text-blue-600">
                      {link.text}
                    </a>
                  </li>)}
              </ul>
            </div>)}
        </div>
      </div>;
};

export const BrowseByTopic = () => {
  const topics = [{
    title: "Get Started",
    icon: "circle-play",
    links: [{
      text: "Quick Start",
      href: "/embedded/quick-start"
    }, {
      text: "Terminology",
      href: "/embedded/terminology"
    }, {
      text: "Managing Users",
      href: "/embedded/managing-users-and-logs"
    }]
  }, {
    title: "Alloy Modal",
    icon: "window-maximize",
    links: [{
      text: "How it Works",
      href: "/embedded/frontend-javascript-sdk"
    }, {
      text: "Authentication",
      href: "/embedded/frontend-javascript-sdk"
    }]
  }, {
    title: "Building Workflows",
    icon: "code-branch",
    links: [{
      text: "Custom Events",
      href: "/embedded/triggers-and-custom-events"
    }, {
      text: "Field Types",
      href: "/embedded/field-types"
    }, {
      text: "Custom Field Types",
      href: "/embedded/custom-field-types"
    }, {
      text: "Field Mapping",
      href: "/embedded/variable-selector"
    }]
  }, {
    title: "Advanced Features",
    icon: "gear",
    links: [{
      text: "Custom API Calls",
      href: "/embedded/custom-api-calls"
    }, {
      text: "Custom Action",
      href: "/embedded/custom-action"
    }, {
      text: "Custom OAuth",
      href: "/embedded/handling-custom-oauth"
    }, {
      text: "Installation Manager",
      href: "/embedded/installation-manager"
    }]
  }, {
    title: "Customization",
    icon: "sliders",
    links: [{
      text: "Alloy Link",
      href: "/embedded/alloy-link"
    }, {
      text: "Styling the Modal",
      href: "/embedded/styling-the-modal"
    }, {
      text: "Headless Mode",
      href: "/embedded/headless-mode"
    }]
  }, {
    title: "SDKs",
    icon: "code",
    links: [{
      text: "Frontend JavaScript SDK",
      href: "/embedded/frontend-javascript-sdk"
    }, {
      text: "Node.js SDK",
      href: "/embedded/node-sdk"
    }, {
      text: "Python SDK",
      href: "/embedded/python-sdk"
    }]
  }, {
    title: "Logs & Troubleshooting",
    icon: "list-check",
    links: [{
      text: "Handling Errors",
      href: "/embedded/platform/monitoring/handling-errors"
    }, {
      text: "Rate Limits",
      href: "/embedded/platform/monitoring/rate-limits"
    }, {
      text: "Retry Mechanism",
      href: "/embedded/platform/monitoring/retry-mechanism"
    }, {
      text: "Static IP Address",
      href: "/embedded/platform/monitoring/ip-addresses"
    }]
  }, {
    title: "Destinations",
    icon: "database",
    links: [{
      text: "Destinations Glossary",
      href: "/embedded/destinations"
    }, {
      text: "Generating the RSA Signature",
      href: "/embedded/rsa-header-signature"
    }]
  }];
  return <div style={{
    marginTop: '3rem',
    marginBottom: '2rem',
    maxWidth: '70rem',
    marginLeft: 'auto',
    marginRight: 'auto',
    paddingLeft: '1.25rem',
    paddingRight: '1.25rem'
  }}>
      <div className="mx-auto max-w-[1440px]">
        <h2 className="text-2xl font-semibold tracking-[-0.01em] dark:text-white text-black">
          Browse by topic
        </h2>

        <div className="mt-8 grid gap-6 sm:gap-8 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
          {topics.map(topic => <div key={topic.title} className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-[#0b0b0b] p-6 shadow-sm hover:shadow-md transition-shadow">
              <h3 className="flex items-center gap-2 text-[16px] sm:text-[17px] font-semibold text-black dark:text-white mb-4">
                <Icon icon={topic.icon} color="#212bc4" iconType="duotone" />
                {topic.title}
              </h3>

              <ul className="space-y-2 text-[15px]">
                {topic.links.map(link => <li key={link.text}>
                    <a href={link.href} className="block text-black dark:text-white hover:text-blue-600">
                      {link.text}
                    </a>
                  </li>)}
              </ul>
            </div>)}
        </div>
      </div>
    </div>;
};

export function openSearch() {
  document.getElementById('search-bar-entry').click();
}

<div className="relative w-full flex items-center justify-center" style={{ height: '30rem', overflow: 'hidden'}}>
  <div
    id="background-div"
    class="absolute inset-0 dark:hidden"
    style={{
backgroundImage: 'url(https://mintlify-assets.b-cdn.net/widget-bg-1.png), url(https://mintlify-assets.b-cdn.net/carousel-bg.png)',
backgroundSize: 'cover, cover',
backgroundPosition: 'center, center',
backgroundRepeat: 'no-repeat, no-repeat'
}}
  />

  <div
    id="background-div"
    class="absolute inset-0 hidden dark:block"
    style={{
backgroundImage: 'url(https://mintlify-assets.b-cdn.net/widget-bg-1.png)',
backgroundSize: 'cover',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat'
}}
  />

  <div style={{ position: 'absolute', textAlign: 'center', padding: '0 1rem' }}>
    <div
      className="text-white dark:text-white"
      style={{
   fontWeight: '700',
   fontSize: '3rem',
   maxWidth: '50rem',
   margin: '0 auto',
   paddingBottom: '1rem'
  }}
    >
      Alloy Automation Documentation
    </div>

    <p className="text-white dark:text-white font-md" style={{ fontSize: '1rem', maxWidth: '30rem', margin: '0 auto'}}>Let's get started!</p>

    <div className="flex items-center justify-center">
      <button
        type="button"
        className="hidden w-full lg:flex items-center text-sm leading-6 py-3 pl-3 pr-4 text-gray-500 rounded-full"
        id="home-search-entry"
        style={{
    marginTop: '2rem',
    background: '#FFF',
    boxShadow: '0px 1px 4px 0px rgba(8, 9, 10, 0.25), 0px 0px 0px 4px rgba(255, 255, 255, 0.20)',
    cursor: 'pointer',
    textAlign: 'left',
  }}
        onClick={openSearch}
      >
        <svg
          className="h-4 w-4 ml-1.5 flex-none bg-primary hover:bg-gray-600 dark:bg-primary-dark dark:hover:bg-white/70"
          style={{
    marginRight: '0.5rem',
     maskImage:
       'url("https://mintlify.b-cdn.net/v6.5.1/solid/magnifying-glass.svg")',
     maskRepeat: 'no-repeat',
     maskPosition: 'center center',
     maskSize: 'contain',
    }}
        />

        Search or ask...
      </button>
    </div>
  </div>
</div>

<div
  style={{marginTop: '3rem', marginBottom: '5rem', maxWidth: '70rem', marginLeft: 'auto',
marginRight: 'auto', paddingLeft: '1.25rem',
paddingRight: '1.25rem' }}
>
  <div className="flex flex-col items-center justify-center pb-10">
    <h2 className="text-gray-900 text-center dark:text-white text-2xl font-bold pb-4">What is Alloy Automation?</h2>

    <p className="text-gray-900 text-center dark:text-white text-md font-normal pb-4">Alloy Automation is the all-in-one integration platform designed for SaaS and AI. <br /> We offer three ways to build enterprise-grade workflows and connectivity.</p>

    <p className="text-gray-900 text-center dark:text-white text-md font-normal pb-4">The <a href="/connectivity-api/introduction" className="text-[#212bc4]  dark:text-[#6F8FFF] hover:underline">Connectivity API</a> embeds native integrations via a single endpoint. <a href="/embedded/platform/welcome" className="text-[#212bc4] dark:text-[#6F8FFF] hover:underline">Embedded</a> turns integration requests into marketplace offerings, enabling fast builds with minimal engineering. <a href="/mcp/platform/introduction" className="text-[#212bc4] dark:text-[#6F8FFF] hover:underline">MCP</a> provides AI agents secure, remote-hosted access to 1000+ tools with built-in context, permissioning, and authentication.</p>
  </div>

  <h2 className="text-gray-900 text-left dark:text-white text-2xl font-bold pb-4">Browse by Product</h2>

  <div className="flex flex-col items-center justify-center pb-1">
    <CardGroup cols={3}>
      <Card title="MCP" href="/mcp/platform/introduction" icon="server" cta="Explore MCP" iconType="duotone" color="#212bc4">
        Secure, remote-hosted access to 1000+ tools with built-in context, permissioning, and authentication. It's ideal for teams building production-grade LLM-powered features that act across third-party apps.
      </Card>

      <Card title="Embedded" href="/embedded/platform/welcome" icon="connectdevelop" cta="Explore Embedded" iconType="duotone" color="#212bc4">
        <p className="lg:mb-14">Drag-and-drop orchestration tool for creating integrations and mapping data without engineering lift. It's ideal for teams shipping embedded iPaaS experiences quickly.</p>
      </Card>

      <Card title="Connectivity API" href="/connectivity-api/introduction" icon="plug" cta="Explore Connectivity API" iconType="duotone" color="#212bc4">
        <p className="lg:mb-14">Real-time, native integration UIs with a single API, including hosted config and auth flows. It's ideal for teams embedding integrations directly into their product with minimal setup.</p>
      </Card>
    </CardGroup>
  </div>
</div>

<div className="flex flex-col items-center justify-center pb-20 bg-gray-50 dark:bg-[#0b0b0b]">
  <BrowseByTopic />

  <ExtraDocsSection />
</div>