Skip to main content

​
Each Component

The <Each> component provides a clean way to iterate over arrays and render content for each item.

​
Basic Usage

import { Each } from "smithers-orchestrator";

const files = ["auth.ts", "api.ts", "db.ts"];

<Each items={files}>
  {(file, index) => (
    <Claude key={file}>
      Analyze file #{index + 1}: {file}
    </Claude>
  )}
</Each>

​
Props

​
items
T[]
required
Array of items to iterate over.
<Each items={["feature-a", "feature-b", "feature-c"]}>
  {(feature) => <Claude>Implement {feature}</Claude>}
</Each>
​
children
(item: T, index: number) => ReactNode
required
Render function called for each item. Receives the item and its index.
<Each items={tasks}>
  {(task, index) => (
    <Step name={`task-${index}`}>
      <Claude>{task.description}</Claude>
    </Step>
  )}
</Each>

​
Examples

​
Parallel File Analysis

<Phase name="Analysis">
  <Step name="analyze">
    <Parallel>
      <Each items={criticalFiles}>
        {(file) => (
          <Step name={file} key={file}>
            <Claude allowedTools={["Read", "Grep"]}>
              Analyze {file} for security issues.
            </Claude>
          </Step>
        )}
      </Each>
    </Parallel>
  </Step>
</Phase>

​
Dynamic Task Generation

function TaskWorkflow({ tasks }: { tasks: Task[] }) {
  return (
    <SmithersProvider db={db} executionId={executionId}>
      <Each items={tasks}>
        {(task, i) => (
          <Phase name={`Task ${i + 1}`} key={task.id}>
            <Step name={task.name}>
              <Claude model={task.complexity === "high" ? "opus" : "sonnet"}>
                {task.prompt}
              </Claude>
            </Step>
          </Phase>
        )}
      </Each>
    </SmithersProvider>
  );
}

​
With Typed Items

interface Feature {
  name: string;
  description: string;
  priority: "high" | "medium" | "low";
}

const features: Feature[] = [
  { name: "Auth", description: "User authentication", priority: "high" },
  { name: "Search", description: "Full-text search", priority: "medium" },
];

<Each items={features}>
  {(feature) => (
    <Claude key={feature.name}>
      Implement {feature.name}: {feature.description}
      Priority: {feature.priority}
    </Claude>
  )}
</Each>

Parallel

Execute iterations concurrently

Phase

Group workflow phases