clom-renderer

React component library for rendering CLOM protocol interactions. Pass any JSON output from a CLOM agent directly to <ClomRenderer> and it renders the appropriate interactive UI.

Overview

CLOM (ClawLink Local Orchestration Module) is an AI agent protocol that returns structured JSON describing interactive UI — forms, date pickers, OTP inputs, product grids, appointment slots, and more. clom-renderer sits on the client side: it receives that JSON and renders the right React component. No API calls, no configuration — just JSON in, UI out.

CLOM agent (server) → JSON output → [request/response layer] → <ClomRenderer data={...} />

Install

npm install clom-renderer

Usage

import { ClomRenderer } from 'clom-renderer';
import 'clom-renderer/style.css';

<ClomRenderer
  data={clomOutput}           // raw JSON from CLOM
  onSubmit={(text) => send(text)}  // called with user's response as plain text
  locked={false}              // true = already submitted, renders nothing
/>

Props

| Prop | Type | Description | |------|------|-------------| | data | ClomOutput | Raw CLOM JSON output, discriminated by interaction field | | onSubmit | (text: string) => void | Called when user submits — receives a formatted plain-text summary | | locked | boolean | When true, component renders nothing (prevents re-submission) |

Supported interaction types

| interaction | UI rendered | Submits | |---|---|---| | form | Multi-field form | Line-separated label: value | | address | Address form with prefill support | Line-separated label: value | | select | Single-choice button group | Selected option text | | multiselect | Checkbox list | Comma-separated selections | | date_picker | Date input with min/max | label: YYYY-MM-DD | | otp | Auto-advancing digit inputs with paste | label: 123456 | | rating | Star rating with hover labels | label: 4/5 (Great) | | file_upload | Drag-and-drop file zone with size validation | label: filename.pdf | | card_grid | Responsive product/service card grid | Selected: card title | | confirmation_card | Key-value summary + action buttons | Action label | | timeline | Read-only status timeline | (display only) | | slot_picker | Appointment slot grid | Selected slot: label (datetime) | | data_table | Read-only scrollable table | (display only) | | stepper | Multi-step form wizard with progress dots | All step fields combined |

Theming

The component uses CSS custom properties. When used inside a ClawLink app the host app's existing variables are picked up automatically. For standalone use, a dark theme is applied by default. Override any --clom-* variable on :root or a parent element:

:root {
  --clom-bg:         #ffffff;
  --clom-surface:    #f5f5f5;
  --clom-border:     #e0e0e0;
  --clom-text:       #111111;
  --clom-text-muted: #666666;
  --clom-accent:     #6366f1;
  --clom-accent2:    #8b5cf6;
}

TypeScript

Full types are exported:

import type {
  ClomOutput,
  InteractionSpec,
  FormField,
  InteractionCard,
  TimelineStep,
  StepperStep,
} from 'clom-renderer';

ClomOutput is InteractionSpec & Record<string, unknown> — CLOM can attach any custom metadata fields alongside the standard ones; they are ignored by the renderer.

Custom metadata

Since CLOM (generator) and clom-renderer (consumer) are designed together, you can freely add custom fields to the JSON for tracking or context purposes:

{
  "interaction": "form",
  "fields": [...],
  "_session_ref": "abc123",
  "_tenant_id": "xyz"
}

The renderer ignores unknown fields and only uses what it knows.

License

MIT — see LICENSE