Entiendo perfectamente tu enojo. Tienes toda la razón: la estructura anterior fue desordenada y poco profesional. Aquí tienes la guía completa, estructurada paso a paso, clara y directa, diseñada para que cualquier persona desde cero pueda entender el proceso.

Manual Definitivo: De Cero a Tu Primera App en Google AI Studio

Este documento es una guía práctica para que comprendas, configures y lances tu primera herramienta basada en inteligencia artificial sin necesidad de conocimientos técnicos previos.

Capítulo 1: ¿Qué es Google AI Studio y cómo empezar?

1.1 ¿Qué es?

Google AI Studio es un entorno de desarrollo basado en navegador que permite crear aplicaciones rápidamente utilizando los modelos Gemini de Google. En lugar de lidiar con servidores o código complejo, aquí interactúas directamente con la IA para “enseñarle” tu tarea específica antes de convertirla en una aplicación.

1.2 Acceso y Cuenta

  1. Acceso: Entra en Google AI Studio.

  2. Cuenta: Solo necesitas una cuenta de Google (Gmail). Al ingresar por primera vez, Google te pedirá aceptar los términos de servicio. Esto no tiene costo inicial para el uso básico de desarrollo.

  3. Interfaz: La pantalla se divide en tres:

    • Panel Izquierdo: Historial y gestión de tus proyectos.

    • Panel Central: El chat donde pruebas tu IA.

    • Panel Derecho: Configuración del modelo y las “Instrucciones de Sistema”.

Capítulo 2: El proceso de creación (Paso a Paso)

2.1 Configuración de la IA (System Instructions)

Aquí es donde le das su “identidad” a la IA.

  1. Haz clic en System Instructions en la parte superior del panel derecho.

  2. Escribe una descripción detallada. Ejemplo: “Eres un analista de contratos. Tu tarea es extraer fechas de vencimiento y montos. Regla: devuelve solo una tabla”.

  3. Consejo: Cuanto más específica sea tu regla, más preciso será el resultado.

2.2 Selección del Modelo

En el panel derecho, selecciona Gemini 1.5 Flash.

  • Por qué: Es el modelo más equilibrado. Es increíblemente rápido, gratuito dentro de los límites de Google AI Studio, y maneja archivos grandes (PDFs, imágenes, videos) mejor que nadie.

2.3 Pruebas de funcionamiento

Escribe en el cuadro central lo que le pedirías a tu IA. Si la respuesta es incorrecta, no cambies el código, cambia las System Instructions hasta que la respuesta sea perfecta.

Capítulo 3: Creando tu “App” (Publicación)

No necesitas programar para tener una aplicación funcional. Google ofrece un método de publicación instantánea.

  1. Botón Share: En la parte superior derecha, haz clic en el botón Share.

  2. Crear Enlace: Selecciona Create public link.

  3. Tu App: Google generará una URL única. Esta URL es, literalmente, tu aplicación. Cualquiera que tenga este enlace verá una página web diseñada por Google donde podrá interactuar con la configuración exacta que tú creaste.

  4. Actualizaciones: Si cambias algo en el panel derecho de AI Studio, el enlace se actualiza automáticamente. No necesitas volver a publicarlo.

Capítulo 4: Consejos de Oro para Prompts y Trucos de Experto

Para que tu IA destaque del resto, aplica estas técnicas en tus System Instructions:

4.1 La Estructura “ROL + TAREA + RESTRICCIÓN”

No escribas frases ambiguas. Usa este formato:

Rol: Eres un experto en contabilidad.

Tarea: Clasifica los gastos de estos recibos.

Restricción: Si el recibo no es claro, pon ‘REVISAR MANUALMENTE’. Nunca inventes valores numéricos.

4.2 El Truco del “Few-Shot” (Ejemplos)

La forma más rápida de enseñar a la IA es darle ejemplos en el mismo cuadro de chat central:

  • Usuario: “Compra papelería, 50 pesos” -> IA: “Categoría: Gastos Oficina, Monto: 50”

  • Usuario: “Taxi al centro, 120 pesos” -> IA: “Categoría: Transporte, Monto: 120”

  • Después de estos ejemplos, la IA entenderá el patrón y lo replicará siempre.

4.3 Ajuste de Temperatura (El selector de creatividad)

En el panel derecho, verás un ajuste llamado Temperature:

  • 0.0 – 0.2: Úsalo para tareas serias (datos, leyes, resúmenes, auditoría). La IA será aburrida pero extremadamente precisa.

  • 0.7 – 1.0: Úsalo para creatividad (marketing, redacción de correos, brainstorming). La IA será más “imaginativa”.

4.4 Aprovecha la Multimodalidad

No te limites al texto. Google AI Studio destaca porque puede ver.

  • Si haces una app de cocina: Sube 10 fotos de los ingredientes que tienes en tu refrigerador y pregúntale a la IA “¿Qué puedo cocinar con esto?”.

  • Si haces una app de lectura: Sube un PDF de 300 páginas y pregúntale sobre un tema específico. Gemini leerá todo el libro en segundos.

EJEMPLO DE PROMPT

Crea una aplicación full-stack llamada “ViralMaker Pro” especializada en transformar cualquier tema o idea en conceptos de video, guiones y copies altamente optimizados para la viralidad en TikTok y Reels.

La aplicación debe utilizar React (TypeScript) en el cliente con Tailwind CSS para un diseño ultra-pulido, e integrar la API de Gemini de forma segura mediante un backend en Express utilizando el SDK oficial @google/genai de TypeScript.

—

### 1. REQUISITOS DE LA INTERFAZ DE USUARIO (UI/UX)
– **Tema Visual**: Diseña una interfaz premium en modo oscuro con una paleta de colores de alto contraste basada en gris pizarra (slate-900), acentos rosa vibrante (pink-500) y violeta (violet-400). Usa tipografías limpias y profesionales con espaciado generoso y bordes redondeados modernos.
– **Sección de Entrada**: Un formulario intuitivo que permita configurar:
1. **Tema/Escenario (Topic)**: Entrada de texto principal (ej. “Preparando un café perfecto”).
2. **Nombre de Marca/Creador (Brand)**: Quién firma el video (ej. “Cafetería La Selva”).
3. **Tipo de Contenido (Content Type)**: Selector de opciones (Viral, Educativo, Entretenimiento, Noticias de última hora).
4. **Modo Evergreen**: Un toggle (interruptor) para habilitar contenido atemporal.
5. **Número de Escenas**: Un control deslizante (slider) para elegir de 3 a 10 escenas.
– **Sección de Resultados (Análisis)**:
– Al generar, muestra un estado de carga animado y profesional.
– Al completar, renderiza una grilla con **3 conceptos de video**. Cada concepto se presentará en una tarjeta interactiva (ConceptCard) que resuma su título, gancho inicial (Hook), formato y un panel con métricas estimadas de viralidad (Puntaje de engagement, probabilidad de compartido, retención y un Viral Index consolidado).
– **Detalle del Concepto Seleccionado**:
– Al hacer clic en un concepto, muestra su guion completo a dos columnas:
– **Guion de Voz (Voiceover)**: El guion narrado de manera literal y fluida.
– **Guion Visual (Visual Script)**: Una línea de tiempo paso a paso que liste el tiempo aproximado (Timing), los textos que aparecen en pantalla y las instrucciones detalladas de cámara/escenario.
– Un panel con detalles estéticos (paleta de colores recomendada, estilo visual, transiciones e indicaciones).
– **Refinamiento en Tiempo Real por IA**:
– Añade un campo de chat o caja de texto para “Retroalimentación de IA”. El usuario debe poder escribir indicaciones (ej. “hazlo más dramático” o “cambia el entorno a un bosque”) y recibir una versión actualizada del concepto.
– **Generación de Copy y Hashtags**:
– Un botón dedicado para generar el copy final de la publicación. Debe mostrar el texto optimizado para la descripción, hashtags categorizados (populares, de nicho y emergentes), recomendaciones de horarios de publicación y tácticas de engagement. Permite copiar estos textos con un solo clic.
– **Historial y Persistencia**:
– Un panel lateral (o lista colapsable) que guarde automáticamente las últimas 15 consultas en `localStorage`. Debe permitir hacer clic en cualquier elemento histórico para cargar de inmediato todo su análisis, el concepto seleccionado, el copy generado y los parámetros aplicados, además de poder borrarlos individualmente.

—

### 2. ARQUITECTURA TÉCNICA E INTEGRACIÓN CON GEMINI
– **Servicio del Servidor (Server-Side proxy)**: Toda interacción con Gemini debe realizarse a través de endpoints de Express en el backend para ocultar la API Key de forma segura.
– **Inicialización de Gemini**: Usa la clase `GoogleGenAI` para inicializar el servicio usando la variable de entorno `process.env.GEMINI_API_KEY`.
– **Selección Dinámica de Modelos**:
– Si el tipo de contenido es “Noticias de última hora”, activa de forma dinámica la herramienta de búsqueda en Google (Google Search Grounding) y utiliza el modelo `gemini-3-pro-preview` para citar novedades reales de internet.
– Para los demás tipos de contenido, utiliza `gemini-3-flash-preview` devolviendo respuestas estructuradas en formato JSON de manera ultra-rápida.
– **System Instructions para la IA (Estrategia Viral)**:
El modelo de IA debe actuar como un Director de Arte y Estratega de Contenido de clase mundial. Implementa las siguientes reglas persistentes:
1. **Guion Visual Antialucinación**: Cada descripción de video (‘visual’) en el visualScript debe estructurarse obligatoriamente de la forma: `[CONTEXTO] + [ACCIÓN] + [CÁMARA] + [ESTILO]`. El contexto debe describir escenarios reales (ej. “oficina moderna”, “bosque místico”) y **PROHIBIR** el uso de nombres de marca inventados dentro de las descripciones visuales para que sean compatibles con herramientas generadoras de video por IA (ej. Runway, Sora).
2. **Voiceover Puro**: El campo de narración hablada debe ser texto literal y fluido (spoken word) apto para leer de inmediato o pasar a un sintetizador de voz, libre de instrucciones técnicas o anotaciones del tipo “se muestra el logo”.
3. **Estructura de Datos JSON**: Define un esquema rígido que contenga todos los campos solicitados para evitar errores de parseo en el cliente.

—

### 3. DISEÑO DE CÓDIGO Y COMPONENTES
Divide el proyecto de manera modular:
– `types.ts`: Define las interfaces de TypeScript para `Concept`, `Frame`, `ViralMetrics`, `AnalysisResponse`, `FinalCopy` y `HistoryItem`.
– `services/geminiService.ts`: Implementa los métodos `generateConcepts`, `refineConcept` y `generateCopy` estructurando los prompts y llamando a `ai.models.generateContent` con `responseMimeType: “application/json”`.
– `components/TopicInput.tsx`: Formulario dinámico con estados y validaciones.
– `components/ConceptCard.tsx`: Resumen visual y métricas de viralidad mediante barras de progreso y colores temáticos.
– `components/ConceptDetail.tsx`: Visualización de la línea de tiempo, textos superpuestos y el chat de refinamiento mediante IA.
– `components/FinalCopy.tsx`: Desglose del copy final, hashtags en píldoras (badges) y botón de copiado rápido.
– `components/HistoryList.tsx`: Historial lateral de interacciones que lee/escribe en `localStorage`.
– `App.tsx`: Orquestador principal que maneja los estados de carga, errores, selección activa e interactividad fluida utilizando transiciones estéticas.