Skip to content
motif-ts

Workflow Orchestration
Reimagined

Dead simple. Fully typed. Agentically orchestrated.

@motif-ts/agentic
Describe your workflow...

The whole loop, end to end: an agent turns intent into a canonical workflow spec, asks when it needs a decision, then runs the compiled graph — every step, edge, and state transition fully typed. Hover to pause; pick a scenario below.

Design Principles

Six commitments that make workflows safe for humans to maintain — and for agents to operate.

Workflows as Graphs

Logic is explicit steps and edges, not hidden control flow. Every transition is deterministic and type-checked, so complex flows stay understandable, testable, and safe for an agent to reason about.

Type-Safety End-to-End

Zod schemas validate inputs, outputs, configs, and API calls at runtime; TypeScript infers everything statically. The same schemas that protect your code become the contract an LLM plans against.

Powered by
Zod

Immutability

State updates are immutable by default, so every change is predictable and replayable — the foundation for time-travel debugging, snapshots, and safe rewind-and-retry recovery.

Powered by
Zustand

Co-location

Each step owns its schemas, state, and API in one place — business rules live inside the step, not scattered across UI handlers. Steps stay pure, portable, and testable in isolation.

Framework Agnostic

The engine has zero UI or AI-SDK dependencies. It runs anywhere JavaScript runs; thin adapters bind it to React, Vue, or Svelte, and a callback binds it to whichever model provider you choose.

Agent Native

You own the LLM calls — motif-ts never talks to a model. Instead it hands your agent a precise, typed surface: describe the workflow, list invokable actions, emit tool catalogs, and drive a budgeted, approval-aware loop.

The Step Model

One primitive underneath everything: encapsulated logic with strict, schema-checked IO and reactive private state.

Step Context

Explore the anatomy of a step

Hover or tap any part of the diagram — or any highlighted token in the code — to see how each piece maps to a runtime schema and its inferred TypeScript type.

MyStep.ts
// 1. Define Step
const MyStep = step({
kind: 'my-step',
: z.object(...),
: z.object(...),
: z.object(...),
: z.object(...),
: myStepStore,
}, (args) => {
const { , , } = args;
const { , , , } = args;
(() => { ... });
return {
}
};
});
// 2. Instantiate
const instance = MyStep;

Shape the Workflow

Loops, scopes, and nesting — three composition patterns that grow a graph without changing how any single step behaves.

Init
template
Process
Validate
iter ~1
Process
Validate
iter ~2
Process
Validate
until done
Done

Workflow Shape · 01

RepeatGroup

Make a fresh lane for each iteration.

Expands a declared template into a single linear sequence of new step instances. Each pass owns its own state, history, and back-navigation.

RepeatGroup.ts
const RetryUntilDone = RepeatGroup({
  kind: 'RetryUntilDone',
  until: 'output.count >= 3',
});

w.connect(init, RetryUntilDone((s) =>
  s.connect(process, validate),
));
// → Init → Process → Validate → Process~1 → …

Edit the Spec. Run the Graph.

This playground runs the real engine in your browser: edit the canonical workflow spec on the left, watch the generated code update, then run it and drive every step by hand.

Workflow

Editing

6 steps, 5 edges

Tip: graph editing works best with a mouse or trackpad
WorkflowSpec
6 steps5 edges1 groups
No selectionSelect a step, group, or edge to inspect.
Your Code
import { RepeatGroup, workflow } from '@motif-ts/core'; import { InputStep, VerifyStep, PollStep, ProfileStep, PlanStep, SuccessStep } from './steps'; const input = InputStep("input"); const verify = VerifyStep("verify"); const poll = PollStep("poll"); const profile = ProfileStep("profile"); const plan = PlanStep("plan"); const success = SuccessStep("success"); const PollUntilReadyGroup = RepeatGroup({ kind: "PollUntilReady", until: 'output.ready === true', }); const flow = workflow([InputStep, VerifyStep, PollStep, ProfileStep, PlanStep, SuccessStep, PollUntilReadyGroup]); flow .register([input, verify, poll, profile, plan, success]) .connect(input, PollUntilReadyGroup((start) => start.connect(verify).connect(poll))) .connect(poll, profile) .connect(profile, plan) .connect(plan, success) .start(input);

One Stack, Layered

Deterministic engine at the bottom, intelligence in the middle, durability and tooling on top — each layer is a package you can adopt on its own.

Workflow Engine

The deterministic heart: steps, typed edges, repeat and context groups, composed steps, streaming, AbortSignal, and a strict failure taxonomy. Zero LLM concerns — serializable edge conditions come from an embedded expression engine.

@motif-ts/core
Plus@conf-ts/expression

Canonical Spec & Durable Runs

One JSON-safe workflow IR that agents author and editors edit, compiled only against trusted step implementations. The run kernel adds durable, replayable event logs, checkpoints, authorization leases, and crash-safe effects.

@motif-ts/spec@motif-ts/runtime

Agentic Layer

Hand workflows to any LLM without handing over your model calls: describe(), strict invoke(), OpenAI/Anthropic tool catalogs, planner prompts, snapshots, and a provider-neutral agent loop with token/cost budgets, approval pauses, parallel tool calls, and self-correction hooks.

@motif-ts/agentic (private preview)

Visualizer & Run Replay

Live workflow graphs, a visual spec editor, and durable-run tooling: scrub any run frame by frame from its event log, review planner re-decides as a visual spec diff, and fold many runs into visit counts and failure heat.

@motif-ts/visualizer (private preview)

Production Middleware

Cross-cutting concerns that compose without knowing about each other: abort timeouts, retry with backoff, OpenTelemetry tracing, cost budgets, approval gates, rate limits, Redux DevTools time-travel, and state persistence.

@motif-ts/middleware

Framework Adapters

Bind the same workflow to any UI with one hook, composable, or store. The engine never imports a framework — adapters subscribe to it.

@motif-ts/react@motif-ts/vue@motif-ts/svelte

Quick Start

From install to a running workflow — then hand the same workflow to an LLM.

installation.ts
pnpm add @motif-ts/core @motif-ts/react