Loading pattern preview
BlocksArtifacts
Jev JSON Render
Jev JSON Render
Compose an account settings form by letting Jev select prepared json-render candidates.
Use this when users request UI edits that add, remove, or replace prepared elements in a json-render spec, and the model must not write new prose.
Loading pattern preview
Problems solved
Technical challenges this implementation handles out of the box.
- Compose a UI by selecting prepared json-render candidates
- Keep copy, bindings, and actions under application control
- Edit a selected spec without inventing new prose
Use cases
Products and workflows this pattern is designed to support.
- Account settings composed from a fixed design system
- Follow-up edits that add, remove, or replace prepared elements
- Teaching experimental json-render composition
Compare with
Similar patterns, and when each one is the better fit.
Jev Composite ScorecardUse this when one blended rubric hides which factor failed and you want atomic Jev scores merged into a single weighted score in your app.
Jev Output VerifierUse this when you want your own code to hold the confidence floor a draft answer must clear before display, with at most one retry on a miss.
JSON Render ReactUse this when you want to define your own small component catalog and render streamed JSON specs with the base @json-render React renderer.
JSON Render EmailUse this when you need to turn a prompt into a React Email template and copy out its HTML and plain-text versions after previewing it.
Setup
Requirements, wiring steps, and what this pattern adds to your project.
Getting started
Pick how you want to pull this pattern in. Then wire env vars and routes the same way.
- 1
Download → Next.js app
Use Download → Next.js app in the preview toolbar. You get a zip scaffold (Pro downloads rewrite preview `/view/.../api/*` paths to `/api/*` automatically).
- 2
Extract the zip and install dependencies
Unzip the archive, then run `pnpm install` (or npm / yarn) in the project folder.
- 3
Fill .env.local
The download includes .env.local placeholders when needed. Add real values for: AI_GATEWAY_API_KEY.
- 4
Customize the agent and tool files
Adapt prompts, tools, and stop conditions in the generated project for your product.
- 5
Run the app and open the pattern route
Run `pnpm dev`, open the setup/checklist page if present, then navigate to the generated pattern route and verify responses.
Environment variables
AI_GATEWAY_API_KEYGet key
Capabilities
Providers
Jev
External services
gatewayvercel-ai-gatewayUpstash
Files added
14 files
app/page.tsxapp/layout.tsxapp/api/compose/route.tscomponents/compose-demo.tsxcomponents/typesafe-ai.tsxhooks/use-compose-spec.tslib/catalog.tslib/candidates.tslib/record.tslib/compose-events.tslib/registry.tsxlib/rate-limit.tslib/request-utils.tsREADME.md
Dependencies
10 total
npm packages
8@json-render/core@json-render/react@json-render/shadcnUpstashlucide-reactNext.jsReactZod
Registry components
buttontextarea
Critical files
3 files
lib/candidates.tsPrepared composition candidates. Jev may only select these elements. Descriptions carry the choice; props, bindings, and actions stay concrete.
lib/catalog.tsjson-render catalog the candidates validate against, including local savePreferences and resetForm actions.
compose/route.tsServer-only experimental_createEvaluator and experimental_composeSpec call. Streams full spec snapshots as NDJSON. Does not execute actions.
Requirements
- Complexity
- Intermediate
- Setup time
- ~10 minutes
- Node
- 24+
- Memory
- 256MB
Upstash Redis for deployed demo rate limiting
