The Problem

Building AI media pipelines—image, video, audio, 3D—usually means stitching together provider SDKs and bespoke scripts. Node Banana replaces that with a visual, node-based workflow editor where you connect typed nodes on a canvas and execute them in dependency order. It targets users who want multi-provider generative pipelines without writing orchestration code.

What This Does

Node Banana is a React/Next.js application (TypeScript, 295 source files) that renders an infinite canvas for building AI workflows. You drag nodes representing generation tasks—image, video, audio, 3D, text—connect their typed ports, and execute the graph. The engine resolves dependencies and calls provider APIs (Google Gemini, Replicate, fal.ai, Kie.ai, WaveSpeed, OpenAI) in order. It also supports dynamic prompting, prompt-to-workflow generation from natural language, image annotation, and saving/loading workflows as JSON.

The API layer lives in src/app/api/, with provider-specific logic in src/app/api/generate/providers/ (fal.ts, gemini.ts, replicate.ts, kie.ts, wavespeed.ts). The frontend state and execution logic are in src/store/workflowStore.ts and src/components/WorkflowCanvas.tsx.

How It Is Wired

Execution starts at the Next.js API routes. For generation, src/app/api/generate/route.ts is the entry point. It calls into provider modules like src/app/api/generate/providers/fal.ts, which then make external API calls. The src/app/api/chat/route.ts POST handler is the most connected API route, calling into 21 internal functions and reading/writing files.

The frontend is driven by src/store/workflowStore.ts—a 2,253-line store with 14 functions called from 8 other files. It manages workflow state, execution, and undo history. The most-connected modules are src/components/nodes/BaseNode.tsx (24 modules import it) and src/components/nodes/HandleLabel.tsx (18 importers). These are hubs with high blast radius.

The internal call graph shows useShowHandleLabels is called from 18 places, pushUndoCheckpoint from 17, and getChannelData from 9. These are the functions where changes break the most. src/store/workflowStore.ts and src/store/undoHistory.ts participate in a circular import dependency, which complicates refactoring.

The module graph shows two modules in a cycle (workflowStore and undoHistory), and several hubs like BaseNode and HandleLabel that are stable (low instability) but heavily depended upon. The wiring is clear but dense: 853 internal call edges between functions.

How To Use It

Setup: Clone and install with npm. The README documents the exact commands:

git clone https://github.com/shrimbly/node-banana.git
cd node-banana
npm install
npm run dev

Configuration: Create a .env.local file in the root. Required: GEMINI_API_KEY (for prompt-to-workflow). Optional: OPENAI_API_KEY, ANTHROPIC_API_KEY, REPLICATE_API_KEY, FAL_API_KEY, KIE_API_KEY, WAVESPEED_API_KEY. Keys can also be configured in-app via Project Settings.

Running: npm run dev starts the dev server at http://localhost:3000. For production: npm run build then npm run start.

Real-World Use

A practical scenario: a product team wants to generate product shots with background swaps and style transfer. They build a workflow in Node Banana: an ImageInputNode feeds into a GenerateImageNode (configured for Replicate), which connects to a BackgroundSwapNode and then an OutputNode. The workflow is saved as JSON and shared. When run, the engine executes nodes in dependency order, calling Replicate's API for each generation step, and produces the final annotated images.

Code Health & Issues

Static analysis found 73 issues (13 high, 60 medium), including:

  • High - Oversized files - src/store/workflowStore.ts (2,253 lines), src/app/api/generate/providers/kie.ts, src/app/api/models/[modelId]/route.ts. Hard to hold in one head; changes ripple widely.
  • High - Import cycle - src/store/workflowStore.ts and src/store/undoHistory.ts are mutually reachable.
  • High - Deep nesting - 26 files with max indentation depth 9, including src/components/modals/ModelSearchDialog.tsx, src/components/CostDialog.tsx, src/components/GroupsOverlay.tsx.
  • High - Duplicated code - 1,414 repeated 6-line blocks across 147 test files.
  • Medium - Hub modules - BaseNode.tsx, HandleLabel.tsx, execution/types.ts are depended on by 18-24 modules each.

The security audit found one critical issue: .github/workflows/claude.yml exposes CLAUDE_CODE_OAUTH_TOKEN to pull requests, which could exfiltrate credentials. Fix: gate on an environment with required reviewers or use workflow_run. Also: third-party actions are pinned to tags (@v1, @v3) instead of commit SHAs, no dependency scan in CI, and no Dependabot configured.

The Bottom Line

This is a functional, feature-rich visual workflow editor for AI media generation, with good provider coverage and a clean Next.js architecture. The codebase is dense and the store layer is a maintenance risk, but the API and component boundaries are sensible. Teams that need a multi-provider generative pipeline builder—and have the capacity to maintain a 395-file codebase—will find it useful. Those wanting a drop-in tool should wait for more maturity.