json-render 2026: Generative UI mit LLM oder Jev

Robin Werner, AI-Engineering-Consultant bei Pexon Consulting | 9 Min. Lesezeit | 01.10.2026

TL;DR: json-render in fünf Sätzen

json-render ist das Generative-UI-Framework von Vercel Labs: Ein Modell beschreibt eine Oberfläche als JSON, Ihre eigenen React-Komponenten rendern sie. Seit Version 0.21.0 vom 18.09.2026 kann statt eines LLM auch das Entscheidungsmodell Jev die Spec zusammensetzen. Pexon Consulting hat Repo, Doku und eine Demo ausgewertet. Unser Urteil: Komponenten wiederverwenden ja, ganze Seiten generieren nein.

Das Problem: Agenten antworten mit Text, Nutzer brauchen Formulare

Ein Agent, der auf „zeig mir die Umsätze dieser Woche“ mit drei Absätzen Fließtext antwortet, hat die Frage beantwortet und trotzdem nicht geholfen. Gewollt war eine Tabelle, eine Kennzahl und ein Diagramm. Und wer im Chat seine Kontoeinstellungen ändern will, braucht ein Eingabefeld mit Speichern-Knopf, keine Anleitung, wo die Einstellungsseite liegt.

Der naheliegende Reflex ist, das LLM direkt HTML oder JSX schreiben zu lassen. Das funktioniert in der Demo und scheitert im Betrieb: Das Modell erfindet Komponenten, die es nicht gibt, ignoriert das Designsystem und erzeugt Markup, das niemand sicherheitlich geprüft hat.

json-render dreht das um. Sie legen fest, welche Komponenten und Aktionen es gibt, das Modell darf nur innerhalb dieses Katalogs bauen. Genau diesen Ansatz zeigt Kristian in seinem Video Generative UI with json-render: LLM vs Jev an einem Verkaufs-Dashboard, einmal mit einem LLM, einmal mit Jev. Wir haben das Video, das Repository und die Jev-Doku durchgearbeitet. Eine eigene Lastmessung haben wir nicht gefahren, die Sekundenwerte in der Tabelle oben stammen aus der Demo.

Wie json-render funktioniert: Katalog, Spec, Registry

Die kurze Antwort: drei Bausteine, und nur einer davon ist KI.

Der Katalog beschreibt mit Zod-Schemas, welche Komponenten mit welchen Props existieren und welche Aktionen ausgelöst werden dürfen. Aus diesem Katalog erzeugt catalog.prompt() den System-Prompt für das Modell, inklusive Komponentenbeschreibungen, Prop-Schemas und Ausgabeformat. Sie pflegen also eine Quelle, nicht Katalog und Prompt getrennt.

Die Spec ist das, was das Modell liefert: eine flache Struktur mit root und einer elements-Map, jedes Element mit ID, Typ, Props und Kindern. Props können über { "$state": "/pfad" } Werte aus dem App-State lesen, Buttons verweisen auf benannte Aktionen, die Ihr Code behandelt.

Die Registry ordnet jedem Katalog-Typ eine echte React-Komponente zu. Der Renderer läuft die Spec ab und zeichnet. Neben React gibt es Renderer für Vue, Svelte, Solid, React Native, PDF, E-Mail und sogar Terminal-UIs.

Stand 01.10.2026: Version 0.21.0, 18.470 GitHub-Sterne, Apache-2.0, letzter Commit am selben Tag. Das Projekt trägt das Label „Vercel Labs“. Für uns heißt das: lebendig, aber kein Produkt mit Support-Zusage.

Weg 1: Das LLM schreibt die Spec als Stream

Im klassischen Weg ruft der Server das LLM über das AI SDK auf. Das Modell schreibt pro Zeile einen JSON-Patch, der Browser wendet die Patches an, sobald sie ankommen. Deshalb füllt sich das Dashboard im Video Stück für Stück und erscheint nicht auf einen Schlag.

// catalog.ts: die einzige Quelle für Komponenten und Aktionen
import { defineCatalog } from "@json-render/core";
import { schema } from "@json-render/react/schema";
import { z } from "zod";

export const catalog = defineCatalog(schema, {
  components: {
    Card: {
      props: z.object({ title: z.string() }),
      description: "Container für eine Gruppe von Kennzahlen",
    },
    Metric: {
      props: z.object({
        label: z.string(),
        value: z.string(),
        format: z.enum(["currency", "percent", "number"]).nullable(),
      }),
      description: "Eine einzelne Kennzahl",
    },
  },
  actions: {
    refresh_data: { description: "Alle Kennzahlen neu laden" },
  },
});

// app/api/generate/route.ts: Server-Route, Modell über das Vercel AI Gateway
import { streamText } from "ai";
import { catalog } from "@/lib/catalog";

export async function POST(req: Request) {
  const { prompt } = await req.json();
  const result = streamText({
    model: process.env.AI_GATEWAY_MODEL!, // Modell-ID nach Ihrer Gateway-Freigabe
    system: catalog.prompt(), // Komponenten, Props und Ausgabeformat aus dem Katalog
    prompt,
  });
  return result.toTextStreamResponse();
}

Auf dem Client sammelt createSpecStreamCompiler() aus @json-render/core die Chunks und liefert nach jedem push(chunk) die aktuelle Teil-Spec. Die Vorteile liegen auf der Hand: Das Modell kann frei formulieren, Überschriften texten und Werte einsetzen.

Genau das ist auch der Haken. Die Werte, die im Dashboard stehen, schreibt das Modell. Damit es echte Umsätze anzeigt, müssen echte Umsätze im Prompt landen. Wer mit Kundendaten arbeitet, schickt sie also an den Modell-Anbieter, bei jedem Aufbau einer Oberfläche.

Weg 2: Jev komponiert, Ihr Code liefert die Daten

Jev schreibt keinen Text. Es ist ein Entscheidungsmodell von TypeSafe AI, das unter mehreren Optionen wählt, und genau so setzt json-render es ein. Ihre App stellt sogenannte Kandidaten bereit: fertig konfigurierte Komponenten mit Props und State-Bindungen. Jev entscheidet nur, welche davon in die Oberfläche kommen, in welcher Reihenfolge und unter welchem Elternelement.

Was Jev ist und was es kostet, haben wir bereits im Praxisartikel zu Jev Workflows aufgeschrieben. Kurz: Eingabe 0,042 Dollar je Million Token, Ausgabe kostenlos, Antwort in Millisekunden.

// Server only: Jev wählt aus Kandidaten, schreibt aber keine Werte
import {
  experimental_composeSpec,
  experimental_createEvaluator,
  type Experimental_CompositionCandidate,
} from "@json-render/core";
import { catalog } from "./catalog";

// Kandidaten: konfigurierte Komponenten, Werte kommen per $state aus dem App-State
const candidates = [
  {
    id: "sales",
    description: "Verkaufs-Übersicht als Container",
    element: { type: "Card", props: { title: "Vertrieb diese Woche" } },
  },
  {
    id: "revenue",
    description: "Umsatz der Woche",
    root: false,
    element: {
      type: "Metric",
      props: { label: "Umsatz", value: { $state: "/kpi/revenue" }, format: "currency" },
    },
  },
  {
    id: "orders",
    description: "Anzahl Bestellungen der Woche",
    root: false,
    element: {
      type: "Metric",
      props: { label: "Bestellungen", value: { $state: "/kpi/orders" }, format: "number" },
    },
  },
] satisfies Experimental_CompositionCandidate[];

const evaluate = experimental_createEvaluator({
  model: "typesafe-ai/jev",
  apiKey: process.env.AI_GATEWAY_API_KEY!, // Gateway-Team muss den Provider typesafe-ai erlauben
});

for await (const event of experimental_composeSpec({
  catalog,
  candidates,
  prompt: "Zeig ein Verkaufs-Dashboard mit Umsatz und Bestellungen",
  initialState: { kpi: { revenue: "48200", orders: "312" } },
  evaluate,
  maxSteps: 12,
  maxElements: 24,
  signal: AbortSignal.timeout(30_000),
})) {
  if (event.type === "step") console.log(event.spec); // vollständige Snapshots, keine Patches
  else console.log(event.stopReason, event.spec);     // finish, limit oder unavailable
}

Laut Doku bekommt Jev nur den Prompt, die Kandidaten-Beschreibungen, die Baumstruktur und expliziten Kontext. State-Werte und rohe Props gehen nicht automatisch an das Modell. Im Beispiel oben sieht Jev also „Umsatz der Woche“, aber nie die 48.200.

Für uns ist das der eigentliche Fortschritt, wichtiger als die vier Sekunden Zeitgewinn. Jev selbst läuft in den USA, das ändert sich dadurch nicht. Aber die Frage, welche Daten an den Anbieter fließen, wird von einer Prompt-Disziplin zu einer Eigenschaft der Architektur.

Grenzen der Jev-Komposition, die Sie kennen sollten

Jev erfindet nichts, und das schneidet in beide Richtungen.

Ein Detail, das uns beim Lesen aufgefallen ist: Die Jev-Seite der Doku nennt die APIs noch „unreleased“, das CHANGELOG führt sie aber unter 0.21.0, und im npm-Paket @json-render/core@0.21.0 sind beide Funktionen exportiert. Wir haben das am 01.10.2026 im veröffentlichten Paket nachgesehen. Wer sich darauf verlässt, sollte trotzdem den Commit festhalten, gegen den er getestet hat.

Und die Doku sagt es selbst: Ein vager Prompt wie „Dashboard mit Tabelle oben“ kann eine Oberfläche liefern, die nur aus der Tabelle besteht. Pflichtabschnitte müssen im Prompt genannt werden.

Wo Generative UI im Unternehmen Sinn ergibt

Unsere Position deckt sich mit dem Fazit im Video: Vollständig generierte Anwendungen halten wir für einen Irrweg. Generative UI lohnt sich an genau einer Stelle, nämlich dort, wo ein Agent bestehende Komponenten an die Oberfläche holt.

Drei Muster, die wir für tragfähig halten:

1. Einstellungen und Stammdaten im Chat. Der Nutzer schreibt „ändere meine Rechnungsadresse“, der Agent zeigt das vorhandene Adressformular mit Speichern-Knopf. Kein Navigieren, keine neue Komponente.
2. Kennzahlen auf Zuruf. Vertrieb fragt nach Wochenumsatz und offenen Angeboten, der Agent setzt vorhandene KPI-Karten und eine Tabelle zusammen. Werte aus dem State, Auswahl durch Jev.
3. Freigabe-Dialoge für Agenten. Bevor ein Agent etwas Schreibendes tut, rendert er einen Bestätigungsdialog aus dem Katalog. Die Aktion läuft erst nach dem Klick, und Ihr Handler prüft die Berechtigung.

Wo wir abraten: Kundenportale, deren Layout sich bei jedem Besuch ändert. Das verwirrt Nutzer, macht Tests unmöglich und bringt keinen messbaren Vorteil gegenüber einer gut gebauten Seite.

Der hybride Aufbau aus dem Video ist dabei der sinnvolle Default. Das LLM führt das Gespräch und entscheidet, wann eine Oberfläche gebraucht wird. Es ruft dafür ein Tool auf, das Tool fragt Jev, Jev komponiert aus Ihren Kandidaten. Das LLM bleibt beim Text, Jev bei der Auswahl. Dass Entscheidungsmodelle bei solchen Auswahlfragen dem LLM gefährlich nahe kommen, haben wir im Kosten-Benchmark zu Jev und TypeSafe gesehen, inklusive der Fälle, in denen der Abstand eben doch zählt.

Häufig gestellte Fragen

Was ist json-render?

json-render ist ein Open-Source-Framework von Vercel Labs für Generative UI. Ein KI-Modell beschreibt eine Oberfläche als JSON-Spec, die nur Komponenten aus Ihrem vorab definierten Katalog verwenden darf. Ihre eigenen React-, Vue- oder Svelte-Komponenten rendern diese Spec. Stand 01.10.2026 ist Version 0.21.0 aktuell, Lizenz Apache-2.0.

Was kostet json-render?

Das Framework selbst ist kostenlos und Open Source. Kosten entstehen durch das Modell: beim LLM-Weg die Output-Token für jede generierte Spec, beim Jev-Weg 0,042 Dollar je Million Eingabe-Token bei kostenloser Ausgabe. Dazu kommen Entwicklung des Katalogs und Betrieb der Server-Route.

json-render mit LLM oder Jev: was ist besser?

Kommt darauf an, ob das Modell Texte erfinden soll. Braucht die Oberfläche frei formulierte Inhalte, bleibt nur das LLM. Sollen vorhandene Komponenten mit echten Daten schnell zusammengesetzt werden, ist Jev in der Demo rund viermal schneller und hält Ihre Daten aus dem Prompt. Für Chat-Agenten empfehlen wir die Kombination: LLM für das Gespräch, Jev für die Oberfläche.

Ist Generative UI sicher genug für Unternehmensanwendungen?

Der Katalog verhindert, dass das Modell beliebiges Markup erzeugt, und der Jev-Composer führt laut Doku nie selbst Aktionen aus. Das reicht aber nicht. Jeder Action-Handler muss Berechtigung und Eingaben selbst prüfen, schreibende Aktionen brauchen eine Freigabe, und generierte Specs gehören ins Log.

Funktioniert json-render nur mit React?

Nein. Neben React gibt es offizielle Renderer für Vue, Svelte, Solid, React Native, Next.js, TanStack Start, PDF, E-Mail, Bilder, 3D-Szenen und Terminal-Oberflächen. Die Jev-Komposition unterstützt laut Doku alle Kataloge im flachen Standard-Spec-Format.

Nächster Schritt

Verwandte Themen