jev-ui
React components that use Jev judgments to choose which component renders, how lists are ordered and whether affordances show.
Overview
jev-ui is a React library for interfaces that adapt from calibrated judgments returned by TypeSafe's Jev. <Branch> picks one subtree from several options with a no-match fallback (a Choice), <Rank> orders, filters and truncates a candidate set (a Choice or one Score per item), and <Gate> shows an affordance when a Noul condition holds. A useScore hook turns a scale described in words into a number usable as a prop, such as how many rows to load or whether to show help text.
A provider plus a ready-made Next.js Server Action keeps the API key server-side. State is merged from ambient signals such as recent actions and time spent, app-level scope and local call-site data, and telemetry is projected into words before reaching the model. All judgments in one render pass go in one request, so additional questions are close to free, and each component reports its cost. The stated rule is that judgment picks presentation while code owns actions: nothing submits forms, spends money or deletes data. Transports include live, record, replay and mock. It is on npm with CI.
What the decision model decides
| Type | Question | Answers |
|---|---|---|
| Choice | Which view best answers the question in data.question? | chart · table · fallback |
| Yes / no | Should this affordance be shown given the current state? | — |
| Score | How much (e.g. detail level or rows to load) given the state? | — |
How it works
- Wrap the app in JevProvider with a server action
- Declare Branch, Rank, Gate or useScore with plain-language criteria
- All judgments in a render pass go in one request
- Components render according to answers above minConfidence, else fallback
Strengths
- Key stays on the server
- One request per render pass; cost reported per component
- Record and replay transports for testing
- Judgment never triggers side effects
Caveats
- Adds model latency to rendering decisions
- Requires Next.js-style server actions for the default setup
Getting started
bun add jev-ui (or npm install jev-ui), set TYPESAFE_API_KEY in .env, wrap the app in JevProvider with askJev.At a glance
- Type
- Project
- Status
- beta
- Language
- TypeScript
- Runtime
- React / Next.js
- Has code
- yes
- Has tests
- yes
Use cases and integrations
How curated lists describe it
React components that resolve which component to render, how to order a list, and whether to show an affordance — from calibrated judgments returned by TypeSafe's Jev.
hellogumbo/awesome-jev
Frequently asked questions
What components does jev-ui provide?
Branch, Rank and Gate, plus a useScore hook and state helpers.
Can Jev trigger actions in my app?
No. It only picks presentation; code owns all actions.
Can I test without calling the API?
Yes, use record, replay or mock transports.
Related projects
Vercel 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.
LibraryprototypeTypeScriptPlayground comparing generative UI via an LLM writing json-render specs with Jev choosing and arranging prepared components.
LibraryprototypeTypeScriptLibrary that composes typed Jev judgments like reactive state in React and backend programs, with automatic batching and reuse.
HookbetaTypeScriptPrompt-first music studio where Jev makes every compositional choice, from plan to each bar pattern, rendered as editable MIDI.
ProjectbetaTypeScript