k8ordo UIは、LLMがk8ordo UIコンポーネントだけでUIを生成できる公式アダプタ（json-render / OpenUI）を同梱しています。プロンプトはサーバーで生成し、出力を検証してからクライアントで描画します。
catalogはサーバー安全です。Server Componentでシステムプロンプトを生成し、uiRulesで横断ルールを注入します。
JsonRenderUIがプロバイダー・レンダラー・registryを内部結線済みなので、specを渡すだけで描画できます。
validateGeneratedSpecが機械修正・構造検証・コンポーネントごとのprops検証を行い、失敗時はそのまま投げ返せる修復プロンプトを返します。
satisfies UISpecで書くと、component名・propsのtypoがコンパイル時に検出されます。
OpenUIはDSL文字列をlibraryで描画します。プロンプトは専用のopenui/promptエントリでサーバー生成できます。
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();