GenUI
The UI4A runtime for progressive inline modules and persistent Canvas files.
UI4A lets a harness produce a real React interface alongside its answer. The same runtime handles both inline conversation blocks and files in the session workspace, independent of which harness generated them.
Two delivery forms
- Inline: a complete module in a fenced
ui4a/tsxblock renders inside the assistant message as its source arrives. - Canvas:
.artifacts/canvases/<id>.ui4a.tsxopens in the side panel. Supporting.tsx,.ts,.jsx,.js, and.jsonmodules resolve through explicit relative imports.
artifacts/src/web/ui4a/Ui4aSurface.tsx feeds source to partial-react@0.0.10. The renderer uses pushCode/finish, preserves the last good frame while syntax is incomplete, and keeps a shared React instance so state survives incremental updates.
Host modules
The manifest in artifacts/src/web/ui4a/manifest.ts is the source of truth for the generated skills/ui4a/SKILL.md.
| Module | Purpose |
|---|---|
$ui4a/ui | Button, Field, Card, Badge, Tabs, and Disclosure |
$ui4a/ui/katex | LaTeX and MathBlock with stable formula rendering |
$ui4a/ui/charts | Responsive Recharts components with streaming snapshots and stable data/axes |
$ui4a/chat | Send a visible user message after an explicit user action |
$ui4a/state | Session- and surface-scoped JSON persistence |
$ui4a/fs | Read and write files below .artifacts |
Native HTML and Wind4 utilities handle layout, and Headless UI can be imported for additional controls. Prefer the bundled chart and formula modules for mathematical explanations: combine a formula, a restrained line chart and numeric sliders driven by the same state. UI4A code runs as trusted local React in the host page; it is not an isolation sandbox for arbitrary third-party code.
Authoring rules
The generated skill reconsiders presentation on every turn. Direct facts stay concise prose; multi-stage mechanisms and comparisons favor a focused inline explorer without waiting for the user to request a drawing. Quantities and scaling favor a compact chart with explicit baselines and units, using cited facts or stated formulas rather than invented measurements. A complete overview that would crowd the conversation belongs in a Canvas, with the selected stage or path inline. Separately requested inline and Canvas views must both be delivered.
Clarification forms collect only information that changes the answer, preserve their submitted state, and send one readable user turn on explicit submission. Reading controls such as tabs, filters, and diagram selections stay local. The explicit-action rule applies to generated UI callbacks that send messages or write files; it does not require another confirmation before the harness writes a Canvas as part of an answer.
Every saved Canvas revision must be runnable, including the first scaffold and later edits. Imports, helpers, and their use must be added together or in dependency order. A retained older preview is not evidence that the new revision works. Inline delivery uses ui4a/tsx; Canvas delivery uses .ui4a.tsx. Harness-specific widget references, HTML attachments, and Mermaid fences do not substitute for those formats.
Design guidance is included in the injected skill: explicit spacing, readable HTML diagram labels, a shared detail region, and one data model for formulas, chart values, units, and captions. Pair each foreground with its immediate background (surface-2 with fg, solid accent with accent-fg); series colors belong on marks and connectors. SVG labels need an explicit fill, and weak evidence retains readable text. When a preview is available, check narrow containers, both host modes, and contrast after alpha compositing; do not claim checks that were not run. These rules guide future generation and edits rather than rewriting existing artifacts.
The skill also requires a default React export, stable component and import names during streaming, accessible labels, and useful empty states. Generated UI must not invent $ui4a/* modules, store credentials, or assume access to command execution or directory listing.