Security News
n8n Tops 2025 JavaScript Rising Stars as Workflow Platforms Gain Momentum
n8n led JavaScript Rising Stars 2025 by a wide margin, with workflow platforms seeing the largest growth across categories.
By Sarah Gooding - Jan 29, 2026
Latest Socket ResearchMalicious Chrome Extension Performs Hidden Affiliate Hijacking.Details →
chatgpt-media-flow-editor
Advanced tools
chatgpt-media-flow-editor
AI Flow Editor - A visual node-based editor for AI workflows with ReactFlow, Subscribe.dev and Replicate API integration
AI Flow Editor
A visual node-based editor for creating AI workflows with ReactFlow and Subscribe.dev integration.
Quick Start
# 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
npm install chatgpt-media-flow-editor
Prerequisites
Before using the Flow Editor, make sure you have the following dependencies loaded:
<!-- Process polyfill -->
<script>
window.process = { env: { NODE_ENV: 'development' } };
</script>
<!-- React -->
<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>
<!-- Babel for JSX transformation -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- ReactFlow -->
<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>
<!-- Subscribe.dev -->
<script src="https://unpkg.com/@subscribe.dev/react@0.0.161/index.umd.js"></script>
<!-- Tailwind CSS (for styling) -->
<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
// 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 (
<FlowEditor
projectToken="your-subscribe-dev-project-token"
/>
);
}
export default App;
UMD / Script Tag
<!DOCTYPE html>
<html>
<head>
<!-- Prerequisites (see above) -->
<!-- Flow Editor -->
<script src="https://unpkg.com/chatgpt-media-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:
<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:
# 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:
- Build the flow-editor UMD bundle
- Start webpack in watch mode (rebuilds on file changes)
- 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
# 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 demohttp://localhost:8000/test-umd.html- UMD package functionality testhttp://localhost:8000/code_editor.html- Advanced multi-model editorhttp://localhost:8000/flowgraph.html- Flow graph visualizationhttp://localhost:8000/sheet.html- Sheet-based interfacehttp://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 workfloweditor_simple.html- Simple Subscribe.dev integration demotest-umd.html- Basic UMD package functionality testcode_editor.html- Advanced multi-model editor with flow managementflowgraph.html- Flow graph visualization and editingsheet.html- Alternative sheet-based interfaceperms_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:
- Sign up for a Subscribe.dev account
- Create a new project
- Copy your project token
- Use it in the
projectTokenprop
License
MIT
Support
For issues and feature requests, please use the GitHub Issues page.
FAQs
AI Flow Editor - A visual node-based editor for AI workflows with ReactFlow, Subscribe.dev and Replicate API integration
The npm package chatgpt-media-flow-editor receives a total of 5 weekly downloads. As such, chatgpt-media-flow-editor popularity was classified as not popular.
We found that chatgpt-media-flow-editor demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Package last updated on 18 Sep 2025
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
Federal Government Rescinds Software Supply Chain Mandates, Makes SBOMs Optional
The U.S. government is rolling back software supply chain mandates, shifting from mandatory SBOMs and attestations to a risk-based approach.
By Sarah Gooding - Jan 28, 2026
Security News
crates.io Ships Security Tab and Tightens Publishing Controls
crates.io adds a Security tab backed by RustSec advisories and narrows trusted publishing paths to reduce common CI publishing risks.
By Sarah Gooding - Jan 27, 2026