andyoucreate/rilaykit

A schema-first, headless form library for React — with type-safe builders, universal validation, and a real workflow engine.

Summary

RilayKit is a schema-first, headless form library for React written in TypeScript. It treats forms as data structures rather than JSX trees, handling state, validation, and rendering orchestration, and it generates zero HTML or CSS itself. The project also ships a multi-step workflow engine and tools that expose forms to large language models.

What it is useful for

RilayKit is useful when engineers want declarative, type-safe forms without giving up control of markup and styling. Because it ships no HTML or CSS, the design system stays in the team's own components. The schema-first approach makes forms serializable and introspectable, which fits server-driven UI scenarios where a backend emits a JSON form definition.

The library is also relevant for multi-step flows. @rilaykit/workflow includes guards, persistence (for example via LocalStorageAdapter), analytics hooks, and a plugin model. Validation follows the Standard Schema spec, so Zod, Valibot, and ArkType can be mixed with built-in validators like required() and email() without adapters.

The @rilaykit/agent package targets teams wiring forms into LLM agents. It produces a Markdown manifest for the system prompt and registers UI tools (show_form, show_flow, show_component) that work with the AI SDK and Anthropic.

How engineers can use it

Install the all-in-one package as documented: pnpm add rilaykit. The listed requirements are React >= 18 and TypeScript >= 5.

The usual flow is:

1. Register components with ril.create().component('input', { propsSchema, renderer }).
2. Build a form with form.create(rilay, 'login').add({ id, type, props, validation }), or rilay.form('login').add(...) from the all-in-one package.
3. Render with <Form of={loginForm} onSubmit={...}> from @rilaykit/forms/react.

For server-driven forms, compileForm(schema, rilConfig, { bindings }) turns a JSON payload into a live FormConfiguration. Passing { validateProps: true } checks each field's props against its component's propsSchema and returns a SchemaValidationError whose issues[] name exact paths, intended as a self-correction hook for agent-authored schemas.

Multi-step flows use flow.create(ril, 'onboarding').step(...) for code authoring and compileFlow for JSON-defined flows. onComplete(data, meta) receives data namespaced by step id (skipped steps are absent, not {}) along with meta.visitedSteps, meta.skippedSteps, and meta.passedSteps.

Documented notes worth keeping in mind: package main entries are React-free and server/RSC-safe, so React components and hooks live on the /react subpath. For agent tools, a .part('text', ...) renderer must be registered; there is no default text renderer. The license is MIT.