bytedance-material-component-doc

FlowGram｜Workflow development framework

English | 中文 | Español | Русский | Português | Deutsch | 日本語

FlowGram is a composable, visual, easy-to-integrate, and extensible workflow development framework & toolkit. Our goal is to help developers build AI workflow platforms faster and simpler. FlowGram comes with a suite of built-in tools for workflow development: flow canvas, node configuration form, variable scope chain, and ready-to-use materials (LLM, Condition, Code Editor etc). It’s not a ready-made workflow platform; it’s the framework and toolkit to build yours.

Learn more at FlowGram.AI 🌐

🎬 Demo

https://github.com/user-attachments/assets/fee87890-ceec-4c07-b659-08afc4dedc26

Open in CodeSandbox 🌐 or StackBlitz 🌐

In this demo, we iterate through a list of cities, fetch real-time weather via HTTP, parse temperatures with a Code node, generate outfit suggestions with an LLM, gate by a Condition, aggregate results across the loop, and finally use an Advisor LLM to pick the most comfortable city before sending the result to the End node.

🚀 Quick Start

1. Create a new FlowGram project:

npx @flowgram.ai/create-app@latest

We recommend choosing the Free Layout Demo ⭐️ template.

2. Start the project:

cd demo-free-layout
npm install
npm start

3. Open http://localhost:3000 in your browser.

✨ Features

Feature	Description	Demo
Free Layout Canvas	Free layout canvas where nodes can be placed anywhere and connected using free-form lines.
Fixed Layout Canvas	Fixed layout canvas where nodes can be dragged to specified positions, with support for compound nodes like branches and loops.
Form	The form engine manages the CRUD operations of node data and provides rendering, validation, side effects, linkage, and error-capturing capabilities, simplifying the development of node configurations.
Variable	The variable engine supports scope constraints, variable structure inspection, and type inference, making it easy to manage data flow within the workflow.

📖 Documentation

You can find the FlowGram documentation on the website.

The documentation is divided into several sections: