json-renderer
Playground comparing generative UI via an LLM writing json-render specs with Jev choosing and arranging prepared components.
Overview
This json-render plus Jev playground builds the same generative UI three ways using the same catalog, renderer and components. In LLM mode, a model writes the json-render spec token by token as JSON patches. In Jev mode, Jev picks and arranges prepared component candidates and json-render turns those choices into the same spec; new UIs take two evaluations and produce no output tokens. A hybrid experiment has Jev choose layout while an LLM fills content props such as headings and labels, with facts, data bindings and actions kept under app control.
A stopwatch and scoreboard compare completed runs, and a stream tab shows either the LLM's patches or Jev's decisions with confidence. One OpenRouter key powers all modes, with Claude Haiku as the default LLM and typesafe/jev-1.13 for Jev through the AI SDK's experimental evaluate API. Follow-up prompts can edit the layout. The README says the hybrid's value over a fixed layout plus an LLM is not established, and package versions are pinned because the Jev APIs are experimental.
What the decision model decides
| Type | Question | Answers |
|---|---|---|
| Choice | Which prepared component candidates should appear, and in what order? | — |
How it works
- User describes a UI, such as a sales dashboard
- LLM mode streams a spec; Jev mode chooses among candidates
- json-render assembles the spec and renders it
- Hybrid mode adds LLM-written content props
- Scoreboard compares timings across modes
Strengths
- Direct side-by-side comparison on one catalog
- Jev mode produces no output tokens
- Single OpenRouter key for everything
Caveats
- Experimental APIs pinned to exact versions
- Hybrid value not established
- Jev mode limited to prepared candidates
Getting started
bun install, cp .env.example .env.local (add OPENROUTER_API_KEY), bun dev.At a glance
- Type
- Library
- Status
- prototype
- Language
- TypeScript
- Runtime
- Next.js app
- Has code
- yes
Use cases and integrations
How curated lists describe it
Generative UI two ways: json-render with an LLM vs Jev (TypeSafe System One), via the AI SDK and OpenRouter.
hellogumbo/awesome-jev
Frequently asked questions
What does Jev decide?
Which prepared components to include and how to arrange them.
Is Jev faster than the LLM here?
The app measures both with a stopwatch; Jev mode needs two evaluations and no output tokens.
What keys do I need?
One OpenRouter key for both the LLM and Jev.
Related projects
React components that use Jev judgments to choose which component renders, how lists are ordered and whether affordances show.
ProjectbetaTypeScriptVercel Labs' generative UI framework with an experimental compose path where Jev picks which catalog components and actions to render.
ServicebetaTypeScriptCommunity shadcn-style React components and interactive lab for building TypeSafe AI interfaces.
ProjectbetaTypeScriptVideo demo app showing Jev use cases with the AI SDK and shadcn/ui, from intent search and model picking to chat moderation.
LibraryprototypeTypeScriptLibrary that composes typed Jev judgments like reactive state in React and backend programs, with automatic batching and reuse.
HookbetaTypeScriptLocal natural-language task workspace where Jev, OpenAI or Gemini turn requests into view and task changes, with speed and cost comparisons.
AppprototypeTypeScript