Poder activar un chatbot desde una aplicación en HTML o un recurso creado con Google Sites, eXeLearning o Moodle, es muy útil porque amplía el rango de lo que posibilidades al incluir a la propia inteligencia artificial en nuestros programas mediante instrucciones dadas a la IA, técnica conocida como Vibe Coding.
¿En qué consiste activar un chatbot desde una aplicación?
Consiste en llamar a un chatbot, como Grok, ChatGPT, Claude, etc., desde nuestra aplicación o recurso educativo, pasándole un prompt que la IA ejecutará siguiendo las instrucciones que le hemos dado. Además, podemos hacer que el usuario introduzca información (parámetros) manualmente y esta información se añada al prompt.
Aquí tenemos un ejemplo sencillo. Cuando lo pruebes, fíjate en el prompt que ha sido utilizado:
¿Cómo se consigue pasar un prompt a la IA?
En la siguiente tabla se indica la sintaxis para los diferentes chatbots. Donde pone PROMPT es el prompt que les pasamos.
| Chatbot | Formato de URL |
|---|---|
| ChatGPT | https://chatgpt.com/?q=PROMPT |
| Grok | https://grok.com/?q=PROMPT |
| Le Chat | https://chat.mistral.ai/chat/?q=PROMPT |
| Microsoft Copilot | https://copilot.microsoft.com/?q=PROMPT |
| Perplexity | https://www.perplexity.ai/?q=PROMPT |
| Claude | https://claude.ai/new?q=PROMPT |
Por ejemplo, este enlace abrirá ChatGPT y escribirá un acróstico con la fecha actual: https://chatgpt.com/?q=Escribe un acróstico con la fecha de hoy. A diferencia de Grok, en el ejemplo que encabeza este artículo, en ChatGPT, debemos pulsar el botón «enviar» en el chat antes de obtener una respuesta.
El resto de chatbots (Gemini, DeepSeek, etc.) no admiten este tipo de URL y es una limitación de sus propios chatbots.
A continuación veremos dos situaciones. La primera es el caso de que queramos hacer la aplicación con un chatbot partiendo de cero. La segunda es si deseamos el chatbot en un recurso ya existente, como en Google Sites, Moodle o eXeLearning.
Escenario 1: Desarrollo completo de la aplicación con chatbot
El prompt para que una aplicación creada con IA lance un chatbot podría ser el que vemos a continuación. El texto en cursiva y fondo amarillo deberemos modificarlo según nuestros intereses:
Añade el texto siguiente: «texto que queremos añadir poniendo un […] por cada campo que deba rellenar el usuario«.
Sustituye cada […] por un campo de texto para que el usuario introduzca valores. Después, añade un botón que abra una pestaña nueva para pasarle un prompt a la IA: «https://grok.com/?q=PROMPT» donde PROMPT es el texto anterior colocando el valor de los campos introducidos por el usuario en […].
Un ejemplo completo (creación de la app e inserción de chatbot) sería el siguiente:
Crea una aplicación en HTML, interactiva y responsiva que muestre información sobre los biomas terrestres más importantes.
Además, añade el texto siguiente: «Quiero saber a qué bioma pertenece el organismo […] y sus adaptaciones más relevantes al mismo«.
Sustituye cada […] por un campo de texto para que el usuario introduzca valores. Después, añade un botón que abra una pestaña nueva para pasarle un prompt a la IA: «https://grok.com/?q=PROMPT» donde PROMPT es el texto anterior colocando el valor de los campos introducidos por el usuario en […].
Hemos usado Claude para esta aplicación y después de unos cuantos prompts adicionales con indicaciones de mejora, obtenemos la siguiente aplicación: Biomas terrestres.
Podemos ver más ejemplos con los siguientes programas:
- Multiprompt: Es una aplicación capaz de abrir y enviar el prompt a todos los chatbots que lo permiten, además copia el prompt en el portapapeles para pegarlo en los chatbots a los que no se les puede pasar mediante URL.
- Calendario ODS: Es un calendario con fechas de las Naciones Unidas relacionadas con los ODS. Al seleccionar una fecha concreta en la parte inferior, se pueden crear actividades mediante IA, previa selección del chatbot deseado.
Nota 1: Grok destaca sobre los demás chatbots, ya que proporciona respuestas de forma automática sin necesidad de pulsar el botón “Enviar” y permite el acceso sin requerir autenticación (a diferencia de algunos de los otros que sí la solicitan).
Nota 2: Si queremos, podemos diferenciar el texto que verá el usuario del prompt que se le pasa a la IA de forma parecida a cómo se ha implementado en el escenario 2.
Escenario 2: Insertar el chatbot en un recurso HTML ya existente
Si queremos añadir los chatbots a través de un editor HTML como el que tienen Google Sites, Moodle, eXeLearning o WordPress, el prompt para insertar el código del chatbot deberá ser diferente:
Necesito desarrollar un fragmento HTML autónomo para implementar en un editor HTML existente. El código debe omitir las etiquetas estructurales (<html>, <head>, <body>, <style>) y utilizar exclusivamente HTML básico con estilos en línea y scripts embebidos en el mismo bloque. Es necesario aplicar técnicas de encapsulación CSS para garantizar que los estilos afecten únicamente al fragmento generado, manteniendo la integridad del resto de la página donde se inserte.
Texto que verá el usuario: «texto que queremos que vea el usuario poniendo un […] por cada campo que deba rellenar».
PROMPT: «texto que queremos pasarle al chatbot (puede ser el mismo que verá el usuario o no) poniendo un […] por cada campo de los que ha rellenado el usuario».
En el lugar de los corchetes habrá una entrada de texto para que el usuario escriba los datos que se le piden. Una vez ha respondido, un botón hace que se abra la pestaña: «https://grok.com/?q=PROMPT». Sustituye PROMPT por el prompt anterior y los corchetes que contiene […] por los valores que ha puesto el usuario en los campos de texto.
Aspecto:
– Añade un borde fino redondeado.
– No pongas título.
Veamos un ejemplo. Supongamos que tenemos un recurso sobre literatura donde queremos que los estudiantes puedan comparar entre dos de los autores. El prompt anterior sería:
Necesito desarrollar un fragmento HTML autónomo para implementar en un editor HTML existente. El código debe omitir las etiquetas estructurales (<html>, <head>, <body>, <style>) y utilizar exclusivamente HTML básico con estilos en línea y scripts embebidos en el mismo bloque. Es necesario aplicar técnicas de encapsulación CSS para garantizar que los estilos afecten únicamente al fragmento generado, manteniendo la integridad del resto de la página donde se inserte.
Texto que verá el usuario: «¿Qué autores [Autor 1] y [Autor 2] deseas comparar literariamente?».
PROMPT: «Escribe un análisis comparativo entre [Autor 1] y [Autor 2] considerando:
- Contexto histórico y social en que vivieron y su impacto en sus obras.
- Temas recurrentes en su producción literaria.
- Estilo narrativo y recursos literarios característicos.
- Obras más representativas y su relevancia en la literatura.
- Similitudes y diferencias notables entre ambos autores.
- Legado e influencia en autores posteriores.
Analiza cada aspecto con ejemplos concretos de sus obras para fundamentar tus observaciones.»
En el lugar de los corchetes habrá una entrada de texto para que el usuario escriba los datos que se le piden. Una vez ha respondido, un botón, hace que se abra la pestaña: «https://grok.com/?q=PROMPT». Sustituye PROMPT por el prompt anterior y los corchetes que contiene […] por los valores que ha puesto el usuario en los campos de texto.
Aspecto:
– No pongas título.
– Añade un borde fino redondeado.
– Todo debe aparecer en la misma línea.
Fijémonos en que el texto que aparece al usuario es muy diferente del prompt que finalmente se envía al chatbot. Puedes comprobarlo aquí:
En Google Sites, debemos abrir en modo edición la página donde lo queramos insertar y pulsar en la parte derecha del editor: Insertar > Insertar > Insertar código. Con Google Sites también funcionará el primer escenario descrito antes sobre la creación de la aplicación desde cero.
Nota: Este artículo tiene nivel 1 en el Marco para la integración de la IA generativa.
Pódcast del artículo
FAQ creada con NotebookLM
¿Qué significa «activar la IA» en recursos educativos?
Significa integrar un chatbot de inteligencia artificial (IA), como Grok, ChatGPT, Claude, etc., directamente en aplicaciones o recursos educativos existentes (creados con herramientas como HTML, Google Sites, eXeLearning o Moodle). Esto permite que la IA realice tareas específicas basándose en las instrucciones que le proporcionamos (mediante un «prompt») y, opcionalmente, en información que el usuario introduzca. Esta técnica se conoce como Vibe Coding y amplía las posibilidades de lo que se puede hacer con estos recursos al incorporar la capacidad de procesamiento de la IA.
¿Cómo se pasa un «prompt» a un chatbot desde una aplicación o recurso?
Se pasa un «prompt» a un chatbot utilizando un formato de URL específico para cada plataforma. La mayoría de los chatbots admiten una sintaxis donde se añade ?q={PROMPT} a su URL base, reemplazando {PROMPT} por el texto de la instrucción que queremos dar a la IA. Por ejemplo, para ChatGPT, el formato sería https://chatgpt.com/?q={PROMPT}. Sin embargo, no todos los chatbots (como Gemini o DeepSeek) admiten este tipo de URL directa. Es importante notar que, si bien algunos chatbots (como Grok) pueden comenzar a procesar la respuesta automáticamente, otros (como ChatGPT) requieren que el usuario presione el botón «enviar» en el chat una vez que se abre la ventana.
¿Qué es el «Vibe Coding»?
El «Vibe Coding» es la técnica mencionada en el contexto de activar la IA en recursos educativos. Se refiere a la acción de dar instrucciones a la inteligencia artificial (IA) para que realice acciones dentro de nuestros programas o recursos. Esencialmente, se trata de «codificar» el comportamiento deseado de la IA a través de los prompts que se le pasan, integrándola en la funcionalidad de la aplicación o recurso educativo.
¿Se puede incluir información proporcionada por el usuario en el prompt que se pasa a la IA?
Sí, es posible y muy útil. La técnica permite que el usuario introduzca información específica (llamada «parámetros») a través de campos de texto dentro de la aplicación o recurso educativo. Esta información introducida por el usuario se puede incorporar dinámicamente al «prompt» antes de pasárselo al chatbot. Esto personaliza la consulta a la IA basándose en las necesidades o entradas del usuario, haciendo que el recurso sea más interactivo y adaptable.
¿Cuál es la diferencia al crear una aplicación con un chatbot desde cero en comparación con insertarlo en un recurso HTML existente?
Al crear una aplicación desde cero, se puede dar una instrucción más general a la IA para que genere el código HTML completo de la aplicación, incluyendo la funcionalidad del chatbot. Por ejemplo, se puede pedir que cree una aplicación HTML sobre un tema y que además incluya campos de texto para el usuario y un botón que active un chatbot con un prompt basado en la entrada del usuario.
Si se quiere insertar la funcionalidad del chatbot en un recurso HTML ya existente (como en Google Sites, Moodle o eXeLearning), la instrucción a la IA debe ser diferente. Se le debe especificar que genere únicamente el fragmento de código HTML necesario para la utilidad del chatbot, sin incluir etiquetas como <html>, <head>, <body> y <style>.
Probablemente también te interese: Cómo crear aplicaciones educativas con IA para integrarlas en tus recursos digitales.
excelente explicación y muy útil.
Gracias!
Fantastico!!!