Gemini CLI

Programación y Productividad con IA

Taller Técnico 2º DAM

Domina la consola, domina la IA.

https://sergarb1.github.io/gemini-cli-taller

Aviso Importante

Para participar activamente en el taller, es necesario traer Gemini CLI ya configurado y en marcha.

En tu propio PC portátil.
En una máquina virtual del aula.

Si no tienes el entorno listo, puedes quedarte a escuchar y aprender, pero no podrás seguir las demos en tiempo real.

Índice del Taller

01. Instalación y Requisitos
02. ¿Qué es Gemini CLI?
03. Power Features: --yolo y @
04. The Agent System
05. MCP Servers & Integrations
06. Demos: Full Stack, Educación & Canva
07. Awesome Sub-agents

Instalación y Requisitos

                         Requisitos
                        Node.js: v20 o superior.
OS: macOS, Linux o Windows.

                    

Comando

npm install -g @google/gemini-cli

O usa npx sin instalar nada.

Autenticación

Opción A: OAuth (Login con Google) - Sin API Key.

Opción B: API Key de AI Studio. Set: GEMINI_API_KEY.

Opción C: Vertex AI (Enterprise). Set: GOOGLE_API_KEY.

¿Qué es Gemini CLI?

Tu Copiloto Autónomo en la terminal.

Nativo

Lee tus archivos, ejecuta tus comandos, hace tus commits.

Contextual

Entiende todo tu proyecto, no solo un fragmento de código.

Modo YOLO

--yolo (You Only Look Once)

El modo para los valientes (y los impacientes).

                     Sin confirmaciones: Ejecución inmediata.
 Velocidad pura: Ideal para prototipado.
 Shortcut: Usa Ctrl + Y mientras escribes para activarlo/desactivarlo.
 Peligro: "Un gran poder conlleva una gran responsabilidad".

                

El Poder de la Arroba

Control total sobre el contexto y los expertos.

`@fichero`

Añade contexto local de archivos o carpetas.

gemini "Explica @src/"

`@Agente`

Invoca a un especialista por su nombre.

gemini "@visual_artist hazlo bonito"

`@Prioridad`

Prioriza la instrucción experta sobre la general.

gemini "@security_auditor audita @db.php"

--> Aplica OWASP definido en su prompt.

El Sistema de Agentes

Un cerebro central, múltiples especialistas.

Manager

Planifica, orquesta y revisa.

Coder

Writer

Artist

Security

Sub-agentes Especializados

Personalización y Contexto (1/2)

Define el "alma" de tu proyecto con ficheros clave.

GEMINI.md

Contexto Global: Describe qué es el proyecto, qué agentes están disponibles y cómo deben colaborar.

Es el "mapa" que Gemini lee al entrar en la carpeta.

.gemini/agents/

Roles Específicos: Ficheros Markdown por cada agente (ej: visual_artist.md) con su rol, objetivos e instrucciones.

Gemini sincroniza la visión de GEMINI.md con la especialización de cada agente para una ejecución coherente.

Ejemplo de Agente (2/2)

Cómo se define un especialista en .gemini/agents/

# .gemini/agents/security_auditor.md

Rol: Hacker Ético y Auditor de Código.

Instrucciones: 
- Analiza siempre el código buscando OWASP Top 10.
- Si encuentras un riesgo, explica el exploit y la solución.
- Usa un tono serio y profesional.
                

Tip: Cuanto más específicas sean las instrucciones, mejor será el resultado.

MCP Servers

Model Context Protocol: El estándar de conexión.

Conecta Gemini CLI con tus herramientas favoritas de forma estandarizada.

Filesystem (Nativo)
PostgreSQL / SQLite
Google Drive / Slack
Canva (Extension Oficial)

Directorio: geminicli.com/extensions/

Live Demo: Full Stack

Creando una aplicación completa con un solo prompt.

@fullstack-developer @ui-designer

"Crea un sistema CRUD para gestionar jugadores del Valencia CF (históricos y actuales).
1. Backend: Python con FastAPI. Datos en JSON. Endpoints: GET, POST, DELETE.
2. Frontend: Single File HTML con Vue.js 3 + Tailwind (CDN).
3. Diseño: Estilo 'Mestalla' (Naranja/Negro/Blanco). Usa tarjetas elegantes para los jugadores.
4. Data: Pre-carga a leyendas como Kempes, Villa, Mendieta, Cañizares y Piojo López, y actuales como Gayà, Pepelu y Mamardashvili.
Genera estructura de archivos, código y un README de cómo lanzarlo."

* Se presupone instalados los agentes de awesome-gemini-cli-subagents

Bajo el capó (1/4)

1. Orquestación Inteligente

El Manager analiza tu prompt y detecta dos necesidades distintas:

Lógica (Backend): Delega al agente Fullstack Developer.
Visual (Frontend): Delega al agente UI Designer.

Bajo el capó (2/4)

2. Generación Backend (Python)

Se crea una API REST completa con FastAPI.

# main.py - Generado automáticamente
from fastapi import FastAPI
from pydantic import BaseModel

app = FastAPI()

# Datos pre-cargados como pediste (Kempes, Villa...)
players = [...] 
                    

Bajo el capó (3/4)

3. Diseño Frontend (HTML+Vue)

El UI Designer inyecta creatividad en un solo fichero.

Vue.js (CDN): Lógica reactiva sin build steps.
Tailwind (CDN): Estilos "Mestalla" instantáneos.

Bajo el capó (4/4)

4. Despliegue Inmediato

Sin instalaciones complejas (npm install). Solo correr y listo.

# 1. Lanza el backend
> uvicorn main:app --reload

# 2. Abre el frontend
> Doble click en index.html
                    

Tip: Gemini CLI puede lanzar ambos procesos por ti si se lo pides en el prompt.

Prototipo funcional en segundos.

Live Demo: Educación

Creando material didáctico visual con Agentes Especializados.

@sme @visual_artist

"Genera una Infografía Interactiva (Cheat Sheet) sobre los fundamentos de Python 3 para alumnos de 1º DAM.
1. Contenido (@sme): Sintaxis precisa sobre Variables, Bucles (for/while), Funciones (def/lambda) y List Comprehensions.
2. Formato: Single File HTML5 + Tailwind CSS.
3. Diseño (@visual_artist): Estilo 'Cyberpunk Neon'. Fondo oscuro, texto brillante.
4. Interacción: Que al pasar el ratón por los conceptos salga una ventanita (tooltip) con un ejemplo de código."

* Se presupone instalados los agentes de awesome-gemini-cli-education

Sinergia de Agentes

SME

(Subject Matter Expert)

Garantiza que la teoría de Python sea correcta y pedagógica.

Visual Artist

(UI/UX Expert)

Transforma texto plano en una experiencia visual atractiva (CSS Grid, Tooltips, Colores).

Live Demo: Diseño con Canva

Diseño profesional automatizado con MCP.

@canva_mcp

"Diseña una presentación de ventas de 10 diapositivas para 'TechCorp 2026'.
Usa mis Brand Kits de Canva para los colores y logos.
Incluye gráficos de crecimiento y fotos de equipo de mi carpeta 'Assets_2025'."

Gemini estructura el contenido.

Canva renderiza los diseños.

Awesome Sub-agents

La comunidad crea sus propios expertos.

Repositorios de la Comunidad:

Angular Expert: Componentes PRO.
Security Auditor: Análisis de fallos.
Phaser Dev: Juegos HTML5.
Event Planner: Logística 360º.

SQL Master: DBs optimizadas.
Test Gen: Cobertura automática.
Translator: i18n multilingüe.
¡Y cientos más!

La lista crece cada día. ¡Crea y comparte el tuyo!

¿Prefieres interfaz visual?

Gemini CLI también tiene GUIs desarrolladas por la comunidad.

Gemini-CLI-UI: Una interfaz moderna basada en web.
github.com/cruzyjapan/Gemini-CLI-UI
Extensiones de VS Code: Busca "Gemini CLI" en el marketplace para integración nativa.

Potencia de terminal, comodidad de escritorio.

¡Gracias por escuchar!

Turno de Preguntas

Recursos y Slides:

sergarb1.github.io/gemini-cli-taller

Tips y trucos: gemini-cli-tips

Autor: Sergi García