mirror of
https://github.com/vercel-labs/json-render.git
synced 2026-10-03 12:28:17 +08:00
Compare commits
1
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
7edecbc599 |
@@ -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
|
||||
Reference in New Issue
Block a user