AI Flow Editor

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

Quick Start

``bash


Install dependencies

npm install

Start development server

npm run dev
`

Then open http://localhost:8000 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 with aspectRatio support (1:1, 16:9, 9:16)
- Google Nano Banana (google/nano-banana) - Combines two input images with prompt

$3

- WAN Video (wan-video/wan-2.2-5b-fast) - Video generation with optional starting frame (16:9, 9:16)
- Seedance Lite (bytedance/seedance-1-lite) - High quality video with optional start/end frames (1:1, 16:9, 9:16)
- Seedance Pro (bytedance/seedance-1-pro) - Premium video generation (1:1, 16:9, 9:16)

$3

- GPT-4o (openai/gpt-4o) - Text generation with optional image input
- GPT-5 (openai/gpt-5) - Advanced text generation with optional image input

$3

- Minimax Speech (minimax/speech-02-turbo) - Text-to-speech with 40+ English voice options

$3

- Sync Lipsync (sync/lipsync-2) - Synchronizes audio with video

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/viceroymiami/chatgpt-media-flow.git

Install dependencies

npm install

Start development server (builds and serves with file watching)

npm 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

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)

npm run build

Serve existing build (without rebuilding)

npm run serve

Build once and serve (no file watching)

npm run dev:serve

Build for production

NODE_ENV=production npm run build
`

$3

The development server hosts the main example implementation:

- http://localhost:8000 - Main AI Flow Editor with predefined workflow demonstrating text input → image generation

Note: The UMD bundle is built automatically when you run npm run dev.

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.