vercel-labs/json-render

何を解決するか

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

動作方法

開発者は カタログ（Zodを使用したコンポーネントとそのプロップスキーマのセット）と レジストリ（そのコンポーネントの実際のUI実装）を定義します。AIはカタログのプロンプトに基づいてJSON仕様（spec）を生成し、フレームワークの レンダラー がそのJSONをさまざまなプラットフォーム上でライブインターフェースに変換します。

対象ユーザー

Web（React、Vue、Svelte、Solid）、モバイル（React Native）、3D（Three.js）、ターミナル（Ink）、ドキュメント形式（PDF、メール、画像）など、AIの応答に基づいてUIを適応させる必要があるアプリケーションを開発するフロントエンド開発者やAIエンジニア。

特徴

• クロスプラットフォーム対応：1つのコンポーネントカタログでWeb、モバイル、3Dシーン、PDF、HTMLメール、ターミナルUIにレンダリング可能。
• 制限付きAI：AIは開発者が定義したカタログ内のコンポーネントとアクションのみを使用することを制限。
• ストリーミング対応：AIモデルの応答に応じてUIを段階的にレンダリングするための SpecStream を提供。
• 即戦力：迅速な展開を可能にする36の事前構築済み shadcn/ui コンポーネントを提供。
• 動的ロジック：式（例：$state、$cond）を使用して条件付き表示やデータ駆動型プロップをサポート。
• 開発者ツール：仕様ツリーと状態を検査できるフレームワーク非依存のデベロッパーツールパネルを提供。