Vercel: Chat SDK transmite UI generativa con json-render

En este artículo verás:

• Qué es json-render y cómo se conecta con Chat SDK
• Cómo funciona el flujo de streaming de una interfaz generativa
• Validación de specs y límites de plataforma
• Cómo empezar a usar hoy

El problema que resuelve la integración

Quien ya construyó un bot para Slack o Teams conoce el problema: cada plataforma tiene su propio formato de tarjeta. Block Kit en Slack, Adaptive Cards en Teams. Mantener los dos en sincronía manualmente es trabajo repetitivo y propenso a error.

json-render resuelve esto con un catálogo tipado de componentes. El agente escribe una spec en JSON, y la biblioteca la convierte en una tarjeta de Chat SDK. Cada adaptador luego publica la tarjeta en el formato nativo de la plataforma.

Cómo funciona el streaming

La función streamCard publica la tarjeta en cuanto el elemento raíz tiene contenido y actualiza el mensaje a medida que llegan nuevos elementos. Las ediciones salen como máximo una vez cada 500 ms por defecto, lo que coincide con el intervalo de streaming de Chat SDK. Cuando el stream termina, el mensaje muestra la tarjeta final validada.

El catálogo cubre tablas, gráficos, botones y otros componentes. Esto elimina la necesidad de construir y mantener una herramienta separada para cada formato de mensaje.

Validación y límites de plataforma

La función toCard verifica las props de cada elemento contra el schema del componente y lanza CardSpecError para specs inválidas. Cada problema genera un mensaje legible, lo que permite enviar la lista de errores de vuelta al modelo para corrección.

Las plataformas imponen límites a lo que una sola mensaje puede contener. Los adaptadores de Chat SDK degradan contenido que excede esos límites. El adaptador de Slack, por ejemplo, transforma una segunda tabla en bloque de código. Puedes pasar limits para rechazar esas specs en lugar de degradarlas.

Ejemplo de código

El ejemplo abajo muestra un bot que usa streamCard para responder menciones con una interfaz 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);
});

El modelo recibe el prompt del catálogo como system prompt y emite una spec JSON. streamCard se encarga de publicar y actualizar la tarjeta en la plataforma.

Por qué esto importa para quien construye bots

Antes de esta integración, quien quería transmitir una interfaz rica en un bot de Slack necesitaba construir un pipeline propio: generar JSON, validar contra el schema de la plataforma, publicar, actualizar. Cada plataforma exigía código específico.

Con streamCard, el modelo emite una spec genérica y el adaptador se encarga de la traducción. Esto reduce el código de integración y permite cambiar de plataforma sin reescribir la lógica de presentación.

También vale notar que json-render no es exclusivo de Chat SDK. La biblioteca puede usarse en otros contextos donde quieras generar interfaces declarativas a partir de modelos de lenguaje. La integración con Chat SDK es solo el caso de uso más directo para bots.

Comparación con enfoques anteriores

El enfoque tradicional era generar Markdown y dejar que la plataforma lo renderice. El problema es que Markdown no soporta tablas interactivas, gráficos o botones. json-render llena esa brecha con un vocabulario de componentes tipados.

La desventaja es la dependencia de un catálogo. Si el modelo emite un componente fuera del catálogo, la validación falla. Por eso, el prompt del catálogo se pasa como system prompt al modelo, para que sepa qué componentes puede usar.

Qué cambia para quien construye bots

El cambio principal es mental. En lugar de generar texto y luego formatearlo para cada plataforma, el agente genera una spec declarativa. La renderización queda a cargo del adaptador, que conoce los límites y convenciones de cada canal.

Eso también facilita la iteración. Como la spec se valida antes de enviarse, los errores de formato se detectan temprano. Y como el streaming es nativo, el usuario ve la interfaz construirse en tiempo real.

Si ya trabajas con agentes e interfaces, vale la pena comparar este enfoque con la creación de servidores MCP en TypeScript y con la depuración de páginas web con Chrome DevTools MCP.

Cómo probar hoy

1. Instala el Chat SDK y json-render.
2. Define un catálogo de componentes con defineCatalog.
3. Usa streamCard para transmitir la spec del modelo.
4. Consulta la documentación en json-render.dev/docs/api/chat.
5. Prueba el playground en chat-sdk-demo.json-render.dev.

La documentación oficial está en el changelog de Vercel en vercel.com/changelog/json-render-and-chat-sdk-agents.