Un asistente que te escucha, te responde con voz y conoce tu contexto — como el de Iron Man, pero tuyo y sin traje. Arriba podés jugar con la carcasa; abajo está el sistema completo para construirlo y conectarlo a una IA de verdad, paso a paso.
◆ JARVIS v1.0 · probá la carcasa — escribí "qué hora es" o "contame un chiste"
Hola, soy Jarvis. Escribíme algo abajo 👇
El stack
Claude Codeconstruye cada pieza — vos pedís, él programa
Web Speech APIla voz y el oído ya vienen GRATIS en tu navegador (nada que instalar)
Una API de IAel cerebro real (Claude/GPT) — solo para el paso 4, con su token
Paso 01⏱ ~5 min
La carcasa: interfaz + respuestas locales
Empezá por lo que ves arriba: un campo de texto, un área de respuesta y reglas básicas (hora, fecha, saludos, chistes). Abrí Claude Code en una carpeta nueva y pedí:
prompt-paso-1.txt
> Construime una página HTML de un asistente virtual llamado Jarvis: un campo de texto, un área grande de respuesta y un botón enviar. Que reconozca localmente: hora, fecha, saludos, chistes (lista propia) y cálculos simples. Estética de terminal elegante, fondo oscuro, un color de acento. Todo en un solo archivo, sin librerías.
Resultado esperado: tu Jarvis local respondiendo al instante. Todavía no piensa — pero ya vive.
Paso 02⏱ ~3 min
Dale voz
El navegador trae un sintetizador de voz gratis (speechSynthesis). Pedí:
prompt-paso-2.txt
> Agregá voz con la Web Speech API: que lea cada respuesta en voz alta en español (es-ES), con un botón para activar/desactivar la voz. Si hay varias voces en español disponibles, usá la más natural y dejame elegirla con un selector.
🔌 Detalle de navegador: algunos navegadores no reproducen voz hasta que el usuario hace el primer clic en la página. Si no habla de entrada, tocá cualquier botón primero — es una protección estándar, no un bug.
Paso 03⏱ ~4 min
Que te escuche: micrófono
La otra mitad de la Web Speech API es el reconocimiento de voz. Pedí:
prompt-paso-3.txt
> Agregá un botón de micrófono que use SpeechRecognition (webkitSpeechRecognition) en español: al tocarlo escucha, transcribe lo que digo al campo de texto y lo envía solo. Mostrá un indicador visual mientras escucha. Manejá el caso de navegadores que no lo soportan con un mensaje claro.
⚠ Soporte real: el reconocimiento de voz funciona bien en Chrome y Edge; en otros navegadores puede no estar. Tu Jarvis debe avisarlo, no romperse — por eso el prompt lo pide explícito.
Paso 04⏱ ~10 min
El cerebro real: conectalo a una IA
Hasta acá, Jarvis responde reglas. El salto: cuando no reconozca la intención, que le pregunte a una IA de verdad. La regla inquebrantable: la API key vive en un backend, jamás en el HTML (si no, cualquiera te la roba del código fuente). Pedí:
prompt-paso-4.txt
> Conectá a Jarvis con la API de Claude: (1) creá un backend mínimo (un archivo PHP o una función serverless, lo que mejor aplique a mi hosting) que reciba la pregunta, agregue la API key desde una variable de entorno del servidor y reenvíe la respuesta; (2) el HTML llama a MI backend, nunca a la API directo; (3) si el backend no responde, Jarvis cae a sus respuestas locales. Explicame dónde configurar la key en mi hosting.
Resultado esperado: le preguntás cualquier cosa y responde como una IA completa — con tu voz de Jarvis.
Paso 05⏱ ~5 min
Memoria y personalidad
Un asistente genérico es un chat más. El tuyo tiene que saber quién sos:
prompt-paso-5.txt
> Agregale a Jarvis: (1) memoria de conversación — guardá los últimos 10 intercambios en localStorage y mandalos como contexto; (2) personalidad — un mensaje de sistema editable donde defino quién soy, mi negocio y cómo quiero que me responda (tono, largo, idioma); (3) un comando "olvidate" que borra la memoria.
Paso 06⏱ ~5 min
Ponelo a trabajar en tu web
Subilo a tu hosting como una página más (o como botón flotante). Ideas que ya funcionan: asistente que responde las FAQs de tu negocio, recepcionista de tu portfolio, o guía de tus recursos. Pedíle a Claude: "empaquetalo como un widget flotante que pueda pegar en cualquier página de mi sitio".
Lo que tenés al terminar
Un asistente con voz e oído corriendo en tu navegador — sin instalar nada
Conexión segura a una IA real (la key protegida en tu servidor)
Memoria y personalidad propia: te conoce y responde como vos querés
Un widget listo para incrustar en tu web y atender visitas
Llevate los 3 prompts maestros
El todo-en-uno de la carcasa, el backend seguro y la memoria+personalidad — versiones largas listas para pegar.
★ · Los prompts maestros
maestro-1-carcasa-completa.txt
> Construime "Jarvis", un asistente virtual en una sola página HTML: campo de texto + área de respuesta grande + botón enviar + botón de micrófono + toggle de voz. Reconocimiento local de intenciones (hora, fecha, saludos, chistes propios, cálculos), voz con speechSynthesis en español con selector de voces, escucha con SpeechRecognition con indicador visual y fallback claro si el navegador no lo soporta. Estética terminal premium: fondo casi negro, tipografía mono, un acento de color, animación sutil al responder. Sin librerías externas.
maestro-2-backend-seguro.txt
> Creá el backend de mi Jarvis para conectarlo a la API de Claude de forma segura: un endpoint (elige PHP o serverless según mi hosting, preguntame cuál uso) que (1) lee la API key de una variable de entorno del servidor, (2) recibe {pregunta, historial, sistema} por POST JSON, (3) llama a la API con el modelo más reciente, (4) devuelve solo el texto, (5) limita el largo de entrada y maneja errores sin filtrar información sensible. Después modificá el HTML para llamar a este endpoint con fallback a las respuestas locales si falla.
maestro-3-memoria-persona.txt
> Agregale a Jarvis memoria y personalidad: (1) historial de los últimos 10 intercambios en localStorage, enviado como contexto en cada llamada; (2) un "mensaje de sistema" editable desde un panel oculto (triple clic en el título) donde defino: mi nombre, mi negocio, el tono (cercano/profesional), el largo de respuesta y el idioma; (3) comandos especiales: "olvidate" borra la memoria, "modo silencio" apaga la voz; (4) que al cargar salude usando mi nombre si ya me conoce.
El orden importa: carcasa → backend → memoria. Si empezás por el backend te trabás sin ver nada en pantalla; la carcasa te da la victoria visible en 5 minutos y el resto son mejoras sobre algo que ya funciona.
¿Tu Jarvis ya habla?
Mandáme un video por DM — comparto los mejores. Cada semana sale un sistema nuevo.
Se desbloquea acá mismo Y te llega el pack completo al correo con mis trucos de producción. Si dejás tu WhatsApp, te aviso por ahí cuando salga un drop nuevo (sin spam, palabra).