explaingit

bytedance/flowgram.ai

★ 8,073TypeScriptAudience · developerComplexity · 3/5Setup · moderate

TLDR

A TypeScript framework from ByteDance for building your own drag-and-drop visual workflow editors in the browser, with built-in node types for AI calls, HTTP requests, loops, and conditional logic.

Mindmap

mindmap
  root((FlowGram.ai))
    What it does
      Visual workflow editor SDK
      Node-graph canvas
    Built-in Node Types
      LLM AI calls
      HTTP requests
      Code execution
      Loops and conditions
    Framework Features
      Variable scoping
      Node config forms
      npm packages
    Target Users
      Developers building tools
      AI automation products
    From ByteDance
      TikTok parent company
      Open-source release
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Build a custom AI workflow builder for your product where users connect LLM nodes, HTTP calls, and conditional branches visually.

USE CASE 2

Create a node-graph editor for an automation platform without writing the canvas or variable-passing infrastructure from scratch.

USE CASE 3

Prototype a visual pipeline that loops through a list, fetches external data, and generates AI suggestions, all viewable in the browser.

USE CASE 4

Add a structured workflow UI to an existing app using FlowGram's pre-built node types and form system as npm packages.

Tech stack

TypeScriptnpmReact

Getting it running

Difficulty · moderate Time to first run · 30min

Requires Node.js and npm, start from the CLI template then add custom nodes for your specific use case.

License terms not specified in the description.

In plain English

FlowGram is a developer framework for building visual workflow editors, the kind of drag-and-drop node graph interfaces popular in AI automation tools. It is not itself a finished workflow product. It is the set of building blocks you use to create your own workflow platform. The framework provides a canvas where nodes can be placed and connected, a form system for configuring each node's settings, a variable system so data can pass between nodes with proper scoping, and a library of pre-built node types including LLM (AI model calls), conditional branching, code execution, HTTP requests, and loop constructs. You assemble these pieces to build a custom workflow editor tailored to your product. The README demo shows a working example: a workflow that loops through a list of cities, fetches weather data over HTTP for each one, parses the result with a code node, generates a clothing suggestion using an AI model, filters by a condition, and produces a final ranked recommendation. This runs visually in the browser as a node graph. Starting a new project uses a single command that sets up a template, then you run it locally and open it in a browser. The framework is published as npm packages and is built with TypeScript. It comes from ByteDance, the company behind TikTok, and targets developers building AI workflow products who want to skip building the canvas and core infrastructure from scratch. More detail is available at the project's documentation site.

Copy-paste prompts

Prompt 1
Using FlowGram.ai, scaffold a new workflow editor project with the CLI template command and show me the file structure I'll get.
Prompt 2
I want to add a custom node type to my FlowGram editor that calls my own REST API. Write the TypeScript code to define the node, its input form, and its execution logic.
Prompt 3
Show me how FlowGram's variable system works so data output from an LLM node is available as input to the next HTTP node in the graph.
Prompt 4
I'm building an AI automation tool with FlowGram. Write a workflow that takes a list of URLs, fetches each one, extracts the title with a code node, and outputs a summary.
Open on GitHub → Explain another repo

← bytedance on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.