Coding & Development🤖claude🌐universal
Smithers
Advanced AI Agents in React
Quick Start
Install this Skill
npx skills add evmts/smithers# Smithers
[](https://www.npmjs.com/package/smithers)
[](https://opensource.org/licenses/MIT)
[](https://www.typescriptlang.org/)
[](https://bun.sh/)
**Declarative JSX framework for building AI agent orchestration workflows.**
I use Smithers for both long-term (weeks) agentic work, as well as one-off scripts.
<!-- TODO: Add GIF demo -->

---
## Table of Contents
- [Why](#why)
- [Installation](#installation)
- [Dependencies](#dependencies)
- [Usage](#usage)
- [AI SDK React Hooks](#ai-sdk-react-hooks)
- [Recipes](#recipes)
- [Features](#features)
- [Claude Component](#claude-component)
- [Ralph Loop Controller](#ralph-loop-controller)
- [Structured Output with Zod](#structured-output-with-zod)
- [MCP Tool Integration](#mcp-tool-integration)
- [Smithers Subagent](#smithers-subagent)
- [Git/JJ VCS Integration](#gitjj-vcs-integration)
- [Orchestration Lifecycle](#orchestration-lifecycle)
- [PhaseRegistry & Step](#phaseregistry--step)
- [Parallel Execution](#parallel-execution)
- [Database State Management](#database-state-management)
- [Rate Limit Monitoring](#rate-limit-monitoring)
- [Contributing](#contributing)
---
## Why
I wanted a tool that allows me to:
- **Write agent workflows as JSX** - because declarative composition is easier to reason about than imperative chains
- **Let Claude Code write the orchestration for me** - I describe what I want, and my agent builds the workflow
- **Persist state across sessions** - pick up where I left off, even days later
- **Mix short scripts with long-running workflows** - same syntax for a quick task or a week-long project
- **See what my agents are doing** - full observability with database logging and reports
- **Use reactive primitives** - React state means my workflows respond to state changes automatically
- **Compose complex behaviors from simple components** - loops, phases, steps, and validation all snap together
- **Keep everything in version control** - workflows are just TypeScript files
---
## Installation
### Install the Smithers Plugin for Claude Code
**Step 1:** Add the Smithers marketplace:
```bash
/plugin marketplace add evmts/smithers
```
**Step 2:** Install the plugin:
```bash
/plugin install smithers@smithers
```
This gives Claude Code the `smithers-orchestrator` skill for creating multi-agent workflows.
### Optional: Install the npm package for programmatic use
If you want to use Smithers components directly in your own scripts:
```bash
bun add smithers-orchestrator
```
---
## Dependencies
### Required
- **[Bun](https://bun.sh/)** - JavaScript runtime (v1.0+)
- **[Claude Code](https://www.npmjs.com/package/@anthropic-ai/claude-code)** - `bun install -g @anthropic-ai/claude-code`
### Optional
- **[jj (Jujutsu)](https://github.com/martinvonz/jj)** - Alternative VCS with better snapshot support
- **[Codex CLI](https://github.com/openai/codex)** - Used for post-commit code reviews
---
## Usage
### Let Your Agent Write Smithers
**You don't have to write Smithers yourself.** Tell your agent what you want, and it generates the workflow:
```
User: "Create a workflow that monitors my CI, fixes failures automatically, and escalates after 3 failed attempts"
Claude: *generates ci-recovery.tsx*
```
Your agent understands the component model and generates correct, working orchestration scripts.
### State Persistence
All Smithers state is saved in a **SQLite database** on your system that can be easily inspected:
```bash
# View execution history
smithers db executions
# View state for a specific execution
smithers db state --execution-id abc123
```
### Basic Example
```tsx
#!/usr/bin/env bun
import { createSmithersRoot } from "smithers-orchestrator";
import { createSmithersDB } from "smithers-orchestrator/db";
import { SmithersProvider } from "smithers-orchestrator/components/SmithersProvider";
import { Claude } from "smithers-orchestrator/components/Claude";
const db = await createSmithersDB({ path: ".smithers/my-task" });
const executionId = await db.execution.start("My Task", "scripts/my-task.tsx");
async function MyWorkflow() {
return (
<SmithersProvider db={db} executionId={executionId}>
<Claude
model="sonnet"
maxTurns={10}
onFinished={(result) => console.log("Done:", result.output)}
>
Analyze this codebase and suggest three improvements.
</Claude>
</SmithersProvider>
);
}
const root = createSmithersRoot();
await root.mount(MyWorkflow);
await db.close();
```
Run it:
```bash
bun my-workflow.tsx
```
---
## AI SDK React Hooks
Smithers re-exports the Vercel AI SDK React hooks so you can import everything
fro
... (truncated)Related Skills
More coding & development skills you might like
Reticle
Coding & DevelopmentAI agents can generate code, but still struggle to understand what they build. Reticle brings Jev-style machine-native runtime perception to web & desktop applications.
🤖claude🌐universal
1.2k
190
View
agentscope-java
Coding & DevelopmentExpert Java developer skill for AgentScope Java framework - a reactive, message-driven multi-agent system built on Project Reactor. Use when working with reactive programming, LLM integration, agent orchestration, multi-agent systems, or when the user mentions AgentScope, ReActAgent, Mono/Flux, Project Reactor, or Java agent development. Specializes in non-blocking code, tool integration, hooks, pipelines, and production-ready agent applications.
🌐universal
6.0k
1.5k
View
ospec
Coding & DevelopmentDocument-driven OSpec workflow for initialization, change/goal routing, validation, archiving, and durable project knowledge.
✨gemini🤖claude💬gpt🌐universal
524
34
View
misakanet-failure-memory
Coding & Development📚 A zero-dependency, git-backed micro-lesson library for AI Agents to asynchronously share and search verified debugging experience. Python stdlib only. | https://misakanet.org
🤖claude⌨️cursor🌐universal
424
158
View