Smart Displays e aplicativos publicados

Um Smart Display é uma tela que exibe um aplicativo hospedado pelo seu Agente de IA. Como o agente executa o aplicativo, ele pode mudar o que a tela mostra conforme as coisas mudam ao redor dela: o pico do almoço no balcão, um visitante abrindo a porta da frente, o saguão de um hotel enchendo, uma sala de espera cheia, membros chegando para um desafio de visitas. Descreva o que você quer em linguagem simples. O agente cria o aplicativo, mantém-no atualizado, e você o coloca nas suas telas como qualquer outro conteúdo.

Figura 1: Um Smart Display no salão de uma academia. O agente reconta os check-ins a cada poucos minutos e mostra aos membros que acabaram de chegar a posição deles no ranking. O clube e os membros são fictícios.

Você continua no controle: todos os aplicativos ficam na sua Library, onde você pode visualizá-los, ver onde são usados e alterá-los ou removê-los.

Displays Inteligentes

Um Smart Display usa um Agent: Published App: um aplicativo da web criado pelo seu Agente de IA que é executado ao vivo no dispositivo do Agente de IA da sua instalação. As telas mostram o aplicativo ao vivo, então, quando o agente muda o que ele mostra, a tela também muda. Ninguém precisa republicar nada.

O agente mantém o aplicativo atualizado de uma de duas formas:

• Em um agendamento. Uma automação é executada a cada poucos minutos nos horários que importam. Por meio da sua conexão com o Performance Hub, o agente lê o que precisa, como check-ins, eventos de portas ou contagens de câmeras, e atualiza o aplicativo. Cada execução consome gastos com IA, então verifique apenas com a frequência necessária.
• Quando algo acontece. Um evento no seu local, como o passe de um visitante abrindo a porta da frente, faz o agente atualizar o aplicativo. A tela muda logo após o evento, e o agente não faz nenhum trabalho no intervalo. Consulte a recepção no saguão do escritório.

Um Smart Display só pode usar o que o agente consegue ler. O acesso MCP dele precisa incluir a instalação e os recursos de que o aplicativo precisa, como Door & Gate Access para eventos de portas ou CFTV para check-ins e contagens de câmeras. Consulte Como conectar ao Performance Hub.

Duas formas de um aplicativo chegar às suas telas

Seu agente também pode criar um On-Device Web App para você, mas, depois de publicado, ele não consegue continuar se adaptando. Ele exibe os mesmos arquivos em todas as telas até que alguém publique uma nova versão, e não pode usar os dados da sua instalação. Só um Agent: Published App continua mudando de acordo com o que acontece ao redor da tela.

Escolha um Smart Display quando a tela precisar reagir ao seu local: quem chegou, quão movimentado está ou o que acabou de acontecer. Escolha um On-Device Web App para conteúdo que permanece o mesmo ou que só precisa de dados públicos, e que precisa continuar sendo exibido off-line.

Exemplos de Smart Display

Cada exemplo abaixo é uma configuração real: a que a tela reage, o que ela mostra, como o agente a mantém atualizada e do que você precisa. As empresas e as pessoas são fictícias.

Ranking de desafio de visitas que cumprimenta os membros quando eles chegam

Um espaço de coworking, a biblioteca de um campus ou uma academia promove um desafio de visitas no mês. O agente hospeda um ranking para as telas pelas quais os membros passam, que classifica os membros pelas visitas no mês e dá as boas-vindas aos participantes do desafio quando estão perto da tela. Nas figuras, uma academia promove um desafio de visitas de outubro nas telas do salão.

• Reage a: quem está perto da tela. O agente sabe disso por meio do reconhecimento facial do Performance Hub, dos check-ins recentes ou de ambos, dependendo de como o seu local está configurado. Cada participante do desafio perto da tela recebe uma etiqueta Just in e um cartão mostrando a posição dele no ranking. Nas figuras, a academia usa os check-ins dos últimos 30 minutos.
• Mostra: os membros com mais visitas, apenas com o primeiro nome e a inicial do sobrenome, os dias restantes do desafio e o prêmio.
• Mantém-se atualizado: a cada 5 minutos durante o horário de funcionamento, o agente reconta os check-ins do mês com insights_checkins, verifica quem está perto da tela e atualiza o aplicativo.
• Você precisa de: CFTV com AI Insights & People, com reconhecimento facial nas câmeras perto da tela, check-ins do seu sistema de gestão de membros, ou ambos, e uma lista de adesão dos membros que entraram no desafio.

Figura 2: Peça o ranking ao seu Agente de IA. Ele cria o aplicativo, abre-o ao lado do chat e reconta os check-ins a cada 5 minutos. A conversa é um exemplo.

Figura 3: O mesmo ranking em uma tela na vertical

Privacidade. Inclua apenas os membros que aderiram, mostre no máximo o primeiro nome e a inicial do sobrenome, e nunca mostre detalhes de associação ou de saúde.

Quadro de cardápio de serviço rápido que reage ao pico do almoço

Um restaurante de serviço rápido pede ao agente o quadro de cardápio acima do balcão. Ele troca de cardápio ao longo do dia e, quando o balcão está movimentado, coloca no topo os itens mais rápidos de preparar.

• Reage a: a hora do dia e o movimento no balcão: o número de pessoas que a câmera do balcão contou até agora nesta hora, em comparação com uma hora normal.
• Mostra: café da manhã até as 11h, almoço até as 15h e, depois, o cardápio da tarde. Quando está movimentado, um banner Ready in under 3 minutes com os itens de preparo rápido e uma etiqueta Quick neles no cardápio.
• Mantém-se atualizado: a cada 5 minutos, o agente verifica as contagens de câmera do dia no AI Insights & People e atualiza o aplicativo. Os preços e os tempos de preparo vêm de um arquivo de cardápio que você fornece ao agente.
• Você precisa de: CFTV com AI Insights & People, com uma câmera que cubra o balcão.

Figura 4: O agente cria o quadro de cardápio e o abre ao lado do chat. Ele usa apenas contagens anônimas. A conversa é um exemplo.

Figura 5: O resultado acima do balcão durante o pico do almoço

Boas-vindas no saguão do escritório para cada visitante

Um escritório dá a cada visitante um passe do Door & Gate Access válido para o horário da visita. Quando o passe de um visitante abre a porta da frente, a tela do saguão o cumprimenta pelo primeiro nome com o anfitrião, a sala de reunião e as instruções de como chegar, e depois volta às boas-vindas habituais após um minuto.

• Reage a: o passe do visitante abrindo a porta da frente.
• Mostra: "Olá, Priya, que bom ver você", o nome e a equipe do anfitrião, a sala e o horário da reunião, e instruções passo a passo de como chegar.
• Mantém-se atualizado: um fluxo de trabalho aciona a saudação quando o passe do visitante abre a porta da frente. O agente associa a pessoa do evento de porta à lista de visitantes do dia, que a recepção mantém e fornece ao agente com o anfitrião, a sala e as instruções de cada visitante. Os eventos de porta não incluem nomes, anfitriões nem salas, então a lista é sempre necessária.
• Você precisa de: Door & Gate Access e uma lista de visitantes do dia.

Figura 6: O agente cria a tela de boas-vindas e a abre ao lado do chat. A conversa é um exemplo.

Figura 7: O resultado na tela vertical do saguão

A mesma configuração pode dar as boas-vindas à sua própria equipe. Por exemplo, ela pode desejar feliz aniversário a um membro da equipe quando ele chegar no dia do aniversário, com base em uma lista de aniversários das pessoas que concordaram com isso. A data de nascimento é uma informação pessoal: inclua apenas as pessoas que concordaram e mostre no máximo o primeiro nome.

Pense em quem pode ver a tela. Qualquer pessoa no saguão pode ver uma mensagem de boas-vindas. Mostre no máximo o primeiro nome e nunca mostre informações privadas, como detalhes de saúde, de associação ou de RH.

Painel da sala de espera com tempos de espera em tempo real

Uma clínica ou central de atendimento mostra quanto tempo está a espera no momento, para que as pessoas que aguardam saibam o que esperar.

• Reage a: aproximadamente quantas pessoas estão esperando, com base nas contagens anônimas da câmera que cobre a área de espera, e às chegadas pelos check-ins, onde o seu local os registra.
• Mostra: uma espera aproximada e quantas pessoas estão esperando, aproximadamente, o horário de funcionamento e uma mensagem tranquilizadora quando está movimentado.
• Mantém-se atualizado: a cada poucos minutos, o agente lê as contagens e as chegadas mais recentes e calcula a espera com base no tempo típico por atendimento que você informa.
• Você precisa de: CFTV com AI Insights & People, com uma câmera que cubra a área de espera.

Um exemplo do que a tela diz quando está movimentado:

Cerca de 25 minutos

Cerca de 7 pessoas esperando

Estamos mais movimentados do que o normal esta manhã. Obrigado pela paciência: chamaremos você assim que estivermos prontos.

Nunca mostre informações de pacientes ou clientes. O painel mostra apenas totais, nunca nomes ou motivos do atendimento.

Painel do saguão do hotel que acompanha o dia

Um hotel ou estabelecimento mostra aos hóspedes o que está acontecendo, mudando de acordo com a hora do dia e o movimento no saguão.

• Reage a: a hora do dia e o movimento no saguão, com base nas contagens anônimas da câmera do saguão.
• Mostra: informações de check-in e os dados do Wi-Fi à tarde, os eventos da noite e a disponibilidade do restaurante à noite, e os horários do café da manhã e lembretes de check-out pela manhã. Quando o saguão está movimentado, as informações de check-in e do Wi-Fi aparecem primeiro, para que os hóspedes que chegam as encontrem rapidamente.
• Mantém-se atualizado: a cada poucos minutos, o agente lê as contagens do saguão e atualiza o aplicativo. Os eventos e a disponibilidade do restaurante vêm de listas ou sistemas aos quais você dá acesso ao agente.
• Você precisa de: CFTV com AI Insights & People para as contagens do saguão. Sem CFTV, o painel ainda muda de acordo com a hora do dia.

Um exemplo do que a tela diz às 18h:

Hoje à noite no Demo Harbour Hotel

Jazz no lounge, das 19h às 22h

Harbour Grill: mesas livres a partir das 20h30. Reserve na recepção.

Café da manhã amanhã a partir das 6h30 no Harbour Grill.

Sinalização de shopping center que acompanha o público

Um shopping center pede ao agente uma sinalização para o átrio que escolhe a promoção com base na combinação de idade e gênero dos clientes perto das telas.

• Reage a: a combinação de idade e gênero dos clientes perto das telas nos últimos 5 minutos, como contagens agregadas anônimas: totais por faixa etária (18-24, 25-34, 35-44, 45-54 e 55+) e por gênero. Nenhum indivíduo é identificado ou rastreado.
• Mostra: uma promoção para famílias, estudantes ou idosos, ou uma promoção geral, com o relógio e a programação do dia, e nada sobre as pessoas próximas.
• Mantém-se atualizado: a cada 5 minutos, o agente lê os dados demográficos dos dados de visão computacional da instalação no AI Insights & People e, sempre que a promoção precisar mudar, atualiza o aplicativo.
• Você precisa de: CFTV com AI Insights & People na instalação.

Figura 8: O agente cria o aplicativo e o abre ao lado do chat. Ele usa apenas contagens anônimas, nunca pessoas individuais. A conversa é um exemplo.

Figura 9: O resultado em uma tela na horizontal. Ela mostra a promoção, nunca nada sobre as pessoas próximas.

Figura 10: O mesmo aplicativo em uma tela na vertical

Privacidade. Use apenas contagens agregadas, siga a legislação de privacidade aplicável a você e informe aos clientes que câmeras e medição de público estão em uso.

Instruções de segurança durante uma emergência

Qualquer local pode fazer com que as telas passem a mostrar instruções de segurança durante uma emergência e voltem ao normal quando ela terminar.

• Reage a: o acionador que o seu local escolher, por exemplo um bloqueio ou uma evacuação iniciados pelo seu local, e o fim desse evento.
• Mostra: as instruções que você preparou para esse evento, no lugar de todo o restante nas telas que você escolher. Quando o evento termina, as telas voltam ao conteúdo habitual.
• Mantém-se atualizado: as telas que você escolher passam a mostrar suas instruções quando o acionador escolhido ocorre, e voltam ao normal quando o evento termina. Seu agente pode ajudar você a redigir as instruções e a configurar isso.
• Você precisa de: Display Screens e instruções combinadas com o responsável pela segurança no seu local.

Prepare as instruções como uma imagem ou um On-Device Web App, e não como um Agent: Published App, para que elas continuem sendo exibidas se o agente estiver off-line. Combine com o responsável pela segurança no seu local o que as telas mostram e quais telas mostram, e teste com ele.

Mantenha alarmes silenciosos longe das telas públicas. Os alarmes de coação são silenciosos, então não devem controlar telas voltadas ao público. Um takeover acionado por um alarme do Duress só faz sentido em telas de áreas privadas e não públicas, como um escritório interno.

Agente: Aplicativos Publicados

Um Agent: Published App é um aplicativo da web criado pelo seu Agente de IA que é executado ao vivo no dispositivo do Agente de IA da sua instalação. Como ele é executado no agente, pode ter seu próprio lado do servidor e se atualizar sozinho. As telas o mostram ao vivo a partir do agente.

Criar um aplicativo em uma conversa

Peça ao seu Agente de IA a tela que você quer, incluindo onde ela fica e a que deve reagir. O agente cria o aplicativo e o abre ao lado do chat para que você o confira. Por exemplo:

• "Crie um ranking para o nosso desafio de visitas de outubro com base nos check-ins e mantenha-o atualizado a cada poucos minutos durante o horário de funcionamento."
• "Faça um quadro de cardápio para o balcão que mude do café da manhã para o almoço às 11h e promova itens de preparo rápido quando estiver movimentado."
• "Faça uma tela de boas-vindas para o saguão que cumprimente cada visitante quando o passe dele abrir a porta da frente."

Uma tela de treino no salão da academia

Uma academia pede ao agente uma tela de treino na vertical para o salão. Ela mostra duas estações, uma acima da outra: um benchmark no ski erg e abdominais, cada uma com seu objetivo e um pequeno clipe de demonstração em loop. Entre elas fica um grande cronômetro de rodadas, com a intensidade alvo no meio.

Figura 11: Peça uma tela de treino ao seu Agente de IA. Ele cria o aplicativo e o abre ao lado do chat. A conversa é um exemplo.

Figura 12: O resultado em uma tela na vertical no salão da academia

Publicar um aplicativo pelo seu Agente de IA

Em Agente de IA → Published apps, escolha Publish to Performance Hub e preencha:

Na mesma guia, você pode usar Pause e Resume, Edit, Unpublish, Transfer ownership e Show on screens.

Exibir nas telas

1. No Display Screens, abra a Library e clique em Add content → Agent: Published App.
2. Escolha o aplicativo. Cada aplicativo qualificado aparece com uma imagem dele e um selo Off-line se o agente estiver off-line.
3. Dê a ele um Name e, opcionalmente, Tags e Show for (seconds), e clique em Add to library.
4. Publique-o nas telas ou adicione-o a uma playlist.

Figura 13: Adicione um Agent: Published App à Library. Escolha o aplicativo, dê um nome a ele e clique em Add to library. As imagens dos aplicativos que não fazem parte deste exemplo estão desfocadas.

Figura 14: Um Agent: Published App na Library. A prévia é uma imagem do aplicativo ao vivo, capturada pelo Performance Hub. Where it is used lista as telas e os agendamentos que o exibem. O clube e os membros são fictícios.

As prévias, como Preview landscape, Preview portrait e a prévia da playlist, não conseguem mostrar o aplicativo ao vivo, então mostram o texto provisório "Shown live on the screen".

Requisitos

• O módulo Agente de IA, para publicar o aplicativo.
• O módulo Custom Apps (AI Agent: Published Apps) na instalação, para exibi-lo nas telas.
• O aplicativo precisa estar ativo, ter Allow on display screens ativado e ter um público que inclua a instalação.

Quando as telas ignoram um aplicativo do agente

As telas passam para o próximo item enquanto um aplicativo do agente:

• está pausado ou com a publicação cancelada,
• não tem permissão para ser exibido nas telas,
• tem um público que não inclui a instalação,
• está em uma instalação sem o módulo Custom Apps, ou
• não pode ser acessado porque o agente está off-line.

Se a publicação de um aplicativo for cancelada definitivamente, remova-o das suas playlists e agendamentos.

Aplicativos Web no Dispositivo

Um On-Device Web App é um pacote estático de HTML, CSS e JavaScript. As telas o baixam e o exibem a partir do próprio armazenamento, então ele continua sendo exibido se a internet cair. Ele é adequado para conteúdo que não precisa reagir ao seu local, por exemplo:

• Qualquer empresa com recepção: uma placa de boas-vindas na recepção com o seu logotipo, a data e a hora, e um letreiro de notícias. Escritórios, clínicas, academias, hotéis, escolas e showrooms podem usá-la. Consulte Exemplo: uma placa de boas-vindas na recepção.
• Hotelaria e restaurantes: um quadro de cardápio que muda do café da manhã para o almoço e para o jantar em horários definidos.
• Varejo: uma promoção na vitrine que alterna entre as ofertas da semana.
• Educação: um mural do campus com os eventos e lembretes do dia.

Figura 15: A Reception Welcome Sign, um On-Device Web App, em uma tela na horizontal. O relógio, a data e a saudação usam o fuso horário da instalação. O selo Preview aparece somente nas prévias, não nas telas reais. A Acme Demo Co. é fictícia, e as manchetes desta captura de tela são exemplos.

Figura 16: O mesmo aplicativo em uma tela na vertical

Exemplo: uma placa de boas-vindas na recepção

A Reception Welcome Sign recebe as pessoas na sua recepção com o seu logotipo, a data e a hora, e um letreiro de notícias. Ela é adequada para qualquer empresa com recepção ou entrada.

• É exibida a partir da tela: o logotipo, o fundo, a fonte, o relógio, a data e a saudação fazem parte do aplicativo, então continuam funcionando sem internet. O relógio segue o fuso horário da instalação.
• Uma parte usa a internet: o letreiro de notícias. Por padrão, ele mostra manchetes da seção "In the news" da Wikipedia, com o crédito na tela. Em vez disso, ele pode ler qualquer feed RSS que permita solicitações entre sites, por exemplo um feed de notícias por meio do seu próprio relay.
• Lida com a falta de conexão: o letreiro fica oculto quando a tela está off-line ou quando as manchetes não podem ser carregadas, e volta quando a tela fica on-line novamente. Todo o restante é exibido a partir da cópia da própria tela.
• Personalize: baixe a placa em Para desenvolvedores abaixo, substitua logo.svg e background.jpg, e altere o texto de boas-vindas e as configurações de notícias em config.js, ou desative o letreiro. Em seguida, envie-a: Library → Add content → On-Device Web App → Choose ZIP → Publish app.

Figura 17: Quando as manchetes não podem ser carregadas, ou a tela está off-line, a placa oculta o letreiro e continua mostrando todo o restante. O letreiro volta quando as manchetes carregam novamente.

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(); });

Há duas formas de adicionar um:

• Peça a um agente de IA para criá-lo e publicá-lo.
• Adicione você mesmo: Library → Add content → On-Device Web App e, em seguida, envie um ZIP, uma pasta ou arquivos. Consulte Como adicionar conteúdo.

Figura 18: Peça uma tela ao seu Agente de IA. Ele cria o aplicativo, abre-o ao lado do chat para que você o confira e o adiciona à Library do Display Screens como um On-Device Web App, pronto para ser colocado em uma tela. A conversa é um exemplo.

Para publicar um On-Device Web App, o agente:

1. Lê as diretrizes de aplicativos do Display Screens, para que o aplicativo caiba em uma tela e siga as regras abaixo.
2. Publica o aplicativo na sua Library. Na mesma etapa, ele pode publicá-lo em telas ou grupos, programá-lo ou assumir o controle das telas.
3. Confere o trabalho com uma captura de tela do aplicativo renderizado.
4. Reverte para uma versão anterior, se você pedir.

Qualquer agente de IA conectado por MCP pode fazer isso se o acesso dele incluir o recurso Display Screens, incluindo o seu Agente de IA. Consulte as ferramentas MCP do Display Screens e Criar uma chave MCP. Seu agente pede sua confirmação antes de agir em várias telas ao mesmo tempo.

Figura 19: Filtre a Library por On-Device Web Apps para ver todos os aplicativos da instalação. As miniaturas dos aplicativos que não fazem parte deste exemplo estão desfocadas.

Colocar nas telas

Para colocar um aplicativo nas telas você mesmo, abra-o na Library e clique em Publicar. Em Show on screens, escolha todas as telas da instalação ou telas individuais e, em seguida, escolha When: Always (default), Scheduled ou Take over now. Consulte Como publicar conteúdo.

Figura 20: Exiba a Reception Welcome Sign na tela Reception Lobby

Versões

Cada publicação cria uma nova versão que nunca muda. Abra o aplicativo na Library para ver as Versions: a atual é marcada como Live, e Make live em qualquer versão anterior reverte para ela. Em Publish a new version, solte um ZIP, uma pasta ou arquivos para enviar você mesmo uma nova versão.

Quando uma nova versão é publicada, o Performance Hub mostra "New version published. Screens update within a few seconds." Depois de Make live, ele confirma qual versão está ativa, por exemplo "Version 4 is now live". A alteração chega a todas as telas que exibem o aplicativo.

Figura 21: O Reception Welcome Board na Library: a prévia, Preview landscape e Preview portrait, e quatro versões, com a v4 ativa e Make live nas anteriores

Use Preview landscape e Preview portrait para abrir o aplicativo no tamanho da tela e verificar se ele cabe antes de publicá-lo nas telas.

Como ele é executado

• Off-line: as telas mantêm uma cópia do aplicativo, então ele continua sendo exibido sem internet. Qualquer coisa que o aplicativo carregue da internet não estará disponível enquanto a tela estiver off-line.
• Dados ao vivo: somente de APIs HTTPS públicas que permitam solicitações entre origens.
• Isolado: o aplicativo é executado em uma sandbox, separado do Performance Hub, sem acesso à sua sessão do Performance Hub.

Limites

Diretrizes de design

• Ocupe a tela sem rolagem: 1920 × 1080 para telas na horizontal, 1080 × 1920 para telas na vertical.
• Texto grande: texto do corpo com pelo menos 32 px, títulos com pelo menos 64 px.
• Alto contraste, para que a tela seja bem lida do outro lado do ambiente.
• Sem logins, formulários ou efeitos de hover. Ninguém interage com uma tela.
• Leve para o processador, para que seja executado sem travamentos no player.
• Lida com a falta de conexão, por exemplo quando uma API pública que ele usa não pode ser acessada.
• Usa o fuso horário da instalação para relógios e horários.

Essas diretrizes também servem para os Smart Displays.

Páginas relacionadas

• Como adicionar conteúdo: envie você mesmo um On-Device Web App
• Como publicar conteúdo: coloque um aplicativo nas telas
• Recursos do Agente de IA: o que mais o seu agente pode fazer
• Automações do Agente de IA: mantenha um Smart Display atualizado em um agendamento
• Door & Gate Access e AI Insights & People: chegadas, eventos de portas e contagens de câmeras aos quais um Smart Display pode reagir
• Solução de problemas: um aplicativo não aparece em uma tela