> ## 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

> BRICKS Foundation デバイスから LLM や音声認識の推論を 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">プレビュー</span>
      </div>
    </div>

    <p className="text-xl text-gray-600 dark:text-gray-300 font-medium mb-2">
      重いモデルを<span className="text-[#e2924b]">適切なハードウェアで。</span>
    </p>

    <p className="text-lg text-gray-500 dark:text-gray-400 max-w-2xl mb-8 leading-relaxed">
      BRICKS Buttress は、LLM 推論や音声認識といった計算負荷の高い generator 処理を、<a href="/ja/foundation" className="text-[#e2924b] hover:text-[#d4863f] no-underline font-medium">BRICKS Foundation</a> デバイスから同じ LAN 上のより高性能なマシンへオフロードするバックエンドサービスです。タブレットやキオスクで大規模モデルがローカル実行できないとき、同じ generator API のまま透過的に Buttress サーバーへ処理を委譲します。
    </p>

    <div className="flex flex-wrap gap-3">
      <a href="/ja/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">
        サーバーをインストール
      </a>

      <a href="/ja/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">
        ワークスペースとペアリング
      </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">機能</h2>

    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
      <FeatureCard icon="🧠" title="LLM オフロード" description="モバイル端末では足りない GPU やメモリを備えたサーバーで llama.cpp（GGML）と MLX モデルを実行します。" href="/ja/buttress/configuration" />

      <FeatureCard icon="🎙️" title="音声認識オフロード" description="Whisper でサーバー側で文字起こし。デバイスは HTTP で音声をアップロードし、結果をストリームで受け取ります。" href="/ja/buttress/configuration" />

      <FeatureCard icon="📡" title="LAN 自動検出" description="バインド済みの launcher は UDP でワークスペースのサーバーを自動的に発見します。URL の手入力は不要。" href="/ja/buttress/autodiscovery" />

      <FeatureCard icon="🔐" title="ワークスペーススコープ認証" description="サーバーを 1 つの BRICKS ワークスペースとペアリング。ワークスペース JWT を持つクライアントのみ接続できます。" href="/ja/buttress/workspace-binding" />

      <FeatureCard icon="⚖️" title="ハードウェア能力比較" description="サーバーがクライアントと自身のハードウェアを比較し、どちら側で実行すべきか推奨します。" />

      <FeatureCard icon="♻️" title="共有モデル context" description="参照カウント方式の generator により、複数のクライアントで読み込み済みモデルを共有し、不要になれば自動で解放します。" />
    </div>
  </div>

  <div className="mb-16">
    <h2 className="text-xs font-semibold uppercase tracking-widest text-gray-400 dark:text-gray-500 mb-6">クイックスタート</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="サーバーをインストール" description="高性能 GPU や十分な RAM を持つマシンに bricks-buttress をインストールします。" href="/ja/buttress/installation" linkText="インストールガイド" />

      <StepItem number="2" title="generator を設定" description="ホストする LLM・STT モデルを列挙した TOML 設定を記述します。" href="/ja/buttress/configuration" linkText="設定リファレンス" />

      <StepItem number="3" title="ワークスペースとペアリング" description="BRICKS CLI で bricks buttress bind を実行し、サーバーをワークスペースに固定して JWT 認証を有効化します。" href="/ja/buttress/workspace-binding" linkText="ワークスペースバインディング" />

      <StepItem number="4" title="brick で有効化" description="BRICKS Controller の Config Editor で各 LLM/STT brick の Buttress を有効にします。Foundation デバイスは自動でサーバーを検出します。" href="/ja/foundation/buttress" linkText="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">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">適している</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> 端末に載せるには大きすぎるモデル</li>
          <li className="flex items-start gap-2"><span className="text-[#e2924b] mt-0.5">•</span> 同一 LAN 上の複数デバイスで 1 つのモデルを共有</li>
          <li className="flex items-start gap-2"><span className="text-[#e2924b] mt-0.5">•</span> 高速な最初のトークン到達が求められるデバイス</li>
          <li className="flex items-start gap-2"><span className="text-[#e2924b] mt-0.5">•</span> バッテリーに敏感なモバイル展開</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">必要ない</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> 端末上で問題なく動作する小さなモデル</li>
          <li className="flex items-start gap-2"><span className="text-[#e2924b] mt-0.5">•</span> LAN に接続できないエアギャップデバイス</li>
          <li className="flex items-start gap-2"><span className="text-[#e2924b] mt-0.5">•</span> 単一デバイスのプロトタイプやデモ</li>
        </ul>
      </div>
    </div>
  </div>
</div>