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.

概要

Workflow Builder は、Apache-2.0 ライセンスのオープンソース SDK で、任意の React アプリケーションにビジュアルなドラッグ＆ドロップワークフローエディタを組み込むことができます。エディタは React Flow 上に構築されており、プラグイン可能なアーキテクチャ、デザインシステム UI キット、そして Temporal（耐久性のあるワークフローエンジン）でワークフローを実行できるリファレンスバックエンドを備えています。リポジトリには、SDK、デモ SPA、ドキュメントサイト、および AI エージェントノードを紹介するフルスタックのリファレンス実装（フロントエンド + Hono API + Temporal ワーカー + Postgres）が含まれています。

誰が使うのか

SaaS 製品（ルールエンジン、自動化ビルダー、ローコードプラットフォームなど）内に既製のビジュアルワークフローキャンバスが必要なフロントエンドエンジニア。
AI エージェント や RAG パイプラインを構築し、トリガー、決定、LLM 呼び出し、可視化ステップを配線する UI が必要なプロダクトチーム。
耐久性のあるワークフローに Temporal をすでに使用しており、Temporal が実行できる JSON を生成できる UI レイヤーが必要な企業。
プラグインシステム（新しいノードタイプ、カスタムレイアウト、PDF エクスポートなど）の拡張に関心のあるオープンソースコントリビューター。

仕組み – 一目でわかる概要

部分	役割
`@workflowbuilder/sdk` (packages/sdk)	インポートする React コンポーネントライブラリ（`<WorkflowBuilder.Root …/>`）。レンダリング、状態永続化、テーマ設定を処理し、埋め込み用のクリーンな API を公開します。
`@workflowbuilder/ui` (packages/ui)	SDK が基盤とする低レベル UI プリミティブ（ボタン、パネル、アイコン）。カスタムテーマ設定のために独立して使用できます。
プラグインシステム	ランタイムでロードされるオプショナルバンドル（例：元に戻す/やり直し、PDF エクスポート、ELK 自動レイアウト）。コアエディタを壊さずにプラグインを追加または削除できます。
リファレンスバックエンド (`apps/backend`)	ワークフロー定義を保存し、実行ログをストリーミングし、実行リクエストをワーカーに転送する小さな Hono サーバー。
実行ワーカー (`apps/execution-worker`)	JSON ワークフローを解釈し、組み込みノードエグゼキュータ（Trigger、Decision、Visualize）と、OpenAI 互換エンドポイントを呼び出す AI エージェントノードを実行する Temporal ワーカー。
`apps/ai-studio`	エディタをバックエンド/ワーカーに結び付けるフロントエンド UI。ライブ実行ステータスを表示します（同じ SDK を使用）。
Docker compose スタック	Postgres、Temporal DB、Temporal サーバー/UI、バックエンド/ワーカーを起動し、ローカルでエンドツーエンドのデモを試すことができます。

開発者は通常、SDK（パス A）を埋め込んで迅速な統合を行うか、フルスタック（パス C）を実行して AI 対応ワークフローを試します。

リポジトリ内の内容

モノレポ – pnpm workspaces で管理 – 別々の apps/（デモ、ドキュメント、バックエンド、ワーカー）と packages/（SDK、UI、タイプ、実行コア、Temporal プラグイン）。
CLI ヘルパー（pnpm preflight、pnpm dev:demo、pnpm dev:ai-studio、pnpm infra:up/down）– 迅速なローカルセットアップ用。
プラグインの例（コピー＆ペースト、PDF エクスポート、ELK レイアウト、元に戻す/やり直しなど）– エディタの拡張方法を示します。
ドキュメントサイト (apps/docs) – ガイド、API リファレンス、アップグレードノート付き。
AI ワークフローの例 – AI エージェント ノードを含みます。.env ファイルで AI_API_KEY、AI_BASE_URL、AI_MODEL を設定することで、実際の LLM に接続できます。

はじめ方（クイックバージョン）

埋め込みのみ – npm i @workflowbuilder/sdk @xyflow/react zustand を実行し、React アプリで <WorkflowBuilder.Root name="my-workflow" /> をレンダリングします。
デモを実行 – クローンし、pnpm install && pnpm dev:demo を実行し、http://localhost:4200 を開きます。
フルスタック – クローン後、pnpm setup:env && pnpm infra:up && pnpm -F backend db:migrate && pnpm dev:ai-studio を実行します。AI Studio UI には http://localhost:4201、Temporal UI には http://localhost:8233 を開きます。

エンタープライズ版を検討する場合

オープンソース版は、ローカル開発と概念実証を目的としています。認証なし、マルチテナント分離なし、CORS が完全に開放されたリファレンスバックエンド が同梱されています。本番環境では、WorkflowEnginePort インターフェースに対して独自のセキュアなバックエンドを構築するか、認証、ロールベースのアクセス、スケーリングツール、プロフェッショナルサポートを追加する商用の Workflow Builder Enterprise を購入する必要があります。

上記の詳細はすべて、リポジトリの README から直接取得したものであり、外部の想定は追加されていません。