Compare commits

...
Author SHA1 Message Date
Chris Tate 7edecbc599 docs(examples): add READMEs to chat, dashboard, game-engine, and no-ai examples
These high-traffic examples had no README, requiring contributors to
read source code or root docs to understand setup and purpose.
2026-04-27 09:42:38 -05:00
4 changed files with 213 additions and 0 deletions
+50
View File
@@ -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`
+58
View File
@@ -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
+58
View File
@@ -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
+47
View File
@@ -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