Projetando UIs de Streaming

A resposta em streaming é a superfície mais mal projetada do software moderno. A maioria dos times criou um hook de fetch em TypeScript, ligou a uma div e chamou isso de design de produto. O resultado é uma máquina de escrever fingindo ser uma interface.

Streaming não é texto aparecendo. É um modelo de interação com ritmo, pausas, comportamento de scroll, affordances de interrupção e sinais de confiança. Um time que projeta só o input entregou metade de um produto. A região de saída é a outra metade, e é onde a maioria dos produtos de IA está perdendo o usuário.

Este texto é a versão operacional. O que uma UI de streaming realmente é, as cinco camadas que toda boa UI entrega, análises de produtos reais, os antipadrões que estão matando superfícies em produção e uma auditoria pré-lançamento.

Uma UI de streaming é uma superfície, não um loop de fetch

Uma UI de streaming é a região inteira que o usuário lê enquanto o modelo roda. O texto visível é só uma parte. A cadência, o cursor, o comportamento de scroll, os compromissos estruturais, os controles de interrupção e o estado pós-stream são o resto.

A superfície tem propriedades mensuráveis. Tempo até o primeiro token. Cadência de tokens. Compromisso estrutural. Latência de interrupção. Sinal de conclusão. Affordances pós-stream. Ignore qualquer uma e o stream é um efeito colateral de uma API, não um componente projetado.

Cursor, Claude, v0, Lovable, Linear AI, Raycast AI. Nenhum trata streaming como saída crua de tokens. Cada um entrega uma superfície estruturada. Esse é o padrão.

As cinco camadas de uma ótima superfície de streaming

Cinco camadas, na ordem em que o usuário as experimenta. Uma UI de streaming que entrega menos de quatro está incompleta.

O tempo até o primeiro token é o momento em que o vazio vira feedback. O ritmo de tokens é a sensação do stream depois que está rodando. O compromisso estrutural é como a superfície lida com listas, tabelas e código sem re-flow. Interromper e editar é a saída de emergência do usuário. A conclusão é o momento em que o stream termina e o artefato se torna interativo. Pule qualquer uma e o stream apodrece a partir dessa camada.

Camada 1: Tempo até o primeiro token

Os primeiros 200 milissegundos decidem se o usuário confia na superfície. Abaixo de 200ms com um sinal real de feedback, parece instantâneo. Depois de 800ms sem feedback, o usuário já está decidindo que o produto está quebrado.

As escolhas são concretas. Um skeleton que pré-aloca a região de saída. Um cursor piscando. Uma affordance de pontinhos digitando. Um prefixo em streaming, em que uma frase conhecida como "Aqui está" aparece em 300ms antes do conteúdo.

Os três pontinhos do ChatGPT funcionam porque são honestos. O pulso em gradiente do Claude é o upgrade, uma faixa animada suave que sinaliza que a superfície está viva sem se comprometer com conteúdo falso. O Cursor renderiza uma linha de cursor fina e um chip de status que nomeia o que está acontecendo. Em todos os casos, o usuário está olhando para alguma coisa em 200ms.

O vazio é a falha. Uma região em branco que trava por 600ms ensina ao usuário que IA é algo para se esperar. Entregue o cursor antes de entregar o modelo.

Camada 2: Ritmo de tokens

Streams crus de tokens são trêmulos. Um modelo que emite quatro tokens, depois vinte, depois um, parece um terminal bugado mesmo quando a entrega por baixo está ótima. Ritmo é uma decisão de design.

A solução é uma cadência suavizada. Faça buffer dos tokens que chegam por 30 a 60 milissegundos e depois renderize em taxa constante. O usuário lê de 250 a 400 palavras por minuto, então o alvo é um stream que chegue na velocidade de leitura ou um pouco acima, sem picos. O Claude adotou essa disciplina cedo.

Os primitivos de UI de streaming da Vercel no v0 entregam a mesma ideia, um loop de renderização que desacopla a rede da atualização visual. O stream de tokens da API é uma camada. O stream visual é outra. As duas nunca devem ser a mesma.

O cursor importa. Um cursor que segue o último token renderizado, com um fade suave na cauda, ancora o olhar. Sem ele, o olho do usuário pula por aí caçando onde o stream está. O cursor do Cursor no composer não é coincidência de nome.

Camada 3: Compromisso estrutural

A camada mais difícil. Prosa corrida é fácil. Um stream que se compromete com uma lista, tabela, bloco de código ou gráfico no meio da resposta é onde a maioria das superfícies quebra.

A versão ingênua é markdown-como-streaming. O renderizador faz parse de cada chunk, o layout refaz o fluxo a cada commit, a lista renumera, o bloco de código troca de fonte no meio do stream, a página pula. Cada reflow é um imposto sobre a atenção.

A versão certa compromete a estrutura no instante em que ela é detectável e depois faz o conteúdo fluir para dentro do layout comprometido, sem re-flow. Uma lista reserva espaço no momento em que o primeiro hífen aparece. Um bloco de código reserva um painel monoespaçado no triple-backtick. Uma tabela compromete o número de colunas imediatamente. O streaming de diff do Cursor é o caso de livro. O painel de diff reserva o layout, os caminhos dos arquivos chegam primeiro, as linhas individuais fluem para linhas pré-alocadas. O streaming com consciência de seleção do v0 entrega o mesmo padrão do lado do canvas.

As sugestões estruturadas do Linear AI entregam compromisso sem nunca mostrar ao usuário um estado de "carregando". A sugestão chega como um objeto tipado, os campos são preenchidos em ordem de dependência, o fluxo de trabalho nunca bloqueia. O Linear entrega trabalho, os outros entregam transcrições.

Camada 4: Interromper e editar

Uma UI de streaming sem interrupção é hostil. O usuário está vendo o modelo escrever algo que ele já sabe que está errado, e a única saída é fechar a aba. Não é um produto. É uma situação de refém com contador de tokens.

O botão de parar é o elemento mais barato e de maior alavancagem da superfície. Visível desde o token um, não depois do token 100. Claude, Cursor, ChatGPT e v0 têm um. A maioria das UIs de chat caseiras esquece.

Interromper é o piso. Editar é o teto. O padrão que a maioria dos times ainda não conquistou é a edição ao vivo, em que o usuário revisa o prompt no meio do stream e a superfície reroteia. O aceitar e rejeitar durante o streaming do Cursor é a versão entregue mais próxima. O usuário lê o diff conforme ele chega, aceita as partes que funcionam, rejeita as que não funcionam. Isso é um loop de interação de verdade.

O regenerar do ChatGPT é o contraste. O botão sobrescreve a resposta anterior, e o usuário perde a versão de que gostou. Regenerar como sobrescrita é destrutivo. Regenerar como ramificação é design. A superfície de histórico do Claude entrega a ramificação.

Camada 5: Conclusão e pós-stream

O momento em que o stream termina é um momento de design. A maioria dos produtos o trata como nada. O stream para, o cursor some, o usuário encara um muro de texto se perguntando o que fazer em seguida.

A materialização de artefatos do Claude é o padrão-ouro. O texto em streaming recebe um sinal discreto de conclusão, e o painel de artefato troca de preview em streaming para superfície interativa no mesmo compasso. O usuário não "terminou de ler", ele agora está "dentro do artefato". A transição é o ponto inteiro.

A troca de preview do v0 é a versão do lado do design. O código em streaming termina, o iframe de preview ao vivo recarrega com o build final, o botão de deploy aparece. Três estados, uma transição, nenhum tempo morto.

O diff-para-aceitar do Cursor é o terceiro padrão. O stream termina, o diff continua editável, aceitar e rejeitar continuam lá, o arquivo não é commitado até o usuário dizer. O stream acabou, a decisão não. Essa separação é o que faz a superfície parecer uma ferramenta em vez de um log de chat.

A versão ruim encerra o stream e não entrega nada. O cursor some, a prosa fica ali parada, o usuário copia o texto para outra ferramenta para de fato usá-lo. Um pipeline de copiar e colar com um modelo acoplado.

Análises de produtos reais

Cursor roda streaming no composer mais materialização de diff. O composer faz streaming do plano, o painel de diff faz streaming do patch, aceitar e rejeitar seguem ativos, e o estado pós-stream é um diff pendente que pertence ao usuário. Todas as camadas acertam.

Claude entrega ritmo de tokens suavizado e troca de painel de artefato. Pulso em gradiente antes do primeiro token, cadência constante, materialização do artefato na conclusão, histórico de conversa que ramifica. A superfície parece projetada porque cada transição foi.

v0 entrega streaming guiado por seleção com preview ao vivo. O usuário clica numa região do canvas, o prompt define seu próprio escopo, o stream chega como código e como preview que troca no iframe. A conclusão passa o bastão para um botão de deploy.

ChatGPT é a linha de base. Streaming de tokens com feedback de três pontinhos, regenerar como sobrescrita, ramificar a partir daqui como adição recente. Padrão da categoria, não o nível a bater.

Vercel AI Playground, Lovable, Anthropic Computer Use, Raycast AI e GitHub Copilot Workspace entregam cada um uma fatia. A Vercel expõe o seletor de modelo ao vivo durante o stream. O Lovable roda o padrão stream-para-app, o usuário vê o app sendo construído em tempo real. O Computer Use faz streaming de screenshots e do rastro de raciocínio em paralelo. O Raycast faz streaming numa microsuperfície de command palette. O Copilot Workspace entrega streaming de planejar-e-depois-executar com checkpoints.

As cinco regras

1. Mostre feedback em menos de 200 milissegundos. Um cursor, um pulso, um pontinho digitando, um prefixo em streaming. Qualquer coisa menos o vazio.
2. Suavize a cadência. Faça buffer do stream de rede, renderize na velocidade de leitura, ancore o cursor. Jitter é falha de design, não condição de rede.
3. Comprometa a estrutura sem re-flow. Reserve o layout no momento em que uma lista, tabela ou bloco de código for detectável. Nunca refaça o fluxo.
4. Entregue o botão de parar antes do token 100. Visível. Alcançável. Um clique. Sem exceções.
5. Projete o momento depois do stream com o mesmo cuidado do stream. A conclusão é uma passagem de bastão. A passagem de bastão é o produto.

Os antipadrões que matam streams em produção

O spinner morto. Um spinner roda enquanto o modelo faz streaming atrás de uma camada de renderização fechada. Apague o spinner. Entregue o stream.

O jitter de tokens. Saída crua de tokens, sem buffer, a cadência oscila entre rajadas e pausas. Suavize.

O auto-scroll que briga com o usuário. A página rola sozinha para acompanhar o stream enquanto o usuário lê um parágrafo anterior. Detecte o scroll manual, pause o auto-scroll até o usuário reancorar. Claude e Cursor resolvem isso.

O erro do sem-botão-de-parar. Interrupção enterrada num menu de configurações, ou que só aparece após 30 segundos, ou que não existe. Visível desde o token um.

O stream que acaba e deixa o usuário olhando. Sem sinal de conclusão, sem próximo passo. Projete o pós-stream.

O regenerar destrutivo. A nova resposta sobrescreve a antiga, e o usuário perde a versão de que gostou. Regenerar como ramificação, nunca como sobrescrita.

Markdown cru como streaming. O renderizador refaz o fluxo a cada chunk, a página pula. Comprometa a estrutura uma vez, faça stream para dentro do layout reservado.

As correções são pequenas. Superfícies que as entregam parecem de 2026. As que não entregam parecem sidebars de chat de 2022 ligadas a um modelo de 2026.

A auditoria da superfície de streaming

Rode isto em qualquer superfície de streaming de IA antes de lançar.

1. Primeiro feedback. A superfície mostra algo em até 200 milissegundos após o envio?
2. Cadência. O stream de tokens é suavizado para a velocidade de leitura, ou é jitter cru de rede?
3. Compromisso estrutural. A superfície reserva layout para listas, tabelas e blocos de código antes de o conteúdo chegar?
4. Affordance de parar. O botão de parar está visível desde o primeiro token, a um clique?
5. Affordance de editar. O usuário pode revisar, aceitar ou rejeitar no meio do stream?
6. Design da conclusão. O momento em que o stream termina leva a um próximo passo real?
7. Artefato pós-stream. A saída é interativa depois do stream, ou é só uma transcrição congelada?

Uma superfície que passa nas sete parece um componente projetado. Uma que falha em três ou mais parece um console log com um modelo acoplado. Essa diferença é o que separa o design de produto AI-native da IA colada por cima.

Os times que entregam superfícies de streaming com esse cuidado são os mesmos que tratam as superfícies de prompt como componentes reais no lado do input, e que projetam para a latência de IA no nível do sistema. Combine com estados vazios, padrões de UI para agentes e sinais de confiança para que a saída em streaming mereça ser lida.

FAQ

O que é design de UI de streaming?

Design de UI de streaming é a disciplina de moldar como a saída da IA aparece na tela enquanto o modelo a gera. Cobre tempo até o primeiro token, cadência de tokens, compromisso estrutural, affordances de interrupção e o artefato pós-stream. Uma UI de streaming não é uma textarea que se enche de texto. É uma superfície projetada com propriedades mensuráveis, e os produtos que estão ganhando agora a tratam assim.

Por que o streaming de tokens parece diferente em cada produto?

Porque cadência é uma decisão de design, não um resultado de rede. Um stream cru de tokens treme. Um stream com buffer e suavizado chega na velocidade de leitura. O Claude suaviza a cadência com um loop de renderização que desacopla a rede da atualização visual. O ChatGPT fica mais próximo da entrega crua. Mesma classe de modelo, sensação de superfície diferente.

Qual é o erro mais comum em UI de streaming?

Lançar um stream sem um botão de parar visível. O usuário está vendo o modelo escrever algo que ele sabe que está errado e não tem como sair. Outras falhas comuns: spinners mortos, auto-scroll que briga com o usuário, regenerar destrutivo, markdown cru que refaz o fluxo a cada chunk e uma conclusão que não leva a nada. Cada uma se resolve com uma pequena mudança na superfície.

Construa o stream como se ele fosse o canvas

A região de saída em streaming é o novo canvas. Produtos de IA vivem ou morrem pela sensação dessa superfície nos primeiros 800 milissegundos e por quão legível ela se mantém ao longo de uma resposta de 30 segundos. A maioria dos times a trata como uma máquina de escrever. Os times que entregam o padrão alto a tratam como infraestrutura.

Entregue as cinco camadas. Rode a auditoria. Evite os antipadrões. O produto que sai do outro lado parece uma ferramenta, não uma sidebar de chat fingindo ser uma.

Se você quer um time que entrega superfícies de streaming como componentes completos em vez de loops de tokens colados por cima, contrate a Brainy. Projetamos UI de produto AI-native de ponta a ponta, do primeiro token ao artefato pós-stream, com os sinais de confiança e as affordances de interrupção embutidos antes de o primeiro usuário apertar enviar.