shrimbly · thegovind · Dec 19, 2025 · Dec 19, 2025 · Dec 19, 2025
diff --git a/.env.local.example b/.env.local.example
@@ -0,0 +1,30 @@
+# Node Banana - Environment Variables
+# Copy this file to .env.local and fill in your API keys
+
+# ============================================================
+# GEMINI API (for Nano Banana and Nano Banana Pro models)
+# ============================================================
+# Get your API key from: https://aistudio.google.com/apikey
+GEMINI_API_KEY=your_gemini_api_key_here
+
+# ============================================================
+# OPENAI API (for OpenAI LLM provider - optional)
+# ============================================================
+# Get your API key from: https://platform.openai.com/api-keys
+OPENAI_API_KEY=your_openai_api_key_here
+
+# ============================================================
+# MICROSOFT FOUNDRY - FLUX.2 Pro (for Azure FLUX.2 Pro model)
+# ============================================================
+# Get your API key from Microsoft Foundry portal
+# Deploy FLUX.2-pro model and get your endpoint
+AZURE_API_KEY=your_azure_flux_api_key_here
+AZURE_FLUX_ENDPOINT=https://your-resource.openai.azure.com/providers/blackforestlabs/v1/flux-2-pro?api-version=preview
+
+# ============================================================
+# MICROSOFT FOUNDRY - GPT Image (for Azure GPT Image model)
+# ============================================================
+# Get your API key from Microsoft Foundry portal
+# Deploy gpt-image-1.5 model and get your endpoint
+AZURE_GPT_IMAGE_API_KEY=your_azure_gpt_image_api_key_here
+AZURE_GPT_IMAGE_ENDPOINT=https://your-resource.openai.azure.com/openai/v1/images/generations
diff --git a/CLAUDE.md b/CLAUDE.md
@@ -1,9 +1,32 @@
 # Node Banana - Development Guide
 
-## Model
-The application uses these models for image generation. These models are very recently released and do exist. 
-gemini-3-pro-image-preview
-gemini-2.5-flash-preview-image-generation
+## Supported Models
+
+### Image Generation Models
+
+The application supports multiple AI image generation providers:
+
+| Model ID | Display Name | Provider | API Model Name |
+|----------|--------------|----------|----------------|
+| `nano-banana` | Nano Banana | Google Gemini | gemini-2.5-flash-preview-image-generation |
+| `nano-banana-pro` | Nano Banana Pro | Google Gemini | gemini-3-pro-image-preview |
+| `azure-flux-pro` | Azure FLUX.2 Pro | Microsoft Foundry | FLUX.2-pro (Black Forest Labs) |
+| `azure-gpt-image` | Azure GPT Image | Microsoft Foundry | gpt-image-1.5 |
+
+### Environment Variables
+
+- `GEMINI_API_KEY` - Required for Nano Banana models
+- `OPENAI_API_KEY` - Optional, for OpenAI LLM provider
+- `AZURE_API_KEY` - Required for Azure FLUX.2 Pro
+- `AZURE_GPT_IMAGE_API_KEY` - Required for Azure GPT Image
+
+### API Endpoints (in `src/app/api/generate/route.ts`)
+
+- **Gemini**: Uses `@google/genai` SDK
+- **Azure FLUX**: `https://<resource>.openai.azure.com/providers/blackforestlabs/v1/flux-2-pro?api-version=preview`
+  - Auth: `api-key` header
+- **Azure GPT Image**: `https://<resource>.openai.azure.com/openai/v1/images/generations`
+  - Auth: `Authorization: Bearer` header
 
 
 

diff --git a/README.md b/README.md
@@ -1,17 +1,22 @@
 # Node Banana
 
-> **Important note:** This is in early development and hasn't been tested off my machines,it probably has some issues. Use Chrome. 
+> **Note:** This is in early development and hasn't been extensively tested. Use Chrome for best results.
 
-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.
+Node Banana is a node-based workflow application for AI image generation. Build image generation pipelines by connecting nodes on a visual canvas.
 
 ## Features
 
 - **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
+- **Multi-Provider AI Image Generation** - Generate images using:
+  - Google Gemini (Nano Banana, Nano Banana Pro)
+  - Microsoft Foundry FLUX.2 Pro (Black Forest Labs)
+  - Microsoft Foundry GPT Image
 - **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
+- **Node Groups** - Organize nodes into collapsible groups
+- **Auto-Save** - Automatically save workflows to disk
 
 ## Tech Stack
 
@@ -21,67 +26,149 @@ Node Banana is node-based workflow application for generating images with NBP. B
 - **Canvas**: Konva.js / react-konva
 - **State Management**: Zustand
 - **Styling**: Tailwind CSS
-- **AI**: Google Gemini API, OpenAI API
 
 ## Getting Started
 
 ### Prerequisites
 
 - Node.js 18+
-- npm
+- pnpm (recommended) or npm
+
+### Installation
+
+```bash
+# Clone the repository
+git clone https://github.com/your-username/node-banana.git
+cd node-banana
+
+# Install dependencies
+pnpm install
+```
 
 ### Environment Variables
 
-Create a `.env.local` file in the root directory:
+Copy the example environment file and add your API keys:
+
+```bash
+cp .env.local.example .env.local
+```
+
+Then edit `.env.local` with your API keys:
 
 ```env
+# Google Gemini API (for Nano Banana models)
+# Get your key from: https://aistudio.google.com/apikey
 GEMINI_API_KEY=your_gemini_api_key
-OPENAI_API_KEY=your_openai_api_key  # Optional, for OpenAI LLM provider
-```
 
-### Installation
+# OpenAI API (optional, for OpenAI LLM provider)
+# Get your key from: https://platform.openai.com/api-keys
+OPENAI_API_KEY=your_openai_api_key
 
-```bash
-npm install
+# Microsoft Foundry - FLUX.2 Pro
+# Get from Microsoft Foundry portal > Keys and Endpoint
+AZURE_API_KEY=your_azure_flux_api_key
+AZURE_FLUX_ENDPOINT=https://your-resource.openai.azure.com/providers/blackforestlabs/v1/flux-2-pro?api-version=preview
+
+# Microsoft Foundry - GPT Image
+# Get from Microsoft Foundry portal > Keys and Endpoint
+AZURE_GPT_IMAGE_API_KEY=your_azure_gpt_image_api_key
+AZURE_GPT_IMAGE_ENDPOINT=https://your-resource.openai.azure.com/openai/v1/images/generations
 ```
 
+> **Note:** You only need to configure the API keys for the models you plan to use.
+
 ### Development
 
 ```bash
-npm run dev
+pnpm dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) in your browser.
 
 ### Build
 
 ```bash
-npm run build
-npm run start
+pnpm build
+pnpm start
 ```
 
-## Example Workflows
+## Supported Models
+
+### Image Generation
 
-The `/examples` directory contains some example workflow files from my personal projects. To try them:
+| Model | Provider | Description |
+|-------|----------|-------------|
+| Nano Banana | Google Gemini | gemini-2.5-flash-image - Fast image generation |
+| Nano Banana Pro | Google Gemini | gemini-3-pro-image-preview - Higher quality, more options |
+| Azure FLUX.2 Pro | Microsoft Foundry | Black Forest Labs FLUX.2 Pro model |
+| Azure GPT Image | Microsoft Foundry | GPT-based image generation with quality controls |
 
-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. 
+### Text Generation (LLM Node)
+
+| Model | Provider |
+|-------|----------|
+| gemini-2.5-flash | Google |
+| gemini-3-pro-preview | Google |
+| gpt-4.1-mini | OpenAI |
+| gpt-4.1-nano | OpenAI |
 
 ## Usage
 
-1. **Add nodes** - Click the floating action bar to add nodes to the canvas
+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
+3. **Configure nodes** - Adjust settings like model, aspect ratio, quality, 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
 
+### Node Types
+
+| Node | Description |
+|------|-------------|
+| **Image Input** | Load images from your computer |
+| **Annotation** | Draw on images with shapes, arrows, and text |
+| **Prompt** | Create text prompts for generation |
+| **Generate** | AI image generation with multiple model options |
+| **LLM Generate** | AI text generation for dynamic prompts |
+| **Output** | Display and export final images |
+
 ## Connection Rules
 
-- **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
+- **Image** handles (left side) connect to **Image** handles only
+- **Text** handles (left side) connect to **Text** handles only
+- Image inputs on generation nodes accept **multiple connections** (for multi-image context)
+- Text inputs accept **single connections**
+
+## Example Workflows
+
+The `/examples` directory contains example workflow files. To try them:
+
+1. Start the dev server with `pnpm dev`
+2. Drag any `.json` file from `/examples` into the browser window
+3. Review the prompts and adjust as needed
+4. Click Run to execute
+
+## Microsoft Foundry Setup
+
+To use Azure models, you need to deploy them in Microsoft Foundry:
+
+1. Go to [Microsoft Foundry](https://ai.azure.com)
+2. Create or select a project
+3. Navigate to **Model catalog**
+4. Deploy **FLUX.2-pro** (Black Forest Labs) and/or **gpt-image-1** (Azure OpenAI)
+5. Copy your API keys from **Keys and Endpoint**
+
+### Endpoint Configuration
+
+The Azure endpoints are configured via environment variables. Set them in your `.env.local` file:
+
+```env
+AZURE_FLUX_ENDPOINT=https://your-resource.openai.azure.com/providers/blackforestlabs/v1/flux-2-pro?api-version=preview
+AZURE_GPT_IMAGE_ENDPOINT=https://your-resource.openai.azure.com/openai/v1/images/generations
+```
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
 
 ## License
 

diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "@tailwindcss/postcss": "^4.1.17",
     "@xyflow/react": "^12.9.3",
     "autoprefixer": "^10.4.22",
+    "jszip": "^3.10.1",
     "konva": "^10.0.12",
     "next": "^16.0.6",
     "postcss": "^8.5.6",