JSON‑Render: React 用のガード付き AI プロンプト UI ライブラリ
JSON‑Render: React 用のガード付き AI プロンプト UI ライブラリ
大規模言語モデルが台頭する中、開発者は純粋なテキストプロンプトを実行可能なユーザーインタフェースに変える手段を模索しています。JSON‑Render は、AI に 予測可能 かつ 安全 な語彙を与えることで、そのアウトプットを常に React でレンダリング可能な JSON ツリーにします。サプライズもセキュリティホールもありません。
JSON‑Render とは
JSON‑Render は、Lightweight で TypeScript 第一優先のツールキットで、2 つの NPM パッケージから構成されています：
- @json-render/core – スキーマ定義、ガードレール、可視性ロジック、アクションハンドラ。
- @json-render/react – React コンポーネント、フック、JSOn を Live UI に変換するレンダラー。
主なメリット：
| Feature | 重要ポイント |
|---|---|
| Guardrailed | AI は許可されたコンポーネント種別のカタログに限定され、悪意あるコード注入を防ぎます。 |
| Predictable | JSON は Zod スキーマに従い、実行時に型チェックが可能です。 |
| Fast | ストリームはモデルがデータを送信するたびにレンダリングでき、リアルタイム更新が可能です。 |
| Composable | 自作の React コンポーネントとガードレールを組み合わせて使用できます。スタイリングはライブラリに依存しません。 |
クイックスタートガイド
以下は最小限の例をステップバイステップで解説します。pnpm を使用した新規 Node プロジェクトを想定します。
# Clone and bootstrap
git clone https://github.com/vercel-labs/json-render
cd json-render
pnpm install
pnpm dev
devコマンドは 4 つのサービスを起動します： *localhost:3000– Docs & Playground *localhost:3001– Example dashboard app * Websocket エンドポイント（API 用） * ローカル ChatGPT 互換バックエンド（カスタム LLM 統合はリポジトリ参照）
1. カタログを定義する
packages/core/src/catalog.ts で AI が使用できるコンポーネントを宣言します。以下は簡潔な例です。
import { createCatalog } from '@json-render/core'
import { z } from 'zod'
const catalog = createCatalog({
components: {
Card: {
props: z.object({ title: z.string() }),
hasChildren: true,
},
Metric: {
props: z.object({
label: z.string(),
valuePath: z.string(),
format: z.enum(['currency', 'percent', 'number']),
}),
},
Button: {
props: z.object({ label: z.string(), action: ActionSchema }),
},
},
actions: {
export_report: { description: 'Export dashboard to PDF' },
refresh_data: { description: 'Refresh all metrics' },
},
})
export default catalog
ActionSchemaは@json-render/coreからインポートする Zod スキーマで、actionペイロードの形を検証します。
2. React レンダラーを登録する
コンポーネント名を実際の React 要素にマッピングする小さなレジストリを作成します。
const registry = {
Card: ({ element, children }) => (
<div className="card">
<h3>{element.props.title}</h3>
{children}
</div>
),
Metric: ({ element }) => {
const value = useDataValue(element.props.valuePath)
return <div className="metric">{format(value)}</div>
},
Button: ({ element, onAction }) => (
<button onClick={() => onAction(element.props.action)}>
{element.props.label}
</button>
),
}
3. すべてを組み合わせる
import { useUIStream, DataProvider, ActionProvider, Renderer } from '@json-render/react'
function Dashboard() {
const { tree, send } = useUIStream({ api: '/api/generate' })
return (
<DataProvider initialData={{ revenue: 125000, growth: 0.15 }}>
<ActionProvider actions={{
export_report: () => downloadPDF(),
refresh_data: () => refetch(),
}}>
<input
placeholder="Create a revenue dashboard…"
onKeyDown={(e) => e.key === 'Enter' && send(e.target.value)}
/>
<Renderer tree={tree} components={registry} />
</ActionProvider>
</DataProvider>
)
}
ユーザーが自然言語プロンプトを入力し Enter を押すと、ライブラリが AI の JSON レスポンスをストリームし、レジストリがそれをレンダリング、定義されたアクションがコールバック関数をトリガします。
高度な機能
条件付き可視性
データ、認証、あるいはカスタムロジックに基づいて要素を表示/非表示にします：
{
"type": "Alert",
"props": { "message": "Error occurred" },
"visible": { "and": [ { "path": "/form/hasError" }, { "not": { "path": "/form/errorDismissed" } } ] }
}
確認付きリッチアクション
{
"type": "Button",
"props": {
"label": "Refund Payment",
"action": {
"name": "refund",
"params": { "paymentId": { "path": "/selected/id" } },
"confirm": { "title": "Confirm Refund", "variant": "danger" }
}
}
}
組み込みバリデーション
{
"type": "TextField",
"props": {
"label": "Email",
"valuePath": "/form/email",
"checks": [
{ "fn": "required", "message": "Email is required" },
{ "fn": "email", "message": "Invalid email" }
],
"validateOn": "blur"
}
}
JSON‑Render を使うタイミング
- 迅速プロトタイピング – プロンプトを数分で機能的なダッシュボードへ変換。
- UI 生成の疎結合 – デザインシステムを LLM から切り離す。
- 安全な UI レンダリング – ガードレールで任意コンポーネント注入を防止。
- マルチプラットフォーム – コアは React、React‑Native、あるいは JSON を消費する UI フレームワークで利用可能。
はじめに
リポジトリをクローンし、独自の LLM バックエンドを追加するか、付属の OpenAI アダプターを使用して pnpm dev を実行します。新しい React プロジェクトはレンダリングロジックを自動でインポートします。カタログを拡張したり、レジストリをデザインシステムのスタイリゼーションされたコンポーネントに置き換えるなど、自由に拡張可能です。
ヒント –
localhost:3000の Docs & Playground を使ってプロンプト、カタログ変更、ライブプレビューをコードを触らずに試せます。
結論
JSON‑Render は、LLM に UI コンポーネントを生成させるための、クリーンで型安全な方法を提供します。出力を予測可能でガード付き JSON フォーマットに保つことで、セキュリティ・パフォーマンス・UX をコントロールしつつ、自然言語 UI デザインの強力な利便性を享受できます。AI 生成ダッシュボードをプロダクトに導入したい方は、NPM からパッケージを取得し、本日から試してみてください。