跪拜 Guibai
← Back to the summary

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

This walkthrough focuses on the Vue code generation capability in GenUI SDK v1.4.0, showing the leap from "view-only" to "directly deployable".

Have you ever run into this situation

When you see a polished interface, have you ever thought: if only I could turn it into source code and reuse it?

That's exactly what GenUI SDK's code generator does—except that "polished interface" isn't someone else's website, but the one rendered in real time by AI inside GenUI's chat interface, the kind you can click and fill in.

In the Playground you type: "Generate an order management page with a search form, data table, and pagination." Within seconds the page appears, and it's genuinely interactive—you can click buttons, fill forms, switch pages.

You adjust the form layout, tweak the table column widths, add a status filter. It looks good, and you're satisfied.

Click Export, and the full source code of that interface lands in your hands—cleanly formatted, syntax-checked, ready to drop directly into your project.

GenUI SDK v1.4.0 is built for exactly this.

See it in action

1.png

Three steps only:

  1. Describe the interface you want in natural language
  2. AI streams a SchemaJson (structured component description)
  3. Call generateCode() to export a complete Vue SFC

The exported file looks like this:

<template>
  <tiny-form :model="state" label-width="100px">
    <tiny-form-item label="订单号">
      <tiny-input v-model="state.orderId" placeholder="请输入订单号"/>
    </tiny-form-item>
    <tiny-form-item label="客户名称">
      <tiny-input v-model="state.customerName" placeholder="请输入客户名称"/>
    </tiny-form-item>
    <tiny-form-item>
      <tiny-button type="primary" @click="submit" :loading="state.loading">
        提交订单
      </tiny-button>
    </tiny-form-item>
  </tiny-form>
</template>

<script setup>
import { reactive } from 'vue'
import { TinyForm, TinyFormItem, TinyInput, TinyButton } from '@opentiny/vue'

const state = reactive({
  orderId: '',
  customerName: '',
  loading: false
})

async function submit() {
  state.loading = true
  try {
    console.log('提交订单:', state)
  } finally {
    state.loading = false
  }
}
</script>

<style scoped>
/* 自动生成的样式 */
</style>

Copy it directly into your Vue 3 project and it runs.

Why this matters

You might say: "There are plenty of AI UI generators—Cursor, Bolt, they all do this."

True, those tools do generate usable code. But GenUI SDK's difference is that it's a streaming generation solution purpose-built for the Vue ecosystem, with a complete compilation and validation chain from Schema to SFC, and the generated code follows Vue 3 best practices.

1. From prototype to product in one step

What's saved isn't a few minutes of copying code—it's the mental load of the entire "rebuild" stage.

2. Generated code follows Vue 3 best practices

Not a random pile of template + script + style, but:

This is not "code that looks right", it's "code that works".

3. Supports complex scenarios

Not just simple buttons and inputs, but:

Generate a complex form with AI, export it, and you get a complete Vue component—state, events, and styles all preserved.

Compare with other tools

Capability GenUI SDK v1.4 Bolt.new
Generation method Streaming SchemaJson Full-stack project generation
Export format Vue SFC (ready to use) Whole project (too heavy)
State management reactive / ref automatically converted Full-stack state (overly complex)
Component library support OpenTiny / Element Plus Any (but requires manual config)
Compilation validation Yes (ensures it runs) No
Use case Fast code generation for Vue projects Full-stack app prototypes

Core difference: GenUI SDK is focused on the Vue ecosystem; the generated code is directly usable and needs no secondary translation.

Get started in 5 minutes

1. Install

npm install @opentiny/genui-sdk-vue

2. Basic usage

import { generateCode } from '@opentiny/genui-sdk-vue/code-generator'

const schema = {
  componentName: 'Page',
  state: {
    count: 0,
    message: 'Hello'
  },
  methods: {
    increment: {
      value: 'function() { this.state.count++ }'
    }
  },
  children: [
    {
      componentName: 'TinyButton',
      props: {
        text: 'Click me',
        onClick: {
          type: 'JSExpression',
          value: 'this.increment'
        }
      }
    }
  ]
}

const { panelName, panelValue, errors } = await generateCode({
  pageInfo: {
    name: 'Counter',
    schema
  },
  componentsMap: [
    {
      componentName: 'TinyButton',
      package: '@opentiny/vue',
      exportName: 'TinyButton'
    }
  ],
  formatWithPrettier: true
})

if (errors.length) {
  console.error('编译错误:', errors)
} else {
  console.log(`生成文件: ${panelName}`)
  console.log(panelValue)
}

3. Try online

Don't want to install? Head to the Playground:

GenUI SDK Playground

Enter a natural-language description in the Playground, click "Export Vue Source" and you'll see the complete SFC code.

2.gif

Some technical details

If you're curious how it works, here's a quick look:

1. What is SchemaJson

SchemaJson is a structured component description protocol defined by GenUI SDK. It's not HTML or JSX, but an intermediate representation (IR) that describes the component tree, state, methods, styles, and so on.

For example, a button:

{
  "componentName": "TinyButton",
  "props": {
    "text": "提交",
    "type": "primary",
    "onClick": {
      "type": "JSExpression",
      "value": "this.submit"
    }
  }
}

The AI streams this Schema, then generateCode() converts it into a Vue SFC.

2. The conversion process

3.png

Key points:

3. Material system integration

If you use OpenTiny Vue or Element Plus, you can use the official material metadata directly:

import { materialsMeta } from '@opentiny/genui-sdk-materials-vue-opentiny-vue/meta'

const componentsMap = materialsMeta.materials.flatMap((material) =>
  (material.data?.materials?.components ?? []).map((item) => ({
    componentName: item.component,
    package: item.npm.package,
    exportName: item.npm.exportName,
  }))
)

This way generateCode() automatically generates correct import statements.

Who should use it

Summary

Everyone is exploring AI-generated UI. But most tools stay at the "generate a preview" stage, one step short of real engineering delivery.

GenUI SDK v1.4.0's Vue code generation capability is meant to close that final mile. It doesn't generate code that "looks right"; it generates code that runs. From Schema parsing to code generation to compilation validation, the entire pipeline is well thought out. The generateCode API is simple, and the resulting SFC is structurally complete.

If you work on Vue projects, give it a try—it's a solution worth evaluating seriously.

About OpenTiny

OpenTiny is a front-end AI application development platform for enterprise scenarios. Built on two core underlying technologies, Generative UI and WebMCP, the platform offers NEXT-SDKs adapted to the Agent intelligent application ecosystem, AI extension tools, TinyRobot conversational AI component library, GenUI SDK generative UI, WebAgent intelligent agents, and more. It uses AI to parse user intent, automatically drives task execution, and helps enterprises upgrade existing business systems with intelligence quickly.

OpenTiny also provides mature common front-end infrastructure: the TinyVue component library that works cross-end, cross-framework, and cross-version, alongside the TinyNG component library built on Angular+TypeScript. It includes TinyEngine, a highly customizable low-code engine, and supporting tools like TinyPro admin templates and TinyCLI, giving developers everything they need to efficiently build enterprise web applications.

Welcome to the OpenTiny open-source community. Add the WeChat assistant: opentiny-official to join the front-end conversation. OpenTiny website: https://opentiny.design GenUI SDK repository: https://github.com/opentiny/genui-sdk (star it! ⭐)

If you want to contribute, head to the repository and look for the good first issue label. Have questions? Leave a comment!