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

# CTOR

> BRICKS アプリケーションを構築・デバッグ・デプロイするための AI エージェント IDE

export const FeatureCard = ({ icon, title, description, href }) => (
  <a href={href} className="group block rounded-2xl border border-gray-200 dark:border-white/10 bg-white dark:bg-white/5 p-6 no-underline 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>
  </a>
);

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">
      <img src="https://mintcdn.com/bricks-207cc1f2/-Outo6kaDlAzpH-5/logo/icon-ctor.png?fit=max&auto=format&n=-Outo6kaDlAzpH-5&q=85&s=d07e1b9edda5184d1d70d67d05b8fc5e" alt="CTOR" className="w-16 h-16 rounded-2xl" width="100" height="100" data-path="logo/icon-ctor.png" />

      <div>
        <h1 className="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white tracking-tight m-0">
          CTOR
        </h1>

        <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400 border border-amber-200 dark:border-amber-800/40 mt-2">
          <span className="w-1.5 h-1.5 rounded-full bg-amber-500 animate-pulse" />

          プレビュー
        </span>
      </div>
    </div>

    <p className="text-xl text-gray-600 dark:text-gray-300 font-medium mb-2">
      AI エージェントと <span className="text-[#e2924b]">BRICKS アプリを構築・デバッグ・デプロイ。</span>
    </p>

    <p className="text-lg text-gray-500 dark:text-gray-400 max-w-2xl mb-8 leading-relaxed">
      CTOR は AI エージェントを統合したデスクトップ IDE です。コードの読み書き・編集、コマンド実行、実行中アプリのプレビュー、<a href="/ja/ctor-pkg" className="text-[#e2924b] hover:text-[#d4863f] no-underline font-medium">bricks-ctor</a> アプリのデプロイを、すべてチャットから実行できます。
    </p>

    <div className="flex flex-wrap gap-3">
      <a href="/ja/ctor/guide/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="https://bricks.tools" 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">
        BRICKS について
      </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="AI エージェントチャット" description="ファイルの読み書き・編集やシェルコマンドの実行ができる AI エージェントと対話します。" href="/ja/ctor/guide/agent-usage" />

      <FeatureCard icon="🧠" title="マルチモデル対応" description="Anthropic、OpenAI、Google、GitHub Copilot、または OpenAI 互換プロバイダーから選択可能。" href="/ja/ctor/reference/models" />

      <FeatureCard icon="⚡" title="スキルシステム" description="再利用可能な指示セットでエージェントを拡張し、専用ワークフローや領域知識を追加します。" href="/ja/ctor/reference/skills" />

      <FeatureCard icon="🔌" title="MCP 統合" description="Model Context Protocol により外部ツールサーバーに接続し、機能を拡張します。" href="/ja/ctor/reference/mcp" />

      <FeatureCard icon="🚀" title="デプロイとプレビュー" description="アプリをワンクリックで BRICKS サーバーにデプロイし、ローカルでプレビューできます。" href="/ja/ctor/guide/deployment" />

      <FeatureCard icon="🤝" title="サブエージェント" description="専用ツールと指示を持つサブエージェントにタスクを委任。グローバルまたはプロジェクト単位で設定可能。" href="/ja/ctor/reference/sub-agents" />

      <FeatureCard icon="🔗" title="ACP 対応" description="Agent Client Protocol により acpx や OpenClaw などの外部ツールをデスクトップエージェントに接続します。" href="/ja/ctor/reference/acp" />

      <FeatureCard icon="📂" title="マルチプロジェクト" description="単一ウィンドウで複数プロジェクトを開き、プロジェクトごとのセッションとサイドバーナビゲーションを使用できます。" href="/ja/ctor/guide/project-setup" />
    </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="macOS または Linux 向けの CTOR をダウンロードします。" href="/ja/ctor/guide/installation" linkText="インストールガイド" />

      <StepItem number="2" title="ログイン" description="ワンタイムパスコードで BRICKS ワークスペースに認証します。" href="/ja/ctor/guide/authentication" linkText="認証ガイド" />

      <StepItem number="3" title="プロジェクトを開く" description="プロジェクトディレクトリを開くか、新規プロジェクトを作成します。" href="/ja/ctor/guide/project-setup" linkText="プロジェクト設定" />

      <StepItem number="4" title="構築を開始" description="AI エージェントとチャットしてアプリを構築します。" href="/ja/ctor/guide/agent-usage" linkText="AI エージェントの使い方" />
    </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-3 gap-4">
      <a href="https://cdn.bricks.tools/bricks-project-desktop/release/CTOR-arm64.dmg" className="group block rounded-2xl border border-gray-200 dark:border-white/10 bg-white dark:bg-white/5 p-6 no-underline hover:border-[#e2924b]/40 hover:shadow-lg hover:shadow-[#e2924b]/5 transition-all duration-200 text-center">
        <h3 className="text-sm font-semibold text-gray-900 dark:text-white m-0">macOS</h3>
        <p className="text-xs text-gray-400 dark:text-gray-500 mt-1 mb-3">Apple Silicon (ARM64)</p>

        <span className="inline-flex items-center px-3 py-1.5 rounded-lg bg-[#e2924b]/10 text-[#e2924b] text-xs font-medium group-hover:bg-[#e2924b] group-hover:text-white transition-colors">
          .dmg をダウンロード
        </span>
      </a>

      <a href="https://cdn.bricks.tools/bricks-project-desktop/release/CTOR-x86_64.AppImage" className="group block rounded-2xl border border-gray-200 dark:border-white/10 bg-white dark:bg-white/5 p-6 no-underline hover:border-[#e2924b]/40 hover:shadow-lg hover:shadow-[#e2924b]/5 transition-all duration-200 text-center">
        <h3 className="text-sm font-semibold text-gray-900 dark:text-white m-0">Linux x64</h3>
        <p className="text-xs text-gray-400 dark:text-gray-500 mt-1 mb-3">Intel / AMD (x86\_64)</p>

        <span className="inline-flex items-center px-3 py-1.5 rounded-lg bg-[#e2924b]/10 text-[#e2924b] text-xs font-medium group-hover:bg-[#e2924b] group-hover:text-white transition-colors">
          .AppImage をダウンロード
        </span>
      </a>

      <a href="https://cdn.bricks.tools/bricks-project-desktop/release/CTOR-arm64.AppImage" className="group block rounded-2xl border border-gray-200 dark:border-white/10 bg-white dark:bg-white/5 p-6 no-underline hover:border-[#e2924b]/40 hover:shadow-lg hover:shadow-[#e2924b]/5 transition-all duration-200 text-center">
        <h3 className="text-sm font-semibold text-gray-900 dark:text-white m-0">Linux ARM64</h3>
        <p className="text-xs text-gray-400 dark:text-gray-500 mt-1 mb-3">ARM (aarch64)</p>

        <span className="inline-flex items-center px-3 py-1.5 rounded-lg bg-[#e2924b]/10 text-[#e2924b] text-xs font-medium group-hover:bg-[#e2924b] group-hover:text-white transition-colors">
          .AppImage をダウンロード
        </span>
      </a>
    </div>
  </div>

  <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> macOS (Apple Silicon) または Linux (x64 / arm64)</li>
        <li className="flex items-start gap-2"><span className="text-[#e2924b] mt-0.5">•</span> <a href="https://bun.sh" className="text-[#e2924b] no-underline hover:text-[#d4863f]">Bun</a> ランタイムがインストールされ、PATH に追加されていること</li>
        <li className="flex items-start gap-2"><span className="text-[#e2924b] mt-0.5">•</span> <a href="https://bricks.tools" className="text-[#e2924b] no-underline hover:text-[#d4863f]">BRICKS</a> ワークスペースアカウント</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> English</li>
        <li className="flex items-start gap-2"><span className="text-[#e2924b] mt-0.5">•</span> 繁體中文 (Traditional Chinese)</li>
        <li className="flex items-start gap-2"><span className="text-[#e2924b] mt-0.5">•</span> 日本語</li>
      </ul>
    </div>
  </div>
</div>