Vercel가 json-render 프레임워크를 오픈소스로 공개해 LLM이 자연어 프롬프트에서 Zod 스키마로 제약된 구조화된 UI JSON을 생성하고 스트리밍으로 렌더링하는 기술 도입

Context

AI 모델이 생성한 UI를 기존 웹 표준(OpenAPI, JSON Schema)으로 제어하면 구조 정의와 UI 컴포넌트 매핑 사이의 불일치가 발생한다. LLM이 직접 React 코드를 생성하면 악의적 코드 실행 위험이 있어 제약과 제어 메커니즘이 필요하다.

Technical Solution

• 개발자가 Zod 스키마로 허용된 컴포넌트와 액션 카탈로그를 정의: LLM이 이 카탈로그 항목만 참조하는 평탄한 JSON 트리 생성
• Renderer 컴포넌트가 JSON 사양을 실제 구현체에 매핑: React, Vue, Svelte, Solid, React Native 등 6개 이상의 렌더러 지원
• 스트리밍 응답으로 점진적 렌더링 구현: 모델 응답이 완료되기 전에 UI를 단계적으로 화면에 표시
• 36개의 사전 구축된 shadcn/ui 컴포넌트 번들 제공: PDF 생성, HTML 이메일, Remotion 기반 비디오, React Three Fiber 기반 3D 씬 패키지 포함
• TypeScript 기반 monorepo 구조로 @json-render npm 스코프 하에 배포: pnpm으로 의존성 관리

Impact

GitHub에서 2026년 1월 출시 이후 13,000개 이상의 스타와 200회 이상의 릴리스 달성.

Key Takeaway

LLM을 렌더링 레이어에 직접 연결하되 컴포넌트 카탈로그 기반 제약으로 런타임 합성 단계에서 안전성과 통제성을 확보하는 설계는 빌드 타임 컴포넌트 라이브러리와 런타임 AI 생성 UI의 경계를 재정의한다.