aradotso/json-render-generative-ui

json-render-generative-ui은(는) 무엇을 하나요?

AI가 생성한 JSON 사양을 React, Vue, Svelte, Solid, React Native, 비디오, PDF, 이메일 등에서 타입 안전한 UI 컴포넌트로 렌더링하는 생성형 UI 프레임워크입니다.

개요

이 라이브러리는 LLM이 생성한 JSON 구조를 해석하여 다양한 플랫폼에서 일관된 UI를 렌더링할 수 있도록 설계되었습니다. JSON 스펙은 UI의 구성 요소, 레이아웃, 스타일, 데이터 바인딩을 정의하며, 라이브러리는 이를 프레임워크별 네이티브 컴포넌트로 변환합니다.

주요 기능

• 플랫폼 독립적: React, Vue, Svelte, Solid, React Native를 기본 지원하며, 추가 어댑터로 비디오, PDF, 이메일 출력도 가능합니다.
• 타입 안전성: TypeScript를 사용하여 JSON 스펙의 구조를 검증하고, 런타임 오류를 최소화합니다.
• 동적 구성: 런타임에 JSON을 로드하여 UI를 동적으로 생성할 수 있어 AI 생성 콘텐츠에 최적화되어 있습니다.
• 확장 가능: 사용자 정의 컴포넌트와 스타일 시스템을 추가하여 기능을 확장할 수 있습니다.

사용 방법

npm install @aradotso/json-render-generative-ui

import { renderFromJSON } from '@aradotso/json-render-generative-ui/react';

const jsonSpec = {
  type: 'flex',
  direction: 'column',
  children: [
    { type: 'text', content: 'Hello, World!' },
    { type: 'button', label: 'Click me', onClick: { type: 'action', name: 'alert' } }
  ]
};

function App() {
  return renderFromJSON(jsonSpec);
}

지원 환경

• React 16.8+
• Vue 3+
• Svelte 3+
• Solid 1.0+
• React Native 0.60+
• Node.js 14+ (서버 사이드 렌더링)

라이선스

MIT