Smart Displays y apps publicadas

Una Smart Display es una pantalla que muestra una app alojada por tu Agente de IA. Como el agente ejecuta la app, puede cambiar lo que muestra la pantalla a medida que cambian las cosas a su alrededor: la hora pico del almuerzo en el mostrador, un visitante que abre la puerta principal, el vestíbulo de un hotel que se llena, una sala de espera concurrida, socios que llegan para un desafío de visitas. Describe lo que quieres en lenguaje sencillo. El agente crea la app, la mantiene actualizada y tú la colocas en tus pantallas como cualquier otro contenido.

Figura 1: Una Smart Display en la sala de un gimnasio. El agente vuelve a contar los registros de entrada cada pocos minutos y muestra a los socios que acaban de llegar en qué posición están. El club y los socios son ficticios.

Tú mantienes el control: cada app está en tu Library, donde puedes obtener una vista previa, ver dónde se usa y cambiarla o quitarla.

Pantallas inteligentes

Una Smart Display usa una Agent: Published App: una app web creada por tu Agente de IA que se ejecuta en vivo en el dispositivo de Agente de IA de tu instalación. Las pantallas muestran la app en vivo, así que cuando el agente cambia lo que muestra, la pantalla también cambia. Nadie tiene que volver a publicar nada.

El agente mantiene la app actualizada de una de dos formas:

• Según una programación. Una automatización se ejecuta cada pocos minutos durante las horas que importan. Mediante su conexión con el Performance Hub, el agente lee lo que necesita, como registros de entrada, eventos de puertas o conteos de cámaras, y actualiza la app. Cada ejecución consume gasto de IA, así que comprueba solo con la frecuencia que necesites.
• Cuando algo sucede. Un evento en tu sitio, como el pase de un visitante que abre la puerta principal, hace que el agente actualice la app. La pantalla cambia poco después del evento, y el agente no trabaja entre un evento y otro. Consulta la bienvenida en el vestíbulo de una oficina.

Una Smart Display solo puede usar lo que el agente puede leer. Su acceso MCP debe incluir la instalación y las capacidades que necesita la app, como Door & Gate Access para los eventos de puertas o circuito cerrado de televisión para los registros de entrada y los conteos de cámaras. Consulta Conexión con el Performance Hub.

Dos formas en que una app llega a tus pantallas

Tu agente también puede crear una On-Device Web App por ti, pero una vez publicada no puede seguir adaptándose. Reproduce los mismos archivos en todas las pantallas hasta que alguien publique una versión nueva, y no puede usar los datos de tu instalación. Solo una Agent: Published App sigue cambiando según lo que sucede alrededor de la pantalla.

Elige una Smart Display cuando la pantalla deba reaccionar a lo que pasa en tu sitio: quién llegó, cuánta gente hay o qué acaba de suceder. Elige una On-Device Web App para el contenido que no cambia o que solo necesita datos públicos, y que debe seguir reproduciéndose sin conexión.

Ejemplos de Smart Displays

Cada ejemplo a continuación es una configuración real: a qué reacciona la pantalla, qué muestra, cómo la mantiene actualizada el agente y qué necesitas. Las empresas y las personas son ficticias.

Tabla de clasificación de un desafío de visitas que saluda a los socios cuando llegan

Un espacio de coworking, la biblioteca de un campus o un gimnasio organiza un desafío de visitas durante el mes. Su agente aloja una tabla de clasificación para las pantallas por las que pasan los socios, que ordena a los socios por sus visitas de este mes y da la bienvenida a los participantes del desafío cuando están cerca de la pantalla. En las figuras, un gimnasio organiza un desafío de visitas de octubre en las pantallas de su sala.

• Reacciona a: quién está cerca de la pantalla. El agente lo sabe gracias al reconocimiento facial del Performance Hub, a los registros de entrada recientes o a ambos, según cómo esté configurado tu sitio. Cada participante del desafío que está cerca de la pantalla recibe una etiqueta Just in y una tarjeta que muestra su posición. En las figuras, el gimnasio usa los registros de entrada de los últimos 30 minutos.
• Muestra: los socios con más visitas, solo con el nombre y la inicial del apellido, los días que quedan del desafío y el premio.
• Se mantiene actualizada: cada 5 minutos durante el horario de apertura, el agente vuelve a contar los registros de entrada de este mes con insights_checkins, comprueba quién está cerca de la pantalla y actualiza la app.
• Necesitas: circuito cerrado de televisión con AI Insights & People, con reconocimiento facial en las cámaras cercanas a la pantalla, registros de entrada de tu sistema de gestión de socios, o ambos, y una lista de los socios que aceptaron participar en el desafío.

Figura 2: Pide la tabla de clasificación a tu Agente de IA. Crea la app, la abre junto al chat y vuelve a contar los registros de entrada cada 5 minutos. La conversación es un ejemplo.

Figura 3: La misma tabla de clasificación en una pantalla vertical

Privacidad. Incluye solo a los socios que dieron su consentimiento, no muestres más que el nombre y la inicial del apellido, y nunca muestres datos de membresía ni de salud.

Menú de comida rápida que reacciona a la hora pico del almuerzo

Un restaurante de comida rápida le pide a su agente el menú que va sobre el mostrador. Cambia de menú a lo largo del día y, cuando hay mucha gente en el mostrador, coloca arriba los productos que se preparan más rápido.

• Reacciona a: la hora del día y la cantidad de gente en el mostrador: el número de personas que la cámara del mostrador contó en lo que va de la hora, en comparación con una hora normal.
• Muestra: el desayuno hasta las 11 am, el almuerzo hasta las 3 pm y luego el menú de la tarde. Cuando hay mucha gente, un banner Ready in under 3 minutes con los productos de preparación rápida, y una etiqueta Quick en ellos dentro del menú.
• Se mantiene actualizado: cada 5 minutos, el agente revisa los conteos de cámaras del día en AI Insights & People y actualiza la app. Los precios y los tiempos de preparación provienen de un archivo de menú que le das al agente.
• Necesitas: circuito cerrado de televisión con AI Insights & People, con una cámara que cubra el mostrador.

Figura 4: El agente crea el menú y lo abre junto al chat. Solo usa conteos anónimos. La conversación es un ejemplo.

Figura 5: El resultado sobre el mostrador durante la hora pico del almuerzo

Bienvenida en el vestíbulo de una oficina para cada visitante

Una oficina le da a cada visitante un pase de Door & Gate Access válido durante su visita. Cuando el pase de un visitante abre la puerta principal, la pantalla del vestíbulo lo saluda por su nombre con su anfitrión, la sala de reuniones y las indicaciones para llegar, y después de un minuto vuelve a la bienvenida habitual.

• Reacciona a: el pase del visitante que abre la puerta principal.
• Muestra: "Hi Priya, great to see you", el nombre y el equipo del anfitrión, la sala de reuniones y la hora, e indicaciones paso a paso.
• Se mantiene actualizada: un flujo de trabajo activa el saludo cuando el pase del visitante abre la puerta principal. El agente relaciona a la persona del evento de la puerta con la lista de visitantes del día, que mantiene la recepción y le entrega al agente con el anfitrión, la sala y las indicaciones de cada visitante. Los eventos de puertas no incluyen nombres, anfitriones ni salas, por lo que la lista siempre es necesaria.
• Necesitas: Door & Gate Access y una lista de visitantes del día.

Figura 6: El agente crea la pantalla de bienvenida y la abre junto al chat. La conversación es un ejemplo.

Figura 7: El resultado en la pantalla vertical del vestíbulo

La misma configuración puede dar la bienvenida a tu propio equipo. Por ejemplo, puede desearle feliz cumpleaños a un integrante del equipo cuando llega el día de su cumpleaños, a partir de una lista de cumpleaños de las personas que lo aceptaron. La fecha de nacimiento es información personal: incluye solo a las personas que lo aceptaron y no muestres más que el nombre.

Piensa en quién puede ver la pantalla. Cualquier persona en el vestíbulo puede ver un mensaje de bienvenida. No muestres más que el nombre y nunca muestres información privada, como datos de salud, de membresía o de recursos humanos.

Pantalla de sala de espera con tiempos de espera en vivo

Una clínica o un centro de atención muestra cuánto dura la espera en este momento, para que las personas que esperan sepan qué esperar.

• Reacciona a: aproximadamente cuántas personas están esperando, según los conteos anónimos de la cámara que cubre la sala de espera, y las llegadas a partir de los registros de entrada, si tu sitio los registra.
• Muestra: un tiempo de espera aproximado y cuántas personas esperan, el horario de atención y un mensaje tranquilizador cuando hay mucha gente.
• Se mantiene actualizada: cada pocos minutos, el agente lee los últimos conteos y llegadas, y calcula la espera a partir del tiempo habitual por visita que le indicas.
• Necesitas: circuito cerrado de televisión con AI Insights & People, con una cámara que cubra la sala de espera.

Un ejemplo de lo que dice la pantalla cuando hay mucha gente:

Unos 25 minutos

Unas 7 personas esperando

Hoy por la mañana hay más gente de lo habitual. Gracias por tu paciencia: te llamaremos en cuanto estemos listos.

Nunca muestres información de pacientes ni de clientes. La pantalla solo muestra totales, nunca nombres ni motivos de la visita.

Pantalla del vestíbulo de un hotel que sigue el ritmo del día

Un hotel o un local muestra a los huéspedes las actividades del día, que cambian según la hora y la cantidad de gente en el vestíbulo.

• Reacciona a: la hora del día y la cantidad de gente en el vestíbulo, según los conteos anónimos de la cámara del vestíbulo.
• Muestra: información del check-in y los datos del Wi-Fi por la tarde, los eventos de la noche y la disponibilidad del restaurante al anochecer, y los horarios del desayuno y los recordatorios del check-out por la mañana. Cuando el vestíbulo está concurrido, primero aparecen los datos del check-in y del Wi-Fi, para que los huéspedes que llegan los encuentren rápidamente.
• Se mantiene actualizada: cada pocos minutos, el agente lee los conteos del vestíbulo y actualiza la app. Los eventos y la disponibilidad del restaurante provienen de listas o sistemas a los que le das acceso al agente.
• Necesitas: circuito cerrado de televisión con AI Insights & People para los conteos del vestíbulo. Sin circuito cerrado de televisión, la pantalla sigue cambiando según la hora del día.

Un ejemplo de lo que dice la pantalla a las 6 pm:

Esta noche en Demo Harbour Hotel

Jazz en el lounge, de 7 pm a 10 pm

Harbour Grill: mesas libres a partir de las 8:30 pm. Reserva en la recepción.

Desayuno mañana a partir de las 6:30 am en Harbour Grill.

Señalización de un centro comercial que se adapta al público

Un centro comercial le pide a su agente una señalización para el atrio que elija la promoción según la combinación de edad y género de los compradores que están cerca de las pantallas.

• Reacciona a: la combinación de edad y género de los compradores cerca de las pantallas durante los últimos 5 minutos, como conteos agregados y anónimos: totales por rango de edad (18-24, 25-34, 35-44, 45-54 y 55+) y por género. Nunca se identifica ni se rastrea a ninguna persona.
• Muestra: una promoción para familias, estudiantes o personas mayores, o una general, con el reloj y las actividades del día, y nada sobre las personas cercanas.
• Se mantiene actualizada: cada 5 minutos, el agente lee los datos demográficos de los datos de visión artificial de la instalación en AI Insights & People y, cada vez que la promoción deba cambiar, actualiza la app.
• Necesitas: circuito cerrado de televisión con AI Insights & People en la instalación.

Figura 8: El agente crea la app y la abre junto al chat. Solo usa conteos anónimos, nunca personas individuales. La conversación es un ejemplo.

Figura 9: El resultado en una pantalla horizontal. Muestra la promoción, nunca nada sobre las personas cercanas.

Figura 10: La misma app en una pantalla vertical

Privacidad. Usa solo conteos agregados, cumple la ley de privacidad que se aplique en tu caso e informa a los compradores que se usan cámaras y medición de audiencia.

Instrucciones de seguridad durante una emergencia

Cualquier sitio puede hacer que sus pantallas cambien a instrucciones de seguridad durante una emergencia y vuelvan a la normalidad cuando termine.

• Reacciona a: el disparador que elija tu sitio, por ejemplo un confinamiento o una evacuación que inicie tu sitio, y el fin de ese evento.
• Muestra: las instrucciones que preparaste para ese evento, en lugar de todo lo demás, en las pantallas que elijas. Cuando el evento termina, las pantallas vuelven a su contenido habitual.
• Se mantiene actualizada: las pantallas que elijas cambian a tus instrucciones cuando ocurre el disparador que elegiste, y vuelven a su contenido cuando el evento termina. Tu agente puede ayudarte a redactar las instrucciones y a configurar esto.
• Necesitas: Display Screens e instrucciones acordadas con la persona responsable de la seguridad en tu sitio.

Prepara las instrucciones como una imagen o una On-Device Web App en lugar de una Agent: Published App, para que sigan mostrándose aunque el agente esté desconectado. Acuerda con la persona responsable de la seguridad en tu sitio qué muestran las pantallas y cuáles lo muestran, y pruébalo con ella.

No muestres las alarmas silenciosas en pantallas públicas. Las alarmas de Duress son silenciosas, por lo que no deben controlar las pantallas de cara al público. Una toma de control ante una alarma de Duress solo tiene sentido en pantallas de áreas privadas y no públicas, como una oficina interna.

Agente: Aplicaciones publicadas

Una Agent: Published App es una app web creada por tu Agente de IA que se ejecuta en vivo en el dispositivo de Agente de IA de tu instalación. Como se ejecuta en el agente, puede tener su propio lado de servidor y actualizarse sola. Las pantallas la muestran en vivo desde el agente.

Crear una app en una conversación

Pide a tu Agente de IA la pantalla que quieres, incluido dónde va y a qué debe reaccionar. El agente crea la app y la abre junto al chat para que puedas revisarla. Por ejemplo:

• "Crea una tabla de clasificación para nuestro desafío de visitas de octubre a partir de los registros de entrada, y mantenla actualizada cada pocos minutos durante el horario de apertura."
• "Haz un menú para el mostrador que cambie del desayuno al almuerzo a las 11 am y destaque los productos de preparación rápida cuando haya mucha gente."
• "Haz una pantalla de bienvenida para el vestíbulo que salude a cada visitante cuando su pase abra la puerta principal."

Una pantalla de entrenamiento en la sala del gimnasio

Un gimnasio le pide a su agente una pantalla vertical de entrenamiento para la sala. Muestra dos estaciones, una encima de la otra: una prueba de referencia en ski erg y abdominales, cada una con su objetivo y un breve clip de demostración en bucle. Entre ambas hay un temporizador de rondas grande, con la intensidad objetivo en el centro.

Figura 11: Pide a tu Agente de IA una pantalla de entrenamiento. Crea la app y la abre junto al chat. La conversación es un ejemplo.

Figura 12: El resultado en una pantalla vertical de la sala del gimnasio

Publicar una app desde tu Agente de IA

En Agente de IA → Published apps, elige Publish to Performance Hub y completa:

Desde la misma pestaña puedes usar Pause y Resume, Edit, Unpublish, Transfer ownership y Show on screens.

Mostrarla en las pantallas

1. En Display Screens, abre la Library y haz clic en Add content → Agent: Published App.
2. Elige la app. Cada app disponible aparece con una imagen y, si el agente está desconectado, con una insignia Desconectado.
3. Asígnale un Name y, de forma opcional, Tags y Show for (seconds), y luego haz clic en Add to library.
4. Publícala en las pantallas o agrégala a una playlist.

Figura 13: Agrega una Agent: Published App a la Library. Elige la app, asígnale un nombre y haz clic en Add to library. Las imágenes de las apps que no forman parte de este ejemplo aparecen difuminadas.

Figura 14: Una Agent: Published App en la Library. La vista previa es una imagen de la app en vivo, tomada por el Performance Hub. Where it is used muestra las pantallas y programaciones que la muestran. El club y los socios son ficticios.

Las vistas previas, como Preview landscape, Preview portrait y la vista previa de la playlist, no pueden mostrar la app en vivo, por lo que muestran el marcador de posición "Shown live on the screen".

Requisitos

• El módulo Agente de IA, para publicar la app.
• El módulo Custom Apps (AI Agent: Published Apps) en la instalación, para mostrarla en las pantallas.
• La app debe estar activa, tener activado Allow on display screens y tener una audiencia que incluya la instalación.

Cuándo omiten las pantallas una app del agente

Las pantallas pasan a su siguiente elemento mientras una app del agente:

• está en pausa o se dejó de publicar,
• no está permitida en las pantallas,
• tiene una audiencia que no incluye la instalación,
• está en una instalación sin el módulo Custom Apps, o
• no se puede acceder a ella porque el agente está desconectado.

Si una app se deja de publicar de forma definitiva, quítala de tus playlists y programaciones.

Aplicaciones web en el dispositivo

Una On-Device Web App es un paquete estático de HTML, CSS y JavaScript. Las pantallas la descargan y la reproducen desde su propio almacenamiento, por lo que sigue reproduciéndose aunque se pierda la conexión a internet. Es adecuada para contenido que no necesita reaccionar a lo que pasa en tu sitio, por ejemplo:

• Cualquier negocio con recepción: un cartel de bienvenida con tu logotipo, la fecha y la hora, y un ticker de noticias. Pueden usarlo oficinas, clínicas, gimnasios, hoteles, escuelas y salas de exposición. Consulta Ejemplo: un cartel de bienvenida para la recepción.
• Hotelería y gastronomía: un menú que cambia del desayuno al almuerzo y a la cena en horarios definidos.
• Comercio minorista: una promoción en el escaparate que rota las ofertas de la semana.
• Educación: un tablón de anuncios del campus con los eventos y recordatorios del día.

Figura 15: Reception Welcome Sign, una On-Device Web App, en una pantalla horizontal. El reloj, la fecha y el saludo usan la zona horaria de la instalación. La insignia Preview solo aparece en las vistas previas, no en las pantallas reales. Acme Demo Co. es ficticia, y los titulares de esta captura de pantalla son ejemplos.

Figura 16: La misma app en una pantalla vertical

Ejemplo: un cartel de bienvenida para la recepción

El Reception Welcome Sign recibe a las personas en tu recepción con tu logotipo, la fecha y la hora, y un ticker de noticias. Es adecuado para cualquier negocio con recepción o entrada.

• Se reproduce desde la pantalla: el logotipo, el fondo, la fuente, el reloj, la fecha y el saludo forman parte de la app, por lo que siguen funcionando sin internet. El reloj sigue la zona horaria de la instalación.
• Una parte usa internet: el ticker de noticias. De forma predeterminada, muestra titulares de la sección "In the news" de Wikipedia, con el crédito en pantalla. En su lugar, puede leer cualquier feed RSS que permita solicitudes entre sitios, por ejemplo un feed de noticias a través de tu propio relay.
• Funciona sin conexión: el ticker se oculta cuando la pantalla está desconectada o cuando no se pueden cargar los titulares, y vuelve a aparecer cuando la pantalla se conecta de nuevo. Todo lo demás se reproduce desde la copia propia de la pantalla.
• Personalízalo: descarga el cartel desde Para desarrolladores más abajo, reemplaza logo.svg y background.jpg, y cambia el texto de bienvenida y la configuración de noticias en config.js, o desactiva el ticker. Luego, súbelo: Library → Add content → On-Device Web App → Choose ZIP → Publish app.

Figura 17: Cuando no se pueden cargar los titulares, o la pantalla está desconectada, el cartel oculta el ticker y sigue mostrando todo lo demás. El ticker vuelve a aparecer cuando los titulares se cargan de nuevo.

function loadNews() {
  clearTimeout(nextTimer);
  if (navigator.onLine === false) {
    hideTicker();
    return; // the 'online' event loads it again
  }
  if (loading) return;
  loading = true;
  var load = news.source === 'rss' ? rssHeadlines : wikipediaHeadlines;
  load()
    .then(function (headlines) {
      failures = 0;
      showTicker(headlines.slice(0, news.maxHeadlines || 8));
      schedule(news.refreshMinutes || 15);
    })
    .catch(function () {
      hideTicker();
      // ... schedules the next try
    })
    .then(function () { loading = false; });
}

window.addEventListener('offline', function () { clearTimeout(nextTimer); hideTicker(); });
window.addEventListener('online', function () { failures = 0; loadNews(); });

Hay dos formas de agregar una:

• Pídele a un agente de IA que la cree y la publique.
• Agrégala tú mismo: Library → Add content → On-Device Web App, y luego sube un ZIP, una carpeta o archivos. Consulta Agregar contenido.

Figura 18: Pide una pantalla a tu Agente de IA. Crea la app, la abre junto al chat para que puedas revisarla y la agrega a tu Library de Display Screens como una On-Device Web App, lista para mostrarla en una pantalla. La conversación es un ejemplo.

Para publicar una On-Device Web App, el agente:

1. Lee las pautas de apps de Display Screens, para que la app se ajuste a una pantalla y siga las reglas que se indican a continuación.
2. Publica la app en tu Library. En el mismo paso puede publicarla en pantallas o grupos, programarla o tomar el control de las pantallas.
3. Revisa su trabajo con una captura de pantalla de la app renderizada.
4. Vuelve a una versión anterior si se lo pides.

Cualquier agente de IA conectado mediante MCP puede hacerlo si su acceso incluye la capacidad de Display Screens, incluido tu Agente de IA. Consulta las herramientas MCP de Display Screens y Crear una clave MCP. Tu agente te pide confirmación antes de actuar en varias pantallas a la vez.

Figura 19: Filtra la Library por On-Device Web Apps para ver todas las apps de la instalación. Las miniaturas de las apps que no forman parte de este ejemplo aparecen difuminadas.

Mostrarla en las pantallas

Para mostrar tú mismo una app en las pantallas, ábrela en la Library y haz clic en Publicar. En Show on screens, elige todas las pantallas de la instalación o pantallas individuales, y luego elige When: Always (default), Scheduled o Take over now. Consulta Publicar contenido.

Figura 20: Muestra el Reception Welcome Sign en la pantalla Reception Lobby

Versiones

Cada publicación crea una versión nueva que nunca cambia. Abre la app en la Library para ver sus Versions: la actual está marcada como Live, y Make live en cualquier versión anterior vuelve a ella. En Publish a new version, suelta un ZIP, una carpeta o archivos para subir tú mismo una versión nueva.

Cuando se publica una versión nueva, el Performance Hub muestra "New version published. Screens update within a few seconds." Después de Make live, confirma qué versión está en vivo, por ejemplo "Version 4 is now live". El cambio llega a todas las pantallas que muestran la app.

Figura 21: El Reception Welcome Board en la Library: su vista previa, Preview landscape y Preview portrait, y cuatro versiones, con v4 en vivo y Make live en las anteriores

Usa Preview landscape y Preview portrait para abrir la app con el tamaño de la pantalla y comprobar que se ajusta antes de publicarla en las pantallas.

Cómo se ejecuta

• Sin conexión: las pantallas conservan una copia de la app, por lo que sigue reproduciéndose sin internet. Lo que la app cargue desde internet no estará disponible mientras una pantalla esté desconectada.
• Datos en vivo: solo de API HTTPS públicas que permitan solicitudes de origen cruzado.
• Aislada: la app se ejecuta en un sandbox, separada del Performance Hub, sin acceso a tu sesión del Performance Hub.

Límites

Pautas de diseño

• Ocupa la pantalla sin desplazamiento: 1920 × 1080 para pantallas horizontales, 1080 × 1920 para pantallas verticales.
• Texto grande: texto del cuerpo de al menos 32 px y títulos de al menos 64 px.
• Alto contraste, para que la pantalla se lea bien desde el otro lado de la sala.
• Sin inicios de sesión, formularios ni efectos al pasar el cursor. Nadie interactúa con una pantalla.
• Bajo consumo del procesador, para que funcione con fluidez en el reproductor.
• Funciona sin conexión, por ejemplo cuando no se puede acceder a una API pública que usa.
• Usa la zona horaria de la instalación para los relojes y los horarios.

Estas pautas también son adecuadas para las Smart Displays.

Páginas relacionadas

• Agregar contenido: sube tú mismo una On-Device Web App
• Publicar contenido: muestra una app en las pantallas
• Capacidades del Agente de IA: qué más puede hacer tu agente
• Automatizaciones del Agente de IA: mantén una Smart Display actualizada según una programación
• Door & Gate Access y AI Insights & People: llegadas, eventos de puertas y conteos de cámaras a los que puede reaccionar una Smart Display
• Solución de problemas: una app no se muestra en una pantalla