Vercel의 json-render - Generative UI 프레임워크
(json-render.dev)- AI가 사용자 프롬프트를 받아 JSON 구조를 생성하고, 이를 미리 정의된 컴포넌트로 렌더링하는 생성형 UI 프레임워크
- 프롬프트로 부터 동적이고 개인화된 UI를 생성하되, 사전 정의된 컴포넌트 카탈로그를 통해 안전하고 예측 가능한 출력을 보장
- 카탈로그에 사용 가능한 컴포넌트, 액션, 유효성 검증 함수를 정의하면, AI는 해당 범위 내에서만 제약된(constrained) JSON을 생성
- 생성된 JSON은 스트리밍 방식으로 점진적 렌더링되어, 모델 응답이 도착하는 대로 UI가 즉시 표시
- 생성된 UI를 독립 실행 가능한 React 코드(Next.js 프로젝트)로 내보내기 가능하며, 런타임 의존성 없이 동작 가능한 순수 React 코드로 배포 가능
- React와 React Native 모두 동일한 카탈로그와 스펙 포맷으로 렌더링을 지원하여, 웹과 모바일을 하나의 정의로 커버 가능
-
제공 컴포넌트들
- 레이아웃: Card, Grid, Stack, Tabs, Carousel, Collapsible, Accordion
- 입력: Input, Textarea, Select, Checkbox, Radio, Switch, Slider, Toggle, ToggleGroup, Rating
- 표시: Text, Heading, Image, Badge, Alert, Progress, Skeleton, Spinner, Table, Avatar, Separator
- 인터랙션: Button, ButtonGroup, Link, DropdownMenu, Dialog, Drawer, Popover, Tooltip, Pagination
- 차트: BarGraph, LineGraph
- 각 컴포넌트는
{ $bindState }를 통한 양방향 데이터 바인딩 지원 -
checks배열로required,email,minLength등 유효성 검증 규칙을 선언적으로 지정 가능 - 이벤트 핸들러는
on.press,on.change,on.select,on.submit등으로 바인딩
-
npm install @json-render/core @json-render/react
GeekNews Weekly에 포함된 글입니다.
에디터 코멘트 보기