From LLM JSON to Real UI: Building Safer AI Interfaces with GenUIKit

Mohammad Ashrafian — Sun, 12 Apr 2026 10:49:10 +0000

Most AI UI demos look great right up until the model returns something slightly wrong.

Maybe the component name is not valid.
Maybe a required prop is missing.
Maybe an enum value is close, but still wrong.
Maybe the JSON is malformed.

That is the gap I wanted to solve with GenUIKit.

GenUIKit is an open-source TypeScript toolkit for turning LLM output into real UI components safely. It sits between the model and your frontend, validates the output against schemas, generates correction prompts when the output is wrong, and gives you a clean way to render trusted results in React.

This post walks through the problem, the mental model, and the pattern GenUIKit is built for.

The core idea

Instead of asking the model to generate arbitrary frontend code, you let it choose from components your app already owns.

That means the model can return something like this:

{
  "type": "WeatherCard",
  "props": {
    "city": "New York",
    "temperature": 18,
    "condition": "Cloudy"
  }
}

That JSON is what I mean by UI-shaped JSON.

It is not raw HTML.
It is not JSX.
It is not executable code.

It is just structured data that says:

which component to render
which props to pass

The app still controls the real UI.
The model is only choosing from a predefined set of allowed components.

Why this gets messy fast

If you build this manually, the pattern usually looks like this:

if (output.type === 'WeatherCard') {
  // validate props
  // coerce values
  // render component
} else if (output.type === 'Table') {
  // validate props
  // handle edge cases
  // render component
} else if (output.type === 'Alert') {
  // validate props
  // render component
}

That works in a demo.

Then the real problems start:

the model returns malformed JSON
the component name is unknown
the props are the wrong shape
the output is almost correct, but not quite
you end up writing ad-hoc retry prompts
validation logic gets duplicated across the server and client
the browser ships validation code it does not really need

The project ends up with a surprising amount of glue code for something that looked simple on day one.

What GenUIKit actually provides

I do not think GenUIKit replaces your whole AI app.
It is much more specific than that.

It tries to own the boundary between LLM output and real UI rendering:

register allowed components
validate { type, props } against schemas
normalize defaults and reject invalid output
generate correction prompts automatically
support retry loops
render validated output in React
support streaming and action-oriented flows
support a server-validated lightweight client mode

What it does not replace:

your prompts
your business logic
your data fetching
your auth or persistence
your design system

It is infrastructure for model-driven UI, not a full app framework.

A simple example

Let’s say we want the model to choose whether to show a weather card.

import { z } from 'zod';
import { ComponentRegistry } from '@genuikit/core';
import { useGenerativeUI } from '@genuikit/react';

const weatherCardSchema = z.object({
  city: z.string(),
  temperature: z.number(),
  condition: z.enum(['Sunny', 'Cloudy', 'Rainy', 'Snowy']),
});

function WeatherCard({
  city,
  temperature,
  condition,
}: z.infer<typeof weatherCardSchema>) {
  return (
    <div>
      <h3>{city}</h3>
      <p>{temperature}°C</p>
      <p>{condition}</p>
    </div>
  );
}

const registry = new ComponentRegistry();
registry.register('WeatherCard', weatherCardSchema, WeatherCard);

function AssistantMessage({
  output,
}: {
  output: { type: string; props: Record<string, unknown> };
}) {
  const { element, ok, correctionPrompt } = useGenerativeUI(registry, output);

  if (!ok) {
    console.log(correctionPrompt);
    return <div>Trying again...</div>;
  }

  return <>{element}</>;
}

If the model returns valid output, the component renders.

If the model returns invalid output, GenUIKit gives you a correction prompt you can send back to the model.

What happens when the model gets it wrong?

Imagine the model returns this:

{
  "type": "WeatherCard",
  "props": {
    "city": "New York",
    "temperature": "18",
    "condition": "Mostly cloudy"
  }
}

That looks close, but it is still wrong.

temperature should be a number
condition should match the enum

GenUIKit catches that before render and can produce a correction prompt that says, in effect:

this component failed validation
here are the invalid fields
here is the expected shape
please send corrected props

That makes retries much more consistent than hand-writing one-off “please fix your JSON” prompts everywhere in the app.

The safer rendering model

One thing I try to be careful about is not overstating what “safe” means here.

GenUIKit does not mean:

“let the model generate arbitrary code”
“render any JSON and hope React survives”
“you no longer need normal frontend error handling”

What it does mean is:

parse the model response
reject malformed JSON before render
verify that the component name is registered
validate props against a schema
only then hand the output to React

That sharply reduces the surface area of failure.

If one of your own registered components throws with valid props, that is still a normal app bug, and you should still use React error boundaries where appropriate.

So the claim is really safe contract boundary, not “magic immunity from UI bugs.”

Server-validated + lightweight client rendering

This is the part I’m most excited about right now.

A lot of apps do not need to ship schema validation to the browser at all.

If the server already validated the model output, the client can stay render-only.

Server:

import { ComponentRegistry } from '@genuikit/core';

const registry = new ComponentRegistry();
registry.register('WeatherCard', weatherCardSchema, WeatherCard);

const result = registry.validateOutput(modelOutput);

if (result.ok) {
  return result.output;
}

Client:

import { ComponentRenderRegistry } from '@genuikit/core/client';
import { useValidatedUI } from '@genuikit/react/client';

const renderRegistry = new ComponentRenderRegistry();
renderRegistry.register('WeatherCard', WeatherCard);

function TrustedMessage({
  output,
}: {
  output: { type: string; props: Record<string, unknown> };
}) {
  const { element } = useValidatedUI(renderRegistry, output);
  return <>{element}</>;
}

That gives you a cleaner separation:

server owns validation and retry logic
client only renders trusted payloads

In the real examples/chat-demo inside the GenUIKit monorepo, this reduced the browser bundle from about 78.4 KB gzip to 50.1 KB gzip.

There is a real demo app in the repo

I wanted this to be more than a toy snippet, so there is a full chat example in the repository:

examples/chat-demo
real chat UI
OpenAI / Anthropic support
LLM JSON -> validation -> correction prompt -> retry -> render
server-validated lightweight client rendering

There are also smaller examples for:

basic registry usage
streaming UI
bidirectional actions

When this pattern makes sense

I think this approach is useful when:

the model needs to choose what UI to show
you want structured, typed UI output instead of free-form text
you care about safe rendering boundaries
you want a repeatable retry/correction flow
you want to keep the browser light by validating on the server

I do not think you need this when:

your UI is fully deterministic
plain text responses are enough
you are not actually rendering model-driven components

Final thought

The interesting problem for AI UI is not “can the model output JSON?”

The interesting problem is:

Can we build a reliable contract between model output and real product UI?

That is the piece GenUIKit is focused on.

If you want to explore it:

Repo: github.com/mohammadashrafian/genuikit
Docs: genuikit-docs.vercel.app

If you try it, I’d especially love feedback on the server/client split and whether the correction-prompt model feels right in practice.

DEV Community: Mohammad Ashrafian