aradotso/json-render-generative-ui

json-render-generative-ui は何をしますか？

AIが生成したJSON仕様をReact、Vue、Svelte、Solid、React Native、動画、PDF、メール向けの型安全なUIコンポーネントにレンダリングするGenerative UIフレームワーク。

概要

このフレームワークは、AIが出力する構造化JSONを解析し、複数のプラットフォームで動作するUIコンポーネントを動的に生成します。各プラットフォーム向けのアダプターが用意されており、生成されたコンポーネントは型安全に利用できます。

対応プラットフォーム

• React
• Vue
• Svelte
• Solid
• React Native
• 動画（例: Remotion）
• PDF（例: React-PDF）
• メール（例: React Email）

使用方法

npm install json-render-generative-ui

または、各プラットフォーム用のパッケージを個別にインストールします。

npm install @json-render/react
npm install @json-render/vue

基本的な使い方

import { renderJSON } from '@json-render/react';

const jsonSpec = {
  type: 'container',
  props: { style: { padding: 16 } },
  children: [
    { type: 'text', props: { content: 'Hello, World!' } },
    { type: 'button', props: { label: 'Click me', onClick: 'handleClick' } }
  ]
};

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

詳細

詳しくは公式ドキュメントを参照してください。