AI Flow Editor - A visual node-based editor for AI workflows with ReactFlow, Subscribe.dev and Replicate API integration
npm install @chatgpt-media-flow/editorA visual node-based editor for creating AI workflows with ReactFlow and Subscribe.dev integration.
``bashInstall dependencies
npm install
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 videoWorkflow 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 inputsKey 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 functionalityDevelopment
To work on this package locally:
`bash
Clone the repository
git clone https://github.com/viceroymiami/chatgpt-media-flow.gitInstall dependencies
npm installStart 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 buildServe existing build (without rebuilding)
npm run serveBuild once and serve (no file watching)
npm run dev:serveBuild 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 generationNote: 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` propMIT
For issues and feature requests, please use the GitHub Issues page.