A visual node-based workflow editor for AI image generation, similar to ComfyUI. Create workflows by connecting nodes on a canvas and execute them to generate images using Google Gemini and Fal.ai models.
- Visual Node Editor - Drag-and-drop node-based interface powered by LiteGraph.js
- Multiple AI Models - Support for Google Gemini, Fal.ai Flux, and Nano Banana models
- Image Editing - Edit existing images with natural language using Nano Banana Edit
- Real-time Preview - See generated images directly in the workflow canvas
- Workflow Management - Save, load, and organize your workflows
- Extensible Architecture - Easy to add new node types and AI models
| Category | Technology |
|---|---|
| Runtime | Bun |
| Frontend | React + TypeScript |
| Styling | Tailwind CSS v4 |
| Build Tool | Vite |
| Backend | Elysia.js |
| Database | SQLite via better-sqlite3 |
| Node Editor | LiteGraph.js |
| AI Services | Google Gemini, Fal.ai |
- Bun >= 1.0.0
- Google Gemini API key
- Fal.ai API key
# Clone the repository
git clone https://github.com/CodeWithBehnam/nanonodebanana.git
cd nanonodebanana
# Install dependencies
bun install
# Set up environment variables
cp .env.example .env
# Edit .env with your API keysCreate a .env file with:
GEMINI_API_KEY=your_gemini_api_key
FAL_KEY=your_fal_api_key# Run both frontend and backend
bun run dev
# Or run separately
bun run dev:client # Frontend on port 6880
bun run dev:server # Backend on port 6879bun run build
bun run start- Prompt - Text prompt input with inline editing
- Image Source - Upload images or provide URLs
- Seed - Random seed generator for reproducibility
- Number - Numeric value input
- Combine Prompts - Merge multiple prompts
- Style Preset - Apply predefined style modifiers
- Negative Prompt - Define what to avoid in generation
- Image Resize - Resize or crop images
- Gemini Generator - Google Gemini image generation
- Fal Flux - Fal.ai Flux models (Pro, Dev, Schnell)
- Fal Video - Video generation
- Nano Banana - Fast image generation
- Nano Banana Edit - Edit images with prompts
- Image Output - Display with resizable preview
- Save Image - Save to disk
- Gallery - Multi-image view
nanonodebanana/
├── src/
│ ├── nodes/ # LiteGraph node definitions
│ │ ├── base/ # BaseNode factory
│ │ ├── input/ # Input nodes
│ │ ├── processing/ # Processing nodes
│ │ ├── generation/ # AI generation nodes
│ │ └── output/ # Output nodes
│ ├── components/ # React components
│ ├── context/ # React contexts
│ ├── lib/ # Utilities and API client
│ └── types/ # TypeScript types
├── server/
│ ├── routes/ # API routes
│ ├── services/ # AI service integrations
│ └── db/ # Database schema
└── docs/ # Documentation
| Endpoint | Method | Description |
|---|---|---|
/api/generate/gemini |
POST | Google Gemini generation |
/api/generate/fal |
POST | Fal.ai Flux generation |
/api/generate/nano-banana |
POST | Nano Banana generation |
/api/generate/nano-banana-edit |
POST | Nano Banana image editing |
/api/workflows |
GET/POST | List/create workflows |
/api/workflows/:id |
GET/PUT/DELETE | Workflow CRUD |
/api/upload/image |
POST | Image upload |
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'feat: add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- LiteGraph.js for the node editor framework
- ComfyUI for inspiration
- Fal.ai for AI image generation APIs
- Google Gemini for generative AI capabilities
Tags: ai image-generation workflow node-editor react typescript bun vite tailwindcss litegraph comfyui gemini fal-ai nano-banana