vercel-labs/json-render

何を解決するか

json-render は、自然言語のプロンプトから動的でパーソナライズされたユーザーインターフェースをAIが生成できるジェネラティブUIフレームワークです。AI生成UIの予測不可能性と安全性の欠如という問題を、AIが事前に定義されたコンポーネントとアクションのカタログに制限することで解決し、出力が信頼性があり、予測可能で、特定のスキーマと一致することを保証します。

動作方法

このフレームワークはUI定義と実装を分離することで動作します：

1. カタログ定義：開発者はZodスキーマを使って「カタログ」を定義し、AIが使用できるコンポーネント（およびその必須プロパティ）とアクションを指定します。
2. レジストリマッピング：開発者は、これらのカタログ定義を実際のUIコンポーネント（例：React、Vue、Svelte、SolidJSなど）にマッピングするレジストリを作成します。
3. レンダリング：AIはカタログに基づいてJSON仕様（spec）を生成します。RendererはこのJSON仕様とレジストリを受け取り、ターゲットプラットフォーム上で安全に最終的なUIをレンダリングします。

対象ユーザー

複数のプラットフォーム（Web、モバイル、動画、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ピッカーを備える。