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

> AI agent IDE for building, debugging, and deploying BRICKS applications

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" />

          Preview
        </span>
      </div>
    </div>

    <p className="text-xl text-gray-600 dark:text-gray-300 font-medium mb-2">
      Build, debug, and deploy BRICKS applications <span className="text-[#e2924b]">with AI agents.</span>
    </p>

    <p className="text-lg text-gray-500 dark:text-gray-400 max-w-2xl mb-8 leading-relaxed">
      CTOR is a desktop IDE with integrated AI agents that read, write, and edit code, run commands, preview running apps, and deploy your <a href="/ctor-pkg" className="text-[#e2924b] hover:text-[#d4863f] no-underline font-medium">bricks-ctor</a> applications — all through chat.
    </p>

    <div className="flex flex-wrap gap-3">
      <a href="/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">
        Get started
      </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">
        Learn about 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">Features</h2>

    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
      <FeatureCard icon="🤖" title="AI agent chat" description="Interact with an AI agent that can read, write, edit files, and execute shell commands in your project." href="/ctor/guide/agent-usage" />

      <FeatureCard icon="🧠" title="Multi-model support" description="Choose from Anthropic, OpenAI, Google, GitHub Copilot, or any OpenAI-compatible provider." href="/ctor/reference/models" />

      <FeatureCard icon="⚡" title="Skills system" description="Extend the agent with reusable instruction sets for specialized workflows and domain knowledge." href="/ctor/reference/skills" />

      <FeatureCard icon="🔌" title="MCP integration" description="Connect external tool servers via Model Context Protocol for additional capabilities." href="/ctor/reference/mcp" />

      <FeatureCard icon="🚀" title="Deploy and preview" description="Deploy your app to the BRICKS server and preview it locally with one click." href="/ctor/guide/deployment" />

      <FeatureCard icon="🤝" title="Sub-agents" description="Delegate tasks to specialized agents with focused tools and instructions, scoped globally or per project." href="/ctor/reference/sub-agents" />

      <FeatureCard icon="🔗" title="ACP support" description="Connect external tools like acpx and OpenClaw to the desktop agent via the Agent Client Protocol." href="/ctor/reference/acp" />

      <FeatureCard icon="📂" title="Multi-project" description="Open multiple projects in a single window with per-project sessions and sidebar navigation." href="/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">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 app" description="Download CTOR for macOS or Linux." href="/ctor/guide/installation" linkText="Installation guide" />

      <StepItem number="2" title="Log in" description="Authenticate with your BRICKS workspace using a one-time passcode." href="/ctor/guide/authentication" linkText="Authentication guide" />

      <StepItem number="3" title="Open a project" description="Open a project directory or create a new project." href="/ctor/guide/project-setup" linkText="Project setup" />

      <StepItem number="4" title="Start building" description="Chat with the AI agent to build your application." href="/ctor/guide/agent-usage" linkText="Using the AI agent" />
    </div>
  </div>

  <div className="mb-16">
    <h2 className="text-xs font-semibold uppercase tracking-widest text-gray-400 dark:text-gray-500 mb-6">Download</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">
          Download .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">
          Download .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">
          Download .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">System requirements</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) or 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> runtime installed and in PATH</li>
        <li className="flex items-start gap-2"><span className="text-[#e2924b] mt-0.5">•</span> A <a href="https://bricks.tools" className="text-[#e2924b] no-underline hover:text-[#d4863f]">BRICKS</a> workspace account</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">Supported languages</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> 日本語 (Japanese)</li>
      </ul>
    </div>
  </div>
</div>