Vercel Chat SDK, json-render 연동으로 슬랙·팀즈 네이티브 생성형 UI 스트리밍 지원

Vercel이 Chat SDK 에이전트 환경에서 json-render를 활용해 생성형 UI(Generative UI)를 직접 스트리밍할 수 있는 공식 워크플로우를 공개했습니다. 대규모 언어 모델(LLM)이 생성한 텍스트 답변에 머무르지 않고, 업무용 메신저 플랫폼의 네이티브 카드 컴포넌트로 실시간 변환해 출력하는 아키텍처입니다.

이미지 출처: https://vercel.com/changelog/json-render-and-chat-sdk-agents

기존 대화형 챗봇 구축 시 개발자들은 메시지 형태마다 개별 도구를 직접 제작하고 플랫폼별 UI 스펙에 맞춰 수동 유지보수해야 했습니다. Vercel은 Chat SDK와 @json-render/core, @json-render/chat 패키지를 통합하여, 모델이 사전에 정의된 컴포넌트 카탈로그 기반으로 JSON 스펙을 작성하면 이를 플랫폼 네이티브 카드로 자동 변환하는 파이프라인을 구축했습니다.

컴포넌트 카탈로그 기반의 JSON 스펙 생성과 네이티브 어댑터 변환

이번 통합의 핵심은 구조화된 컴포넌트 카탈로그와 플랫폼별 네이티브 렌더링 어댑터의 결합입니다.

개발자는 @json-render/core의 defineCatalog를 통해 표준 컴포넌트 정의 세트를 구성하고 시스템 프롬프트에 주입합니다. 카탈로그는 테이블, 차트, 버튼 등 인터랙티브 요소들을 포괄하므로 개발자가 개별 메시지 규격을 매번 별도 코드로 작성할 필요가 없습니다.

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

에이전트가 카탈로그 스키마를 준수하는 JSON 구조를 작성하면, Chat SDK 어댑터가 이를 수신하여 슬랙(Slack)의 경우 Block Kit 포맷으로, 마이크로소프트 팀즈(Microsoft Teams)의 경우 Adaptive Cards 포맷으로 변환해 스레드에 게시합니다.

streamCard를 통한 실시간 증분 렌더링 및 500ms 갱신 주기

스트리밍 편의성을 위해 Vercel은 streamCard 유틸리티를 제공합니다.

전체 JSON 생성이 완료될 때까지 대기하지 않고, 루트 엘리먼트(root element)에 내용이 채워지는 즉시 카드를 채팅 스레드에 등록합니다. 이후 모델이 하위 요소를 생성함에 따라 실시간으로 메시지를 갱신합니다.

• 업데이트 주기 제어: 메시지 편집 호출은 기본 500ms 간격으로 배치 전송되며, 이는 Chat SDK의 자체 스트리밍 주기와 일치합니다.
• 최종 검증 카드 확정: LLM의 스트리밍 출력이 종료되면 검증이 완료된 최종 카드가 안정적으로 표시됩니다.

이 방식은 웹 프론트엔드의 스트리밍 반응성을 슬랙 및 팀즈 같은 엔터프라이즈 채팅 인터페이스에 그대로 이식할 수 있도록 돕습니다.

스키마 유효성 검증과 플랫폼별 메시지 제한 대응 전략

런타임 안정성을 확보하기 위해 toCard 함수 기반의 엄격한 유효성 검증 계층이 적용되었습니다.

toCard는 각 UI 요소의 프로퍼티를 컴포넌트 스키마와 대조 검증하며, 유효하지 않은 스펙이 감지되면 CardSpecError를 발생시킵니다. 발생한 오류는 사람이 읽을 수 있는 구체적인 이슈 목록으로 반환되므로, 이를 다시 모델에 프롬프트로 전달해 수정된 스펙을 재생성하도록 유도할 수 있습니다.

또한 플랫폼별 단일 메시지 크기 제한에 대응하는 처리 로직이 내장되어 있습니다.

• 어댑터 자동 강제 축소: 허용 한도를 초과할 경우 어댑터가 내용을 단계적으로 다운그레이드합니다. 일례로 슬랙 어댑터는 두 번째 테이블이 포함될 경우 이를 코드 블록으로 변환하여 용량 초과 오류를 방지합니다.
• 사전 거부 설정: 강제 축소 대신 규격 외 출력을 원천 차단하고자 할 경우 limits 설정을 전달하여 초과 스펙을 즉시 거부할 수 있습니다.

Vercel의 Chat SDK 및 json-render 워크플로우는 공식 문서 및 인터랙티브 플레이그라운드를 통해 즉시 테스트할 수 있습니다.

출처

• Vercel Changelog: Stream generative UI from Chat SDK agents with json-render
• Guillermo Rauch 공식 X (@rauchg): Generative UI for conversational agents