Important note: This is in early development, it probably has some issues. Use Chrome. For support or raising any issues join the discord. See the docs for help, installation guides, and user guides.
Node Banana is node-based workflow application for generating images with Nano Banana Pro. Build image generation pipelines by connecting nodes on a visual canvas. Recent Fal and Replicate integration allows for complex image and video pipelines from any provider, but be aware this is still in testing.
Built mainly with Opus 4.5.
- Prompt to Workflow - Generate complete workflows from natural language descriptions or choose from preset templates (Gemini only for now)
- 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
- Group Locking - Lock node groups to skip them during execution
In addition to Google Gemini, Node Banana now supports:
- Replicate - Access thousands of open-source models
- fal.ai - Fast inference for image and video generation
Configure API keys in Project Settings to enable these providers.
- 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, Replicate (Beta), fal.ai (Beta)
- 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
REPLICATE_API_KEY=your_replicate_api_key # Optional, beta
FAL_API_KEY=your_fal_api_key # Optional, betanpm installnpm run devOpen http://localhost:3000 in your browser.
npm run build
npm run startThe /examples directory contains some example workflow files from my personal projects. To try them:
- Start the dev server with
npm run dev - Drag any
.jsonfile from the/examplesfolder into the browser window - Make sure you review each of the prompts before starting, these are fairly targetted to the examples.
- Add nodes - Click the floating action bar to add nodes to the canvas
- Connect nodes - Drag from output handles to input handles (matching types only)
- Configure nodes - Adjust settings like model, aspect ratio, or drawing tools
- Run workflow - Click the Run button to execute the pipeline
- 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
Run the test suite with:
npm test # Watch mode
npm run test:run # Single run
npm run test:coverage # With coverage reportPRs are welcome, please pull the latest changes from develop before creating a PR and make it to the develop branch, not master. Not that I'm primarily making this for my own workflows, if the PR conflicts with my own plans I'll politely reject it. If you want to collaborate, consider joining the Discord and we can hash something out.
MIT
