← Fancy UI Curriculum

Flow

Workflow graphs a person and an agent build together, run by one engine in TypeScript, PHP and Python: the engine, the twins, durable queued runs, marketplace nodes and the agent bridges.

0/5 lessons

0%

fancy-flow: an engine, and an editor you can leave behind

~9 min

fancy-flow is a headless workflow engine with an optional React Flow editor, in three layers you import separately:

  • @particle-academy/fancy-flow/engine: runFlow and the graph types. Zero React, so it runs a graph on a server, in a worker or from a CLI.
  • @particle-academy/fancy-flow/runtime: the runner hooks (useFlowRun, useFlowState) for a UI that shows a run.
  • @particle-academy/fancy-flow: the editor, with <FlowEditor>, canvas, palette and config panel.

A kind ships schema and UI; the host wires the I/O. The TypeScript core has default executors only for the four pure-logic kinds: branch, transform, merge and for_each. An api_request, llm_call or memory_store node does nothing until your app binds an executor for it. (The HTTP kind is api_request; there is no http.)

On AI it is a shuttle, not an engine. Core declares a registerLlmClient contract and imports no provider SDK, so a flow with no AI node pays nothing. The contract is narrow: it lets llm_router (alias llm_branch) pick one of a node's declared ports. Two opt-in adapters do that: ./llm/prism posts to an endpoint you own, and ./llm/vercel-ai uses the ai package as an optional peer. Both refuse a port that was never declared rather than routing to it.

Do not hand-copy the kind list into generated graphs; it moves. Enumerate it from the registry at runtime.