Krizaka UI
Krizaka UI
Components

Generated view

Draws the interface a model describes in A2UI v0.9 — tables, figures, charts, cards, callouts — from a catalog the app declares, never from code.

Web · ✓Mobile · ✗ to buildDesktop · ✓BetaData display
import { GenUiStream, GenUiSurface, baseGenUiCatalog, validateMessage, readStream } from "@krizaka/ui/genui";

Web only — React, from @krizaka/ui/genui. Beta: its API may still change in a minor version.

  • Mobile · ✗ to build. Slice 3 of the data-driven UI epic: the same messages drawn with the native primitives. issue #207

Why it is here. Used by Orazaka.

When to use

  • When a model answers a question about data and a table, a figure or a chart says it better than a paragraph.
  • In a chat that streams: the view grows message by message while the answer arrives.
  • When the same answer must be drawn by several apps: the messages are data, each app draws them with its catalog.

When not to use

  • For an interface the app knows in advance: write it with the components themselves.Use instead: Data table
  • For prose: render the model's text as markdown.Use instead: Markdown

Installation

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { GenUiStream, GenUiSurface, baseGenUiCatalog, validateMessage, readStream } from "@krizaka/ui/genui";

Examples

A table from a model's answer

Prose, then a callout and a sortable table bound to the data model.

While the answer arrives

A half-written answer: what has arrived is drawn, the rest is a skeleton.

Props

GenUiStream

A model's answer with its generated view: the prose, then every surface of its a2ui fence, growing as the answer streams. An answer without a valid surface falls back to its text.

PropTypeDefaultDescription
catalogrequiredReadonly<Record<string, GenUiEntry>>—The components it may use.
textrequiredstring—A model's answer, complete or still arriving: its prose and its a2ui fence.
classNamestring—Extra classes on the frame.
fallback((text: string) => ReactNode)—What to show when the answer holds no valid surface: the answer itself, as text (the fallback).
labelsPartial<GenUiLabels>—The surface's words.
localestring—The locale numbers are written in. Default en.
onError((error: string) => void)—Called with what could not be drawn (a cycle, a missing child once the answer is complete).
renderProse((prose: string) => ReactNode)—Draws the prose (markdown in a chat); default: paragraphs of text.
streamingboolean—The answer is still arriving: missing children are skeletons and the surface is busy.

GenUiSurface

One surface, drawn from its root.

PropTypeDefaultDescription
catalogrequiredReadonly<Record<string, GenUiEntry>>—The components it may use.
surfacerequiredGenUiSurfaceState—The surface to draw (from readStream or applyMessage).
classNamestring—Extra classes on the frame.
labelsPartial<GenUiLabels>—The surface's words.
localestringenThe locale numbers are written in. Default en.
onError((error: string) => void)—Called with what could not be drawn (a cycle, a missing child once the answer is complete).
streamingbooleanfalseThe answer is still arriving: missing children are skeletons and the surface is busy.

Accessibility

  • The view is a section named by labels.surface, aria-busy while the answer streams.
  • Text is rendered as text (escaped): no HTML, no script, no link in the catalog v1.
  • Charts carry their own written summary and data table (@krizaka/charts); tables are DataTables with a caption.

Best practices

  • Merge baseGenUiCatalog with chartsGenUiCatalog of @krizaka/charts; a component outside the catalog is refused, never guessed.
  • Pass onError and log what was refused: a refused message leaves the rest of the view as it was.
  • Give the model the catalog and the rule that every number comes from the data it was given — the renderer checks shapes, not truth.

Generated from the code of @krizaka/ui 3.63.1: its meta.ts, its examples and its types.Edit this documentation on GitHub

Engine flow

Previous

Goal gauge

Next

On this page

When to useInstallationExamplesPropsAccessibilityBest practicesRelated components