vercel-labs/json-render

해결하는 문제

json-render는 자연어 프롬프트에서 동적이고 개인화된 사용자 인터페이스를 AI가 생성할 수 있는 Generative UI 프레임워크입니다. AI 생성 인터페이스의 예측 불가능성 문제를 해결하기 위해 AI를 사전에 정의된 컴포넌트 및 액션 카탈로그에 제한함으로써, 출력이 안전하고 예측 가능하며 특정 스키마와 일치함을 보장합니다.

작동 방식

개발자는 카탈로그(Zod를 사용한 컴포넌트 및 그 prop 스키마의 집합)와 레지스트리(해당 컴포넌트의 실제 UI 구현)를 정의합니다. AI는 카탈로그의 프롬프트를 기반으로 JSON 사양(spec)을 생성하고, 프레임워크의 렌더러가 이 JSON을 다양한 플랫폼에서 실시간 인터페이스로 변환합니다.

대상 사용자

웹(React, Vue, Svelte, Solid), 모바일(React Native), 3D(Three.js), 터미널(Ink), 문서 형식(PDF, 이메일, 이미지) 등 AI 응답에 따라 UI가 적응해야 하는 애플리케이션을 개발하는 프론트엔드 개발자 및 AI 엔지니어.

주요 특징

• 크로스플랫폼 지원: 하나의 컴포넌트 카탈로그로 웹, 모바일, 3D 장면, PDF, HTML 이메일, 터미널 UI에 렌더링 가능.
• 가드레일링된 AI: AI는 개발자가 정의한 카탈로그 내의 컴포넌트와 액션만 사용하도록 제한.
• 스트리밍 지원: AI 모델의 응답에 따라 UI를 점진적으로 렌더링할 수 있는 SpecStream 포함.
• 풀옵션 제공: 빠른 배포를 위한 36개의 사전 구축된 shadcn/ui 컴포넌트 제공.
• 동적 로직: 식(예: $state, $cond)을 사용해 조건부 표시 및 데이터 기반 prop 지원.
• 개발자 도구: 사양 트리와 상태를 검사할 수 있는 프레임워크 독립적인 개발자 도구 패널 제공.