Skip to content
motif-ts

Workflow Orchestration
Reimagined

Dead simple. Fully typed. Agentically orchestrated.

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

Design Principles

Built on the foundations of immutability, type-safety, and composition.

Workflows as Graphs

Build logic with explicit steps and edges. Each transition is deterministic and type-checked, making complex flows understandable and testable.

Type-Safety End-to-End

Strong TypeScript APIs ensure inputs, states, and transitions are safe. Zod integration adds runtime validation without compromising ergonomics.

Powered by
Zod

Immutability

State updates are immutable by default. This ensures predictable state changes and enables powerful features like time-travel debugging.

Powered by
Zustand

Co-location

Achieve clear separation of concerns by decoupling UI from business logic. The architecture forces you to co-locate logic with its relevant components, ensuring that business rules remain pure, testable, and independent of the view layer.

Framework Agnostic

The core is UI-agnostic and works in any framework or runtime. Optional adapters integrate with different UIs without coupling.

Agent Native

Designed to pair with autonomous agents. The dedicated agent library gives an LLM a precise, typed surface to introspect and act on.

The Step Model

Encapsulated logic with strict IO boundaries and reactive state.

Step Context

Interactive Step Architecture

Hover to reveal the seamless link between visual concepts and TypeScript code. See how every Input, State, and Output is strictly typed and interconnected.

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

Three composition patterns that grow workflows without changing how a 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: (out) => out.count >= 3,
});

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

Workflow in Motion

Compose steps into a graph and inspect state transitions in real-time.

Workflow

Editing

6 steps, 5 edges

WorkflowDoc
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: (out: { ready?: boolean }) => out.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);

Core Capabilities

Essential primitives for building robust, scalable workflows.

Workflow Orchestrator

Compose steps with typed transitions, back navigation, lifecycle control, and middleware hooks.

@motif-ts/core

DevTools & Persistence

Time-travel with Redux DevTools, export/import full snapshots or just the workflow config, and safely restore any state.

@motif-ts/middleware

Framework Adapters

Use adapters to integrate with UI of choice. React, Vue, and Svelte adapters are included.

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

Expression Engine

Serialize expressions for portable workflows. Supports modern JavaScript syntax like optional chaining, template literals, and object spread.

@motif-ts/expression

Visualizer

Render and edit live workflow graphs in the browser. Inspect every step, transition, and state in real time, and visually wire up new steps and connections with a built-in canvas editor.

@motif-ts/visualizer (private preview)

Agentic Layer

Hand workflows to an LLM. Strict invocation schemas, OpenAI or Anthropic tool catalogs, full-state snapshots, and a draft-to-runtime builder let agents safely author and operate workflows.

@motif-ts/agentic (private preview)

Quick Start

From installation to your first executable workflow.

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