# @abstractframework/flow > AbstractFlow visual workflow editor for AbstractFramework Latest version **0.3.20** (published 2026-09-23) · MIT license · 0 weekly downloads ## Install ```sh npm install @abstractframework/flow pnpm add @abstractframework/flow yarn add @abstractframework/flow bun add @abstractframework/flow ``` Provides the command `abstractflow-editor`. ## Health **Score 65/100 (B)** — status: active. Positive: esm support; no vulnerabilities; has provenance; recently updated; high maintenance score. Warnings: low downloads; no types; large bundle; pre 1.0. ## Facts | | | |---|---| | Version | 0.3.20 | | Published | 2026-09-23 | | First published | 2026-02-04 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | ESM | | Dependencies | 10 | | Unpacked size | 9.6 MB | | Known vulnerabilities | 0 (+18 in 1 direct dependencies) | | Install scripts | no | | Provenance | attested (GitHub Actions) | | GitHub stars | 5 | | Author | Laurent-Philippe Albou | | Maintainers | lpalbou | | Keywords | abstractframework, workflow, visual-editor, drag-and-drop, react | ## Links - npm: https://www.npmjs.com/package/@abstractframework/flow - Repository: https://github.com/lpalbou/AbstractFlow - Homepage: https://github.com/lpalbou/AbstractFlow#readme - Issues: https://github.com/lpalbou/AbstractFlow/issues - npm.io page: https://npm.io/package/@abstractframework/flow ## Dependencies (10) - [clsx](https://npm.io/package/clsx.md) ^2.1.0 - [react](https://npm.io/package/react.md) ^18.2.0 - [marked](https://npm.io/package/marked.md) 14.0.0 - [zustand](https://npm.io/package/zustand.md) ^4.4.7 - [dompurify](https://npm.io/package/dompurify.md) 3.2.7 - [react-dom](https://npm.io/package/react-dom.md) ^18.2.0 - [reactflow](https://npm.io/package/reactflow.md) ^11.10.4 - [react-hot-toast](https://npm.io/package/react-hot-toast.md) ^2.4.1 - [@monaco-editor/react](https://npm.io/package/@monaco-editor/react.md) ^4.6.0 - [@tanstack/react-query](https://npm.io/package/@tanstack/react-query.md) ^5.17.0 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 0.3.20 (latest) — 2026-09-23 - 0.3.19 — 2026-06-14 - 0.3.17 — 2026-05-31 - 0.3.16 — 2026-05-29 - 0.3.15 — 2026-05-26 - 0.3.14 — 2026-05-26 - 0.3.13 — 2026-05-23 - 0.3.12 — 2026-05-19 - 0.3.11 — 2026-05-13 - 0.1.6 — 2026-02-08 - 0.1.5 — 2026-02-08 - 0.1.2 — 2026-02-05 - 0.1.1 — 2026-02-05 - 0.1.0 — 2026-02-04 ## README # AbstractFlow AbstractFlow is the visual workflow editor for AbstractFramework. It is a web package (`@abstractframework/flow`). It runs a browser editor and a small Node server that serves the built UI and proxies `/api/*` to AbstractGateway. AbstractGateway owns users, sessions, runtime routing, provider configuration, workflow storage, run execution, ledgers, artifacts, and media catalogs. ## Install ```bash npx @abstractframework/flow --gateway-url http://127.0.0.1:8080 ``` For a local checkout, clone [AbstractUIC](https://github.com/lpalbou/AbstractUIC) next to this repository (`../abstractuic`): the editor builds the shared UI packages (`@abstractframework/ui-kit` and the monitor widgets) from that sibling checkout. ```bash git clone https://github.com/lpalbou/AbstractUIC.git ../abstractuic npm install npm run dev -- --host 0.0.0.0 --port 3003 ``` Open http://localhost:3003 and sign in with the Gateway user and token created by AbstractGateway. Leave provider/model selectors on `Auto (Gateway default)` for portable workflows. Gateway/Core capability defaults choose the actual provider/model at run time for the current user/runtime. Text model selectors use Gateway's Core-backed `capability_route` discovery filters, so normal LLM pickers request `output.text` models. The Models Catalog node can store a route such as `input.image,output.text` to discover provider models for a specific input/output shape while the workflow runs. LLM Call and Agent nodes include a Reasoning control backed by Core's `thinking` option. Leave it on Auto to inherit the Gateway/runtime default, or set/pin values such as `off`, `low`, `medium`, `high`, or `xhigh` for reasoning models that support explicit effort controls. LLM Call and Agent nodes also expose an **MTP depth** setting (inherit, Off, or a depth the selected provider/model advertises), with a run-scoped override in the Run dialog. See [Getting started](docs/getting-started.md) for precedence. Data input pins can carry small sandboxed Python expressions over run variables, and flows can define a library of named helper functions used by those expressions (the **Functions** drawer). See [VisualFlow JSON](docs/visualflow.md). LLM Call and Agent response schemas can be defined directly on the unconnected `resp_schema` pin. The Builder tab creates ordinary JSON Schema, including Choice fields saved as `enum` values. Connected schema inputs override the inline default, and published workflows keep the schema in `data.pinDefaults.resp_schema` for Gateway/Runtime execution. When a response schema is configured, `response` remains the text output and a structured `data` object output is shown for Break Object, Switch, and other object-aware nodes. Media artifact inputs can be wired from another node or uploaded directly on the node when the artifact pin is unconnected. Uploaded browser files are stored as Gateway artifacts. Image generation, editing, restoration/upscaling, video, voice, music, and transcription nodes all execute through Gateway-advertised capabilities. During `Listen Voice` waits, Flow records in the browser, uploads the captured audio artifact, and resumes the Gateway run; Flow does not execute local audio or transcription logic itself. Vision media nodes now surface Gateway/Core's richer route contract directly in authoring: - task-scoped provider/model discovery for `text_to_image`, `image_to_image`, `text_to_video`, and `image_to_video` - batch generation controls with `count` and explicit ordered `seeds` - ordered `lora_adapters` stacks for compatible image/video models - plural media outputs such as `image_artifacts` and `video_artifacts` when a route returns more than one artifact in one call The editor keeps those controls in the right-side Properties drawer and only surfaces them on nodes whose Gateway contract advertises the corresponding support. File and document workflows can use `Write File` for Markdown/JSON/text paths, `Read File` for UTF-8/JSON inputs, `Read PDF` for extracting PDF text/metadata, and `Write PDF` for rendering report content to a real PDF path through Runtime. The toolbar star opens the Workflow Authoring Assistant in the right drawer. The assistant reads `docs/workflow-authoring-skill.md` plus a compact generated node catalog, uses Gateway's default `output.text` model by starting normal Gateway planner runs unless a model is pinned, and reads planner responses from run ledgers. The model authors the complete workflow as one JSON document; the editor diffs it against the draft canvas and applies only validated edits. It can create or refine common workflows such as internet research, deep research, news digests, and job searches; Save, Publish, and Run remain explicit user actions. ## Gateway Setup ```bash export ABSTRACTGATEWAY_USER_AUTH=1 export ABSTRACTGATEWAY_DATA_DIR="$PWD/runtime/gateway" abstractgateway serve --host 127.0.0.1 --port 8080 cat "$ABSTRACTGATEWAY_DATA_DIR/auth/bootstrap-admin-token" ``` Use: - Gateway URL: `http://127.0.0.1:8080` - User: `admin` - Token: the `agw_...` token printed by Gateway or stored in `auth/bootstrap-admin-token` ## What Lives Here - `src/` - React/Vite visual editor. - `bin/cli.js` - npm CLI/static server and Gateway proxy. - `examples/flows/` - sample VisualFlow JSON files kept for reference/import tests. - `docs/` - external documentation for users and contributors. AbstractFlow does not ship a Python package or local execution host. VisualFlow compilation, bundle execution, runtime state, and provider calls are handled by AbstractGateway and AbstractRuntime. ## Scripts ```bash npm run dev npm run build npm run lint npm test npm run docs:llms ``` ## Documentation - [Getting started](docs/getting-started.md) - [Web editor](docs/web-editor.md) - [Architecture](docs/architecture.md) - [API and contracts](docs/api.md) - [VisualFlow JSON](docs/visualflow.md) - [CLI](docs/cli.md) - [FAQ](docs/faq.md) ## Related Projects - AbstractFramework: https://github.com/lpalbou/AbstractFramework - AbstractGateway: https://github.com/lpalbou/AbstractGateway - AbstractRuntime: https://github.com/lpalbou/AbstractRuntime - AbstractCore: https://github.com/lpalbou/AbstractCore ## Policies - Changelog: [CHANGELOG.md](CHANGELOG.md) - Contributing: [CONTRIBUTING.md](CONTRIBUTING.md) - Security: [SECURITY.md](SECURITY.md) - License: [LICENSE](LICENSE) --- _Source: https://npm.io/package/@abstractframework/flow · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._