Can AI pick your React view?
Published
Jev UI is a React library that asks the Jev model to choose between components you supply. A free-text request can select a chart or a table without generating new components.
Explanation & code
Reviewed jev-ui 0.0.2. This demo injects test answers; it does not measure a live model. Confidence is not correctness. Set an explicit cutoff and fallback, keep model keys and access checks on the server, and use a direct condition for known button choices.
Understand it. Then fix it.
Two existing views, one free-text request
The user asks “Show the trend.” We already wrote Chart and Table. The Jev model chooses a key; the library renders its matching child. It does not write the components or change the numbers.
Supply the question, choices and fallback
This component runs inside JevProvider, connected to your server resolver. The 0.8 confidence cutoff is our explicit example policy, not the default or a universal recommendation. Both Chart and Table receive the same already-authorized data.
function ViewPicker({ question }: { question: string }) {
return (
<Branch
ask="Pick a view for `data.question`."
data={{ question }}
minConfidence={0.8}
>
<Option k="chart" when="Show a trend.">
<Chart />
</Option>
<Option k="table" when="Read exact values.">
<Table />
</Option>
<Option fallback><Table /></Option>
</Branch>
);
}Connect the provider to your server
Import these components from jev-ui. serverResolver is your application-specific function that calls a protected server endpoint and returns the library ResolveOutcome. Keep the model credential server-side; authenticate requests, rate-limit usage and authorize data independently. This excerpt deliberately does not invent an unauthenticated endpoint.
import { Branch, JevProvider, Option } from "jev-ui";
// serverResolver is supplied by your application.
<JevProvider resolve={serverResolver}>
<ViewPicker question="Show the trend." />
</JevProvider>Follow the actual decision
With our injected test answers: chart at 0.9 renders Chart; chart at 0.4 renders the fallback Table. Exactly 0.8 is accepted. Pending, failed, unknown and no-match answers also render the supplied table. These are component behavior tests, not live model results.
A known choice needs no model
If a button already set view to chart, use an ordinary condition. Evaluate Jev UI as an early experiment for optional presentation based on free text. Never use model confidence as authorization or as a correctness guarantee.
view === "chart"
? <Chart />
: <Table />Code blocks are teaching excerpts. Keep the surrounding error handling and application requirements.
Save the code excerpts ↓Read the full transcript
Can artificial intelligence pick the right React view? A chart, or a table? Yes. Jev UI is a React library. It uses the Jev model to pick from components you supply. It does not write new components. Here, we supply a chart and a table. The user wants to see a trend. Branch sends that text and our question through a resolver: a function that gets the model answer. Keep the model key on your server. Each Option gives a reason to pick it. Chart for a trend. Table for exact values. The chosen key decides which component appears. We set the confidence cutoff to point eight, and add a fallback table. With these test answers, chart at point nine shows the chart. At point four, it shows the fallback. Pending answers and errors also show the table. So a high confidence score means it picked the right view? No. That score is not a guarantee. Test real requests. This is an early release. Try it for optional views from free text. Never let a model decide who may see private data. If the user clicks a Chart button, you already know the choice. Use a normal condition. No model needed. Great. The model chooses the chart. I still get blamed for the numbers.
