AI Flow Editor

A visual node-based editor for creating AI workflows with ReactFlow and Subscribe.dev integration.

Quick Start

``bash


Install dependencies

bun install

Start development server

bun run dev
`

Then open http://localhost:8000/index.html in your browser to see the main AI Flow Editor application.

Features

- Visual Workflow Editor - Drag-and-drop interface for creating AI workflows
- Multiple AI Models - Support for image generation, video generation, and text models
- Node-based Connections - Visual connections between inputs, models, and outputs
- User Authentication - Integrated Subscribe.dev authentication and billing
- Real-time Execution - Execute workflows with live progress tracking
- Generation History - Track all previous AI generations with persistent history
- Professional UI - Clean interface with Phosphor icons and proper aspect ratios
- UMD Format - Works in any JavaScript environment with no external dependencies
- Programmatic Initialization - Load predefined workflows via window.FLOW

Installation

`bash
npm install chatgpt-media-flow-editor
`

Prerequisites

Before using the Flow Editor, make sure you have the following dependencies loaded:

`html



















`

Note: The Flow Editor includes all necessary icons internally - no external icon libraries are required.

Usage

$3

`tsx
// Note: This package is primarily designed for UMD usage
// ES module support may be limited in the current version
import FlowEditor from 'chatgpt-media-flow-editor';

function App() {
return (
projectToken="your-subscribe-dev-project-token"
/>
);
}

export default App;
`

$3

`html
















`

$3

You can initialize the Flow Editor with predefined nodes and edges by setting window.FLOW before the component mounts:

`html

`

API Reference

$3

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| projectToken | string | No | - | Your Subscribe.dev project token (can be set via SubscribeDevProvider) |

Note: The FlowEditor is typically wrapped with SubscribeDevProvider which handles authentication and API configuration.

Supported AI Models

The Flow Editor supports various AI models through Subscribe.dev:

$3


- Flux Schnell (black-forest-labs/flux-schnell) - Fast image generation
- Flux Kontext (black-forest-labs/flux-kontext-max) - Image generation with image input
- Flux Dev (black-forest-labs/flux-dev) - Higher quality image generation
- Google Nano Banana (google/nano-banana) - Supports 0-2 image inputs

$3

- WAN Video (wan-video/wan-2.2-5b-fast) - Video generation from text/image
- Seedance Lite (bytedance/seedance-1-lite) - High quality video generation
- Seedance Pro (bytedance/seedance-1-pro) - Premium video generation

$3

- Models available through Subscribe.dev's text completion API

Workflow Components

$3

- Text Input - For text prompts and instructions
- Image Input - For image uploads and references

$3

- AI Models - Execute AI generation with configurable parameters
- Support for multiple outputs (1-8 per model)
- Real-time progress tracking
- Parameter controls (width, height, aspect ratio, etc.)

$3

- Visual connections between compatible node types
- Automatic type validation
- Support for multiple outputs connecting to multiple inputs

Key Features

$3

- Track all previous AI generations automatically
- Persistent history across sessions
- Modal view with generation details
- One-click access to previous results

$3

- Integrated Subscribe.dev authentication
- Credit usage tracking
- Subscription management
- Sign in/out functionality

$3

- Topological sorting for correct execution order
- Parallel output generation
- Real-time status updates
- Error handling and retry logic

$3

- Dark theme optimized for AI workflows
- Professional Phosphor icon set
- Proper aspect ratios for media previews
- Keyboard shortcuts (Delete/Backspace to remove nodes/edges)
- Hover controls for node management
- Minimap and zoom controls
- Clickable media outputs with copy functionality

Development

To work on this package locally:

`bash


Clone the repository

git clone https://github.com/chatgpt-media-flow/editor.git

Install dependencies

bun install

Start development server (builds and serves with file watching)

bun run dev
`

This will:
1. Build the flow-editor UMD bundle
2. Start webpack in watch mode (rebuilds on file changes)
3. Start a local server on http://localhost:8000

$3

Once the development server is running, open your browser to:

http://localhost:8000/index.html

This is the main AI Flow Editor application with a pre-configured workflow demonstrating:
- Text input nodes
- AI model nodes (Flux Schnell for image generation)
- Visual node connections
- Real-time workflow execution
- Multiple output generation

$3

`bash


Build once (without serving)

bun run build

Serve existing build (without rebuilding)

bun run serve

Build once and serve (no file watching)

bun run dev:serve

Build for production

NODE_ENV=production bun run build
`

$3

The local server also hosts other example implementations:

- http://localhost:8000/editor_simple.html - Simple Subscribe.dev integration demo
- http://localhost:8000/test-umd.html - UMD package functionality test
- http://localhost:8000/code_editor.html - Advanced multi-model editor
- http://localhost:8000/flowgraph.html - Flow graph visualization
- http://localhost:8000/sheet.html - Sheet-based interface
- http://localhost:8000/perms_experiment.html - Authentication experiments

Note: All examples require the UMD bundle to be built first. The bun run dev command handles this automatically.

Example Files

This repository contains several example HTML files demonstrating different aspects of the flow editor:

- index.html - Main example showcasing the full flow editor with predefined workflow
- editor_simple.html - Simple Subscribe.dev integration demo
- test-umd.html - Basic UMD package functionality test
- code_editor.html - Advanced multi-model editor with flow management
- flowgraph.html - Flow graph visualization and editing
- sheet.html - Alternative sheet-based interface
- perms_experiment.html - Permissions and authentication experiments

Each file demonstrates different features and can be used as starting points for your own implementations.

Subscribe.dev Integration

This package requires a Subscribe.dev account and project token. Get started at subscribe.dev:

1. Sign up for a Subscribe.dev account
2. Create a new project
3. Copy your project token
4. Use it in the projectToken` prop

License

MIT

Support

For issues and feature requests, please use the GitHub Issues page.