Skip to main content

Human Component

The <Human> component pauses the workflow to request human input or approval.

Basic Usage

import { Human } from "smithers-orchestrator";

<Human
  message="Review the implementation"
  onApprove={() => setPhase("continue")}
  onReject={() => setPhase("cancelled")}
>
  The agent has implemented the feature.
  Please review the changes before continuing.
</Human>

Props

message
string
Short message shown to the human.
<Human message="Approve deployment?">
onApprove
() => void
Called when human approves.
onReject
() => void
Called when human rejects.
children
JSX.Element
Detailed content shown to the human.

Approval Workflow

import { useState } from "react";

function ApprovalWorkflow() {
  const [phase, setPhase] = useState("implement");

  return (
    <SmithersProvider db={db} executionId={executionId} maxIterations={10}>
      <If condition={phase === "implement"}>
        <Claude onFinished={() => setPhase("review")}>
          Implement the feature.
        </Claude>
      </If>

      <If condition={phase === "review"}>
        <Human
          message="Review Implementation"
          onApprove={() => setPhase("deploy")}
          onReject={() => setPhase("implement")}
        >
          The feature has been implemented.
          Please review the changes in the diff.
        </Human>
      </If>

      <If condition={phase === "deploy"}>
        <Claude
          allowedTools={["Bash"]}
          onFinished={() => setPhase("done")}
        >
          Deploy the changes.
        </Claude>
      </If>

      <If condition={phase === "cancelled"}>
        <Stop reason="Human rejected changes" />
      </If>
    </SmithersProvider>
  );
}

Multi-Checkpoint Workflow

import { useState } from "react";

function StrictWorkflow() {
  const [phase, setPhase] = useState("prompt-input");

  return (
    <SmithersProvider db={db} executionId={executionId} maxIterations={20}>
      <If condition={phase === "prompt-input"}>
        <Human
          message="Confirm Feature Request"
          onApprove={() => setPhase("research")}
          onReject={() => setPhase("cancelled")}
        >
          Feature: Add user authentication
          Are you sure you want to proceed?
        </Human>
      </If>

      <If condition={phase === "research"}>
        <Claude onFinished={() => setPhase("plan-review")}>
          Research the implementation approach.
        </Claude>
      </If>

      <If condition={phase === "plan-review"}>
        <Human
          message="Approve Plan"
          onApprove={() => setPhase("implement")}
          onReject={() => setPhase("research")}
        >
          Review the implementation plan.
        </Human>
      </If>

      <If condition={phase === "implement"}>
        <Claude onFinished={() => setPhase("final-review")}>
          Implement the feature.
        </Claude>
      </If>

      <If condition={phase === "final-review"}>
        <Human
          message="Final Review"
          onApprove={() => setPhase("done")}
          onReject={() => setPhase("implement")}
        >
          Final review before completion.
        </Human>
      </If>

      <If condition={phase === "cancelled"}>
        <Stop reason="Workflow cancelled by human" />
      </If>
    </SmithersProvider>
  );
}