跪拜 Guibai
← All articles
Frontend · AI Programming

GenUI SDK v1.3.0 Decouples Core, Adds Pluggable UI Materials and React Support

By OpenTiny社区 ·
Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Generative UI tooling that couples rendering to a single component library forces teams into all-or-nothing adoption. Decoupling the core from the materials and adding React support lowers the integration cost for shops that already standardize on Element Plus, Ant Design, or a custom design system.

Summary

The OpenTiny team released GenUI SDK v1.3.0, a generative UI toolkit that now ships its core capabilities—protocol definitions, prompt generation, streaming schema parsing, and JSON repair—as an independent npm package. Renderers no longer bundle a fixed component library; instead, a provider injects material configs, with official packs for OpenTiny, Element Plus, and Ant Design (React alpha).

Renderer improvements target production gaps: default props prevent crashes during streaming renders, a new refs system lets schemas call component instance methods directly, and async custom actions with return values enable multi-step backend validation flows. Lifecycle hooks onMounted and onUnmounted fire once after the full schema arrives, so AI-generated pages can fetch business data and clean up listeners.

The playground adds one-click Vue/Angular switching within the same session, A2A v1.0 with automatic protocol fallback, OpenAPI-to-tool conversion, schema version history with diff view, and bilingual UI. A React renderer alpha with Ant Design materials is available for early testing.

Takeaways
Core capabilities (prompt generation, streaming schema parsing, delta patching, JSON repair) are now published as a standalone @opentiny/genui-sdk-core package usable without the renderer.
UI materials are fully decoupled from renderers; official material packs exist for Vue + OpenTiny, Vue + Element Plus, and Angular + OpenTiny NG.
Default props auto-complete missing required values during streaming renders, preventing crashes when a component like a select receives null options mid-stream.
Schema refs bind component instances so methods like form.validate() can be called directly from events or custom methods.
Custom actions now support async execution and return values, enabling orchestrated flows like front-end validation followed by a backend uniqueness check.
Lifecycle hooks onMounted and onUnmounted execute once after the full schema arrives, letting generated pages fetch data and clean up resources.
The playground supports switching between Vue and Angular mid-session, with cards from both frameworks displayed together.
A2A protocol support reaches v1.0 with automatic fallback when a connected agent uses an older version.
OpenAPI documents can be converted into callable conversation tools by providing a URL, pasting content, or uploading a file.
Template mode now records schema version history with diff views and one-click rollback.
Vue prompts come in Mini (forms and tables only, lower token cost) and Standard (adds chart components) versions.
A React renderer alpha with Ant Design materials is available as @opentiny/[email protected].
Conclusions

Pulling core protocol and parsing logic into a standalone package signals that generative UI runtimes are maturing into composable layers rather than monolithic chat widgets.

Default props as a streaming fallback is a pragmatic fix: most component libraries were never designed for incremental schema delivery, so the SDK absorbs that impedance mismatch rather than forcing library rewrites.

Adding refs and async actions with return values pushes the schema format past static layout into genuine application logic, blurring the line between a UI description language and a low-code runtime.

Lifecycle hooks that wait for the complete schema before firing acknowledge a real constraint of streaming—partial schemas can't reliably trigger side effects—and solve it with a simple gate rather than complex state machines.

Offering Mini and Standard prompt versions is a cost lever: teams can trade component richness for lower token spend without changing the SDK, which matters when running against paid model APIs.

Concepts & terms
Generative UI
A pattern where a large language model outputs a UI description (schema) that a runtime renders into interactive components, rather than the model outputting plain text or static HTML.
Delta Patch
An incremental update mechanism that applies only the changed portions of a JSON schema during streaming, avoiding full re-renders as the model produces output chunk by chunk.
A2A (Agent-to-Agent) Protocol
A standardized communication protocol that lets AI agents discover each other's capabilities and call one another as tools, enabling multi-agent orchestration without custom integration code.
Source: juejin.cn ↗ Google Translate ↗ Backup ↗