For AI agents: the complete documentation index is available at /next/llms.txt, the full documentation bundle is available at /next/llms-full.txt, and this page is available as Markdown at /next/api/genui/index.md.
Lynx
  • English

      • @lynx-js/genui

      npm · Source · Changelog

      Generative UI primitives for Lynx applications.

      @lynx-js/genui is the single npm package for the GenUI toolchain. It exposes A2UI rendering, OpenUI rendering, A2UI prompt/catalog utilities, Lynx XML utilities, ReactLynx generation/build utilities, and the CLI from one package while keeping implementation directories private to this monorepo.

      Installation

      pnpm add @lynx-js/genui @lynx-js/react

      @lynx-js/react is a peer dependency. Some built-in A2UI components and the default OpenUI Library also use @lynx-js/lynx-ui; install it when your app uses those surfaces.

      Entry Points

      import {
  A2UI,
  createMessageStore,
  createOpenUiLibrary,
  createStreamingParser,
  buildA2UISystemPrompt,
  extractCatalogComponents,
} from '@lynx-js/genui';

      The root entry point exports the stable APIs most applications and tools need:

      • A2UI ReactLynx renderer and data-store helpers.
      • OpenUI parser, library, and renderer APIs.
      • A2UI prompt builders.
      • A2UI catalog extraction utilities.
      • ReactLynx generation prompts, source validation, and Node.js compilation.

      Focused subpaths are also available:

      import { A2UI, Text, Button } from '@lynx-js/genui/a2ui';
import { createMessageStore } from '@lynx-js/genui/a2ui/store';
import { createOpenUiLibrary } from '@lynx-js/genui/openui';
import { buildA2UISystemPrompt } from '@lynx-js/genui/a2ui-prompt';
import { extractCatalogComponents } from '@lynx-js/genui/a2ui-catalog-extractor';
import { normalizeLynxXmlArtifact } from '@lynx-js/genui/lynx-xml';
import {
  buildReactLynx,
  parseReactLynxSource,
  REACTLYNX_SYSTEM_PROMPT,
} from '@lynx-js/genui/reactlynx';

      @lynx-js/genui/lynx-xml provides system prompts, deterministic artifact assembly, and normalizeLynxXmlArtifact for document normalization and validation. It is headless and does not require an agent or renderer.

      Catalog manifests are exported through a single public catalog entry:

      import { Text, Button } from '@lynx-js/genui/a2ui/catalog';

      A2UI

      A2UI renders agent-generated UI messages that follow the A2UI v0.9 protocol. Create a message store, push protocol messages into it from your transport, and render the latest surface with <A2UI>.

      import { A2UI, Button, Text, createMessageStore } from '@lynx-js/genui/a2ui';

const messageStore = createMessageStore();

export function GenUIScreen() {
  return (
    <A2UI
      messageStore={messageStore}
      catalogs={[Text, Button]}
      onAction={(action) => {
        // Send the action back to your agent, then push response messages
        // into the same messageStore.
      }}
    />
  );
}

      Use the A2UI style entry when you want the packaged component styles:

      import '@lynx-js/genui/a2ui/styles/theme.css';

      See a2ui/README.md for catalog composition and custom component details.

      OpenUI

      OpenUI renders OpenUI Lang v0.5 responses through a configurable component library.

      import { OpenUiRenderer, createOpenUiLibrary } from '@lynx-js/genui/openui';

const library = createOpenUiLibrary();
const response = 'root = Stack([TextContent("Hello")])';

export function OpenUIScreen() {
  return <OpenUiRenderer response={response} library={library} />;
}

      For streamed model output, pass the full accumulated text and generation state:

      <OpenUiRenderer
  response={accumulatedText}
  isStreaming={isGenerating}
  library={library}
/>;

      Append each delta to your application state; replace it when receiving a full snapshot. The renderer caches completed statements and previews the unfinished tail. Keep isStreaming true until successful completion, then apply the final text and set it false together, even if the text is unchanged. On failure or cancellation, clear the partial response. See the streaming guide for transport handlers and session lifecycle.

      Import the optional OpenUI theme tokens once in your app:

      import '@lynx-js/genui/openui/styles/theme.css';

      The renderer and component styles are imported by their modules.

      To opt out of the default component set, use the explicit entry and import every built-in definition the Library still needs from its component subpath:

      import { createOpenUiLibrary } from '@lynx-js/genui/openui/explicit';
import { Stack } from '@lynx-js/genui/openui/catalog/Stack';
import { TextContent } from '@lynx-js/genui/openui/catalog/TextContent';

const library = createOpenUiLibrary({
  includeDefaultComponents: false,
  components: [Stack, TextContent],
});

      The flag controls which definitions and groups belong to the Library. The main openui entry still has a static dependency on the default catalog; use openui/explicit with individual catalog subpaths when omitted built-ins must stay outside the static dependency graph.

      See openui/README.md for streaming and custom library examples.

      ReactLynx

      Generate complete App.tsx and App.css files with REACTLYNX_SYSTEM_PROMPT, validate the response with parseReactLynxSource, and compile it on Node.js with buildReactLynx. Publish all returned assets before loading the Web or Native bundle in your host. Keep @lynx-js/genui/reactlynx external in server bundles so its compiler worker remains beside its entry point.

      See the ReactLynx guide.

      CLI

      The package installs the GenUI CLI and the low-level catalog extractor binary:

      genui --help
genui-cli --help
a2ui-catalog-extractor --help

      a2ui-cli is also kept as a compatibility alias for existing A2UI scripts. New scripts should prefer the namespace-first genui a2ui ... or genui openui ... form.

      Generate catalog artifacts:

      genui a2ui generate catalog \
  --catalog-dir src/catalog \
  --source src/functions \
  --out-dir dist/catalog

      Generate an A2UI system prompt:

      genui a2ui generate prompt \
  --catalog-dir dist/catalog \
  --out dist/a2ui-system-prompt.txt

      Generate an OpenUI system prompt:

      genui openui generate prompt --out dist/openui-system-prompt.txt

      Published Package Layout

      Only @lynx-js/genui is intended to be published. The package contains compiled JavaScript and declarations under dist/ directories, plus CLI entry points, README files, styles, and extractor skills.

      The root index.ts is compiled during build. Do not hand-write dist/index.js or dist/index.d.ts; run:

      pnpm -C packages/genui build

      Before publishing, verify the package contents:

      pnpm -C packages/genui pack --dry-run

      License

      Apache-2.0

      The opt-in OpenUI Chat library uses the official Chat positional contracts and provides a server-safe schema entry.

      Packages

      Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.