- 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