Frontend · GitHub · Vue.js

GenUI SDK v1.4.0 Turns AI UI Prompts into Vue Code That Runs Immediately

By OpenTiny社区 · Nov 3, 2026

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

Vue teams can now treat AI-generated interfaces as real components instead of throwaway mockups: the SDK validates with @vue/compiler-sfc, maps schema to reactive/ref/computed, and outputs idiomatic `<script setup>` SFCs that drop into existing projects without a rewrite.

Summary

GenUI SDK v1.4.0 introduces a Vue-specific code generation path: describe an interface in plain language, let AI stream a structured SchemaJson, then call `generateCode()` to export a ready-to-run Vue SFC. The exported code uses `<script setup>`, `reactive()`/`ref()` for state, scoped styles, and passes `@vue/compiler-sfc` validation—so it's not a preview mock but a drop-in component.

The SDK handles complex scenarios: nested component trees, loops with `v-for`, conditionals with `v-if`/`v-else`, event binding, `v-model`, and slots. It maps SchemaJson state to Vue reactivity and accessors to `computed()`. Material metadata for OpenTiny and Element Plus is available, so `generateCode()` emits correct imports automatically. A comparison table positions it against Bolt.new: GenUI targets Vue SFCs of manageable weight, while Bolt generates whole projects that might be overkill for a single page.

Quick start requires one npm install, then an async API call with a schema and components map. A live Playground lets you test the flow without local setup. The article positions this as the "last mile" from AI-generated previews to production-ready Vue code.

Takeaways

— `generateCode()` exports a complete Vue SFC from a SchemaJson description, including template, script, and scoped style.

— The SDK runs generated code through `@vue/compiler-sfc` to catch syntax errors before you integrate it.

— SchemaJson is an intermediate representation that maps `componentName` to kebab-case tags, `state` to `reactive()`, `refs` to `ref()`, and `accessor` to `computed()`.

— Supports `v-for`, `v-if`/`v-else`, `@click`/`@change`, `v-model`, and `#default`/`#header` slots.

— Official material metadata for OpenTiny and Element Plus feeds `componentsMap` so imports are generated automatically.

— Compared to Bolt.new, GenUI SDK targets Vue SFCs with a lighter footprint; Bolt generates full projects that can be too heavy for a single page.

— The npm package is `@opentiny/genui-sdk-vue`, and a live Playground is available at opentiny.github.io/genui-sdk/playground/.

Conclusions

The use of a structured SchemaJson as an intermediate representation decouples AI generation from code emission, letting the SDK produce idiomatic Vue without relying on a generic code generator.

Passing generated code through a real compiler check (rather than just a linter) is what separates this from earlier AI UI tools: it guarantees the output is syntactically valid and executable.

The explicit focus on Vue 3 best practices—`<script setup>`, scoped styles, and reactive state—means the output is not just functional but matches modern conventions, cutting down the refactoring that usually follows AI-generated code.

The comparison with Bolt.new suggests a clear product stance: GenUI SDK is a narrow tool for one ecosystem and one conversion step, while full-stack generators serve broader but heavier workflows.

Concepts & terms

SchemaJson

A structured component description protocol used by GenUI SDK. It describes the component tree, state, methods, and styles in an intermediate representation (IR) that is neither HTML nor JSX, and can be streamed from AI and later converted to a Vue SFC.

Vue SFC

Single File Component, a file with a `.vue` extension that packages template, script, and style for a Vue component. The SDK exports this complete format for direct integration.

componentsMap

A mapping between component names used in SchemaJson and their actual npm package locations and export names. This lets `generateCode()` auto-generate correct import statements for libraries like OpenTiny or Element Plus.

@vue/compiler-sfc

The official Vue compiler for Single File Components. GenUI SDK uses it to validate that generated code is syntactically correct and will run in a Vue 3 project.

Source: juejin.cn ↗ Google Translate ↗ Backup ↗