Resumen
Hoy + cuatro datos breves de la semana.
La IA que llama por ti, contada de un tirón. Abajo está todo: el recorrido principal del usuario, los atajos que salen de la Home, el panel de control y el flujo de plan y pago.
Lo que ves aquí — la app de usuario y el panel de administración — no son aplicaciones separadas: son secciones de la misma web. Un único proyecto Next.js que reúne la web pública, la app privada, el panel admin y la API, con login compartido y componentes compartidos. El diseño de las pantallas no cambia por la tecnología; encaja tal cual en esa única web.
llamaporti.com/llamaporti.com/appllamaporti.com/app/adminAsí crea el usuario una llamada: alta una sola vez, Home, tres pasos, llamada y resultado. Después vienen historial, detalle y perfil. La voz es un atajo que sale de la Home, no el paso 11 de un recorrido obligatorio.
/app/… de la misma web
Estas pantallas viven dentro del proyecto Next.js, bajo llamaporti.com/app. No es un móvil aparte ni un repositorio distinto: es una sección más de la web, con el mismo login y los mismos componentes que la web pública.
Arrastra el tablero, desliza con el dedo o usa las flechas
clic + arrastrarTras «Entrar con Google», el email y el nombre ya vienen conectados. Solo confirmamos el nombre y pedimos el móvil, necesario para reconocer a la persona y avisarla durante la llamada.
¡Hola! Soy Mia.
Conectada con Google. Entrarás siempre con esta cuenta.
Viene de tu cuenta de Google. Cámbialo si quieres.
Así Alma y Mia te reconocen cuando escribas por WhatsApp.
Al continuar aceptas los Términos y la Política de privacidad.
Saludo, accesos rápidos que precargan la llamada y «Díselo con tu voz» como entrada alternativa. La Home es el selector de plantillas y el lugar al que siempre se vuelve.
Hola, Marta
Accesos rápidos
Tus últimas llamadas
Aquí aún no ha sonado nada
¿Empezamos por esa que llevas tiempo posponiendo?
Destino y petición en una sola pantalla: labels visibles, ejemplos en helper text y filas a dos columnas para que quepa todo.
Paso 1 de 3 · Los datos
Tal y como lo dirías tú. Ej.: «Clínica Sonría».
Opcional. Ej.: «Carmen».
El componente más importante del producto: qué acepta sola y cuándo te consulta. Los pagos de terceros nunca se delegan.
Paso 2 de 3 · Los límites
La pantalla del control, nuestro valor de marca: ves entero lo que la IA va a decir y lo lanzas tú. Sin personajes: revisar es cosa seria.
Paso 3 de 3 · Revisar y lanzar
La IA llama a La Traviesa de parte de Marta: mesa para 4, sábado 25 de julio, 21:30. Puede cerrar entre las 21:00 y las 22:00. Lo demás te lo pregunta.
La Traviesa · +34 912 000 111
sáb 25 jul · 21:30 · mesa tranquila
4 personas · a nombre de Marta
Cuándo: ahora, al lanzarla
Los límites
Línea de tiempo en directo con «Llamando…» latiendo y la misión siempre a la vista.
Hemos recibido tu solicitud.
18:02Estamos preparando la llamada.
18:03La IA está llamando ahora.
18:04 · Llamando…En conversación
Completada
Caja no descartable: qué ha pasado → qué ofrecen → «¿Qué hago?» + 4 salidas directas.
La llamada está en curso.
18:05La IA necesita que decidas algo.
18:06La IA necesita tu respuesta
La llamada sigue en espera · 0:31
Qué ha pasado: el restaurante no tiene mesa a las 21:30.
Qué ofrecen: una mesa a las 22:15, en interior.
¿Qué hago?
Si no respondes, la IA no aceptará y colgará educadamente.
El resumen manda: entendible en 10 segundos, con la transcripción guardada bajo llave.
Filtros desplazables y filas de 56 px con estado compacto. Unos días después del alta ya hay llamadas de ayer.
Hoy
Clínica Dental Sonría
Cambiar cita · te pregunta por la hora
La Traviesa
Reserva de mesa · sábado 21:45, interior
Ayer
Juan · cumpleaños
Llamada de pirata · se ha reído mucho
Taller Ruedas Pérez
Preguntar precio · reintento programado
Academia Delta
Preguntar horarios · cancelada por ti
Reutiliza Resultado con la transcripción abierta. Gestión pura, sin personajes.
La conversación · jueves 23 jul, 18:04
llamaxti
Hola, soy una asistente de inteligencia artificial y llamo de parte de Marta: mesa para cuatro el sábado a las 21:30.
La Traviesa
A las 21:30 no me queda nada… Tendría una a las 22:15, en interior.
La IA consultó a Marta (22:15 se salía del límite): pidió otra opción · respondió en 0:38
llamaxti
¿Tendríais algo más cerca de las 21:30? Se me libera una a las 21:45, me dice… Esa entra en lo que Marta aceptaba: me la quedo para cuatro, a su nombre.
La Traviesa
Apuntado. Os la guardamos un cuarto de hora. Código RSV-8841.
Alta mínima + perfil progresivo: pedimos poco al principio y el resto se completa aquí, cuando quiera.
Tus datos
Preferencias
Tu plan
7 de 12 llamadas este mes
Pronto: tu agenda de contactos con notas.
No es otra pantalla 1 ni el final del recorrido. Es una entrada alternativa: la persona dicta la gestión y aterriza en «Revisar y lanzar».
Habla con normalidad. Luego podrás editarlo todo.
Te escucho…
Toca el micro para pausar
Transcripción en vivo · editable
Reserva mesa para cuatro el sábado sobre las nueve y media en La Traviesa.
Si solo hay terraza, que me pre
Targets de 44 px mínimo — CTA a 52 px, filas de historial a 56 px, FAB de 64 px.
Inputs a 16 px en móvil — evita el zoom de iOS; labels siempre visibles y ejemplos en helper, nunca en placeholder.
Ámbar exclusivo de «Requiere respuesta» e intervención — «Sin respuesta» y «Cancelada» son neutras; los avisos van en caja info.
Estados con icono + texto — nunca solo color; timeline como lista ordenada con aria-current y live region.
El dúo con papeles claros — Alma en cabeceras y esperas de llamadas serias; Mia en empty states, el alta y la voz. Nunca al revés.
Motion sobrio — una animación de deleite por pantalla (150/200/400 ms), todo bajo prefers-reduced-motion.
Y por detrás, nosotros velamos por que todo va bien. Para la primera versión el panel se queda en siete vistas claras. «Informes» deja de ser una pantalla aparte: sus cuatro datos útiles pasan a Resumen, evitando duplicar cifras y navegación.
/app/admin de la misma web
El back-office no es un programa aparte: son rutas protegidas bajo llamaporti.com/app/admin dentro del mismo proyecto Next.js, con el login compartido. La API interna vive en el propio Next (Route Handlers); solo el motor de llamadas — audio en tiempo real, colas y reintentos — corre en un worker aparte, porque un proceso largo no cabe en la petición de una página web.
Hoy + cuatro datos breves de la semana.
En curso, necesita respuesta y revisión.
Detalle de llamada y usuarios.
Solo reglas básicas del servicio.
Una única portada: primero lo urgente de hoy y, al final, cuatro datos semanales para entender la tendencia. Ya no existe una pantalla «Informes» separada.
Llamadas hoy
342
+12 % vs ayer
Tasa de éxito
87,4 %
completadas / finalizadas
En curso ahora
12
7 en conversación · 2 llamando
Esperando respuesta
4
espera máx. 4:12
hoy, de 9:00 a 18:00
todos los estados del sistema, en vivo
lo que antes vivía en «Informes»
Llamadas
1.284
+18 % vs anterior
Resueltas
86,9 %
con máx. 1 reintento
Uso principal
Reservas
34 % del total
Coste de voz
31,40 €
de 50 € previstos
Solo lo que está sonando. En esta primera versión hay dos acciones: abrir el detalle o cortar con confirmación. Escuchar en directo queda para más adelante.
| ID | Destino | Categoría | Estado | Inicio | Duración | Usuario | Acciones |
|---|---|---|---|---|---|---|---|
| LLX-2026-0198 | Clínica Vistalegre+34 915 22 40 18 | Prácticas | Llamando | 18:04 | 0:12 | Elena D. | |
| LLX-2026-0197 | Floristería Petunia+34 914 02 76 33 | Prácticas | En conversación | 18:02 | 2:31 | Jorge M. | |
| LLX-2026-0196 | Peluquería Nova+34 918 40 77 12 | Prácticas | En conversación | 18:01 | 3:05 | Sara T. | |
| LLX-2026-0195 | Atención al cliente — telefonía+34 900 10 47 00 | Gestión | Requiere respuesta | 17:57 | 6:48 | Andrés P. | |
| LLX-2026-0194 | Asador El Roble+34 913 44 20 90 | Prácticas | Requiere respuesta | 17:55 | 9:20 | Lucía G. | |
| LLX-2026-0193 | Autoescuela Lince+34 916 74 20 55 | Prácticas | Preparando | — | — | Nerea V. | |
| LLX-2026-0192 | Gimnasio Forma+34 912 05 33 81 | Gestión | Llamando | 18:04 | 0:05 | Óscar L. |
Llamadas pausadas porque la IA ha topado con un límite. El equipo solo vigila la espera, abre la llamada o reavisa; nunca decide en nombre del usuario.
«Solo queda mesa en terraza a las 21:30, o interior a las 23:00. ¿Cuál acepto?»
Lucía G. · Asador El Roble · límite marcado: «si solo hay terraza, preguntarme»
4:12
en espera
«Ofrecen la tarifa a 29,90 € pero con 12 meses de permanencia. ¿Acepto?»
Andrés P. · Atención al cliente — telefonía · límite de sistema: permanencias y contratos siempre se consultan
1:26
en espera
«Solo queda hueco el jueves a las 9:00 con otra doctora. ¿Lo cojo?»
Marta V. · Clínica Dental Sonría · límite marcado: «mejor por la tarde y con la Dra. Ferrer»
0:47
en espera
«El taller pide dejar el coche dos días en vez de uno. ¿Confirmo la cita igualmente?»
Óscar L. · Taller Hermanos Vega · límite marcado: «si cambia el plazo, preguntarme»
0:12
en espera
Llamadas retenidas antes de salir por posible acoso, datos sensibles o bromas dañinas. En esta versión la decisión es simple: aprobar o rechazar.
Una sola ficha para entender qué ocurrió: resultado primero, límites y eventos después. La transcripción queda como información secundaria y plegable.
Mesa para 4 confirmada: sábado 25 a las 21:45 en interior, a nombre de Marta. No había a las 21:30; la IA consiguió 21:45.
los mismos verde / ámbar que vio el usuario en el paso 2 «Los límites»
Podía aceptar sin preguntar
Debía preguntar antes
Bloqueado por sistema
hablante y hora en mono; la conversación, en Figtree
llamaxti18:04
Hola, buenas tardes. Soy una asistente de inteligencia artificial y llamo de parte de Marta para hacer una reserva. ¿Tenéis un momento?
La Traviesa18:04
Sí, dime.
llamaxti18:04
Quería una mesa para cuatro personas este sábado sobre las 21:30, mejor en el interior.
La Traviesa18:05
A las 21:30 no me queda nada. En interior lo más cercano que tengo es a las 22:15.
llamaxti18:05
Dame un segundo, que un cambio de hora así tengo que consultarlo con Marta antes de decidir.
sistema18:06
Pregunta enviada al usuario: «No hay a las 21:30; ¿acepto las 22:15 en interior?». Respuesta recibida en 0:38: «pregunta otra opción».
llamaxti18:06
Gracias por esperar. ¿Tendríais algún hueco intermedio en interior, algo más cerca de las 21:30?
La Traviesa18:06
Déjame mirar… Sí, se me acaba de liberar una a las 21:45 en interior.
llamaxti18:07
Esa entra dentro de lo que Marta aceptaba. Me quedo la de las 21:45 en interior, para cuatro, a nombre de Marta.
La Traviesa18:07
Apuntado. Os la guardamos un cuarto de hora, ¿vale? Código RSV-8841.
llamaxti18:07
Estupendo, se lo traslado. Muchas gracias y hasta el sábado.
Solo lo necesario para atender a un cliente: nombre, teléfono, plan, consumo y última llamada. La facturación y las tarjetas siguen fuera, en Stripe.
| Usuario | Teléfono | Plan | Consumo del mes | Última llamada |
|---|---|---|---|---|
| Marta Vidal | +34 612 480 315 | Plus | 7/12 | hoy · 18:08 |
| Jorge Ramos | +34 655 09 22 41 | Max | 22/25 | hoy · 17:52 |
| Sara Torres | +34 699 41 07 68 | Prueba | 1/1 | ayer · 20:14 |
| Andrés Peña | +34 622 88 30 15 | Plus | 3/12 | 21 jul · 11:03 |
| Carmen Ortiz | +34 611 74 52 90 | Mini | 3/3 | 20 jul · 09:40 |
| Lucía Gómez | +34 688 12 47 03 | Max | 9/25 | hoy · 17:55 |
| Nerea Vega | +34 677 30 91 55 | Prueba | 0/1 | sin llamadas aún |
Solo cuatro valores comprensibles: horario, duración máxima, reintentos y tiempo de espera. Las reglas sensibles del guardián se muestran, pero todavía no se editan desde aquí.
Horario permitido
Fuera de esta franja no se llama a nadie.
Duración máxima
La llamada se corta con educación al llegar al tope.
Reintentos si no contestan
Cuántas veces se vuelve a intentar antes de rendirse.
Espera de tu respuesta
Cuánto aguanta la IA a que decidas en una intervención.
Patrones que retienen una llamada antes de salir. En esta fase los mantiene el equipo técnico.
Pagos, señales y datos bancarios están siempre bloqueados. Estas reglas no se pueden cambiar desde el panel.
Cuánto quieres delegar y por qué puedes fiarte. Tres planes con precio cerrado —aprobados el jueves 23 jul— y el guardián que revisa cada llamada antes de marcar.
Tres planes con precio cerrado. Y estrenas con una llamada de prueba gratis.
Precios aprobados el jueves 23 julPara esa llamada suelta que llevas días posponiendo.
4,99 €/mes
3 llamadas al mes
Para quitarte de encima las gestiones de la semana.
9,99 €/mes
12 llamadas al mes
Para delegar sin mirar cuántas llevas.
19,99 €/mes
25 llamadas al mes
1.ª llamada de prueba gratis al registrarte Pack extra: +5 llamadas por 2,99 € Plan anual: 2 meses gratis
La primera llamada es gratis. Después, «Cambiar de plan» desde Perfil o cualquiera de los botones de arriba abre una pasarela segura. La app solo recibe el estado de la suscripción; no guarda datos de tarjeta.
La persona conoce el servicio con una llamada, sin pedir tarjeta en el alta.
Mini, Plus o Max desde Perfil o al terminar la prueba.
Checkout alojado por Stripe: tarjeta, recibo y gestión de la suscripción.
Confirmación clara, llamadas disponibles y enlace para cambiar o cancelar.
Son dos pagos distintos: llamaxti cobra la suscripción en esta pasarela. Si un restaurante pide señal, tarjeta o transferencia durante una llamada, Alma siempre se detiene y consulta; nunca paga en nombre del usuario.
Cada llamada pasa un filtro de seguridad, y la app te cuenta lo que hace por ti con números claros.
Todas las llamadas pasan por un guardián que bloquea acoso, bromas dañinas y contenido ilegal. Antes de marcar, no después. Es el mismo filtro que ves trabajar en el Revisor del panel interno.
~26 min
Te has ahorrado ~26 minutos de llamadas este mes.
7 de 12
Llamadas usadas de tu plan este mes.
9 de 10
Nuestra meta: gestiones resueltas a la primera o con un reintento.
Cada llamada dura 10 minutos como máximo Llamamos de 9:00 a 21:00 1 reintento automático si no contestan
Volver al inicio de la Parte CLas pantallas enseñan el producto; esta parte explica qué ocurre por debajo cuando el usuario pulsa «Lanzar la llamada» — y sobre todo cómo la IA te pregunta en directo si se topa con algo que no puede decidir sola. Es la costura de los pasos 2, 5 y 6, aquí contada para Jaime, Olga y Juan David.
La web (Next.js) no hace la llamada ella misma: una página web no puede quedarse minutos hablando por teléfono. La llamada la ejecuta un worker aparte, que orquesta el audio en tiempo real (LiveKit), el cerebro del agente (Gemini) y la salida a la red telefónica.
Qué es fase 1 y qué es fase 3. La app, los límites, la cola y el resultado (pieza 1) se construyen ya. El motor de voz real —LiveKit + Gemini + teléfono— es la fase siguiente; ahora se prueba por navegador. Pero el diseño no cambia: el flujo es el mismo, solo cambia si el audio sale por el altavoz del portátil o por la línea telefónica.
Los límites que pones en el paso 2 se convierten en instrucciones para el agente. Una de ellas es una tool que dice: «si te sales de lo permitido, no decidas: pregúntale al usuario y espérate». Así se enlazan los pasos 2 → 5 → 6:
Mientras tú decides, el restaurante está esperando al teléfono — y una persona real aguanta segundos, no minutos. Por eso la pantalla 6 muestra un contador honesto (los «0:31»): es tu ventana para responder antes de que la IA tenga que decir «lo confirmo luego» y colgar. Toda plataforma de voz pone un timeout a estas tools, en segundos. La pantalla 6 tiene que respetarlo: decisiones de un toque, nada de formularios largos.
Una tool es una función que el agente ejecuta en mitad de la conversación. Son, exactamente, las 5 funciones que Jaime construye en la base de datos, vistas desde el lado del agente:
preguntar_al_usuario({
hecho: "no hay mesa a las 21:30",
ofrecen: "una a las 22:15, en interior",
opciones:["acepta", "pide otra", "cancela"]
}) → espera tu toque (con timeout)| Pieza | Fase | Dueño |
|---|---|---|
| Guardar los límites y el perfil (paso 2 + alta) | fase 1 | 🏗️ Jaime |
| Cola + estado en vivo por WebSocket | fase 1 | 🏗️ Jaime |
| El agente de voz y sus tools (prompt, cómo entretiene al esperar) | navegador → real | 🧪 Olga |
| El worker + LiveKit + salida a teléfono (Zadarma) | fase 3 | 🏗️ Jaime + servidor |
| Los avisos por WhatsApp (te llega la pregunta y el resultado) | fase 1 | 🧠 Juan David |
Lo que importa para el diseño: el flujo es 100% construible y ya está dibujado en las pantallas. La única restricción de diseño que sale de aquí es la de la pantalla 6 — la respuesta a la intervención tiene que ser de un toque, porque hay alguien esperando al teléfono. Todo lo demás encaja tal cual.
Esto es todo el producto de un vistazo: sencillo por fuera, con límites por dentro y un equipo velando por detrás.
Volver a empezar el recorrido