@frayme/runtime

Render Frayme-generated UI specs as live, interactive React — with transport adapters for the Vercel AI SDK and AG-UI. React 19.

npm i @frayme/runtime @frayme/api

import { FraymeRenderer } from '@frayme/runtime/react';
import '@frayme/runtime/styles.css';

<FraymeRenderer spec={spec} onDynamicAction={(e) => sendToAgent(e)} />

Why a runtime

A Frayme spec is JSON, not pixels. The runtime turns it into working UI and — the important part — decides what happens when users interact: ~90% of interactions (typing, tabs, toggles, state-bound visibility) resolve locally in the browser at zero cost and zero latency; only spec-bound named actions (form submits, "regenerate") reach onDynamicAction, where your agent takes over.

• Default registry for the full catalog — 52 components (forms, tables, dialogs, charts-ready layout primitives…), themeable via --frayme-* CSS variables; override any component via the components prop.
• Validation gate — strict catalog validation for at-rest specs; progressive mode for streaming, where the registry whitelist + inert fallback is the safety boundary.
• compose.restarted done right — useFraymeCompose discards snapshots AND remounts client state when the API restarts an attempt; you just pass restartKey through.
• Safe by construction — specs are data, components are a whitelist, unknown types render an inert placeholder. No eval, no raw HTML.

Entrypoints

| Import | What | |---|---| | @frayme/runtime/react | <FraymeRenderer/>, <FraymeProvider/>, useFraymeCompose, defaultRegistry | | @frayme/runtime/ai-sdk | <FraymeMessageRenderer message={m}/> (renders data-spec parts from useChat messages), createDynamicActionForwarder | | @frayme/runtime/ag-ui | useFraymeAgUiSpec(), <FraymeAgUiRenderer/>, frayme:spec / frayme:action conventions | | @frayme/runtime | server-safe: composeStreamToDataParts() (route-handler bridge), validateFraymeSpec(), theme tokens | | @frayme/runtime/styles.css | the default stylesheet |

AI SDK chat in two steps

// app/api/chat/route.ts — bridge the tool's stream into data parts
import { composeStreamToDataParts } from '@frayme/runtime';
for await (const part of composeStreamToDataParts(stream)) {
  writer.write({ type: 'data-spec', data: part });
}

// client — render any message that carries a spec
import { FraymeMessageRenderer } from '@frayme/runtime/ai-sdk';
<FraymeMessageRenderer message={message} onDynamicAction={forwarder} />

Runnable app: examples/nextjs-starter. Live demos: frayme.ai/examples.

MIT © Orange Stack Ltd