Guía rápida de Gemini Nano Banana para desarrolladores de JavaScript

Todos los Geminis, todos los plátanos. Las imágenes generativas entran en una nueva era con el nuevo modelo Nano Banana de Google. El auge de los sofisticados modelos de lenguaje de gran tamaño (LLM) ha abierto nuevas fronteras en el desarrollo de aplicaciones, especialmente en el ámbito de la IA multimodal.

La capacidad de procesar y generar contenido en distintos tipos de datos, como texto e imágenes. A la vanguardia de esta innovación está el modelo Gemini Nano Banana (cuyo nombre oficial es gemini-2.5-flash-image), una potente herramienta optimizada para realizar tareas rápidas y de alta calidad de manipulación, generación y procesamiento de imágenes. Para aprovechar esta capacidad, los desarrolladores de JavaScript y TypeScript deben seguir un conjunto de prácticas recomendadas específicas que garanticen la eficiencia, la facilidad de mantenimiento y la seguridad. ¡Sí, también la seguridad!

Este artículo te ofrece técnicas prácticas, rápidas y sencillas para integrar Gemini Nano Banana en tus aplicaciones web modernas. Usamos herramientas establecidas, como AI SDK, que ofrece una capa abstracta y segura en cuanto a tipos sobre la complejidad de la API subyacente. Así, puedes enfocarte exclusivamente en la lógica de la aplicación. Esta abstracción es clave para lograr una calidad de código superior y preparar tus funciones de IA para el futuro.

En JavaScript, Gemini Nano Banana se suele usar para la generación y edición dinámica de imágenes, por ejemplo, para crear composiciones fotorrealistas o imágenes estilizadas a partir de contenido cargado por el usuario. Para lograrlo, repasaremos prácticas operativas esenciales: desde obtener imágenes externas de la web de forma eficiente y convertirlas directamente a un formato Uint8Array compatible con el modelo, hasta convertir la salida binaria sin procesar del modelo a una Data URL, por ejemplo, para renderizarla del lado del cliente.

Además, exploraremos estrategias avanzadas de ingeniería de prompts, en particular, la técnica de intercalar texto descriptivo e imágenes en el arreglo del prompt. Este método le proporciona al modelo el contexto detallado que necesita para realizar tareas complejas de composición y convertir solicitudes vagas en resultados predecibles y de alta calidad.

Por último, como reconocemos el papel de la IA en los flujos de trabajo de desarrollo, destacamos la importancia de fundamentar las plataformas de programación con agentes en documentación relevante e integrar verificaciones de seguridad con herramientas como Snyk Studio. Así te aseguras de que la velocidad de programación no comprometa la seguridad de las aplicaciones.

Empecemos con la guía rápida para que pongas en práctica las técnicas de desarrollo con Nano Banana que mejoran el rendimiento.

1. Usa AI SDK 

AI SDK ofrece un framework potente, seguro en cuanto a tipos y muy flexible para los desarrolladores de JavaScript y TypeScript que buscan crear aplicaciones de IA sofisticadas.

Puedes usar las bibliotecas que ofrecen OpenAI, Google y otros proveedores, pero también es útil contar con una abstracción sobre las API de los modelos.

Al ofrecer una API unificada y declarativa, el SDK abstrae la complejidad de interactuar directamente con modelos como Gemini Nano Banana (al que aquí nos referimos como gemini-2.5-flash-image). Esto permite que los desarrolladores se enfoquen en la lógica de la aplicación en lugar de administrar las API de bajo nivel.

Esto no solo agiliza el proceso de desarrollo, sino que también garantiza una calidad de código y una facilidad de mantenimiento superiores, sobre todo en un entorno TypeScript, donde el tipado estricto reduce considerablemente los errores en tiempo de ejecución y mejora la experiencia de desarrollo.

A continuación, se muestra un ejemplo del uso de AI SDK y el modelo Gemini 2.5 Flash Image de Google (conocido como Nano Banana):

import { generateText } from 'ai'
import { createGoogleGenerativeAI } from '@ai-sdk/google'

const yodaImagePath = join(process.cwd(), 'data', 'yoda.jpg')
const yodaImageBuffer = await readFile(yodaImagePath)
const yodaImageUint8Array = new Uint8Array(yodaImageBuffer)

// Use AI SDK with generateText for Gemini 2.5 Flash Image (Nano Banana)
// This model supports image editing/generation with input images
const googleProvider = createGoogleGenerativeAI({ apiKey: apiKey })

const result = await generateText({
      model: googleProvider('gemini-2.5-flash-image'),
      prompt: [
        {
          role: 'user',
          content: [
            {
              type: 'text',
              text: 'Generate a realistic selfie photo of the person in the first image together with Yoda from Star Wars (shown in the second image). The person joins Yoda in the scene where he is at and hugs him in selfie style while they are both smiling and looking at the camera. The image should look natural and photorealistic, as if taken with a smartphone camera.'
            },
     {
              type: 'image',
              image: userImageUint8Array,
              mediaType: imageFile.type || 'image/jpeg'
            },
            {
              type: 'image',
              image: yodaImageUint8Array,
              mediaType: 'image/jpeg'
            }
         ]
        }
      ]
    })  

2. Extrae los resultados del modelo Nano Banana como Data URL

Después de generar una imagen correctamente con un modelo multimodal como Gemini Nano Banana (gemini-2.5-flash-image), el resultado suele ser un archivo de imagen sin procesar, a menudo en un búfer Uint8Array.

Para mostrar esta imagen de inmediato en una aplicación frontend del lado del cliente (como un sitio web creado con React, Vue o JavaScript sin frameworks), los datos binarios sin procesar deben convertirse a un formato que el navegador web pueda interpretar de forma nativa.

El formato Data URL es la forma más directa y eficiente de hacerlo: incorpora los datos de la imagen codificados en base64 directamente en el atributo src de una etiqueta <img>. Así, el resultado generado se renderiza de inmediato para el usuario final, sin necesidad de otro endpoint del servidor ni de guardar el archivo en el disco.

try {
   // Call the model with await generateText({})
   // ...

   // Extract the generated image from result.files
    const generatedImageFile = result.files?.find(file => file.mediaType?.startsWith('image/'))

    if (!generatedImageFile) {
      console.error('=== Error: No image file found ===')
      console.error('Available files:', result.files)
      console.error('Result text content:', result.text)
      throw new Error('No image was generated in the response')
    }

    // Convert Uint8Array to base64 data URL for the frontend
    const base64String = Buffer.from(generatedImageFile.uint8Array).toString('base64')
    const dataUrl = `data:${generatedImageFile.mediaType};base64,${base64String}`

    return {
      success: true,
      image: dataUrl
    }
  } catch (error: any) {
    console.error('Error generating selfie:', error)
    throw createError({
      statusCode: error.statusCode || 500,
      message: error.message || 'Failed to generate selfie'
    })
  }

3. Obtén datos de imágenes de la web

En lugar de cargar el archivo de imagen desde el sistema de archivos local, también puedes obtenerlo en el momento desde una URL remota y convertir la respuesta a un formato Uint8Array compatible con la API del modelo.

En las aplicaciones modernas de JavaScript, sobre todo las que se ejecutan en un navegador, es habitual trabajar con recursos remotos. En lugar de limitarte a cargar el archivo de imagen desde el sistema de archivos local —algo que las políticas de seguridad podrían restringir o que simplemente no sería viable para contenido web dinámico—, también puedes obtener la imagen en el momento desde una URL remota. Esta capacidad ofrece mayor flexibilidad y permite que el modelo procese imágenes alojadas en redes de distribución de contenido (CDN) o servidores externos.

Para que estos datos remotos sean compatibles con la API del modelo en el dispositivo, que suele esperar una estructura de datos específica, como Uint8Array, debes convertirlos. El procedimiento estándar consiste en usar la API fetch para obtener el recurso, recuperar la respuesta sin procesar y convertirla al formato Uint8Array requerido.

    // Fetch Yoda image
    const yodaResponse = await fetch('https://example.com/image.jpg')
    if (!yodaResponse.ok) {
      throw new Error('Failed to fetch Yoda image')
    }
    const yodaArrayBuffer = await yodaResponse.arrayBuffer()
    const yodaImageUint8Array = new Uint8Array(yodaArrayBuffer)

Este proceso garantiza que los datos binarios de la imagen, ya sea JPEG, PNG u otro formato compatible, se representen correctamente como un arreglo de enteros sin signo de 8 bits, que es el formato de entrada esperado por las funciones de procesamiento del modelo. Esta integración fluida entre la obtención de datos remotos y la conversión de formatos es fundamental para crear aplicaciones de JavaScript sólidas y dinámicas que aprovechen la inteligencia en el dispositivo.

4. Intercala texto descriptivo para crear prompts detallados

La API del modelo y la API generateText({}) no permiten agregar anotaciones que describan cada imagen. Por eso, si especificas varios archivos, su orden queda implícito y podría confundir al modelo, sobre todo si el prompt es ambiguo.

Para resolverlo y obtener mejores resultados con los prompts, puedes construir el prompt como una secuencia de mensajes de chat e intercalar descripciones de texto antes y después de las imágenes. Así le das al modelo un contexto más claro para interpretar lo que quieres decir.

Considera el siguiente método para intercalar texto en el prompt del modelo:

const result = await generateText({
      model: googleProvider('gemini-2.5-flash-image'),
      prompt: [
        {
          role: 'user',
          content: [
            {
              type: 'text',
              text: 'COMPOSITION INSTRUCTIONS: Generate a single, hyper-realistic, high-detail selfie photograph. The foundational scene and background must be derived exclusively from the Yoda background image (shown below); this setting serves as the environment for the final image.'
            },
            {
              type: 'text',
              text: '[Yoda Background Image]'
            },
            {
              type: 'image',
              image: yodaImageUint8Array,
              mediaType: 'image/jpeg'
            },
            {
              type: 'text',
              text: 'Integrate the person from the user selfie image (shown below) into the Yoda background, placing them standing close to Yoda. The final image should have a selfie-style perspective (close-up, intimate framing) as if taken from a first-person viewpoint, but DO NOT include any visible hands, smartphones, or camera equipment in the frame. The image should appear as if the camera is invisible, capturing a natural moment without showing the device or hand holding it.'
            },
            {
              type: 'text',
              text: '[User Selfie Image]'
            },
            {
              type: 'image',
              image: userImageUint8Array,
              mediaType: imageFile.type || 'image/jpeg'
            },
            {
              type: 'text',
              text: 'Both individuals must be smiling, looking directly into the lens, and their precise facial likenesses, clothing, and details from tyouheir respective input images must be accurately and seamlessly preserved. Maintain consistent, warm, soft, natural daylight and ensure the overall vibe is joyful and spontaneous. The final image must appear as a spontaneous, single-shot photograph taken in the original environment of the Yoda background image. IMPORTANT: Do not include any visible hands, smartphones, phones, or camera equipment in the final image - only show the people and background.'
            }
          ]
        }
      ]
    })

Esta técnica de intercalar texto y contenido multimedia en el arreglo content del prompt es un patrón potente para obtener un control detallado sobre modelos multimodales como Gemini Nano Banana.

Al tratar el prompt como una conversación o narración estructurada, los desarrolladores pueden ir más allá de las entradas simples de texto e imágenes y realizar tareas complejas, como el relleno preciso de imágenes, la edición de composiciones y el uso de elementos visuales específicos como base para la generación. Esto, en última instancia, produce resultados más predecibles y de mayor calidad en la API de generación de imágenes.

5. Aprovecha las reglas del modelo para el desarrollo con IA

Si trabajas con Gemini CLI, Claude Code, Cursor u otras plataformas de programación con agentes, probablemente quieras proporcionarles contexto y documentación de la API para que rindan mejor y no inventen llamadas a métodos que no existen. Proporcionar documentación actualizada al agente también ayuda a garantizar que la asistencia de programación del LLM use las versiones más recientes de la API que elijas.

En este ejemplo, usaremos las reglas de Cursor y el siguiente formato para el nombre del archivo: .cursor/rules/ai-sdk-google-provider-docs.mdc. Luego, agrega el siguiente contenido:

---
alwaysApply: false
description: AI SDK API documentation for the Google Gemini LLM provider
globs: server/api/generate-selfie.post.ts
---

# Google Generative AI Provider

The [Google Generative AI](https://ai.google.dev) provider contains language and embedding model support for
the [Google Generative AI](https://ai.google.dev/api/rest) APIs.

// ...
// REST OF THE CONTENT
// ...

Solo tienes que copiar el contenido de la documentación oficial, como la documentación de AI SDK https://v6.ai-sdk.dev/providers/ai-sdk-providers/google-generative-ai#gemini-25-models o cualquier otra documentación de la API, para proporcionarle al modelo contexto actualizado.

6. Programa con vibe y seguridad usando Snyk Studio

Por desgracia, muchos desarrolladores que programan con vibe y usan agentes para generar código con IA se dan cuenta demasiado tarde de que han sacrificado las prácticas de programación segura y otras responsabilidades de seguridad de las aplicaciones a cambio de velocidad.

Algunos ejemplos reales son filtraciones de secretos y vulnerabilidades SSRF, que pueden prevenirse si equipas al agente de programación con inteligencia de seguridad.

Snyk Studio se integra sin problemas en el ciclo de programación con agentes y les proporciona verificaciones de seguridad de las aplicaciones integradas de forma fluida en el flujo de trabajo nativo de ejecución de agentes mediante servidores MCP (Model Context Protocol), hooks de agentes, reglas de agentes y otros mecanismos.

Snyk Studio es gratis y ofrece una instalación con un solo clic para Cursor, GitHub Copilot y Windsurf, además de integraciones con muchos otros agentes de programación, incluidos Cline marketplace y Factory AI.

¿Quieres aprender más sobre vibe coding? Consulta nuestro taller a pedido: «Cómo proteger el vibe coding:
Abordar los desafíos de seguridad del código generado por IA.»