Web Components · Agent-legible contracts · Apache-2.0

The component foundation built for generative UI.

Standards-first ki-* web components that work in any framework, under any brand. Agents read the same contract you do — and a guarded catalog keeps what they render safe.

Explore the components Open the playground GitHub

agent → spec → guardrail → catalog → render

guarded renderer · available

01An agent emits a spec

{
  "surface": "form",
  "children": [
    { "component": "ki-input",
      "props": { "label": "Workspace name" } },
    { "component": "ki-select",
      "props": { "label": "Region" } },
    { "component": "ki-switch",
      "props": { "label": "Invite via link" } },
    { "component": "ki-button",
      "props": { "variant": "primary" },
      "action": "create" }
  ]
}

02The guardrail validates it

every component is in the catalog
props match the machine contract
only declared actions are wired
no code-execution path from spec data

unknown props → rejected. fail-closed.

03Real ki-* components mount

eu-west

us-east

Invite via link

Create workspace

Components: 29
Themes, 1 attribute: 2
Axe violations: 0
Browser engines: 3
Per component: <10 KB
Token-styled: 100%

Live from the library

Every component, live. Not screenshots.

Rendered from the same token pipeline the package ships. Hover, focus, click — every state below is the real state matrix.

Buttons

Forms

Feedback

Overlays

Data

Emphasis

Primary

Secondary

Tertiary

Quaternary

Ghost

Tone

Neutral

Success

Danger

Success

Danger

Size

States & slots

Disabled

With slots

<ki-button variant="primary" tone="success" size="md">
  Save changes
</ki-button>

eu-west

us-east

ap-south

Run the gate suite

Progressive rollout

Docs, manifests and the catalog derive from one source.

Online

agent-legible

available

Guarded surface

Only catalog components and declared actions reach the renderer. fail-closed

Agent contract custom-elements.json + llms.txt

synced

Protocol adapter Disposable around a neutral catalog

A2UI

Focus for a tooltip

Open a dialog

Tokens, proven live

This page runs on `@kimen/tokens`. Flip it.

Onmars Material 3

Auto Light Dark

← live token values

Every color, radius and type size here resolves primitive → semantic → component. Reassign the semantic layer and an entire product restyles — proven in CI, not in a keynote.

Built for agentic development

Legible to agents, by contract.

The component contract is the single source of truth. Everything an agent needs ships with the package — an API a capable agent cannot wire correctly from its description alone is treated as a defect.

custom-elements.json

Machine-readable manifest of every prop, event, slot and part.

llms.txt

The whole library, summarized for language models.

@whenToUse / @whenNotToUse

Usage guidance on every component, in the contract itself.

@kimen/catalog

Schema-validated UI specs at the GenUI boundary — the neutral catalog agents emit against.

Capability status

Consumer catalog registration: your own components behind a JSON facade, validated and rendered through the same fail-closed guardrail
Schema-constrained guarded renderer: untrusted UI specs render only through the neutral catalog, fail-closed
Changed-core mutation quality gate in hardening
A2UI protocol adapter: declarative A2UI messages render through the guarded renderer
MCP Apps adapter: Kimen surfaces reach MCP Apps hosts as self-contained ui:// resources rendered through the guarded renderer
AG-UI and json-render protocol adapters planned
Neutral runtime component catalog with schema-validated UI specs at the GenUI boundary
Machine-readable Web Components foundation with token-driven theming

Where it stands

What only a GenUI-first library does.

Capability	Kimen	React-only kits	Classic WC kits
Runs in any framework — or none	Web components, identical in every host	React hosts only	Yes
Re-theming	DTCG token layers — one attribute swaps the theme	Varies per library	CSS custom props, ad hoc
Agent-legible contracts	custom-elements.json + llms.txt + when-to-use, shipped	Rare	Manifest sometimes, no guidance
Guarded GenUI rendering	Schema-validated specs, fail-closed	Not a goal	Not a goal
Protocol adapters	A2UI + MCP Apps; AG-UI planned	—	—
Accessibility enforcement	0 axe violations gated in CI, WCAG 2.2 AA target	Varies	Varies
Size discipline	Single-digit-KB budget per component, gated	Varies	Varies

Categories, not call-outs: “React-only kits” = component libraries coupled to one framework; “classic WC kits” = web-component design systems without agent contracts.

Quality is a gate, not a promise

Done means gates exit 0.

No self-assessment — a deterministic script proves each gate, identically on a laptop and in CI: bash scripts/gates/gates-suite.sh

real-browser

Three engines at release

Every component ships with real-browser tests, not JSDOM approximations.

axe-core: 0

Accessibility as a hard gate

Zero violations tolerated. WCAG 2.2 AA and EN 301 549 as the target.

<10 KB

Size budgets per component

Single-digit-KB budgets, checked on packed tarballs on every release dry run.

tokens-only

No hardcoded visual values

Stylelint-enforced: every visual value resolves from a --ki-* token.

RTL

Direction-agnostic by construction

Logical properties only — right-to-left support isn’t a variant, it’s the default.

mutation

Tests that test the tests

Changed-core mutation gating is part of the current hardening work.

29 and counting

The ki-* catalog.

All docs

Where we are

Honest, gated, in the open.

Tokens & themingfour layers, two themes, re-theming proven in CI
Factory hardeningclosing enforcement, mutation, release and sandbox gaps
Core components29 real ki-* components, contracts and browser tests
Catalog + guardrailschema-validated specs rendered fail-closed
Protocol adaptersA2UI and MCP Apps available; AG-UI and json-render planned
v1.0.0npm with trusted publishing and signed provenance