k8ordo UI ships official adapters so an LLM can generate UIs constrained to these components, via json-render or OpenUI. Generate the prompt on the server, validate the output, and render it on the client.
The catalog is server-safe. Generate the system prompt in a Server Component, and inject cross-cutting rules with uiRules.
JsonRenderUI wires the provider, renderer, and registry for you — just pass a spec.
validateGeneratedSpec auto-fixes, checks structure, and validates props per component, returning a ready-to-resend repair prompt on failure.
Write specs with satisfies UISpec so component names and props are checked at compile time.
OpenUI renders a DSL string with the library. Generate the prompt on the server with the dedicated openui/prompt entry.
import { catalog, uiRules } from '@k8ordo/ui/json-render';
// Runs on the server. customRules injects constraints the model tends to break.
const systemPrompt = catalog.prompt({ customRules: [...uiRules] });'use client';
import { JsonRenderUI } from '@k8ordo/ui/json-render/registry';
export function GenUi({ spec }: { spec: unknown }) {
return <JsonRenderUI spec={spec} />;
}import { validateGeneratedSpec } from '@k8ordo/ui/json-render';
const result = validateGeneratedSpec(JSON.parse(llmOutput));
if (result.ok) {
return <JsonRenderUI spec={result.spec} />;
}
const retried = await llm(result.repairPrompt); // fix and retryimport type { UISpec } from '@k8ordo/ui/json-render';
const spec = {
root: 'root',
elements: {
root: { type: 'Stack', props: { direction: 'column' }, children: ['ok'] },
ok: { type: 'Button', props: { label: 'OK' } },
},
} satisfies UISpec;'use client';
import { library } from '@k8ordo/ui/openui';
import { Renderer } from '@openuidev/react-lang';
export function GenUi({ response }: { response: string }) {
return <Renderer library={library} response={response} />;
}// Server-safe prompt generation (symmetric with catalog.prompt()).
import { prompt } from '@k8ordo/ui/openui/prompt';
const systemPrompt = prompt();