BananaCanvas AI is an advanced enterprise-grade AI creation workspace. It uniquely blends real-time conversational AI (powered by Google Gemini/Flux) with a boundless, infinite node-based canvas. Experience a revolutionary way to brainstorm, generate, structure, and visualize knowledge and assets seamlessly.

✨ Differentiating Highlights

• 🪐 Infinite Node Canvas & Chat Modes: Instantly toggle between a traditional chat thread and a free-flowing, zoomable infinite canvas. Nodes automatically map connections conceptually.
• ⚡ Extreme Performance Architecture: Employs client-side transparent WebP compression within HTML5 Canvases, reducing output image payload footprint by 20x. Incorporates native decoding="async" to eliminate main-thread blocking, keeping the UI at a buttery-smooth 60fps even with dozens of ultra-HD generated assets.
• 🖼️ Pinterest-Style Masonry Gallery: A dynamic and immersive irregular grid showcasing cutting-edge generative prompts safely encapsulated with deep optimization.
• 💳 Built-in SaaS Billing Ecosystem: Features an out-of-the-box integrated payment system seamlessly hooked into Supabase environments.

🛠️ Technology Stack

• Frontend Core: Next.js 15 (App Router), React 19, TypeScript
• Styling & UX: Tailwind CSS, Radix UI, Framer Motion (for physics-based animations)
• State Management: Zustand (with strict selector isolation for highly-optimized rendering)
• Backend & Database: Supabase (Auth, PostgreSQL DB, RLS Protocols)
• AI Engine: Google Generative AI (Gemini 3.1 Flash Image preview / Flux)

🏎️ Start Your Engines

Prerequisites

• Node.js 18+ (pnpm recommended)
• A Supabase project
• A Google Gemini API Key

Installation

1. Clone the repository:

   git clone https://github.com/yourusername/bananacanvas-ai.git
   cd bananacanvas-ai
   

2. Install dependencies:

   pnpm install
   

3. Configure Environment: Initialize .env.local:

   NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
   NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
   SUPABASE_SERVICE_ROLE_KEY=your_service_role_key
   
   GEMINI_API_KEY=your_gemini_api_key
   

4. Spin up your studio:

   pnpm dev
   

   Navigate to http://localhost:3000

🛡️ Data Governance

Protected at the database level using Supabase Row Level Security (RLS). Prompts and generations are siloed strictly to authenticated owners with robust fallback edge handlers.

📄 License

This intellectual property is available under the MIT License. See LICENSE.