An Open Visual Workflow Editor for AI APIs

Build AI image, 3D, audio and video generation pipelines by connecting nodes on a visual canvas.
Multi-provider support. Dynamic prompting features. Local, private, MIT, BYOK.

Documentation  •  Discord

Build Complex AI Pipelines Visually

popiart-node is a node-based workflow editor for AI media generation. Drag nodes onto an infinite canvas, connect them with typed handles, and execute pipelines that call AI APIs in dependency order.

• Build dynamic prompts with variables, LLM/VLM-powered prompt construction, and reusable prompt chains
• Generate workflows from natural language or choose from preset templates
• Chain multiple AI models together across providers in a single pipeline
• Generate images, video, 3D models, and audio from a single workflow
• Annotate and edit images with a full-screen drawing editor
• Save and share workflows as portable JSON files

Features

Feature	Description
Dynamic Prompting	Build prompts with variables, LLM-powered text construction, and reusable prompt chains that adapt per run and per input
Prompt to Workflow	Generate complete workflows from natural language descriptions
Visual Node Editor	Drag-and-drop nodes onto an infinite canvas with pan and zoom
Image Generation	Generate images using Google Gemini, Replicate, fal.ai, Kie.ai, and more
Video Generation	Generate video via AI API providers
Audio Generation	Text-to-speech and AI audio generation
3D Generation	Generate 3D models or use them as node inputs
Image Annotation	Full-screen editor with drawing tools (rectangles, circles, arrows, freehand, text)
Text Generation	Generate text using Google Gemini, OpenAI, or Anthropic models
Workflow Chaining	Connect multiple nodes to create complex multi-step pipelines
Group Locking	Lock node groups to skip them during execution
Save/Load	Export and import workflows as JSON files

Supported Providers

Provider	Status
Google Gemini	Fully supported
Replicate	Supported
fal.ai	Supported
Kie.ai	Supported
WaveSpeed	Supported
OpenAI	LLM only

Getting Started

Prerequisites

• Node.js 18+
• npm

Quick Start

git clone https://github.com/yuanzoo/popiart-node.git
cd popiart-node
npm install
npm run dev

Open http://localhost:3000 in your browser.

Environment Variables

Create a .env.local file in the root directory:

GEMINI_API_KEY=your_gemini_api_key          # Required for prompt-to-workflow
OPENAI_API_KEY=your_openai_api_key          # Optional
ANTHROPIC_API_KEY=your_anthropic_api_key    # Optional
REPLICATE_API_KEY=your_replicate_api_key    # Optional
FAL_API_KEY=your_fal_api_key                # Optional
KIE_API_KEY=your_kie_api_key                # Optional
WAVESPEED_API_KEY=your_wavespeed_api_key    # Optional

API keys can also be configured in Project Settings within the app.

Build

npm run build
npm run start

Example Workflows

The /examples directory contains example workflow files. To try them:

1. Start the dev server with npm run dev
2. Drag any .json file from the /examples folder into the browser window
3. Review the prompts in each node before running — they're targeted to specific use cases

Node Types

Type	Purpose
Image Input	Load or upload reference images
Audio Input	Load or upload audio files
Prompt	Text prompt input
Prompt Constructor	Build dynamic prompts with variables and LLM-powered text construction
Array	Batch process multiple inputs through a workflow
Generate	AI image generation (multi-provider)
Generate Video	AI video generation
Generate Audio	Text-to-speech and AI audio generation
Generate 3D	AI 3D model generation
LLM	AI text generation (Gemini, OpenAI, Anthropic)
Annotation	Draw on images with full-screen editor
Split Grid	Split image into grid cells
Video Stitch	Combine video clips into a single output
Video Trim	Trim video clips to a specific range
Video Frame Grab	Extract frames from video
Image Compare	Side-by-side image comparison
Ease Curve	Define easing curves for parameter interpolation
Router	Route data to different branches
Switch	Toggle between execution paths
Conditional Switch	Route data based on conditions
GLB Viewer	Load and display 3D GLB models
Output	Display final result
Output Gallery	Display multiple results in a gallery

Tech Stack

Testing

npm test              # Watch mode
npm run test:run      # Single run
npm run test:coverage # With coverage report

Contributing

PRs are welcome! Fork the repo, branch from develop, and open a PR back to develop.

This is primarily built for my own workflows — if a PR conflicts with my plans I'll politely decline. For larger contributions, join the Discord to coordinate first.

Community

• Discord — Chat, get help, and share workflows
• Documentation — Guides and reference
• GitHub Issues — Report bugs and request features

License

MIT