Para crear un bot con RA, este proyecto utiliza un stack tecnol\u00f3gico basado en varias herramientas fundamentales: backend con Node.js y Express para la l\u00f3gica del servidor; una conexi\u00f3n con un modelo de IA compatible LLaMA 3<\/a> proporcionado por Groq API<\/a>; frontend en React para la interfaz; MindAR<\/a> para la detecci\u00f3n de im\u00e1genes y c\u00e1mara de RA; Three.js<\/a> para renderizado y control de modelos 3D; y APIs<\/a> web de voz para interacci\u00f3n natural.<\/p>\n\n\n\n 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\u00f3n en tiempo real. La simplicidad y eficiencia de Express hacen que el manejo de rutas y peticiones API sea \u00e1gil.<\/p>\n\n\n\n Por ejemplo, en el archivo Esto configura la conversaci\u00f3n para que el modelo IA act\u00fae con una personalidad concreta y dominio tem\u00e1tico. Luego la respuesta JSON recibida se devuelve para su consumo en el frontend.<\/p>\n\n\n\n Se utiliza el modelo LLaMA 3, uno de los modelos de lenguaje m\u00e1s recientes, conocido por ser eficiente y vers\u00e1til en comprensi\u00f3n y generaci\u00f3n de texto. La implementaci\u00f3n con Groq API permite una integraci\u00f3n compatible con OpenAI standards, aprovechando la capacidad del modelo para respuestas coherentes, breves y especializadas.<\/p>\n\n\n\n Esta tecnolog\u00eda IA es crucial para dotar de inteligencia <\/a>conversacional al bot, permitiendo que sea perceptivo, preciso, y amigable en sus respuestas.<\/p>\n\n\n\n El frontend combina React para la estructura de componentes y Vite para desarrollo moderno y r\u00e1pido. Se divide en dos partes principales:<\/p>\n\n\n\n <\/p>\n\n\n\n La implementaci\u00f3n inicia con el backend<\/a>. Se configuran las variables de entorno en El servidor Express habilita CORS para permitir llamadas cross-origin y usa JSON para manejar el body de las peticiones.<\/p>\n\n\n\n El endpoint Este fragmento es esencial para manejar la inteligencia del bot y asegurar la conexi\u00f3n segura con el modelo de IA.<\/p>\n\n\n\n Para mostrar el bot cartoon en el espacio real, la tecnolog\u00eda requerida es la RA basada en detecci\u00f3n de im\u00e1genes y renderizado 3D.<\/p>\n\n\n\n <\/p>\n\n\n\n MindAR ofrece detecci\u00f3n precisa de un marcador visual definido en un archivo Este c\u00f3digo configura la instancia de MindAR para iniciar la c\u00e1mara y comenzar la detecci\u00f3n.<\/p>\n\n\n\n Three.js carga un modelo 3D en formato El ajuste autom\u00e1tico de la c\u00e1mara para que el modelo siempre est\u00e9 visible y centrado se realiza con una funci\u00f3n que calcula la bounding box y ajusta posici\u00f3n y escala:<\/p>\n\n\n\n Se agrega este modelo a la escena y se inicia un ciclo de animaci\u00f3n continuo sincronizado con la detecci\u00f3n del marcador.<\/p>\n\n\n\n La interfaz de usuario es clave para la interacci\u00f3n. El componente de chat gestiona:<\/p>\n\n\n\n Ejemplo de inicializaci\u00f3n de escucha:<\/p>\n\n\n\n Cuando se detecta el final de la frase o silencio, el texto se env\u00eda autom\u00e1ticamente al backend.<\/p>\n\n\n\n Adem\u00e1s, el bot ofrece feedback visual sobre la escena de RA: cada respuesta desencadena una breve animaci\u00f3n de “pulso” en el modelo 3D, mejorando la sensaci\u00f3n de realismo.<\/p>\n\n\n\n <\/p>\n\n\n\n El proyecto se configura como una PWA con un archivo La configuraci\u00f3n de Vite con proxy permite una experiencia fluida entre cliente y servidor incluso en entorno local, simplificando desarrollo.<\/p>\n\n\n\n El HTML carga las librer\u00edas UMD de Three.js, GLTFLoader y MindAR directamente desde CDN, evitando configuraciones complejas y facilitando el despliegue multiplataforma.<\/p>\n\n\n\n Esto garantiza compatibilidad con diversos dispositivos y navegadores modernos.<\/p>\n\n\n\nBackend con Node.js y Express<\/strong><\/h2>\n\n\n\n
src\/server.js<\/code> se configura la ruta \/api\/chat<\/code> para procesar solicitudes POST que contienen el mensaje del usuario. Se env\u00eda este texto a la API Groq compatible con OpenAI:<\/p>\n\n\n\njs
const body = {\n model: OPENAI_MODEL,\n messages: [\n { role: 'system', content: 'Eres un bot cartoon amable y breve...' },\n { role: 'user', content: message }\n ]\n};\n<\/code><\/pre>\n\n\n\nModelo de IA: LLaMA 3 v\u00eda Groq API<\/strong><\/h2>\n\n\n\n
Frontend en React con Vite<\/strong><\/h2>\n\n\n\n
\n
ArScene.jsx<\/code>), que muestra el modelo 3D en RA.<\/li>\n\n\n\nChatUI.jsx<\/code>), para interacci\u00f3n por texto y voz con el bot.<\/li>\n<\/ul>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/11\/image-961.png\")
<\/figure>\n\n\n\nPaso 1: Preparaci\u00f3n del Backend<\/strong><\/h2>\n\n\n\n
.env<\/code> para mantener seguras las claves API y par\u00e1metros de configuraci\u00f3n:<\/p>\n\n\n\nOPENAI_API_KEY=tu_api_key
OPENAI_MODEL=llama-3.1-8b-instant
OPENAI_BASE_URL=https:\/\/api.groq.com\/openai\/v1
PORT=3001
<\/code><\/pre>\n\n\n\n\/api\/chat<\/code> con el siguiente esquema es el encargado de la comunicaci\u00f3n con la IA:<\/p>\n\n\n\napp.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 });
});
<\/code><\/pre>\n\n\n\nPaso 2: Escena de Realidad Aumentada <\/a>con MindAR y Three.js<\/strong><\/h2>\n\n\n\n
![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/11\/image-971-1024x536.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/11\/image-972-1024x541.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/11\/image-973-1024x545.png\")
<\/figure>\n\n\n\nUso de MindAR para Detecci\u00f3n y C\u00e1mara<\/strong><\/h2>\n\n\n\n
.mind<\/code> que funciona como “ancla” para que el modelo 3D aparezca en la pantalla coincidiendo con un objeto o imagen real vista por la c\u00e1mara.<\/p>\n\n\n\nmindarThree = new MindAR.MindARThree({
container: containerRef.current,
imageTargetSrc: \"\/target.mind\",
uiScanning: true,
});
<\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/11\/image-966-1024x549.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/11\/image-968-1024x546.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/11\/image-969-1024x541.png\")
<\/figure>\n\n\n\nRenderizado con Three.js<\/strong><\/h2>\n\n\n\n
.glb<\/code> y lo posiciona sobre el marcador detectado para crear el efecto de realidad aumentada.<\/p>\n\n\n\njs
function fitCameraToObject(object, camera, renderer, offset) {\n const box = new THREE.Box3().setFromObject(object);\n const radius = box.getBoundingSphere(new THREE.Sphere()).radius;\n const fov = camera.fov * Math.PI \/ 180;\n const distance = Math.abs((radius * offset) \/ Math.sin(fov \/ 2));\n camera.position.set(0, 0, distance);\n camera.lookAt(0, 0, 0);\n camera.updateProjectionMatrix();\n}\n<\/code><\/pre>\n\n\n\nPaso 3: Chat con Voz y Texto en React<\/strong><\/h2>\n\n\n\n
\n
SpeechRecognition<\/code>.<\/li>\n\n\n\nSpeechSynthesis<\/code> para que el bot hable en voz alta las respuestas.<\/li>\n\n\n\njs
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\nconst recognition = new SpeechRecognition();\nrecognition.lang = 'es-ES';\nrecognition.continuous = true;\nrecognition.interimResults = true;\n<\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/11\/image-974-1024x574.png\")
<\/figure>\n\n\n\nPaso 4: Despliegue y Contenido PWA<\/strong><\/h2>\n\n\n\n
manifest.json<\/code> que define el nombre de la app, iconos, colores y comportamiento para instalaci\u00f3n en dispositivos m\u00f3viles.<\/p>\n\n\n\nxml
<script src=\"https:\/\/unpkg.com\/three@0.137.5\/build\/three.min.js\"><\/script>\n<script src=\"https:\/\/unpkg.com\/three@0.137.5\/examples\/js\/loaders\/GLTFLoader.js\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/mind-ar@1.1.5\/dist\/mindar-image-three.prod.js\"><\/script>\n<\/code><\/pre>\n\n\n\nReflexiones Finales y Aplicaciones Futuras<\/strong><\/h2>\n\n\n\n