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

# BRICKS Buttress

> Offload LLM and speech-to-text inference from BRICKS Foundation devices to a server on your LAN

export const FeatureCard = ({ icon, title, description, href }) => {
  const Tag = href ? 'a' : 'div';
  return (
    <Tag href={href} className={`block rounded-2xl border border-gray-200 dark:border-white/10 bg-white dark:bg-white/5 p-6 no-underline ${href ? 'group hover:border-[#e2924b]/40 hover:shadow-lg hover:shadow-[#e2924b]/5 transition-all duration-200' : ''}`}>
      <div className="flex items-center gap-3 mb-3">
        <span className="text-2xl">{icon}</span>
        <h3 className="text-base font-semibold text-gray-900 dark:text-white m-0">{title}</h3>
      </div>
      <p className="text-sm text-gray-500 dark:text-gray-400 m-0 leading-relaxed">{description}</p>
    </Tag>
  );
};

export const StepItem = ({ number, title, description, href, linkText }) => (
  <div className="flex gap-4">
    <div className="flex-shrink-0 w-8 h-8 rounded-full bg-[#e2924b] flex items-center justify-center">
      <span className="text-sm font-bold text-white">{number}</span>
    </div>
    <div className="pb-8">
      <h4 className="text-sm font-semibold text-gray-900 dark:text-white m-0">{title}</h4>
      <p className="text-sm text-gray-500 dark:text-gray-400 mt-1 mb-1">{description}</p>
      {href && <a href={href} className="text-sm font-medium text-[#e2924b] hover:text-[#d4863f] no-underline">{linkText} →</a>}
    </div>
  </div>
);

<div className="max-w-5xl mx-auto px-6 py-16">
  <div className="mb-16">
    <div className="flex items-center gap-4 mb-6">
      <div>
        <h1 className="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white tracking-tight m-0">
          BRICKS Buttress
        </h1>

        <span className="inline-flex items-center mt-3 px-2.5 py-1 rounded-md bg-[#e2924b]/10 text-[#e2924b] text-xs font-semibold">Preview</span>
      </div>
    </div>

    <p className="text-xl text-gray-600 dark:text-gray-300 font-medium mb-2">
      Heavy models, <span className="text-[#e2924b]">on the right hardware.</span>
    </p>

    <p className="text-lg text-gray-500 dark:text-gray-400 max-w-2xl mb-8 leading-relaxed">
      BRICKS Buttress is a backend service that offloads compute-intensive generator work — LLM inference, speech-to-text — from <a href="/foundation" className="text-[#e2924b] hover:text-[#d4863f] no-underline font-medium">BRICKS Foundation</a> devices to a more powerful machine on the same LAN. When a tablet or kiosk can't run a large model locally, it transparently delegates the work to a Buttress server while keeping the same generator API.
    </p>

    <div className="flex flex-wrap gap-3">
      <a href="/buttress/installation" className="inline-flex items-center px-5 py-2.5 rounded-lg bg-[#e2924b] hover:bg-[#d4863f] text-white text-sm font-medium no-underline transition-colors">
        Install the server
      </a>

      <a href="/buttress/workspace-binding" className="inline-flex items-center px-5 py-2.5 rounded-lg border border-gray-300 dark:border-white/15 text-gray-700 dark:text-gray-300 text-sm font-medium no-underline hover:bg-gray-50 dark:hover:bg-white/5 transition-colors">
        Pair with a workspace
      </a>
    </div>
  </div>

  <div className="mb-16">
    <h2 className="text-xs font-semibold uppercase tracking-widest text-gray-400 dark:text-gray-500 mb-6">Features</h2>

    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
      <FeatureCard icon="🧠" title="LLM offloading" description="Run llama.cpp (GGML) and MLX models on a server with the GPU and memory headroom mobile devices lack." href="/buttress/configuration" />

      <FeatureCard icon="🎙️" title="Speech-to-text offloading" description="Transcribe audio with Whisper on the server. Devices upload audio over HTTP and stream results back." href="/buttress/configuration" />

      <FeatureCard icon="📡" title="LAN auto-discovery" description="Bound launchers find their workspace's servers automatically over UDP. No manual URL entry." href="/buttress/autodiscovery" />

      <FeatureCard icon="🔐" title="Workspace-scoped auth" description="Pair a server with a single BRICKS workspace; only clients holding a workspace JWT may connect." href="/buttress/workspace-binding" />

      <FeatureCard icon="⚖️" title="Capability comparison" description="The server compares client and server hardware and recommends where to run each request." />

      <FeatureCard icon="♻️" title="Shared model contexts" description="Reference-counted generators let multiple clients share a loaded model and clean up automatically." />
    </div>
  </div>

  <div className="mb-16">
    <h2 className="text-xs font-semibold uppercase tracking-widest text-gray-400 dark:text-gray-500 mb-6">Quick start</h2>

    <div className="rounded-2xl border border-gray-200 dark:border-white/10 bg-white dark:bg-white/5 p-8">
      <StepItem number="1" title="Install the server" description="Install bricks-buttress on a machine with a capable GPU or plenty of RAM." href="/buttress/installation" linkText="Installation guide" />

      <StepItem number="2" title="Configure generators" description="Write a TOML config that lists the LLM and STT models you want to host." href="/buttress/configuration" linkText="Configuration reference" />

      <StepItem number="3" title="Pair with a workspace" description="Run bricks buttress bind from BRICKS CLI to lock the server to your BRICKS workspace and turn on JWT auth." href="/buttress/workspace-binding" linkText="Workspace binding" />

      <StepItem number="4" title="Enable on a brick" description="In BRICKS Controller's Config Editor, turn on Buttress on each LLM/STT brick. Foundation devices discover the server automatically." href="/foundation/buttress" linkText="Use from Foundation" />
    </div>
  </div>

  <div className="mb-16">
    <h2 className="text-xs font-semibold uppercase tracking-widest text-gray-400 dark:text-gray-500 mb-6">When to use Buttress</h2>

    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
      <div className="rounded-2xl border border-gray-200 dark:border-white/10 bg-white dark:bg-white/5 p-6">
        <h3 className="text-sm font-semibold text-gray-900 dark:text-white mb-3">Good fit</h3>

        <ul className="text-sm text-gray-500 dark:text-gray-400 space-y-2 m-0 p-0 list-none">
          <li className="flex items-start gap-2"><span className="text-[#e2924b] mt-0.5">•</span> Models too large to fit on the device</li>
          <li className="flex items-start gap-2"><span className="text-[#e2924b] mt-0.5">•</span> Many devices on the same LAN sharing one model</li>
          <li className="flex items-start gap-2"><span className="text-[#e2924b] mt-0.5">•</span> Devices that need fast first-token latency</li>
          <li className="flex items-start gap-2"><span className="text-[#e2924b] mt-0.5">•</span> Battery-sensitive mobile deployments</li>
        </ul>
      </div>

      <div className="rounded-2xl border border-gray-200 dark:border-white/10 bg-white dark:bg-white/5 p-6">
        <h3 className="text-sm font-semibold text-gray-900 dark:text-white mb-3">Not needed</h3>

        <ul className="text-sm text-gray-500 dark:text-gray-400 space-y-2 m-0 p-0 list-none">
          <li className="flex items-start gap-2"><span className="text-[#e2924b] mt-0.5">•</span> Small models that already run well on-device</li>
          <li className="flex items-start gap-2"><span className="text-[#e2924b] mt-0.5">•</span> Air-gapped devices with no LAN connectivity</li>
          <li className="flex items-start gap-2"><span className="text-[#e2924b] mt-0.5">•</span> Single-device prototypes or demos</li>
        </ul>
      </div>
    </div>
  </div>
</div>