Frontend · AI Programming

GenUI SDK Drops Built-in Components — Now Any UI Kit Can Be a Material Library

By OpenTiny社区 · Aug 27, 2026

Read original on juejin.cn ↗ Google Translate ↗ Alt translation

UI generation tools that only speak one design language are useless inside a real product. Material decoupling means a team can make the LLM output match their actual component library — Naive UI, Ant Design, or a private internal kit — without waiting for an official adapter.

Summary

Generative UI tools often produce polished output that clashes with a team's existing design system. GenUI SDK 1.3.0 solves this by removing built-in components entirely and replacing them with a material-package architecture. A material package is just a component-name-to-Vue-component mapping plus a bundle.json file that describes every property, event, and slot the LLM needs to know.

A full walkthrough builds a minimal Naive UI material library — NInput, NSelect, NButton, NForm, NFormItem, NCard, and a custom icon wrapper — in seven steps, from project scaffolding through Vite library-mode build to local testing with a DeepSeek-powered dev server. The same pattern works for Element Plus, Ant Design, or internal private libraries.

Three practical tips raise generation quality: write detailed property descriptions, supply example schemas so the LLM has a template to follow, and declare buffer fields so streaming renders don't break on incomplete data. An AI-assisted shortcut is also shown: feed an existing material library and target component docs to an agent and let it produce the bundle.json.

Takeaways

— GenUI SDK 1.3.0 removes all built-in components; every UI kit is now connected through an independent material package.

— A material package consists of exactly two parts: a component registry (materials) mapping componentName strings to Vue components, and a meta description (bundle.json) that teaches the LLM each component's properties, events, and slots.

— The bundle.json protocol is the critical piece — the LLM's generation accuracy depends directly on how detailed the property descriptions are.

— Icons are treated as ordinary components: wrap the icon set in a small Vue component that resolves a name prop to the actual icon, register it, and describe it in bundle.json with a SelectIconConfigurator widget.

— A local test setup using Vite, GenuiRenderer, and PatternExtractor lets you verify LLM output against your material library before publishing.

— Three optimizations improve output quality: write granular descriptions, provide example schemas in materialsMeta.examples, and declare buffer field paths in requiredCompleteFieldSelectors.

— An AI-assisted shortcut can generate the bundle.json: feed an existing material library and the target component library's docs to an agent.

Conclusions

The material-package design shifts the integration burden from the SDK maintainer to the library consumer, but the consumer's job is mostly writing a detailed JSON file — low ceremony, high leverage.

Treating icons as regular components with a name-prop resolver is a clean pattern that avoids special-casing and keeps the LLM's component vocabulary uniform.

The streaming-render buffer-field mechanism acknowledges a real failure mode: an LLM might emit a Select before it has emitted the options array, and the renderer needs to wait rather than crash.

Using an AI agent to generate the bundle.json from existing docs turns the bootstrapping problem into a prompt-engineering task, which is likely faster than hand-writing property tables for large libraries.

Concepts & terms

Material package

A self-contained npm package that teaches GenUI SDK how to render and prompt for a specific component library. It exports two sub-paths: materials (component registry) and meta (LLM-facing protocol description).

bundle.json

The JSON protocol file inside a material package's meta that describes every component the LLM is allowed to use — its name, description, npm source, properties, events, and widget hints for the configuration panel.

PatternExtractor

A GenUI SDK core utility that parses streaming LLM output in real time, extracting schemaJson fragments while ignoring non-schema text, so the renderer can incrementally build the UI.

requiredCompleteFieldSelectors

CSS-selector-like paths declared in the materials config that tell the streaming renderer to buffer a component until a specified sub-field (e.g., a Select's options array) has arrived completely.

Source: juejin.cn ↗ Google Translate ↗ Backup ↗