vercel-labs/json-render

해결하는 문제

json-render는 자연어 프롬프트에서 동적이고 개인화된 사용자 인터페이스를 AI가 생성할 수 있는 생성형 UI 프레임워크입니다. AI 생성 인터페이스의 예측 불가능성과 안전성 부족 문제를 해결하기 위해 AI가 미리 정의된 구성 요소 및 액션 카탈로그에 제한되도록 하여, 출력이 신뢰할 수 있고 예측 가능하며 특정 스키마와 일치함을 보장합니다.

작동 방식

이 프레임워크는 UI 정의와 구현을 분리하여 작동합니다:

1. 카탈로그 정의: 개발자는 Zod 스키마를 사용하여 AI가 사용할 수 있는 구성 요소(및 필수 속성)와 액션을 지정하는 "카탈로그"를 정의합니다.
2. 레지스트리 매핑: 개발자는 이러한 카탈로그 정의를 실제 UI 구성 요소(예: React, Vue, Svelte, SolidJS 등)에 매핑하는 레지스트리를 생성합니다.
3. 렌더링: AI는 카탈로그 기반으로 JSON 사양(spec)을 생성합니다. Renderer는 이 JSON 사양과 레지스트리를 받아 타겟 플랫폼에서 안전하게 최종 UI를 렌더링합니다.

대상 사용자

디자인 일관성과 신뢰성을 희생하지 않고 웹, 모바일, 비디오, PDF, 이메일, 3D 등 여러 플랫폼에서 스트리밍되고 점진적으로 렌더링될 수 있는 AI 기반 인터페이스를 구축하고자 하는 프론트엔드 개발자 및 AI 엔지니어.

주요 특징

• 크로스플랫폼 지원: React, Vue, Svelte, SolidJS, React Native, Remotion(비디오), React PDF, React Email, Three.js(3D)와 호환.
• 제한된 출력: AI는 특정 구성 요소 카탈로그에 제한되어 유효하지 않거나 지원되지 않는 UI 요소를 생성하는 것을 방지합니다.
• 풀 스택 포함: 빠른 개발을 위한 36개의 사전 구축된 shadcn/ui 컴포넌트 포함.
• 완전한 앱 기능: Next.js 및 TanStack Start 전용 렌더러를 통해 JSON 사양이 라우트, 레이아웃, SSR을 갖춘 완전한 앱으로 변환 가능.
• 개발자 도구: 프레임워크에 종속되지 않은 devtools 코어를 제공하며, 사양 트리, 상태 편집기, DOM 피커 기능을 포함.