@volter-ai-dev/flow-editor

# 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 @volter-ai-dev/flow-editor ``` ## Prerequisites Before using the Flow Editor, make sure you have the following dependencies loaded: ```html  <script> window.process = { env: { NODE_ENV: 'development' } }; </script>  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>  <script src="https://unpkg.com/reactflow@11.11.4/dist/umd/index.js"></script> <script> // Load ReactFlow CSS dynamically fetch('https://unpkg.com/reactflow@11.11.4/dist/style.css') .then(response => response.text()) .then(css => { const style = document.createElement('style'); style.textContent = css; document.head.appendChild(style); }); </script>  <script src="https://unpkg.com/@subscribe.dev/react@0.0.161/index.umd.js"></script>  <script src="https://cdn.tailwindcss.com"></script> ``` **Note:** The Flow Editor includes all necessary icons internally - no external icon libraries are required. ## Usage ### ES Modules / React App ```tsx // Note: This package is primarily designed for UMD usage // ES module support may be limited in the current version import FlowEditor from '@volter-ai-dev/flow-editor'; function App() { return ( <FlowEditor projectToken="your-subscribe-dev-project-token" /> ); } export default App; ``` ### UMD / Script Tag ```html <!DOCTYPE html> <html> <head>   <script src="https://unpkg.com/@volter-ai-dev/flow-editor@latest/dist/flow-editor.umd.js"></script> </head> <body> <div id="flow-editor-container"></div> <script type="text/babel"> // FlowEditor is available as window.FlowEditor const { ReactFlowProvider } = window.ReactFlow; const { SubscribeDevProvider } = window.SubscribeDevReact; // Get FlowEditor from compiled UMD const FlowEditor = window.FlowEditor.default; // Auth wrapper with providers const AuthWrapper = () => { return ( <ReactFlowProvider> <FlowEditor /> </ReactFlowProvider> ); }; // Main App with SubscribeDevProvider const App = () => { return ( <SubscribeDevProvider baseUrl="https://api.subscribe-dev.com"> <AuthWrapper /> </SubscribeDevProvider> ); }; const root = ReactDOM.createRoot(document.getElementById('flow-editor-container')); root.render(<App />); </script> </body> </html> ``` ### Programmatic Initialization You can initialize the Flow Editor with predefined nodes and edges by setting `window.FLOW` before the component mounts: ```html <script> window.FLOW = { nodes: [ { id: '1', type: 'textInput', position: { x: 100, y: 250 }, data: { prompt: 'A beautiful sunset over mountains', label: 'Text Input' } }, { id: '2', type: 'model', position: { x: 500, y: 100 }, data: { model: 'black-forest-labs/flux-schnell', width: 1024, height: 1024, outputCount: 2, label: 'Model' } } ], edges: [ { id: 'e1-2', source: '1', target: '2', sourceHandle: 'prompt', targetHandle: 'prompt' } ] }; </script> ``` ## API Reference ### FlowEditor Props | 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: ### Image Generation - **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 ### Video Generation - **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 ### Text Generation - Models available through Subscribe.dev's text completion API ## Workflow Components ### Input Nodes - **Text Input** - For text prompts and instructions - **Image Input** - For image uploads and references ### Model Nodes - **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.) ### Connections - Visual connections between compatible node types - Automatic type validation - Support for multiple outputs connecting to multiple inputs ## Key Features ### Generation History - Track all previous AI generations automatically - Persistent history across sessions - Modal view with generation details - One-click access to previous results ### Authentication & Billing - Integrated Subscribe.dev authentication - Credit usage tracking - Subscription management - Sign in/out functionality ### Workflow Execution - Topological sorting for correct execution order - Parallel output generation - Real-time status updates - Error handling and retry logic ### User Interface - 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/volter-ai/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` ### Running the Main App 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 ### Other Available Commands ```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 ``` ### Additional Example Files 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](https://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](https://github.com/volter-ai/flow-editor/issues) page.