Repolode
bytedance

bytedance/flowgram.ai

AI 워크플로 플랫폼을 구축할 수 있도록 캔버스, 폼, 변수 및 머티리얼 컴포넌트를 내장한 TypeScript 프레임워크입니다.

스타
8,504
포크
776
열린 이슈
82
마지막 커밋
8일 전

어떤 프로젝트인가요?

FlowGram은 자체 시각적 워크플로 제품을 만들려는 개발자를 위한 워크플로 개발 프레임워크이자 툴킷입니다. 바로 사용할 수 있는 워크플로 플랫폼은 아닙니다. 대신 플로 캔버스, 노드 설정 폼 엔진, 변수 스코프 체인, LLM·Condition·Code Editor 같은 즉시 사용 가능한 노드 머티리얼을 기본 구성 요소로 제공합니다.

캔버스는 두 가지 모드로 제공됩니다. 자유 배치 모드에서는 노드를 원하는 위치에 놓고 자유로운 형태의 선으로 연결할 수 있으며, 고정 레이아웃 모드에서는 노드가 지정된 위치에 맞춰지고 분기와 루프 같은 복합 노드를 지원합니다. 폼 엔진은 노드 데이터의 CRUD와 렌더링, 유효성 검사, 연동, 오류 캡처를 처리합니다. 변수 엔진은 노드 간에 전달되는 데이터의 스코프 제약, 구조 검사, 타입 추론을 담당합니다.

FlowGram은 npm 패키지로 배포되며 프로젝트 생성기가 포함되어 있어, npx 명령 하나로 새 데모 앱을 시작할 수 있습니다. TypeScript와 React로 구축되었으며, 문서에서는 캔버스, 폼, 변수, 머티리얼, 런타임 모듈을 다룹니다.

핵심 기능

  • 01노드를 원하는 위치에 배치하고 자유로운 형태의 선으로 연결할 수 있는 자유 배치 캔버스입니다.
  • 02분기와 루프 같은 복합 노드를 지원하는 고정 레이아웃 캔버스입니다.
  • 03렌더링, 유효성 검사, 연동, 오류 캡처를 지원하는 노드 설정 폼 엔진입니다.
  • 04스코프 제약, 구조 검사, 타입 추론을 지원하는 변수 엔진입니다.
  • 05LLM, Condition, Code Editor 노드를 비롯한 즉시 사용 가능한 머티리얼입니다.
  • 06명령 하나로 데모 앱을 시작할 수 있는 프로젝트 생성기입니다.

활용 사례

  • 시각적 편집기를 기반으로 맞춤형 AI 워크플로 또는 에이전트 오케스트레이션 플랫폼을 구축합니다.
  • 사내 자동화 도구에 노드 기반 워크플로 디자이너를 추가합니다.
  • 사용자가 데이터 처리 단계를 연결하는 노코드 설정 인터페이스를 만듭니다.
  • React와 TypeScript 애플리케이션에서 순서도 스타일 편집기를 프로토타이핑합니다.

빠른 시작

  1. 1

    새 FlowGram 프로젝트를 만듭니다(Free Layout Demo 템플릿 선택)

    npx @flowgram.ai/create-app@latest
  2. 2

    프로젝트 디렉터리로 이동해 종속성을 설치합니다

    cd demo-free-layout npm install
  3. 3

    프로젝트를 시작합니다

    npm start
  4. 4

    브라우저에서 http://localhost:3000을 엽니다

사용 전 알아둘 점

  • 바로 사용할 수 있는 워크플로 플랫폼이 아니라 프레임워크이자 툴킷이므로, 이를 기반으로 자체 제품을 구축해야 합니다.

토픽

자주 묻는 질문

flowgram.ai은(는) 무엇인가요?
AI 워크플로 플랫폼을 구축할 수 있도록 캔버스, 폼, 변수 및 머티리얼 컴포넌트를 내장한 TypeScript 프레임워크입니다. FlowGram은 자체 시각적 워크플로 제품을 만들려는 개발자를 위한 워크플로 개발 프레임워크이자 툴킷입니다. 바로 사용할 수 있는 워크플로 플랫폼은 아닙니다. 대신 플로 캔버스, 노드 설정 폼 엔진, 변수 스코프 체인, LLM·Condition·Code Editor 같은 즉시 사용 가능한 노드 머티리얼을 기본 구성 요소로 제공합니다.
flowgram.ai은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
flowgram.ai은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
flowgram.ai은(는) 아직 유지보수되고 있나요?
활발히 유지보수 중. flowgram.ai의 마지막 커밋은 2026년 10월 13일입니다.
flowgram.ai은(는) 어디에 사용할 수 있나요?
시각적 편집기를 기반으로 맞춤형 AI 워크플로 또는 에이전트 오케스트레이션 플랫폼을 구축합니다. 사내 자동화 도구에 노드 기반 워크플로 디자이너를 추가합니다. 사용자가 데이터 처리 단계를 연결하는 노코드 설정 인터페이스를 만듭니다. React와 TypeScript 애플리케이션에서 순서도 스타일 편집기를 프로토타이핑합니다.
flowgram.ai는 어떻게 설치하나요?
새 FlowGram 프로젝트를 만듭니다(Free Layout Demo 템플릿 선택): npx @flowgram.ai/create-app@latest 프로젝트 디렉터리로 이동해 종속성을 설치합니다: cd demo-free-layout npm install 프로젝트를 시작합니다: npm start 브라우저에서 http://localhost:3000을 엽니다
flowgram.ai은(는) 어디서 받을 수 있나요?
소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/bytedance/flowgram.ai

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.

관련 프로젝트