** From X post: https://x.com/ReflctWillie/status/2000524227066159579?s=20 Important note: This is in early development and hasn't been tested off my machines,it probably has some issues. Use Chrome.

Node Banana is node-based workflow application for generating images with NBP. Build image generation pipelines by connecting nodes on a visual canvas. Built mainly with Opus 4.5.

• Visual Node Editor - Drag-and-drop nodes onto an infinite canvas with pan and zoom
• Image Annotation - Full-screen editor with drawing tools (rectangles, circles, arrows, freehand, text)
• AI Image Generation - Generate images using Google Gemini models
• Text Generation - Generate text using Google Gemini or OpenAI models
• Workflow Chaining - Connect multiple nodes to create complex pipelines
• Save/Load Workflows - Export and import workflows as JSON files

• Framework: Next.js 16 (App Router)
• Language: TypeScript
• Node Editor: @xyflow/react (React Flow)
• Canvas: Konva.js / react-konva
• State Management: Zustand
• Styling: Tailwind CSS
• AI: Google Gemini API, OpenAI API

• Node.js 18+
• npm

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

GEMINI_API_KEY=your_gemini_api_key
OPENAI_API_KEY=your_openai_api_key  # Optional, for OpenAI LLM provider

npm install

npm run dev

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

npm run build
npm run start

The /examples directory contains some example workflow files from my personal projects. 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. Make sure you review each of the prompts before starting, these are fairly targetted to the examples.

1. Add nodes - Click the floating action bar to add nodes to the canvas
2. Connect nodes - Drag from output handles to input handles (matching types only)
3. Configure nodes - Adjust settings like model, aspect ratio, or drawing tools
4. Run workflow - Click the Run button to execute the pipeline
5. Save/Load - Use the header menu to save or load workflows

• Image handles connect to Image handles only
• Text handles connect to Text handles only
• Image inputs on generation nodes accept multiple connections
• Text inputs accept single connections

MIT