Para que servem interfaces se temos LLMs

Os grandes modelos de linguagem viraram a lógica da interação entre humanos e computadores de cabeça para baixo. Em vez de memorizar menus, botões e filtros, basta dizer: "Mostre os clientes que costumavam comprar regularmente, mas pararam há três meses" ou "Encontre passagens para Pequim na semana que vem, sem escalas, até 200 euros, com retorno no domingo à noite". O sistema entende a tarefa, a decompõe em parâmetros, busca os dados e escolhe a melhor forma de exibir o resultado. O modo de entrada (voz, texto) e o modo de saída (tabela, gráfico, cards, mapa) se tornam independentes um do outro. • **CopilotKit** — UI generativa controlada, em que o modelo escolhe entre componentes já prontos (ExpenseChart, ComparisonTable, HotelCards, Map, Confirmation) • **A2UI, do Google** — envia uma descrição declarativa da interface, e o cliente a monta a partir de seus próprios componentes • **MCP Apps** — a ferramenta retorna uma interface interativa dentro de um iframe, usando tecnologias web comuns • **Geração completa de HTML/CSS/JavaScript** — máxima liberdade, mas exige controle de qualidade e segurança

Processado por IA de Habr AI; editado por Hamidun News
Para que servem interfaces se temos LLMs
Fonte: Habr AI. Colagem: Hamidun News.
Ouvir artigo
Ficha técnica e números-chave
ParâmetroDados
Fonte originalHabr AI ↗
Editor-chefe
Dado-chave #1CopilotKit — UI generativa controlada, em que o modelo escolhe entre componentes já prontos (ExpenseChart, ComparisonTable, HotelCards, Map, Confirmation)
Dado-chave #2A2UI, do Google — envia uma descrição declarativa da interface, e o cliente a monta a partir de seus próprios componentes
Dado-chave #3MCP Apps — a ferramenta retorna uma interface interativa dentro de um iframe, usando tecnologias web comuns

Da linha de comando à interface — e de volta outra vez

No início da era da computação, as pessoas tinham que aprender a falar a linguagem da máquina: interruptores, cartões perfurados, comandos no terminal. Um erro em um único caractere e nada acontecia. Quando os computadores se tornaram um produto de massa, essa abordagem entrou em colapso. Não dá para exigir que cada usuário memorize dezenas de comandos e seus parâmetros. Surgiram janelas, menus, ícones, o mouse. Era possível arrastar um arquivo para a lixeira em vez de digitar um comando de exclusão. Entre a pessoa e o programa se formou uma camada: a interface.

Agora essa lógica está se invertendo. As LLMs permitem que as pessoas voltem a falar com o computador na própria língua, mas agora é a máquina que entende a linguagem natural, não a pessoa que precisa aprender a sintaxe do sistema. Pense em analytics corporativo: em vez de procurar uma seção, escolher um relatório, configurar filtros e condições, basta dizer: "Mostre os clientes que costumavam comprar regularmente, mas deixaram de comprar nos últimos três meses".

O sistema interpreta a solicitação por conta própria, cruza com os dados disponíveis, monta uma consulta estruturada e entrega o resultado. Ou com passagens aéreas: em vez de selecionar cidades, datas, filtros e configurações do voo de volta, basta dizer "Quero passagens para Pequim na semana que vem, sem escalas, de preferência abaixo de 200 euros, voltando domingo à noite".

Como você pergunta e como você recebe a resposta são duas tarefas diferentes

Quando se fala em interface com LLM, imagina-se um chat: texto → resposta em texto. Na verdade, são dois parâmetros independentes. A pergunta pode ser feita por voz — frases longas com várias condições são mais rápidas de dizer do que de digitar no celular. Uma frase como "mostre os projetos da minha área em que o prazo de entrega aumentou no último mês, mas o escopo não mudou" pode ser dita quase sem pausas.

Mas o fato de você ter perguntado por voz não significa que a resposta também precise ser em voz. Se você perguntar como os gastos por categoria mudaram nos últimos seis meses, por voz você vai ouvir um resumo curto: "Em seis meses, gastamos um milhão de rublos, sendo as principais categorias aluguel, infraestrutura e fornecedores". Enquanto isso, na tela aparecem um gráfico e uma tabela detalhada com o detalhamento mensal.

O mesmo vale para uma solicitação em texto — você escreve algo e recebe um mapa, um gráfico, cards de produtos, um formulário de confirmação ou uma tabela interativa. Escolher a forma de entrada e escolher a forma de exibir o resultado são duas tarefas distintas.

Hoje, entrada e saída estão vinculadas a um único dispositivo: você pergunta algo ao celular e a resposta aparece no celular. Isso é uma limitação dos produtos atuais, não uma restrição técnica. Os dispositivos poderiam se conectar por meio de uma sessão de usuário compartilhada: uma smart speaker como dispositivo de entrada por voz com uma resposta em áudio curta, um celular exibindo uma UI interativa, um notebook como dispositivo de trabalho principal, uma TV na sala de reuniões como tela grande compartilhada.

A escolha do dispositivo passa a fazer parte do roteamento da resposta. Dados financeiros não deveriam ser exibidos automaticamente na TV da sala de reuniões, e um gráfico com 20 indicadores simplesmente não pode ser lido por uma smart speaker.

Quatro formas de implementar isso

Nº 1. UI generativa controlada

O produto define um conjunto de componentes: ExpenseChart, ComparisonTable, HotelCards, Map, Confirmation. O modelo não desenha a tela, apenas escolhe o componente adequado, busca os dados e retorna um JSON estruturado:

``` { "component": "ExpenseBreakdown", "period": "6m", "data": [...], "groupBy": "category" } ```

O designer e o desenvolvedor mantêm controle total sobre aparência, comportamento, acessibilidade e estados de erro. O modelo apenas escolhe a representação e passa os dados para ela. Essa abordagem é implementada no CopilotKit.

Nº 2. Descrição declarativa a partir de blocos de construção

O modelo não recebe telas prontas, mas elementos básicos: contêiner, texto, métrica, tabela, card, gráfico, botão, formulário. Ele retorna uma descrição declarativa da interface, que o cliente monta usando seu próprio kit de UI, preservando o sistema de design em todos os lugares: web, aplicativo móvel, outros clientes. A mesma resposta pode ser renderizada em ambientes diferentes. Essa é a abordagem que o A2UI do Google está desenvolvendo.

Nº 3. MCP Apps com interface pronta

A ferramenta retorna uma interface interativa que o cliente exibe dentro de um iframe em sandbox. É possível usar tecnologias web comuns — HTML, CSS, JavaScript — para criar formulários, gráficos, mapas e fluxos de várias etapas. Isso já é suportado por diferentes clientes MCP e aplicativos dentro do ChatGPT. Aqui, o fornecedor da ferramenta controla mais a aparência do que o cliente.

Nº 4. Geração completa de HTML/CSS/JavaScript

O modelo gera o código inteiramente na hora. Isso oferece máxima liberdade, mas traz dúvidas sobre qualidade, segurança, estabilidade e consistência visual. Pode ser conveniente para um prototype ou uma tarefa pontual, mas transformar esse modo na base de um sistema corporativo crítico é arriscado.

Como o desenvolvimento vai mudar

Na abordagem clássica, rapidamente surgem: página inicial, catálogo de relatórios, páginas de detalhamento, construtor de filtros, visualizações salvas, tela de comparação de períodos, exportação, configurações. Cada novo cenário aumenta a quantidade de estados do produto que precisam ser projetados, implementados, testados e adaptados para diferentes tamanhos de tela.

No modelo baseado em LLM, essa lógica muda. Em vez de prever todas as combinações possíveis de componentes em telas separadas, o desenvolvedor cria um conjunto de elementos básicos e regras de interação entre eles. O próprio modelo monta a combinação necessária para a solicitação específica do usuário. Há menos telas, mais lógica dentro do sistema, e fica mais fácil trabalhar com ele.

Perguntas frequentes sobre a notícia

O que se sabe sobre Da linha de comando à interface — e de volta outra vez?

No início da era da computação, as pessoas tinham que aprender a falar a linguagem da máquina: interruptores, cartões perfurados, comandos no terminal. Um erro em um único caractere e nada acontecia. Quando os computadores se tornaram um produto de massa, essa abordagem entrou em colapso. Não dá para exigir que cada usuário memorize dezenas de comandos e seus parâmetros. Surgiram janelas, menus, ícones, o mouse. Era possível arrastar um arquivo para a lixeira em vez de digitar um comando de exclusão. Entre a pessoa e o programa se formou uma camada: a interface. Agora essa

Como você pergunta e como você recebe a resposta são duas tarefas diferentes?

Quando se fala em interface com LLM, imagina-se um chat: texto → resposta em texto. Na verdade, são dois parâmetros independentes. A pergunta pode ser feita por voz — frases longas com várias condições são mais rápidas de dizer do que de digitar no celular. Uma frase como "mostre os projetos da minha área em que o prazo de entrega aumentou no último mês, mas o escopo não mudou" pode ser dita quase sem pausas. Mas o fato de você ter perguntado por voz não significa que a resposta também precise ser em voz. Se você perguntar como os gastos por categoria mudaram nos últimos se

O que se sabe sobre Quatro formas de implementar isso?

Nº 1. UI generativa controlada O produto define um conjunto de componentes: ExpenseChart, ComparisonTable, HotelCards, Map, Confirmation. O modelo não desenha a tela, apenas escolhe o componente adequado, busca os dados e retorna um JSON estruturado: ``` { "component": "ExpenseBreakdown", "period": "6m", "data": [...], "groupBy": "category" } ``` O designer e o desenvolvedor mantêm controle total sobre aparência, comportamento, acessibilidade e estados de erro. O modelo apenas escolhe a representação e passa os dados para ela. Essa abordagem é implementada no CopilotKit. Nº

ZK
Zhemal Khamidun — CPO da Alpina Digital, gerente de produto do AlpinaGPT. Cria produtos de IA desde 2019. O Hamidun News é um projeto pessoal que virou um agregador em produção com mais de 6.000 leitores.
✦ Hands-On AI Engineering · Hamidun Academy

Build & Ship Production AI Agents Without Boilerplate Code

Start your free 72-hour trial at Hamidun Academy (academy.hamidun.com) — interactive lessons on Claude Code & Cursor, live Tech Radar, and production agent templates.

Start 72h Free Trial →Vibe-Coding Intensive
O que você acha?
Carregando comentários…