> ## Documentation Index
> Fetch the complete documentation index at: https://smithers-feat-claude-workflow-mirror.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Smithers

> The durable runtime for agentic workflows. Any model, any harness, survives a crash.

<div className="relative w-full overflow-hidden min-h-screen bg-slate-50 text-slate-800 dark:bg-[#030712] dark:text-slate-300 selection:bg-[#00D2A0]/30 selection:text-slate-900 dark:selection:text-white pb-32 font-sans font-medium">
  <div className="absolute inset-0 pointer-events-none overflow-hidden">
    <div className="hidden dark:block absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.015)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.015)_1px,transparent_1px)] bg-[size:32px_32px] [mask-image:radial-gradient(ellipse_80%_60%_at_50%_0%,#000_100%,transparent_100%)]" />

    <div className="block dark:hidden absolute inset-0 bg-[linear-gradient(rgba(0,0,0,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(0,0,0,0.02)_1px,transparent_1px)] bg-[size:32px_32px] [mask-image:radial-gradient(ellipse_80%_60%_at_50%_0%,#000_100%,transparent_100%)]" />

    <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-[1200px] h-[600px] bg-[radial-gradient(ellipse_at_top,rgba(0,210,160,0.04)_0%,transparent_70%)] dark:bg-[radial-gradient(ellipse_at_top,rgba(0,210,160,0.06)_0%,transparent_70%)]" />
  </div>

  <section className="relative pt-24 pb-16 px-6 max-w-7xl mx-auto">
    <div className="flex flex-col lg:flex-row gap-16 items-center">
      <div className="relative z-10 flex-1 flex flex-col items-start">
        {/* Badge */}

        <div className="inline-flex items-center gap-2.5 px-3 py-1.5 rounded-full border border-slate-200/50 dark:border-white/5 bg-slate-100 dark:bg-white/5 shadow-sm text-slate-700 dark:text-slate-300 text-xs font-bold uppercase tracking-[0.1em] mb-8">
          <span className="relative flex h-2 w-2">
            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#00D2A0] opacity-50" />

            <span className="relative inline-flex rounded-full h-2 w-2 bg-[#00D2A0]" />
          </span>

          <span className="opacity-90">Durable runtime for AI agents</span>
        </div>

        {/* Headline */}

        <h1 className="m-0 text-5xl sm:text-6xl md:text-7xl font-extrabold tracking-[-0.02em] leading-[1.05] text-slate-900 dark:text-white drop-shadow-sm">
          Durable orchestration for{" "}
          <span className="text-transparent bg-clip-text bg-gradient-to-br from-[#00D2A0] to-[#047857]">agentic workflows.</span>
        </h1>

        {/* Subtitle */}

        <p className="mt-8 text-lg sm:text-xl leading-relaxed text-slate-600 dark:text-slate-400 max-w-xl font-medium">
          The topology you build changes every quarter. The runtime underneath doesn't. Smithers persists every step, so a crash is a resume point, not lost work, and a long job is something you walk away from. Any model, any harness, open source.
        </p>

        {/* CTA Buttons */}

        <div className="flex flex-wrap gap-4 mt-10">
          <a href="/guide/get-started" className="inline-flex items-center justify-center px-8 py-3.5 text-base font-bold text-white dark:text-[#030712] bg-[#000] dark:bg-[#00D2A0] rounded-xl transition-all hover:scale-[1.02] shadow-[0_10px_30px_-10px_rgba(0,0,0,0.5)] dark:shadow-[0_10px_30px_-10px_rgba(0,210,160,0.3)]">
            Read the docs
          </a>

          <a href="/introduction" className="inline-flex items-center justify-center px-8 py-3.5 text-base font-semibold text-slate-700 dark:text-slate-200 bg-slate-100 dark:bg-white/5 border border-transparent dark:border-white/5 rounded-xl transition-all hover:bg-slate-200 dark:hover:bg-white/10">
            Docs for agents →
          </a>
        </div>

        {/* Quick Install Command */}

        <div className="mt-14 relative group">
          <div className="mb-3 flex items-center gap-2 ml-1">
            <div className="w-1 h-1 rounded-full bg-[#00D2A0]" />

            <span className="text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-500">
              Run this in your project
            </span>
          </div>

          <div className="absolute -inset-0.5 bg-gradient-to-r from-[#00D2A0] to-[#047857] rounded-xl blur opacity-0 group-hover:opacity-20 transition duration-500" />

          <div
            className="relative flex items-center justify-between gap-4 px-5 py-3 bg-white dark:bg-[#0A0D15] border border-slate-200 dark:border-white/10 rounded-xl cursor-pointer transition-all duration-300 active:scale-[0.98]"
            onClick={() => {
          navigator.clipboard.writeText('bunx smithers-orchestrator init');
          const t = document.getElementById('copy-text');
          const check = document.getElementById('copy-check');
          if (t && check) {
            t.classList.add('text-[#00D2A0]');
            check.classList.remove('hidden');
            setTimeout(() => {
              t.classList.remove('text-[#00D2A0]');
              check.classList.add('hidden');
            }, 2000);
          }
        }}
          >
            <div className="flex items-center gap-3">
              <span className="text-[#00D2A0] font-mono text-sm font-bold">\$</span>

              <code id="copy-text" className="text-sm sm:text-base font-mono font-medium text-slate-700 dark:text-slate-300 transition-colors">
                bunx smithers-orchestrator init
              </code>
            </div>

            <div id="copy-check" className="hidden text-[#00D2A0]">
              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
              </svg>
            </div>
          </div>

          <div className="mt-3 ml-1 text-xs text-slate-400 dark:text-slate-500">
            Creates an editable <code className="text-[11px] bg-slate-100 dark:bg-white/10 rounded px-1">hello.mdx</code> workflow you can run immediately, then installs the <code className="text-[11px] bg-slate-100 dark:bg-white/10 rounded px-1">smithers</code> skill into your agents.
          </div>
        </div>
      </div>

      {/* Hero Visual: a live durable run */}

      <div className="relative group flex-1 w-full min-w-0 lg:max-w-[50%] perspective-1000 mt-12 lg:mt-0">
        <div className="absolute -inset-1 bg-[#00D2A0]/10 rounded-[2rem] blur-xl opacity-0 group-hover:opacity-40 transition duration-1000" />

        <div className="relative rounded-2xl border border-slate-200/50 dark:border-white/10 bg-[#F8FAFC] dark:bg-[#0A0D15] shadow-2xl dark:shadow-[0_40px_80px_-20px_rgba(0,0,0,0.6)] overflow-hidden transition-all duration-500 transform-gpu lg:rotate-y-[-2deg] lg:rotate-x-[1deg] group-hover:rotate-0">
          <div className="flex items-center justify-between px-4 py-3 border-b border-slate-200/50 dark:border-white/5 bg-slate-100/50 dark:bg-white/5">
            <div className="flex items-center gap-2 px-1">
              <div className="w-2.5 h-2.5 rounded-full bg-slate-300 dark:bg-slate-700" />

              <div className="w-2.5 h-2.5 rounded-full bg-slate-300 dark:bg-slate-700" />

              <div className="w-2.5 h-2.5 rounded-full bg-slate-300 dark:bg-slate-700" />
            </div>

            <div className="absolute left-1/2 -translate-x-1/2 text-slate-500 dark:text-slate-500 text-xs font-mono font-medium">
              ship-it · a7b93f2
            </div>

            <span className="inline-flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest text-[#00D2A0]">
              <span className="w-1.5 h-1.5 rounded-full bg-[#00D2A0] animate-pulse" /> running
            </span>
          </div>

          <div className="p-6 font-mono text-[13px] leading-[1.7]">
            <div className="text-slate-500 dark:text-slate-500 mb-4">
              <span className="text-[#00D2A0]">you</span> > Research, plan, then implement. Pause for my approval before you ship.
            </div>

            <div className="flex flex-col gap-2.5">
              <div className="flex items-center gap-3">
                <span className="text-[#00D2A0]">✓</span>
                <span className="text-slate-700 dark:text-slate-300 flex-1">research</span>
                <span className="text-[10px] uppercase tracking-wider text-slate-400 dark:text-slate-600">persisted</span>
              </div>

              <div className="flex items-center gap-3">
                <span className="text-[#00D2A0]">✓</span>
                <span className="text-slate-700 dark:text-slate-300 flex-1">plan</span>
                <span className="text-[10px] uppercase tracking-wider text-slate-400 dark:text-slate-600">persisted</span>
              </div>

              <div className="flex items-center gap-3">
                <span className="text-[#1F6FEB] animate-pulse">↻</span>
                <span className="text-slate-900 dark:text-white flex-1">implement <span className="text-slate-400 dark:text-slate-500">(resumed)</span></span>
                <span className="text-[10px] uppercase tracking-wider text-[#1F6FEB]">running</span>
              </div>

              <div className="flex items-center gap-3 opacity-70">
                <span className="text-[#FFBD2E]">⏸</span>
                <span className="text-slate-700 dark:text-slate-300 flex-1">approval to ship</span>
                <span className="text-[10px] uppercase tracking-wider text-[#FFBD2E]">waiting</span>
              </div>
            </div>

            <div className="mt-6 pt-4 border-t border-slate-100 dark:border-white/10 text-[11px] text-slate-400 dark:text-slate-600">
              crash-safe · resumes from the last persisted step
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section className="relative py-8 px-6 max-w-5xl mx-auto z-10 w-full text-center">
    <span className="text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-500">
      Model and harness agnostic
    </span>

    <div className="mt-5 flex flex-wrap items-center justify-center gap-2.5">
      {["Claude Code", "Codex", "Cursor", "Gemini", "Pi", "Antigravity", "Kimi", "+ any AI SDK model"].map((name) => (
                  <span key={name} className="px-3.5 py-1.5 rounded-full border border-slate-200 dark:border-white/10 bg-white dark:bg-white/5 text-sm font-semibold text-slate-700 dark:text-slate-300">
                    {name}
                  </span>
                ))}
    </div>

    <p className="mt-5 text-slate-500 dark:text-slate-400 max-w-xl mx-auto font-medium">
      Point each task at whichever agent and model is best for the job. Swap the harness without rewriting the workflow.
    </p>
  </section>

  <section className="relative py-24 px-6 max-w-4xl mx-auto">
    <div className="text-center mb-12">
      <div className="inline-flex items-center px-4 py-1.5 rounded-full border border-slate-200 dark:border-white/5 bg-slate-100/50 dark:bg-white/5 text-slate-700 dark:text-slate-400 text-[10px] font-bold uppercase tracking-widest mb-6">Why Smithers</div>

      <h2 className="text-4xl md:text-5xl font-extrabold tracking-tight text-slate-900 dark:text-white mb-6 leading-[1.1]">
        The right way to build an agent <br className="hidden sm:block" /> changes every six months.
      </h2>

      <p className="text-lg text-slate-600 dark:text-slate-400 font-medium leading-relaxed max-w-2xl mx-auto">
        Chains. ReAct. Crews. Swarms. Background agents. Subagent fan-out. Couple your infrastructure to any one of them and you've already rebuilt twice. One layer underneath never changes: durable orchestration. Smithers is that layer.
      </p>
    </div>

    {/* Three layers */}

    <div className="flex flex-col gap-3 max-w-2xl mx-auto">
      <div className="flex items-center justify-between gap-4 px-6 py-4 rounded-2xl border border-slate-200/60 dark:border-white/5 bg-slate-100/40 dark:bg-[#0B1221]/40">
        <div>
          <strong className="block text-slate-900 dark:text-white font-bold">Model</strong>
          <span className="text-sm text-slate-500 dark:text-slate-400">Claude, GPT, Gemini, Kimi</span>
        </div>

        <span className="text-[10px] font-bold uppercase tracking-widest text-[#F87171]">Volatile · weekly</span>
      </div>

      <div className="flex items-center justify-between gap-4 px-6 py-4 rounded-2xl border border-slate-200/60 dark:border-white/5 bg-slate-100/40 dark:bg-[#0B1221]/40">
        <div>
          <strong className="block text-slate-900 dark:text-white font-bold">Topology</strong>
          <span className="text-sm text-slate-500 dark:text-slate-400">ReAct, crew, swarm, background agents</span>
        </div>

        <span className="text-[10px] font-bold uppercase tracking-widest text-[#FFBD2E]">Fluid · quarterly</span>
      </div>

      <div className="flex items-center justify-between gap-4 px-6 py-5 rounded-2xl border border-[#00D2A0]/30 bg-[#00D2A0]/[0.06] dark:bg-[#00D2A0]/[0.04]">
        <div>
          <strong className="block text-slate-900 dark:text-white font-bold">Orchestration <span className="text-[#00D2A0]">· this is Smithers</span></strong>
          <span className="text-sm text-slate-600 dark:text-slate-300">Durable steps, retries, state, approvals, observability</span>
        </div>

        <span className="text-[10px] font-bold uppercase tracking-widest text-[#00D2A0]">Stable · doesn't change</span>
      </div>
    </div>

    {/* Three guarantees */}

    <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mt-12">
      <div className="p-6 rounded-2xl bg-slate-100/50 dark:bg-[#0B1221]/50 border border-slate-200/50 dark:border-white/5">
        <strong className="block text-slate-900 dark:text-white font-bold mb-1.5">Durable</strong>
        <span className="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">Every step is checkpointed the moment it finishes. A crash, a closed laptop, a flaky tool: all resume points.</span>
      </div>

      <div className="p-6 rounded-2xl bg-slate-100/50 dark:bg-[#0B1221]/50 border border-slate-200/50 dark:border-white/5">
        <strong className="block text-slate-900 dark:text-white font-bold mb-1.5">Composable</strong>
        <span className="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">Review loops, panels, debates, sagas. Named patterns are small TSX components on the substrate. Read them, fork them.</span>
      </div>

      <div className="p-6 rounded-2xl bg-slate-100/50 dark:bg-[#0B1221]/50 border border-slate-200/50 dark:border-white/5">
        <strong className="block text-slate-900 dark:text-white font-bold mb-1.5">Observable</strong>
        <span className="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">Every transition, attempt, and approval is a SQLite row. Prometheus metrics and traces with no setup.</span>
      </div>
    </div>
  </section>

  <section className="relative py-16 px-6 max-w-5xl mx-auto border-t border-slate-200 dark:border-white/5">
    <div className="text-center mb-12">
      <h2 className="text-3xl md:text-4xl font-extrabold tracking-tight text-slate-900 dark:text-white leading-[1.1]">
        Two ways in.
      </h2>
    </div>

    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
      {/* For humans */}

      <a href="/guide/get-started" className="group block p-8 rounded-[2rem] bg-slate-100/50 dark:bg-[#0B1221]/50 border border-slate-200/50 dark:border-white/5 hover:bg-slate-100 dark:hover:bg-[#0B1221]/80 transition-colors">
        <div className="text-[10px] font-bold uppercase tracking-widest text-slate-400 dark:text-slate-500 mb-3">For humans</div>
        <strong className="block text-2xl font-bold tracking-tight text-slate-900 dark:text-white mb-3">Get started</strong>

        <p className="text-slate-600 dark:text-slate-400 leading-relaxed mb-5">
          Run one command and ask the agent you already use for an outcome. Learn what Smithers is, then drive it without writing a workflow by hand.
        </p>

        <span className="text-[#00D2A0] font-semibold group-hover:underline">Read the guide →</span>
      </a>

      {/* For agents */}

      <a href="/introduction" className="group block p-8 rounded-[2rem] bg-slate-100/50 dark:bg-[#0B1221]/50 border border-slate-200/50 dark:border-white/5 hover:bg-slate-100 dark:hover:bg-[#0B1221]/80 transition-colors">
        <div className="text-[10px] font-bold uppercase tracking-widest text-slate-400 dark:text-slate-500 mb-3">For agents</div>
        <strong className="block text-2xl font-bold tracking-tight text-slate-900 dark:text-white mb-3">Docs for agents</strong>

        <p className="text-slate-600 dark:text-slate-400 leading-relaxed mb-5">
          The full API, components, and patterns, written for the coding agent that authors and runs your workflows. Or feed it{" "}
          <code className="text-[13px] bg-white dark:bg-white/10 rounded px-1">/llms-full.txt</code> directly.
        </p>

        <span className="text-[#00D2A0] font-semibold group-hover:underline">Read the agent docs →</span>
      </a>
    </div>

    <p className="text-center mt-10 text-slate-500 dark:text-slate-400 font-medium">
      MIT-licensed and open source on{" "}
      <a href="https://github.com/smithersai/smithers" className="text-[#00D2A0] font-semibold hover:underline">GitHub</a>.
    </p>
  </section>
</div>