automation

flowgram.ai: Rapidly Build AI Workflow Platforms with a Visual Canvas

Name: flowgram.ai: Rapidly Build AI Workflow Platforms with a Visual Canvas
Author: bytedance

flowgram.ai lets founders and dev teams create custom AI workflows fast using a drag‑and‑drop canvas, forms, and variables—perfect for no‑code and TypeScript projects. 8.5k+ GitHub stars.

From the repo · “FlowGram is an extensible workflow development framework with built-in canvas, form, variable, and materials that helps developers build AI workflow platforms faster and simpler.”

intermediate⏱ 30 minutes💵 Free + open-source

8,512 stars+20★ this week776 forksTypeScriptGuide quality 9/10 · reviewed Oct 13Updated 10/22/2026100% free · open source

What it is

With FlowGram, you build AI workflow platforms faster by creating visual diagrams of your data flow.

Real use case example

"A founder who wants to automate tasks for their e-commerce business could use FlowGram to create a visual workflow: they'd start by creating a canvas in FlowGram, then add a 'Shopify order' trigger, followed by an 'update Excel sales data' action and a 'send notification to Slack' action. The workflow would be live and functional in just a few hours."

Best insideClaude DesktopCursor

When to use it

•You need to automate complex workflows involving AI models and tasks
•You're building an AI-focused application and need a flexible workflow framework
•You want to simplify and speed up the development of your AI workflow platform

Ready-to-paste prompt

npm run start && npm run build:example to build and run the example workflow

Heads up: Make sure you have Node.js (14 or higher) and npm installed on your system before attempting to clone and run FlowGram, as it's a TypeScript-based framework

Saves to your device

Use with Claude

New

Skip the builder — one click puts this in Claude, Cursor, Antigravity and more.

🛠️ Technical setup

Expect 20–40 minutes in a terminal — or let your AI agent drive it.

Try it instantly — no install

Claude Code

mkdir -p ~/.claude/skills/flowgram-ai && curl -fsSL https://workflowstacks.com/api/skills/flowgram-ai/claude-skill -o ~/.claude/skills/flowgram-ai/SKILL.md

Open in another AI app

Opens the app with this repo with the prompt ready to go — no copy-paste needed.

Connect the whole catalog (MCP)

claude mcp add --transport http workflowstacks https://workflowstacks.com/api/mcp

Adds a WorkflowStacks connector to Claude Code: search and load any skill here by chatting.

How flowgram.ai: Rapidly Build AI Workflow Platforms with a Visual Canvas works

Codeflow

Free to inspect

Flowgram.ai: Rapidly Build AI Workflow Platforms with a Visual Canvas is a very large TypeScript project (~120k lines across 2517 code files, plus 187 test files). It is a full software project: use it through its install path rather than reading it end to end. Last commit this month, MIT license, has a test suite.

Size

Very large codebase

~120k lines · 2517 code files · days to read — use, don't read

Setup

Developer setup

A real software project. Use it via its install path; don't expect to read it all.

Runs on

TypeScript

No API keys detected

TypeScript 77%MDX 19%JavaScript 2%CSS 1%Less 1%

Where to start reading

1
README.md
Start here — what it does and how to install it
2
AGENTS.md
The instructions the AI actually follows

What's in each folder

packages/Sub-packages / plugins2023 files

apps/Sub-packages / plugins1378 files

common/Folder36 files

config/Configuration20 files

e2e/Tests — proof it works23 files

.claude/Editor / agent settings11 files

.github/CI / automation (GitHub Actions)9 files

.vscode/Editor / agent settings2 files

READMEHas testsDocumentedCI checksMIT licenseUpdated this month