nano-banana-builder

Create full-stack web apps using Google Gemini Nano Banana image APIs.

1|Updated Mar 30, 2022
One-click install
npx skills add https://github.com/fcoury/config --skill nano-banana-builder-fcoury
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: nano-banana-builder
Source: https://github.com/fcoury/config/tree/main/ai/skills/nano-banana-builder
Command: npx skills add https://github.com/fcoury/config --skill nano-banana-builder-fcoury

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @ai-sdk/google, ai, @ai-sdk/react, @vercel/blob, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill empowers developers to build full-stack web applications that leverage Google Gemini's advanced image generation APIs, simplifying the creation of dynamic visual content.

Core Features & Use Cases

  • Image Generation & Editing: Create text-to-image generators, iterative editors, and galleries.
  • API Integration: Seamlessly integrates with gemini-2.5-flash-image and gemini-3-pro-image-preview models.
  • Full-Stack Development: Covers React components, server actions, API routes, storage, and deployment patterns.
  • Use Case: Build a web app where users can describe an image, generate it, and then iteratively refine it through conversational prompts, powered by Nano Banana.

Quick Start

Use the nano-banana-builder skill to generate an image from the prompt 'A futuristic cityscape at dusk'.

Frequently Asked Questions about nano-banana-builder

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build an AI image generation app with Next.js and Google Gemini?

You can build an AI image generation app with Next.js and Google Gemini by using this Skill to generate full-stack components, server actions, and API routes that integrate with models like gemini-2.5-flash-image.

Can I create an iterative image editor using the Gemini Nano Banana APIs?

Yes, you can create an iterative image editor using the Gemini Nano Banana APIs by generating React components that allow users to refine and edit images through conversational text prompts within your web application.

Does this image generation skill handle file storage and deployment?

This image generation skill handles file storage and deployment by providing patterns for integrating with @vercel/blob for storage and including deployment configurations for your full-stack web application.

What is the best way to add rate limiting to a React AI image generator?

The best way to add rate limiting to a React AI image generator is by using the server actions and API route patterns provided by this Skill to manage and restrict user requests to the Gemini image generation models.

Do I need the @ai-sdk/google package to generate images with gemini-2.5-flash-image?

Yes, you need the @ai-sdk/google package to connect your Next.js application to the gemini-2.5-flash-image model, enabling the core text-to-image generation and editing features.

Why use server actions for text-to-image generation instead of client-side API calls?

Using server actions for text-to-image generation secures your API keys and handles heavy processing server-side, returning the generated image data directly to your React components without exposing credentials.