Skip to main content

​
Human Component

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

​
Basic Usage

import { Human } from "smithers";

<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

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

  return (
    <Ralph maxIterations={10}>
      {phase() === "implement" && (
        <Claude onFinished={() => setPhase("review")}>
          Implement the feature.
        </Claude>
      )}

      {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>
      )}

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

      {phase() === "cancelled" && (
        <Stop reason="Human rejected changes" />
      )}
    </Ralph>
  );
}

​
Multi-Checkpoint Workflow

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

  return (
    <Ralph maxIterations={20}>
      {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>
      )}

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

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

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

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

      {phase() === "cancelled" && (
        <Stop reason="Workflow cancelled by human" />
      )}
    </Ralph>
  );
}

Stop

Halt workflow execution

Phase

Workflow phases