Vercelのjson-render - 生成UIフレームワーク

 (json-render.dev)
11 ポイント 投稿者 xguru 2026-03-28 | 1件のコメント | WhatsAppで共有
  • AIがユーザープロンプトを受け取り、JSON構造を生成し、これを事前定義されたコンポーネントでレンダリングする生成UIフレームワーク
  • プロンプトから動的かつパーソナライズされたUIを生成しつつ、事前定義されたコンポーネントカタログによって安全で予測可能な出力を保証
  • カタログに利用可能なコンポーネント、アクション、バリデーション関数を定義すると、AIはその範囲内でのみ制約付き（constrained）JSONを生成
  • 生成されたJSONはストリーミング方式で段階的にレンダリングされ、モデルの応答が届き次第UIがすぐに表示される
  • 生成されたUIは単独で実行可能なReactコード（Next.jsプロジェクト）としてエクスポートでき、ランタイム依存なしで動作可能な純粋なReactコードとして配布可能
  • ReactとReact Nativeの両方で同一のカタログと仕様フォーマットによるレンダリングをサポートし、Webとモバイルを1つの定義でカバー可能
  • 提供コンポーネント
    • レイアウト: 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

関連記事

1件のコメント

 
wskyland 27 일 전

素晴らしいですね。ついに企画をはじめとして、デザインやパブリッシング領域の媒介として良さそうです