Vercel: Chat SDK transmite UI generativa com json-render

O problema que a integração resolve

Quem já construiu um bot para Slack ou Teams conhece o problema: cada plataforma tem seu próprio formato de cartão. Block Kit no Slack, Adaptive Cards no Teams. Manter os dois em sincronia manualmente é trabalho repetitivo e propenso a erro.

O json-render resolve isso com um catálogo tipado de componentes. O agente escreve uma spec em JSON, e a biblioteca converte em um cartão do Chat SDK. Cada adaptador então posta o cartão no formato nativo da plataforma.

Como funciona o streaming

A função streamCard posta o cartão assim que o elemento raiz tem conteúdo e atualiza a mensagem à medida que novos elementos chegam. As edições saem no máximo uma vez a cada 500 ms por padrão, o que coincide com o intervalo de streaming do Chat SDK. Quando o stream termina, a mensagem mostra o cartão final validado.

O catálogo cobre tabelas, gráficos, botões e outros componentes. Isso elimina a necessidade de construir e manter uma ferramenta separada para cada formato de mensagem.

Validação e limites de plataforma

A função toCard verifica as props de cada elemento contra o schema do componente e lança CardSpecError para specs inválidas. Cada problema gera uma mensagem legível, o que permite enviar a lista de erros de volta ao modelo para correção.

Plataformas impõem limites ao que uma única mensagem pode conter. Os adaptadores do Chat SDK degradam conteúdo que excede esses limites. O adaptador do Slack, por exemplo, transforma uma segunda tabela em bloco de código. Você pode passar limits para rejeitar essas specs em vez de degradá-las.

Exemplo de código

O exemplo abaixo mostra um bot que usa streamCard para responder menções com uma interface generativa.

import { defineCatalog } from "@json-render/core";
import {
  schema,
  standardComponentDefinitions,
  streamCard,
} from "@json-render/chat";
import { streamText } from "ai";

const catalog = defineCatalog(schema, {
  components: standardComponentDefinitions,
});

bot.onNewMention(async (thread, message) => {
  const result = streamText({
    model: "anthropic/claude-haiku-5.5",
    system: catalog.prompt(),
    prompt: message.text,
  });
  await streamCard(thread, result.textStream);
});

O modelo recebe o prompt do catálogo como system prompt e emite uma spec JSON. O streamCard cuida de postar e atualizar o cartão na plataforma.

Por que isso importa para quem constrói bots

Antes dessa integração, quem queria transmitir uma interface rica em um bot de Slack precisava construir um pipeline próprio: gerar JSON, validar contra o schema da plataforma, postar, atualizar. Cada plataforma exigia código específico.

Com streamCard, o modelo emite uma spec genérica e o adaptador cuida da tradução. Isso reduz o código de integração e permite mudar de plataforma sem reescrever a lógica de apresentação.

Também vale notar que o json-render não é exclusivo do Chat SDK. A biblioteca pode ser usada em outros contextos onde você queira gerar interfaces declarativas a partir de modelos de linguagem. A integração com o Chat SDK é apenas o caso de uso mais direto para bots.

Comparação com abordagens anteriores

A abordagem tradicional era gerar Markdown e deixar a plataforma renderizar. O problema é que Markdown não suporta tabelas interativas, gráficos ou botões. O json-render preenche essa lacuna com um vocabulário de componentes tipados.

A desvantagem é a dependência de um catálogo. Se o modelo emitir um componente fora do catálogo, a validação falha. Por isso, o prompt do catálogo é passado como system prompt ao modelo, para que ele saiba quais componentes pode usar.

O que muda para quem constrói bots

A principal mudança é de modelo mental. Em vez de gerar texto e depois formatar para cada plataforma, o agente gera uma spec declarativa. A renderização fica a cargo do adaptador, que conhece os limites e convenções de cada canal.

Isso também facilita iteração. Como a spec é validada antes de ser enviada, erros de formato são capturados cedo. E como o streaming é nativo, o usuário vê a interface sendo construída em tempo real.

Se você já trabalha com agentes e interfaces, vale comparar essa abordagem com a criação de servidores MCP em TypeScript e com a depuração de páginas web com Chrome DevTools MCP.

Como testar hoje

1. Instale o Chat SDK e o json-render.
2. Defina um catálogo de componentes com defineCatalog.
3. Use streamCard para transmitir a spec do modelo.
4. Consulte a documentação em json-render.dev/docs/api/chat.
5. Experimente o playground em chat-sdk-demo.json-render.dev.

A documentação oficial está no changelog da Vercel em vercel.com/changelog/json-render-and-chat-sdk-agents.