Cómo implementar un bot con realidad aumentada

La implementación de un bot conversacional integrado con realidad aumentada combina diversas tecnologías pioneras que trabajan en conjunto para ofrecer una experiencia inmersiva e interactiva. En este artículo se explica, con detalle y paso a paso, cómo se desarrolló un bot cartoon que responde a voz y texto utilizando un modelo de inteligencia artificial avanzado, junto con visualización 3D en realidad aumentada, usando tecnologías web modernas.

Tecnologías Clave para la Implementación

Para crear un bot con RA, este proyecto utiliza un stack tecnológico basado en varias herramientas fundamentales: backend con Node.js y Express para la lógica del servidor; una conexión con un modelo de IA compatible LLaMA 3 proporcionado por Groq API; frontend en React para la interfaz; MindAR para la detección de imágenes y cámara de RA; Three.js para renderizado y control de modelos 3D; y APIs web de voz para interacción natural.

Backend con Node.js y Express

El backend es responsable de recibir mensajes de texto y voz desde el frontend, procesarlos con la API de IA para generar respuestas inteligentes y devolverlas para la interacción en tiempo real. La simplicidad y eficiencia de Express hacen que el manejo de rutas y peticiones API sea ágil.

Por ejemplo, en el archivo src/server.js se configura la ruta /api/chat para procesar solicitudes POST que contienen el mensaje del usuario. Se envía este texto a la API Groq compatible con OpenAI:

jsconst body = {
  model: OPENAI_MODEL,
  messages: [
    { role: 'system', content: 'Eres un bot cartoon amable y breve...' },
    { role: 'user', content: message }
  ]
};

Esto configura la conversación para que el modelo IA actúe con una personalidad concreta y dominio temático. Luego la respuesta JSON recibida se devuelve para su consumo en el frontend.

Modelo de IA: LLaMA 3 vía Groq API

Se utiliza el modelo LLaMA 3, uno de los modelos de lenguaje más recientes, conocido por ser eficiente y versátil en comprensión y generación de texto. La implementación con Groq API permite una integración compatible con OpenAI standards, aprovechando la capacidad del modelo para respuestas coherentes, breves y especializadas.

Esta tecnología IA es crucial para dotar de inteligencia conversacional al bot, permitiendo que sea perceptivo, preciso, y amigable en sus respuestas.

Frontend en React con Vite

El frontend combina React para la estructura de componentes y Vite para desarrollo moderno y rápido. Se divide en dos partes principales:

• La escena de realidad aumentada (ArScene.jsx), que muestra el modelo 3D en RA.
• La interfaz de chat (ChatUI.jsx), para interacción por texto y voz con el bot.

Paso 1: Preparación del Backend

La implementación inicia con el backend. Se configuran las variables de entorno en .env para mantener seguras las claves API y parámetros de configuración:

OPENAI_API_KEY=tu_api_key
OPENAI_MODEL=llama-3.1-8b-instant
OPENAI_BASE_URL=https://api.groq.com/openai/v1
PORT=3001

El servidor Express habilita CORS para permitir llamadas cross-origin y usa JSON para manejar el body de las peticiones.

El endpoint /api/chat con el siguiente esquema es el encargado de la comunicación con la IA:

app.post('/api/chat', async (req, res) => {
  const { message } = req.body;
  if (!message) return res.status(400).json({ error: 'Falta message' });

  const body = {
    model: OPENAI_MODEL,
    messages: [
      { role: 'system', content: 'Eres un bot cartoon amable y breve...' },
      { role: 'user', content: message }
    ]
  };

  const response = await fetch(`${OPENAI_BASE_URL}/chat/completions`, {
    method: 'POST',
    headers: { 
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${OPENAI_API_KEY}` 
    },
    body: JSON.stringify(body)
  });

  if (!response.ok) {
    return res.status(502).json({ error: 'Error de upstream' });
  }

  const json = await response.json();
  const reply = json.choices[0].message.content.trim();
  res.json({ reply });
});

Este fragmento es esencial para manejar la inteligencia del bot y asegurar la conexión segura con el modelo de IA.

Paso 2: Escena de Realidad Aumentada con MindAR y Three.js

Para mostrar el bot cartoon en el espacio real, la tecnología requerida es la RA basada en detección de imágenes y renderizado 3D.

Uso de MindAR para Detección y Cámara

MindAR ofrece detección precisa de un marcador visual definido en un archivo .mind que funciona como “ancla” para que el modelo 3D aparezca en la pantalla coincidiendo con un objeto o imagen real vista por la cámara.

mindarThree = new MindAR.MindARThree({
  container: containerRef.current,
  imageTargetSrc: "/target.mind",
  uiScanning: true,
});

Este código configura la instancia de MindAR para iniciar la cámara y comenzar la detección.

Renderizado con Three.js

Three.js carga un modelo 3D en formato .glb y lo posiciona sobre el marcador detectado para crear el efecto de realidad aumentada.

El ajuste automático de la cámara para que el modelo siempre esté visible y centrado se realiza con una función que calcula la bounding box y ajusta posición y escala:

jsfunction fitCameraToObject(object, camera, renderer, offset) {
  const box = new THREE.Box3().setFromObject(object);
  const radius = box.getBoundingSphere(new THREE.Sphere()).radius;
  const fov = camera.fov * Math.PI / 180;
  const distance = Math.abs((radius * offset) / Math.sin(fov / 2));
  camera.position.set(0, 0, distance);
  camera.lookAt(0, 0, 0);
  camera.updateProjectionMatrix();
}

Se agrega este modelo a la escena y se inicia un ciclo de animación continuo sincronizado con la detección del marcador.

Paso 3: Chat con Voz y Texto en React

La interfaz de usuario es clave para la interacción. El componente de chat gestiona:

• La captura continua de voz usando SpeechRecognition.
• La detección automática de pausas para enviar mensajes sin necesidad de pulsar nada.
• El uso de SpeechSynthesis para que el bot hable en voz alta las respuestas.
• La visualización de los mensajes enviados y recibidos, con estilos claros y accesibles.

Ejemplo de inicialización de escucha:

jsconst SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();
recognition.lang = 'es-ES';
recognition.continuous = true;
recognition.interimResults = true;

Cuando se detecta el final de la frase o silencio, el texto se envía automáticamente al backend.

Además, el bot ofrece feedback visual sobre la escena de RA: cada respuesta desencadena una breve animación de “pulso” en el modelo 3D, mejorando la sensación de realismo.

Paso 4: Despliegue y Contenido PWA

El proyecto se configura como una PWA con un archivo manifest.json que define el nombre de la app, iconos, colores y comportamiento para instalación en dispositivos móviles.

La configuración de Vite con proxy permite una experiencia fluida entre cliente y servidor incluso en entorno local, simplificando desarrollo.

El HTML carga las librerías UMD de Three.js, GLTFLoader y MindAR directamente desde CDN, evitando configuraciones complejas y facilitando el despliegue multiplataforma.

xml<script src="https://unpkg.com/three@0.137.5/build/three.min.js"></script>
<script src="https://unpkg.com/three@0.137.5/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mind-ar@1.1.5/dist/mindar-image-three.prod.js"></script>

Esto garantiza compatibilidad con diversos dispositivos y navegadores modernos.

Reflexiones Finales y Aplicaciones Futuras

Este proyecto ejemplifica cómo combinar inteligencia artificial y realidad aumentada no solo para construir un chatbot, sino para crear experiencias multimedia enriquecidas que integran voz, texto y objetos 3D en contextos reales.

Podrían explorarse más mejoras, como soporte multilingüe, manejo de emociones en las respuestas, o la integración con otros sensores para enriquecer la interacción.

La tecnología usada —LLaMA 3 para IA, MindAR para RA, Three.js para 3D— es abierta y modular, permitiendo a desarrolladores personalizar y escalar según sus necesidades.

Este tipo de bots con RA abren un enorme campo para educación, marketing, juegos interactivos y accesibilidad, posicionando la innovación tecnológica al servicio de la comunicación humana.

Créditos

Autor: Juan Felipe Ramirez Sánchez

Editor: Mg. Carlos Iván Pinzón Romero

Código: CG-20252

Universidad: Universidad Central

Fuentes:

Universidad Central. (s.f.). Página principal. Universidad Central. https://www.ucentral.edu.co/

Botpress. (2023, septiembre 22). Guía definitiva sobre Inteligencia Artificial (IA) y Realidad Aumentada. https://botpress.com/es/blog/ultimate-guide-to-artificial-intelligence-ai-and-augmented-reality-ar

Code Awake. (2023, diciembre 31). Crea un chatbot con IA alimentado por tus datos. https://codeawake.com/es/blog/ai-chatbot

Leo Uniandes. (2022, diciembre 11). Guía para escribir un artículo científico. https://leo.uniandes.edu.co/guia-para-escribir-un-articulo-cientifico/

Numia Blog. (2024, diciembre 22). 11 pasos para la implementación exitosa de un chatbot. https://blog.numia.co/implementacion-de-chatbot/

Publisuites. (2025, octubre 14). ¿Qué extensión necesita un texto SEO para posicionar en Google? https://www.publisuites.com/blog/longitud-texto-para-posicionar/

Scribbr. (2023, diciembre 31). How to cite in APA format (7th edition) | Guide & generator. https://www.scribbr.com/category/apa-style/

Wikipedia Contributors. (2025). Chatbot. Wikipedia. https://en.wikipedia.org/wiki/Chatbot

YouTube. (2024, febrero 27). Cómo crear Chatbots con IA 🚀 | Tutorial Completo para principiantes. https://www.youtube.com/watch?v=mn6mOkiYjIg