synergycodes/workflowbuilder

Workflow orchestration framework for your product, open source: a white-label React workflow builder, durable execution on your own Temporal, human approval steps for AI agents, and a live view of every run.

What it is

Workflow Builder is an open‑source, Apache‑2.0‑licensed SDK that lets you drop a visual, drag‑and‑drop workflow editor into any React application. The editor is built on React Flow and ships with a pluggable architecture, a design‑system UI kit, and a reference back‑end that can run the workflows with Temporal (a durable workflow engine). The repo contains the SDK, a demo SPA, documentation site, and a full‑stack reference implementation (frontend + Hono API + Temporal worker + Postgres) that showcases AI‑agent nodes.

Who might use it

  • Front‑end engineers who need a ready‑made visual workflow canvas inside a SaaS product (e.g., rule engines, automation builders, low‑code platforms).
  • Product teams building AI agent or RAG pipelines who want a UI to wire together triggers, decisions, LLM calls, and visualisation steps.
  • Companies that already use Temporal for durable workflows and want a UI layer that can emit JSON that Temporal can execute.
  • Open‑source contributors interested in extending the plugin system (new node types, custom layout, PDF export, etc.).

How it works – at a glance

Piece Role
@workflowbuilder/sdk (packages/sdk) React component library you import (<WorkflowBuilder.Root …/>). Handles rendering, state persistence, theming, and exposes a clean API for embedding.
@workflowbuilder/ui (packages/ui) Low‑level UI primitives (buttons, panels, icons) that the SDK builds on; can be used independently for custom theming.
Plugin system Optional bundles (e.g., undo/redo, PDF export, ELK auto‑layout) that are loaded at runtime; you can drop in or remove plugins without breaking the core editor.
Reference backend (apps/backend) A small Hono server that stores workflow definitions, streams execution logs, and forwards run requests to the worker.
Execution worker (apps/execution-worker) A Temporal worker that interprets the JSON workflow, runs built‑in node executors (Trigger, Decision, Visualize) and AI Agent nodes that call an OpenAI‑compatible endpoint.
apps/ai-studio Front‑end UI that ties the editor to the backend/worker, showing live execution status (uses the same SDK).
Docker compose stack Spins up Postgres, Temporal DB, Temporal server/UI, and the backend/worker so you can try an end‑to‑end demo locally.

Developers typically embed the SDK (Path A) for a quick integration, or run the full stack (Path C) to experiment with AI‑enabled workflows.

What’s inside the repo

  • Monorepo managed with pnpm workspaces – separate apps/ (demo, docs, backend, worker) and packages/ (SDK, UI, types, execution core, Temporal plugin).
  • CLI helpers (pnpm preflight, pnpm dev:demo, pnpm dev:ai-studio, pnpm infra:up/down) for quick local setup.
  • Plugin examples (copy‑paste, PDF export, ELK layout, undo/redo, etc.) that illustrate how to extend the editor.
  • Documentation site (apps/docs) with guides, API reference, and upgrade notes.
  • Example AI workflow that includes an AI Agent node; you can connect a real LLM by setting AI_API_KEY, AI_BASE_URL, and AI_MODEL in the .env files.

How to get started (quick version)

  1. Embed only – npm i @workflowbuilder/sdk @xyflow/react zustand then render <WorkflowBuilder.Root name="my-workflow" /> in your React app.
  2. Run the demo – clone, pnpm install && pnpm dev:demo, open http://localhost:4200.
  3. Full stack – after cloning, run pnpm setup:env && pnpm infra:up && pnpm -F backend db:migrate && pnpm dev:ai-studio. Open http://localhost:4201 for the AI Studio UI and http://localhost:8233 for Temporal UI.

When to consider the Enterprise edition

The open‑source version is intended for local development and proof‑of‑concepts. It ships a reference backend with no auth, no multi‑tenant isolation, and CORS wide open. For production you should either build your own secure backend against the WorkflowEnginePort interface or purchase the commercial Workflow Builder Enterprise offering, which adds authentication, role‑based access, scaling tools, and professional support.

All details above are taken directly from the repository’s README; no external assumptions have been added.

Related

  • Project
    open-slide/open-slide

    A React-based framework that enables AI coding agents to generate, edit, and manage presentation decks through natural language and code-based workflows.

  • Project
    vercel-labs/workflow-builder-template

    A template for building AI-driven workflow automation platforms, featuring a visual drag-and-drop builder that generates executable TypeScript code.

  • Project
    writer/writer-framework

    An open-source framework for building AI applications that combines a visual drag-and-drop UI editor with a Python-based backend.

  • Project
    assistant-ui/assistant-ui

    assistant‑ui is a TypeScript/React library that provides composable, production‑ready chat UI components for AI assistants. It works with many LLM backends via typed runtimes, handles streaming, markdown, tool‑call rendering, and offers a CLI to scaffold or inject the UI into Next.js projects. MIT‑licensed and backed by Y Combinator.

  • Project
    Coframe/coffee

    An AI-powered frontend engine that lets developers generate, iterate, and refine React components directly within their IDE using special JSX components and props.