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 워크플로우를 해석하고 내장 노드 실행기(트리거, 결정, 시각화)와 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에서 직접 가져온 것이며 외부 가정은 추가되지 않았습니다.