¿Y si tu app de MIT App Inventor pudiera responder preguntas como un chatbot de verdad? En este tutorial vas a conectar tu aplicación con la API de Google Gemini usando peticiones HTTP, sin necesidad de programar ni un solo servidor. Solo bloques.

Al terminar tendrás una app sencilla en la que el usuario escribe una pregunta, la app se la envía a la IA de Google y muestra la respuesta en pantalla, limpia y sin símbolos raros.

¿Qué vamos a construir?

El flujo es este:

1. El usuario escribe una pregunta en un campo de texto.
2. Al pulsar un botón, la app envía esa pregunta a la API de Gemini mediante una petición POST.
3. Gemini responde con un bloque de texto en formato JSON (que incluye la respuesta, pero también metadatos que no nos interesan).
4. La app “recorta” ese JSON para quedarse solo con el texto de la respuesta y lo muestra en una etiqueta.

El paso 4 es el que más problemas suele dar, así que le dedicamos la mitad del tutorial.

[📸 CAPTURA: pantalla final de la app funcionando, con una pregunta y su respuesta]

Lo que necesitas antes de empezar

1. Una API Key de Google AI Studio

• Entra en Google AI Studio.
• Crea un proyecto (o usa uno existente).
• Pulsa en Crear clave de API y copia el código que te da.

Importante: esa clave es privada. No la subas a un proyecto compartido, no la enseñes en una presentación ni la publiques en un repositorio abierto. Cualquiera que la tenga puede gastar tu cuota gratuita.

[📸 CAPTURA: pantalla de Google AI Studio con el botón de crear clave]

2. Los componentes en App Inventor

Añade estos elementos a la pantalla de tu proyecto:

Componente	Tipo	Para qué sirve
txtPregunta	Campo de texto	El usuario escribe aquí su pregunta
btnPreguntar	Botón	Envía la pregunta al pulsarlo
lblRespuesta	Etiqueta	Muestra la respuesta de la IA
Web1	Web (no visible, sección Conectividad)	Gestiona la petición HTTP

[📸 CAPTURA: paleta de componentes y diseño de la pantalla]

Paso 1: Enviar la pregunta a Gemini

Cuando el usuario pulsa el botón, tenemos que preparar tres cosas: las cabeceras de la petición, la URL de la API y el cuerpo del mensaje en formato JSON.

cuando btnPreguntar.Clic ejecutar
  │
  ├─ poner Web1.PedirCabeceras como ── [construir una lista]
  │                                        └─ [construir una lista]
  │                                              ├─ "Content-Type"
  │                                              └─ "application/json"
  │
  ├─ poner Web1.Url como ── "https://generativelanguage.googleapis.com/v1beta/models/gemini-3.6-flash:generateContent?key=TU_API_KEY"
  │
  └─ llamar Web1.PublicarTexto
        └─ unir
            ├─ '{"contents":[{"parts":[{"text":"'
            ├─ txtPregunta.Texto
            └─ '"}]}]}'

Un par de detalles que merece la pena entender, no solo copiar:

• Las cabeceras le dicen al servidor que le estamos enviando datos en formato JSON.
• La URL apunta al modelo gemini-3.6-flash usando la versión v1beta de la API (así se llama la versión estable actual de la API REST de Gemini; Google la sigue llamando “beta” aunque es la que se usa en producción). Sustituye TU_API_KEY por tu clave real.
• El cuerpo de la petición mete tu pregunta dentro de la estructura que Gemini espera recibir: contents → parts → text.

[📸 CAPTURA: bloques del evento btnPreguntar.Clic ya montados]

Paso 2: Limpiar la respuesta de Gemini

Aquí viene la parte interesante. Cuando Gemini responde, no te devuelve solo el texto: te devuelve un JSON completo con el texto mezclado entre corchetes, comillas y metadatos internos del modelo. Si lo muestras tal cual, tu etiqueta se llena de basura.

¿Por qué no sirve “dividir por espacios”?

Es tentador usar el bloque de texto que primero encuentras con un nombre parecido, pero “dividir por espacios” no es lo que necesitamos: ese bloque separa el texto en trozos cada vez que encuentra un espacio en blanco, así que destroza la frase entera en vez de aislar solo la respuesta.

Lo que necesitamos es un bloque de corte, que en App Inventor puede llamarse dividir en o recorta texto en según la versión. Busca en la categoría Texto (los bloques rosas) uno que te permita indicar un texto y un punto de corte.

Primer corte: quitar la cabecera del JSON

La respuesta completa empieza más o menos así:

{"candidates": [{"content": {"parts": [{"text": "¡Hola! ¿En qué puedo ayudarte hoy?", "thought": "..."}]}}]}

Para quedarnos solo con lo que hay después de "text": ", cortamos el texto justo por ahí y nos quedamos con el segundo trozo:

seleccionar elemento de la lista
  ├─ lista: llamar recorta texto en
  │           ├─ texto: tomar contenidoDeRespuesta
  │           └─ en: '"text": "'
  └─ índice: 2

Con esto desaparece todo lo anterior a la respuesta, pero todavía queda pegado el final: ¡Hola! ¿En qué puedo ayudarte hoy?", "thought": "..."}.

Segundo corte: quitar lo que sobra al final

La respuesta termina en la primera comilla de cierre (") que aparece. Así que repetimos la operación, pero esta vez cortando por esa comilla y quedándonos con el primer trozo (índice 1):

seleccionar elemento de la lista
  ├─ lista: llamar recorta texto en
  │           ├─ texto: tomar contenidoDeRespuesta
  │           └─ en: '"'
  └─ índice: 1

Uniendo los dos cortes

El truco final es meter el primer corte dentro del segundo, para que el resultado del primero sea el texto de entrada del segundo. Así queda el bloque completo del evento que recibe la respuesta:

cuando Web1.ObtuvoTexto (url, códigoDeRespuesta, tipoDeRespuesta, contenidoDeRespuesta)
  │
  └─ poner lblRespuesta.Texto como
        └─ seleccionar elemento de la lista
              ├─ lista: llamar recorta texto en
              │           ├─ texto: seleccionar elemento de la lista
              │           │           ├─ lista: llamar recorta texto en
              │           │           │           ├─ texto: tomar contenidoDeRespuesta
              │           │           │           └─ en: '"text": "'
              │           │           └─ índice: 2
              │           │
              │           └─ en: '"'
              └─ índice: 1

En resumen: el primer corte elimina todo lo que sobra por delante, y el segundo elimina todo lo que sobra por detrás (comillas de cierre, el campo thought y cualquier metadato adicional). Lo que queda entre medias es la respuesta limpia de la IA.

[📸 CAPTURA: bloques completos del evento Web1.ObtuvoTexto ya montados]

Errores comunes al montar esto

• Usar “dividir por espacios” en vez de un bloque de corte. Son bloques con nombres parecidos, pero hacen cosas completamente distintas.
• Escribir mal el texto de corte. '"text": "' tiene que llevar exactamente esas comillas y ese espacio después de los dos puntos, tal y como lo devuelve Gemini. Si te falla, copia un trozo real de la respuesta (puedes verla con un bloque mostrar mensaje emergente antes de recortarla) y compara carácter a carácter.
• Poner la clave de API directamente en un proyecto que vas a compartir. Para practicar en clase no pasa nada, pero para publicar la app necesitas otra estrategia (por ejemplo, que la clave viva en un pequeño servidor propio en vez de en el móvil de cada usuario).
• Usar una versión de la API o un nombre de modelo que ya no exista. Google actualiza los modelos de Gemini de vez en cuando; si tu URL deja de funcionar, lo primero que hay que revisar es si el nombre del modelo o la versión de la API (v1beta) siguen siendo válidos en la documentación oficial.

Idea para llevarse a casa

Ya tienes una app que habla con una IA real usando solo bloques. A partir de aquí puedes ampliarla tú mismo/a:

• Comprueba el valor de códigoDeRespuesta: si no es 200, muestra un mensaje de error en vez de intentar recortar un texto que no existe.
• Añade una lista para guardar el historial de preguntas y respuestas, y así simular memoria de conversación.
• Piensa cómo protegerías la clave de API si quisieras publicar esta app en la Play Store.

Si quieres seguir explorando, este mismo patrón (petición HTTP + limpieza de JSON con bloques de texto) es la base de cualquier integración de IA en App Inventor, así que te va a servir también para conectar otros modelos u otras APIs.