Krizaka UI
Krizaka UI
Composants

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 · ✗ à construireBureau · ✓BêtaAffichage de données
import { GenUiStream, GenUiSurface, baseGenUiCatalog, validateMessage, readStream } from "@krizaka/ui/genui";

Web uniquement — React, depuis @krizaka/ui/genui. Bêta : son API peut encore changer à une version mineure.

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

Pourquoi il est là. Used by Orazaka.

Quand l’utiliser

  • 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.

Quand ne pas l’utiliser

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

Installation

Installer

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

Styles

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

Importer

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

Exemples

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.

PropTypeDéfautDescription
catalogrequisReadonly<Record<string, GenUiEntry>>—The components it may use.
textrequisstring—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.

PropTypeDéfautDescription
catalogrequisReadonly<Record<string, GenUiEntry>>—The components it may use.
surfacerequisGenUiSurfaceState—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.

Accessibilité

  • 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.

Bonnes pratiques

  • 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.

Générée depuis le code de @krizaka/ui 3.63.1 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub

Engine flow

Précédent

Goal gauge

Suivant

Sur cette page

Quand l’utiliserInstallationExemplesPropsAccessibilitéBonnes pratiquesComposants liés