### An Open Visual Workflow Editor for AI APIs
[](https://github.com/yuanzoo/popiart-node/stargazers)
[](LICENSE)
[](https://discord.com/invite/89Nr6EKkTf)
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**](https://node-banana-docs.vercel.app/) • [Discord](https://discord.com/invite/89Nr6EKkTf)
## 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](https://ai.google.dev/) | Fully supported |
| [Replicate](https://replicate.com/) | Supported |
| [fal.ai](https://fal.ai/) | Supported |
| [Kie.ai](https://kie.ai/) | Supported |
| [WaveSpeed](https://wavespeed.ai/) | Supported |
| [OpenAI](https://openai.com/) | LLM only |
## Getting Started
### Prerequisites
- Node.js 18+
- npm
### Quick Start
```bash
git clone https://github.com/yuanzoo/popiart-node.git
cd popiart-node
npm install
npm run dev
```
Open [http://localhost:3000](http://localhost:3000) in your browser.
### Environment Variables
Create a `.env.local` file in the root directory:
```env
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
```bash
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
