mirror of
https://github.com/vercel-labs/json-render.git
synced 2026-10-02 12:00:58 +08:00
Compare commits
4
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
7edecbc599 | ||
|
|
583e02aeb9 | ||
|
|
7e4d107dba | ||
|
|
ad0be0efc9 |
+23
-2
@@ -1,8 +1,30 @@
|
||||
# Changelog
|
||||
|
||||
## 0.18.0
|
||||
|
||||
<!-- release:start -->
|
||||
### New Features
|
||||
|
||||
- **Devtools** — Five new packages for inspecting json-render apps in the browser: `@json-render/devtools` (framework-agnostic core), plus `@json-render/devtools-react`, `@json-render/devtools-vue`, `@json-render/devtools-svelte`, and `@json-render/devtools-solid` adapters. Drop `<JsonRenderDevtools />` into your app to get a shadow-DOM-isolated panel with six tabs (Spec, State, Actions, Stream, Catalog, Pick), a DOM picker that maps clicked elements back to spec keys via `data-jr-key`, a capped event store, and server-side stream tap utilities. Floating toggle or `Cmd`/`Ctrl` + `Shift` + `J`, tree-shakes to `null` in production (#273)
|
||||
- **Devtools example** — New `examples/devtools` Next.js demo showing the full devtools panel wired up to an AI chat endpoint and a component catalog (#273)
|
||||
- **Action observer and devtools flag in core** — `@json-render/core` now exposes an action observer and a devtools enablement flag that adapters use to mirror actions and stream events into the panel (#273)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- **Zod 4 schema formatting** — `formatZodType` now correctly handles `z.record()`, `z.default()`, and `z.literal()` types from Zod 4, which previously produced incorrect or empty output in generated prompts and schemas (#239)
|
||||
|
||||
### Improvements
|
||||
|
||||
- **Zod 4 test coverage** — Added unit tests for `formatZodType` covering record, default, and literal types to guard against regressions (#272)
|
||||
|
||||
### Contributors
|
||||
|
||||
- @ctate
|
||||
- @mvanhorn
|
||||
<!-- release:end -->
|
||||
|
||||
## 0.17.0
|
||||
|
||||
<!-- release:start -->
|
||||
### New Features
|
||||
|
||||
- **Gaussian Splatting** — Added `GaussianSplat` component to `@json-render/react-three-fiber`, bringing the component count to 20. Composable with all existing R3F components (lights, controls, post-processing) via drei's Splat loader (#259)
|
||||
@@ -17,7 +39,6 @@
|
||||
|
||||
- @ctate
|
||||
- @willmanzoli
|
||||
<!-- release:end -->
|
||||
|
||||
## 0.16.0
|
||||
|
||||
|
||||
@@ -5,9 +5,243 @@ export const metadata = pageMetadata("docs/changelog")
|
||||
|
||||
Notable changes and updates to json-render.
|
||||
|
||||
## v0.18.0
|
||||
|
||||
April 17, 2026
|
||||
|
||||
### New: Devtools
|
||||
|
||||
Five new packages for inspecting json-render apps in the browser:
|
||||
|
||||
- `@json-render/devtools` -- framework-agnostic core
|
||||
- `@json-render/devtools-react`
|
||||
- `@json-render/devtools-vue`
|
||||
- `@json-render/devtools-svelte`
|
||||
- `@json-render/devtools-solid`
|
||||
|
||||
Drop `<JsonRenderDevtools />` into your app to get a shadow-DOM-isolated panel with six tabs (Spec, State, Actions, Stream, Catalog, Pick), a DOM picker that maps clicked elements back to spec keys via `data-jr-key`, and a capped event store. Toggle with the floating button or `Cmd`/`Ctrl` + `Shift` + `J`. Tree-shakes to `null` in production.
|
||||
|
||||
```bash
|
||||
npm install @json-render/devtools-react
|
||||
```
|
||||
|
||||
```tsx
|
||||
import { JsonRenderDevtools } from "@json-render/devtools-react";
|
||||
|
||||
<JsonRenderDevtools />
|
||||
```
|
||||
|
||||
See the [Devtools guide](/docs/devtools) and the [API reference](/docs/api/devtools) for details.
|
||||
|
||||
### New: Devtools Example
|
||||
|
||||
New `examples/devtools` Next.js demo showing the full devtools panel wired up to an AI chat endpoint and a component catalog.
|
||||
|
||||
### New: Action Observer and Devtools Flag in Core
|
||||
|
||||
`@json-render/core` now exposes an action observer and a devtools enablement flag that framework adapters use to mirror actions and stream events into the panel.
|
||||
|
||||
### Fixed: Zod 4 Schema Formatting
|
||||
|
||||
`formatZodType` now correctly handles `z.record()`, `z.default()`, and `z.literal()` types from Zod 4, which previously produced incorrect or empty output in generated prompts and schemas.
|
||||
|
||||
---
|
||||
|
||||
## v0.17.0
|
||||
|
||||
April 10, 2026
|
||||
|
||||
### New: Gaussian Splatting
|
||||
|
||||
Added `GaussianSplat` component to `@json-render/react-three-fiber`, bringing the component count to 20. Composable with all existing R3F components (lights, controls, post-processing) via drei's Splat loader.
|
||||
|
||||
### New: R3F Gaussian Splatting Example
|
||||
|
||||
Demo app with five scenes: splat showroom, splat with primitives, multi-splat, post-processing effects, and animated floating splat.
|
||||
|
||||
### New: Standalone gsplat Example
|
||||
|
||||
Experimental demo app showcasing Gaussian Splatting with gsplat.js (no Three.js dependency), featuring scene selector, live JSON spec viewer, and progress indicator.
|
||||
|
||||
### Improved: AI Output Quality
|
||||
|
||||
Improved prompt output and schema generation for more reliable AI-generated specs.
|
||||
|
||||
---
|
||||
|
||||
## v0.16.0
|
||||
|
||||
March 27, 2026
|
||||
|
||||
### New: `@json-render/next`
|
||||
|
||||
Next.js renderer that turns JSON specs into full Next.js applications with routes, layouts, SSR, metadata, data loaders, and static generation. Client and server entry points at `@json-render/next` and `@json-render/next/server`. Includes built-in `Link`, `Slot`, error boundary, loading, and not-found components.
|
||||
|
||||
```bash
|
||||
npm install @json-render/next
|
||||
```
|
||||
|
||||
### New: `@json-render/shadcn-svelte`
|
||||
|
||||
Pre-built shadcn-svelte components for json-render Svelte apps. 36 components built on Svelte 5 + Tailwind CSS with state binding, validation, and action support. Server-safe catalog at `@json-render/shadcn-svelte/catalog`.
|
||||
|
||||
```bash
|
||||
npm install @json-render/shadcn-svelte
|
||||
```
|
||||
|
||||
### Improved: Release Process
|
||||
|
||||
Switched from Changesets to a manual single-PR release workflow with changelog markers and automatic npm publish on version bump.
|
||||
|
||||
---
|
||||
|
||||
## v0.15.0
|
||||
|
||||
March 23, 2026
|
||||
|
||||
### New: `@json-render/ink`
|
||||
|
||||
Terminal renderer for json-render. JSON becomes terminal UIs powered by [Ink](https://github.com/vadimdemedes/ink). Stream AI-generated specs directly to the terminal with `useUIStream`.
|
||||
|
||||
```bash
|
||||
npm install @json-render/ink
|
||||
```
|
||||
|
||||
### Improved: YAML Format Support in `buildUserPrompt`
|
||||
|
||||
`buildUserPrompt` now accepts `format` and `serializer` options, enabling YAML as a wire format alongside JSON.
|
||||
|
||||
---
|
||||
|
||||
## v0.14.0
|
||||
|
||||
March 13, 2026
|
||||
|
||||
### New: `@json-render/yaml`
|
||||
|
||||
YAML wire format for json-render. Includes streaming YAML parser, `yamlPrompt()` for system prompts, and AI SDK transform (`pipeYamlRender`) as a drop-in alternative to JSONL streaming. Supports four fence types: `yaml-spec`, `yaml-edit`, `yaml-patch`, and `diff`.
|
||||
|
||||
```bash
|
||||
npm install @json-render/yaml
|
||||
```
|
||||
|
||||
### New: Universal Edit Modes
|
||||
|
||||
Three strategies for multi-turn spec refinement in `@json-render/core`:
|
||||
|
||||
- **Patch** -- RFC 6902 JSON Patch
|
||||
- **Merge** -- RFC 7396 Merge Patch
|
||||
- **Diff** -- Unified diff
|
||||
|
||||
New `editModes` option on `buildUserPrompt()` and `PromptOptions`. New helpers: `deepMergeSpec()`, `diffToPatches()`, `buildEditUserPrompt()`, `buildEditInstructions()`, `isNonEmptySpec()`.
|
||||
|
||||
### Improved: Playground
|
||||
|
||||
Format toggle (JSONL / YAML), edit mode picker (patch / merge / diff), and token usage display with prompt caching stats.
|
||||
|
||||
### Improved: Prompt Caching
|
||||
|
||||
Generate API uses Anthropic ephemeral cache control for system prompts.
|
||||
|
||||
---
|
||||
|
||||
## v0.13.0
|
||||
|
||||
March 12, 2026
|
||||
|
||||
### New: `@json-render/solid`
|
||||
|
||||
SolidJS renderer for json-render. JSON becomes Solid components with reactive rendering, schema export, and full catalog support.
|
||||
|
||||
```bash
|
||||
npm install @json-render/core @json-render/solid
|
||||
```
|
||||
|
||||
### New: `@json-render/react-three-fiber`
|
||||
|
||||
React Three Fiber renderer for json-render. JSON becomes 3D scenes with 19 built-in components for meshes, lights, models, environments, text, cameras, and controls.
|
||||
|
||||
```bash
|
||||
npm install @json-render/react-three-fiber
|
||||
```
|
||||
|
||||
### Improved: Strict JSON Schema Mode
|
||||
|
||||
`catalog.jsonSchema({ strict: true })` produces a JSON Schema subset compatible with LLM structured output APIs (OpenAI, Google Gemini, Anthropic). Ensures `additionalProperties: false` on every object and all properties listed in `required`.
|
||||
|
||||
---
|
||||
|
||||
## v0.12.1
|
||||
|
||||
March 11, 2026
|
||||
|
||||
### Changed: Generation Mode Renames
|
||||
|
||||
Renamed generation modes from `"generate"` / `"chat"` to `"standalone"` / `"inline"`. The old names still work but emit a deprecation warning.
|
||||
|
||||
### Fixed: MCP React Duplicate Module Error
|
||||
|
||||
Resolved React duplicate module error (`useRef` returning null) in `@json-render/mcp` by adding `resolve.dedupe` Vite configuration. Added `./build-app-html` export entry point.
|
||||
|
||||
---
|
||||
|
||||
## v0.12.0
|
||||
|
||||
March 6, 2026
|
||||
|
||||
### New: `@json-render/svelte`
|
||||
|
||||
Svelte 5 renderer with runes-based reactivity. Full support for data binding, visibility, actions, validation, watchers, streaming, and repeat scopes. Includes `defineRegistry`, `Renderer`, `schema`, composables, and context providers.
|
||||
|
||||
```bash
|
||||
npm install @json-render/core @json-render/svelte
|
||||
```
|
||||
|
||||
### New: `@json-render/react-email`
|
||||
|
||||
React Email renderer for generating HTML and plain-text emails from JSON specs. 17 standard components (Html, Head, Body, Container, Section, Row, Column, Heading, Text, Link, Button, Image, Hr, Preview, Markdown). Server-side `renderToHtml` / `renderToPlainText` APIs.
|
||||
|
||||
```bash
|
||||
npm install @json-render/react-email
|
||||
```
|
||||
|
||||
### New: `@json-render/mcp`
|
||||
|
||||
MCP Apps integration that serves json-render UIs as interactive apps inside Claude, ChatGPT, Cursor, VS Code, and other MCP-capable clients. `createMcpApp` server factory, `useJsonRenderApp` React hook for iframes, and `buildAppHtml` utility.
|
||||
|
||||
```bash
|
||||
npm install @json-render/mcp
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## v0.11.0
|
||||
|
||||
February 27, 2026
|
||||
|
||||
### New: `@json-render/image`
|
||||
|
||||
Server-side image renderer powered by Satori. Turns the same `{ root, elements }` spec format into SVG or PNG output for OG images, social cards, and banners.
|
||||
|
||||
```bash
|
||||
npm install @json-render/image
|
||||
```
|
||||
|
||||
```typescript
|
||||
import { renderToSvg, renderToPng } from "@json-render/image/render";
|
||||
import { standardComponentDefinitions } from "@json-render/image/catalog";
|
||||
|
||||
const svg = await renderToSvg(spec, { width: 1200, height: 630 });
|
||||
const png = await renderToPng(spec, { width: 1200, height: 630 });
|
||||
```
|
||||
|
||||
9 standard components: Frame, Box, Row, Column, Heading, Text, Image, Divider, Spacer. Server-safe import path at `@json-render/image/server`.
|
||||
|
||||
---
|
||||
|
||||
## v0.10.0
|
||||
|
||||
February 2026
|
||||
February 25, 2026
|
||||
|
||||
### New: `@json-render/vue`
|
||||
|
||||
@@ -120,7 +354,7 @@ All form components now support `checks` and `validateOn` props:
|
||||
|
||||
## v0.9.1
|
||||
|
||||
February 2026
|
||||
February 24, 2026
|
||||
|
||||
### Fixed: Install failure due to private dependency
|
||||
|
||||
@@ -130,7 +364,7 @@ February 2026
|
||||
|
||||
## v0.9.0
|
||||
|
||||
February 2026
|
||||
February 24, 2026
|
||||
|
||||
### New: External State Store
|
||||
|
||||
@@ -184,7 +418,7 @@ Fixed safely resolving the inner type for Zod arrays in schema introspection, pr
|
||||
|
||||
## v0.8.0
|
||||
|
||||
February 2026
|
||||
February 20, 2026
|
||||
|
||||
### New: `@json-render/react-pdf`
|
||||
|
||||
@@ -246,7 +480,7 @@ Supports custom catalogs with `defineRegistry`, server-safe imports via `@json-r
|
||||
|
||||
## v0.7.0
|
||||
|
||||
February 2026
|
||||
February 17, 2026
|
||||
|
||||
### New: `@json-render/shadcn`
|
||||
|
||||
@@ -337,7 +571,7 @@ Action bindings now support a `preventDefault` boolean field, allowing the LLM t
|
||||
|
||||
## v0.6.0
|
||||
|
||||
February 2026
|
||||
February 13, 2026
|
||||
|
||||
### New: Chat Mode (Inline GenUI)
|
||||
|
||||
@@ -479,7 +713,7 @@ See the [Migration Guide](/docs/migration) for detailed upgrade instructions.
|
||||
|
||||
## v0.5.0
|
||||
|
||||
February 2026
|
||||
February 9, 2026
|
||||
|
||||
### New: @json-render/react-native
|
||||
|
||||
@@ -598,7 +832,7 @@ Schema prompts now include streaming best practices, repeat/list examples, and s
|
||||
|
||||
## v0.4.0
|
||||
|
||||
February 2026
|
||||
February 5, 2026
|
||||
|
||||
### New: Custom Schema System
|
||||
|
||||
@@ -733,7 +967,7 @@ The dashboard example is now a full-featured accounting dashboard with:
|
||||
|
||||
## v0.3.0
|
||||
|
||||
January 2026
|
||||
January 20, 2026
|
||||
|
||||
Internal release with codegen foundations.
|
||||
|
||||
@@ -747,7 +981,7 @@ Internal release with codegen foundations.
|
||||
|
||||
## v0.2.0
|
||||
|
||||
January 2026
|
||||
January 14, 2026
|
||||
|
||||
Initial public release.
|
||||
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
# Chat Example
|
||||
|
||||
An AI-powered data explorer that streams rich, interactive UI directly into a chat interface. The assistant uses tool calls to fetch real data (weather, GitHub, crypto, Hacker News, web search), then generates a json-render spec that renders inline alongside the conversation using shadcn components, Recharts, and React Three Fiber.
|
||||
|
||||
## What it shows
|
||||
|
||||
- **Streaming specs inside chat messages** -- `pipeJsonRender` on the server merges the AI SDK UI stream with json-render spec patches so text, tool-call indicators, and rendered UI all appear in the correct order within a single message bubble.
|
||||
- **ToolLoopAgent with live data** -- the agent loops through tool calls (weather, GitHub repos/PRs, crypto prices, Hacker News, web search) to gather real data before generating UI.
|
||||
- **Full catalog/registry stack** -- a catalog constrains what the model can produce; the registry maps every component to a real React implementation (shadcn, Recharts charts, R3F 3D scenes).
|
||||
- **State and interactivity** -- `$state`, `$bindState`, visibility, and actions work inside the streamed spec, so the rendered UI is interactive, not static.
|
||||
|
||||
## Setup
|
||||
|
||||
```bash
|
||||
pnpm install # from the monorepo root
|
||||
cd examples/chat
|
||||
cp .env.example .env.local
|
||||
```
|
||||
|
||||
Set the required environment variables in `.env.local`:
|
||||
|
||||
| Variable | Required | Description |
|
||||
|----------|----------|-------------|
|
||||
| `AI_GATEWAY_API_KEY` | Yes | Vercel AI Gateway key (auto-authenticated on Vercel) |
|
||||
| `AI_GATEWAY_MODEL` | No | Model identifier, defaults to `anthropic/claude-haiku-4.5` |
|
||||
| `KV_REST_API_URL` | No | Upstash Redis URL for rate limiting |
|
||||
| `KV_REST_API_TOKEN` | No | Upstash Redis token |
|
||||
| `RATE_LIMIT_PER_MINUTE` | No | Defaults to `10` |
|
||||
| `RATE_LIMIT_PER_DAY` | No | Defaults to `100` |
|
||||
|
||||
Rate limiting is a no-op when the Upstash variables are not set.
|
||||
|
||||
## Run
|
||||
|
||||
```bash
|
||||
pnpm dev
|
||||
# http://chat-demo.json-render.localhost:1355
|
||||
```
|
||||
|
||||
Requires global [`portless`](https://github.com/vercel-labs/portless). The `predev` script checks for it automatically.
|
||||
|
||||
## Files
|
||||
|
||||
- `app/page.tsx` -- chat UI with `useChat`, message rendering, and inline spec display
|
||||
- `app/api/generate/route.ts` -- streams the agent through `pipeJsonRender` with optional Upstash rate limiting
|
||||
- `lib/agent.ts` -- `ToolLoopAgent` with system prompt from `explorerCatalog.prompt()` and custom rules for layout, 3D, and interactivity
|
||||
- `lib/tools/` -- tool definitions for weather, GitHub, crypto, Hacker News, and web search
|
||||
- `lib/render/catalog.ts` -- component catalog (shadcn base + custom metrics, tables, charts, tabs, 3D)
|
||||
- `lib/render/registry.tsx` -- maps catalog types to React components (shadcn, Recharts, R3F)
|
||||
- `lib/render/renderer.tsx` -- `ExplorerRenderer` wrapping `StateProvider`, `VisibilityProvider`, `ActionProvider`, and `Renderer`
|
||||
@@ -0,0 +1,58 @@
|
||||
# Dashboard Example
|
||||
|
||||
AI-generated dashboard widgets with guardrails. Each widget is streamed from an LLM, constrained by a json-render catalog, and rendered with shadcn components and Recharts. Widgets can fetch and mutate data through named actions that hit a real REST API backed by Postgres.
|
||||
|
||||
## What it shows
|
||||
|
||||
- **Streaming widget generation** -- `useUIStream` streams JSONL patches from the server, progressively building each widget's spec.
|
||||
- **Catalog-constrained actions** -- the catalog declares typed actions (`viewCustomers`, `createInvoice`, `approveExpense`, etc.) that map to REST endpoints; the registry wires them to real `fetch` calls with toast feedback.
|
||||
- **Persistence** -- widget prompts and specs are saved to Postgres via Drizzle ORM, so widgets survive page reloads.
|
||||
- **Drag-and-drop reorder** -- `@dnd-kit` lets you rearrange widgets, with ordering persisted to the database.
|
||||
- **Edit mode** -- send a follow-up prompt to iteratively refine a saved widget.
|
||||
|
||||
## Setup
|
||||
|
||||
```bash
|
||||
pnpm install # from the monorepo root
|
||||
cd examples/dashboard
|
||||
cp .env.example .env
|
||||
```
|
||||
|
||||
Set the required environment variables:
|
||||
|
||||
| Variable | Required | Description |
|
||||
|----------|----------|-------------|
|
||||
| `DATABASE_URL` | Yes | Postgres connection string |
|
||||
| `AI_GATEWAY_API_KEY` | Yes | Vercel AI Gateway key |
|
||||
| `AI_GATEWAY_MODEL` | No | Defaults to `anthropic/claude-haiku-4.5` |
|
||||
| `KV_REST_API_URL` | No | Upstash Redis URL for rate limiting |
|
||||
| `KV_REST_API_TOKEN` | No | Upstash Redis token |
|
||||
| `RATE_LIMIT_PER_MINUTE` | No | Defaults to `10` |
|
||||
| `RATE_LIMIT_PER_DAY` | No | Defaults to `100` |
|
||||
|
||||
Set up the database:
|
||||
|
||||
```bash
|
||||
pnpm db:push # apply the schema to your database
|
||||
pnpm db:seed # optional: populate with sample data
|
||||
```
|
||||
|
||||
## Run
|
||||
|
||||
```bash
|
||||
pnpm dev
|
||||
# http://dashboard-demo.json-render.localhost:1355
|
||||
```
|
||||
|
||||
Requires global [`portless`](https://github.com/vercel-labs/portless). The `predev` script checks for it automatically.
|
||||
|
||||
## Files
|
||||
|
||||
- `app/page.tsx` -- dashboard grid with drag-and-drop, widget management, and add/edit flows
|
||||
- `app/api/generate/route.ts` -- streams text from the model using `dashboardCatalog.prompt()` as the system prompt
|
||||
- `app/api/v1/` -- REST API for widgets, customers, invoices, expenses, accounts, and reports
|
||||
- `lib/render/catalog.ts` -- component catalog with shadcn-based UI primitives and typed business actions
|
||||
- `lib/render/registry.tsx` -- maps components to React (shadcn + Recharts) and wires actions to REST calls
|
||||
- `lib/render/renderer.tsx` -- `DashboardRenderer` with state, visibility, and action providers
|
||||
- `lib/db/schema.ts` -- Drizzle schema for customers, invoices, expenses, accounts, transactions, and widgets
|
||||
- `components/widget.tsx` -- individual widget with `useUIStream`, auto-action execution, and save/edit logic
|
||||
@@ -0,0 +1,58 @@
|
||||
# Game Engine Example
|
||||
|
||||
A 3D scene editor and lightweight game runtime built with json-render, React Three Fiber, and Rapier physics. Edit levels as structured objects, preview them on a canvas, then press play for first/third-person movement, physics, health/damage, NPCs, and optional AI-assisted editing.
|
||||
|
||||
## What it shows
|
||||
|
||||
- **3D rendering with json-render** -- the editor's scene graph is converted to a json-render `Spec` via `sceneToSpec`, then rendered with `ThreeRenderer` and the `@json-render/react-three-fiber` registry.
|
||||
- **AI scene editing** -- type a prompt in the editor sidebar; the server streams YAML patches that are merged into the current spec, updating the 3D scene in real time.
|
||||
- **In-game AI** -- while playing, an AI agent can manipulate the scene by streaming JSONL function calls (`addObject`, `updateObjectTransform`, etc.).
|
||||
- **Play mode with physics** -- toggle between edit mode (gizmos, selection) and play mode (Rapier physics, first/third-person controls, health, damage zones, collectibles).
|
||||
- **NPC dialogue with optional TTS** -- `GameCharacter` components support AI-generated dialogue, with optional ElevenLabs text-to-speech.
|
||||
- **GLB uploads** -- upload custom 3D models and environments via Vercel Blob.
|
||||
|
||||
## Setup
|
||||
|
||||
```bash
|
||||
pnpm install # from the monorepo root
|
||||
cd examples/game-engine
|
||||
cp .env.example .env
|
||||
```
|
||||
|
||||
Set the required environment variables:
|
||||
|
||||
| Variable | Required | Description |
|
||||
|----------|----------|-------------|
|
||||
| `AI_GATEWAY_API_KEY` | Yes | Vercel AI Gateway key |
|
||||
| `AI_GATEWAY_MODEL` | No | Defaults to `anthropic/claude-sonnet-4-6` |
|
||||
| `ELEVENLABS_API_KEY` | No | Enables text-to-speech for NPC dialogue |
|
||||
| `KV_REST_API_URL` | No | Upstash Redis URL for rate limiting |
|
||||
| `KV_REST_API_TOKEN` | No | Upstash Redis token |
|
||||
| `RATE_LIMIT_PER_MINUTE` | No | Defaults to `10` |
|
||||
| `RATE_LIMIT_PER_DAY` | No | Defaults to `100` |
|
||||
|
||||
Model/environment uploads require Vercel Blob configuration when deployed.
|
||||
|
||||
## Run
|
||||
|
||||
```bash
|
||||
pnpm dev
|
||||
# http://game-engine-demo.json-render.localhost:1355
|
||||
```
|
||||
|
||||
Requires global [`portless`](https://github.com/vercel-labs/portless). The `predev` script checks for it automatically.
|
||||
|
||||
## Files
|
||||
|
||||
- `app/page.tsx` -- mounts `GameEngine`
|
||||
- `components/game-engine.tsx` -- main shell: R3F canvas, sidebars, play/edit mode toggle, AI prompt integration
|
||||
- `components/game/` -- game primitives (`GameBox`, `GameSphere`, `Player`, `GameCharacter`, etc.) with physics and interactions
|
||||
- `components/editor/` -- editor UI: object inspector, scene tree, AI prompt sidebar, gizmo controls
|
||||
- `components/hud/` -- in-game HUD: health bar, crosshair, in-game AI prompt
|
||||
- `app/api/ai/route.ts` -- streams YAML scene edits from the model
|
||||
- `app/api/ai-game/route.ts` -- streams JSONL function calls for in-game AI manipulation
|
||||
- `app/api/character-responses/route.ts` -- generates NPC dialogue, optionally with TTS
|
||||
- `lib/catalog.ts` -- 3D component catalog (R3F base + game-specific primitives)
|
||||
- `lib/registry.tsx` -- maps catalog types to R3F and game components
|
||||
- `lib/store.ts` -- Zustand store for scenes, selection, play mode, health, undo/redo
|
||||
- `lib/scene-to-spec.ts` / `lib/spec-to-scene.ts` -- converts between the editor's scene graph and json-render specs
|
||||
@@ -0,0 +1,47 @@
|
||||
# No-AI Example
|
||||
|
||||
Static JSON specs rendered with json-render -- no AI required. This example demonstrates that json-render works as a standalone UI renderer without any LLM, streaming, or backend. Hand-authored specs are rendered client-side with `JSONUIProvider` and `Renderer`.
|
||||
|
||||
## What it shows
|
||||
|
||||
- **json-render without AI** -- specs are plain JSON objects defined in code; no API routes, no streaming, no environment variables.
|
||||
- **Interactive forms** -- `$bindState` for two-way input binding, `$cond` for conditional visibility, `checks` for field validation, and a `validateForm` action.
|
||||
- **Computed functions** -- `$computed` with custom functions like `formatAddress` and `citiesForCountry` for derived values.
|
||||
- **Watch and cascading state** -- `watch` triggers `setState` actions when a value changes, enabling cascading select patterns.
|
||||
- **Templates** -- `$template` for string interpolation with state values.
|
||||
- **Custom actions** -- a `confetti` action wired to `react-confetti-explosion`.
|
||||
|
||||
## Demos
|
||||
|
||||
The app includes several tabbed demos:
|
||||
|
||||
- **Confetti** -- custom action integration
|
||||
- **Layouts** -- cards, stacks, grids, typography, badges, progress bars, pricing tables, status dashboards
|
||||
- **Forms** -- state binding, inputs, selects, switches, validation
|
||||
- **Registration form** -- `$template`, `$cond`, cross-field checks, `validateForm`, conditional visibility
|
||||
- **Cascading selects** -- `watch` + `setState`, `$computed`, `$template`
|
||||
|
||||
## Setup
|
||||
|
||||
```bash
|
||||
pnpm install # from the monorepo root
|
||||
cd examples/no-ai
|
||||
```
|
||||
|
||||
No environment variables are needed.
|
||||
|
||||
## Run
|
||||
|
||||
```bash
|
||||
pnpm dev
|
||||
# http://no-ai-demo.json-render.localhost:1355
|
||||
```
|
||||
|
||||
Requires global [`portless`](https://github.com/vercel-labs/portless). The `predev` script checks for it automatically.
|
||||
|
||||
## Files
|
||||
|
||||
- `app/page.tsx` -- tabbed gallery rendering each demo spec with `JSONUIProvider` and `Renderer`
|
||||
- `lib/examples.ts` -- all demo specs as static `Spec` objects
|
||||
- `lib/render/catalog.ts` -- component catalog using shadcn component definitions, with a `confetti` action and custom functions
|
||||
- `lib/render/registry.tsx` -- registry mapping shadcn components, the `confetti` action handler, and computed function implementations
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@json-render/codegen",
|
||||
"version": "0.17.0",
|
||||
"version": "0.18.0",
|
||||
"license": "Apache-2.0",
|
||||
"description": "Utilities for generating code from json-render UI trees",
|
||||
"keywords": [
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@json-render/core",
|
||||
"version": "0.17.0",
|
||||
"version": "0.18.0",
|
||||
"license": "Apache-2.0",
|
||||
"description": "JSON becomes real things. Define your catalog, register your components, let AI generate.",
|
||||
"keywords": [
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@json-render/devtools-react",
|
||||
"version": "0.17.0",
|
||||
"version": "0.18.0",
|
||||
"license": "Apache-2.0",
|
||||
"description": "React adapter for @json-render/devtools. Drop-in <JsonRenderDevtools /> component.",
|
||||
"keywords": [
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@json-render/devtools-solid",
|
||||
"version": "0.17.0",
|
||||
"version": "0.18.0",
|
||||
"license": "Apache-2.0",
|
||||
"description": "SolidJS adapter for @json-render/devtools. Drop-in <JsonRenderDevtools /> component.",
|
||||
"keywords": [
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@json-render/devtools-svelte",
|
||||
"version": "0.17.0",
|
||||
"version": "0.18.0",
|
||||
"license": "Apache-2.0",
|
||||
"description": "Svelte adapter for @json-render/devtools. Drop-in <JsonRenderDevtools /> component.",
|
||||
"keywords": [
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@json-render/devtools-vue",
|
||||
"version": "0.17.0",
|
||||
"version": "0.18.0",
|
||||
"license": "Apache-2.0",
|
||||
"description": "Vue adapter for @json-render/devtools. Drop-in <JsonRenderDevtools /> component.",
|
||||
"keywords": [
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@json-render/devtools",
|
||||
"version": "0.17.0",
|
||||
"version": "0.18.0",
|
||||
"license": "Apache-2.0",
|
||||
"description": "Framework-agnostic devtools core for json-render: event store, panel UI, picker, stream taps.",
|
||||
"keywords": [
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@json-render/image",
|
||||
"version": "0.17.0",
|
||||
"version": "0.18.0",
|
||||
"license": "Apache-2.0",
|
||||
"description": "Image renderer for @json-render/core. JSON becomes SVG and PNG images via Satori.",
|
||||
"keywords": [
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@json-render/ink",
|
||||
"version": "0.17.0",
|
||||
"version": "0.18.0",
|
||||
"license": "Apache-2.0",
|
||||
"description": "Ink terminal renderer for @json-render/core. JSON becomes terminal UIs.",
|
||||
"keywords": [
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@json-render/jotai",
|
||||
"version": "0.17.0",
|
||||
"version": "0.18.0",
|
||||
"license": "Apache-2.0",
|
||||
"description": "Jotai adapter for json-render StateStore",
|
||||
"keywords": [
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@json-render/mcp",
|
||||
"version": "0.17.0",
|
||||
"version": "0.18.0",
|
||||
"license": "Apache-2.0",
|
||||
"description": "MCP Apps integration for @json-render/core. Serve json-render UIs as interactive MCP Apps in Claude, ChatGPT, Cursor, and VS Code.",
|
||||
"keywords": [
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@json-render/next",
|
||||
"version": "0.17.0",
|
||||
"version": "0.18.0",
|
||||
"license": "Apache-2.0",
|
||||
"description": "Next.js renderer for @json-render/core. JSON becomes full Next.js applications with routes, layouts, metadata, and SSR.",
|
||||
"keywords": [
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@json-render/react-email",
|
||||
"version": "0.17.0",
|
||||
"version": "0.18.0",
|
||||
"license": "Apache-2.0",
|
||||
"description": "React Email renderer for @json-render/core. JSON becomes HTML emails.",
|
||||
"keywords": [
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@json-render/react-native",
|
||||
"version": "0.17.0",
|
||||
"version": "0.18.0",
|
||||
"license": "Apache-2.0",
|
||||
"description": "React Native renderer for @json-render/core. JSON becomes React Native components.",
|
||||
"keywords": [
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@json-render/react-pdf",
|
||||
"version": "0.17.0",
|
||||
"version": "0.18.0",
|
||||
"license": "Apache-2.0",
|
||||
"description": "React PDF renderer for @json-render/core. JSON becomes PDF documents.",
|
||||
"keywords": [
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@json-render/react-three-fiber",
|
||||
"version": "0.17.0",
|
||||
"version": "0.18.0",
|
||||
"license": "Apache-2.0",
|
||||
"description": "React Three Fiber renderer for @json-render/core. JSON becomes 3D scenes.",
|
||||
"keywords": [
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@json-render/react",
|
||||
"version": "0.17.0",
|
||||
"version": "0.18.0",
|
||||
"license": "Apache-2.0",
|
||||
"description": "React renderer for @json-render/core. JSON becomes React components.",
|
||||
"keywords": [
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@json-render/redux",
|
||||
"version": "0.17.0",
|
||||
"version": "0.18.0",
|
||||
"license": "Apache-2.0",
|
||||
"description": "Redux adapter for json-render StateStore",
|
||||
"keywords": [
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@json-render/remotion",
|
||||
"version": "0.17.0",
|
||||
"version": "0.18.0",
|
||||
"license": "Apache-2.0",
|
||||
"description": "Remotion renderer for @json-render/core. JSON becomes video compositions.",
|
||||
"keywords": [
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@json-render/shadcn-svelte",
|
||||
"version": "0.17.0",
|
||||
"version": "0.18.0",
|
||||
"license": "Apache-2.0",
|
||||
"description": "shadcn-svelte component library for @json-render/svelte. JSON becomes beautiful Tailwind-styled Svelte components.",
|
||||
"keywords": [
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@json-render/shadcn",
|
||||
"version": "0.17.0",
|
||||
"version": "0.18.0",
|
||||
"license": "Apache-2.0",
|
||||
"description": "shadcn/ui component library for @json-render/core. JSON becomes beautiful Tailwind-styled React components.",
|
||||
"keywords": [
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@json-render/solid",
|
||||
"version": "0.17.0",
|
||||
"version": "0.18.0",
|
||||
"license": "Apache-2.0",
|
||||
"description": "SolidJS renderer for @json-render/core. JSON becomes Solid components.",
|
||||
"keywords": [
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@json-render/svelte",
|
||||
"version": "0.17.0",
|
||||
"version": "0.18.0",
|
||||
"license": "Apache-2.0",
|
||||
"description": "Svelte 5 renderer for @json-render/core. JSON becomes Svelte components.",
|
||||
"keywords": [
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@json-render/vue",
|
||||
"version": "0.17.0",
|
||||
"version": "0.18.0",
|
||||
"license": "Apache-2.0",
|
||||
"description": "Vue renderer for @json-render/core. JSON becomes Vue components.",
|
||||
"keywords": [
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@json-render/xstate",
|
||||
"version": "0.17.0",
|
||||
"version": "0.18.0",
|
||||
"license": "Apache-2.0",
|
||||
"description": "XState Store adapter for json-render StateStore",
|
||||
"keywords": [
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@json-render/yaml",
|
||||
"version": "0.17.0",
|
||||
"version": "0.18.0",
|
||||
"license": "Apache-2.0",
|
||||
"description": "YAML wire format for @json-render/core. Progressive rendering and surgical edits via streaming YAML.",
|
||||
"keywords": [
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@json-render/zustand",
|
||||
"version": "0.17.0",
|
||||
"version": "0.18.0",
|
||||
"license": "Apache-2.0",
|
||||
"description": "Zustand adapter for json-render StateStore",
|
||||
"keywords": [
|
||||
|
||||
Reference in New Issue
Block a user