Configuración del entorno

1. Descarga el proyecto base

Descarga image-editor-starter.zip y descomprímelo donde prefieras. Es una copia completa del proyecto con la interfaz, el servidor y el frontend ya funcionando — solo faltan 6 bloques de código relacionados con la Interactions API y los Managed Agents, que completarás en los siguientes pasos.

unzip image-editor-starter.zip -d image-editor-starter
cd image-editor-starter

2. Configura tu API key

Si todavía no tienes una API key de Gemini, genera una gratis en Google AI Studio: inicia sesión con tu cuenta de Google, pulsa “Create API key” y copia el valor generado.

Copia el archivo de ejemplo y agrega tu API key de Gemini:

cp .env.example .env

Edita .env:

GEMINI_API_KEY=tu_api_key_aqui
PORT=3000

Precaución

No subas .env a ningún repositorio. El .gitignore del proyecto ya lo excluye.

3. Instala las dependencias

npm install

4. Arranca el servidor

npm run dev

Esto debería levantar el servidor en http://localhost:3000. La interfaz cargará y podrás subir una imagen — pero al intentar generar sugerencias o editar, la aplicación fallará intencionalmente con un error como:

Completa el Paso 1 del codelab en generateSuggestions() (lib/geminiAgent.js).

Esto es exactamente lo esperado: son los bloques que vas a completar en los próximos pasos. Continúa a Tour del proyecto base para orientarte en el código antes de empezar.