GenUI SDK v1.3.0 Released: Cross-Framework Compatibility, One-Click Component Library Switch, Fully Enhanced Renderer & Playground

Preface

GenUI SDK is a solution built by the OpenTiny team based on Generative UI concepts, designed to boost display and interactive capabilities of large language models. The SDK delivers integrated front-end & back-end capabilities fully compliant with OpenAI specifications, with built-in Vue and Angular renderers. It supports custom component libraries, interactive behaviors and theme styles. Developers can build AI chat applications from scratch rapidly, or embed Generative UI capabilities into existing business systems.

We are thrilled to announce the official launch of GenUI SDK v1.3.0. This version iterates around five core directions: decoupled core packages, pluggable material systems, enhanced renderer capabilities, cross-frame collaborative rendering, and comprehensive Playground upgrades. It thoroughly resolves pain points such as tight coupling, weak framework compatibility and limited custom extensibility in earlier releases, making the SDK more flexible, stable and better suited for enterprise intelligent implementation scenarios.

• Open Source Repository: https://github.com/opentiny/genui-sdk (Star ⭐ appreciated!)
• Official Website: https://opentiny.design/genui-sdk

Version Feature Overview

📦 Independent Core Packages & Pluggable Material System

1. Standalone core package: @opentiny/genui-sdk-core published to npm. Low-level core utilities including protocol definitions, prompt generation, streaming Schema parsing, Delta incremental patches and JSON repair can be imported independently for custom Agents and server pipelines.
2. Fully decoupled materials: UI materials are completely separated from renderers. Multiple independently publishable material packages are released, supporting one-click switching between OpenTiny and Element Plus component libraries.
3. Smooth legacy compatibility: Legacy components are provided for both Vue and Angular, enabling incremental upgrades without massive refactoring of old projects.

⚡ Renderer Capability Enhancements

1. Auto-fill default props: Unified automatic default value injection for Vue and Angular, acting as fallback for streaming rendering.
2. New refs support: Schema can define refs to directly call component instance methods (e.g. form validation) within methods and event handlers.
3. Enhanced custom Actions: Custom interactive Actions support asynchronous execution and transparent return value passing for flexible complex dialogue workflow orchestration.
4. New lifecycle hooks: onMounted and onUnmounted added to the renderer protocol.

🚀 Cross-Framework Renderer & Full Playground Upgrades

1. One-click switch between Vue and Angular in Playground; mixed framework cards supported within the same chat session.
2. A2A v1.0 protocol supported, with automatic fallback to older versions for incompatible external Agents.
3. One-click conversion of OpenAPI docs into reusable chat tools.
4. Template mode with Schema editing, version history viewing and built-in version control.
5. Optional Mini / Standard prompt versions for Vue stacks.
6. Chinese & English bilingual UI with persistent language preference memory.

🛡️ Experience & Stability Improvements

• Bug fixes for notification payload rendering, plain Markdown display, JSON patch logic and more.
• Image content types aligned with OpenAI specifications.
• Clearer prompt rules for API parameter formatting.

🧪 Early Access Preview

• Beta React renderer released for early testing.

Detailed New Feature Breakdown

1. Independent Core Package for Reusable Low-Level Capabilities

In previous versions, all core logic was tightly coupled inside the main SDK bundle, restricting custom development. v1.3.0 fully extracts underlying logic into the standalone @opentiny/genui-sdk-core package, exposing a complete set of core modules:

• Standardized protocol type definitions
• Intelligent prompt generation logic
• Real-time streaming Schema extraction for LLMs
• Front-end Delta incremental rendering patches
• Automatic JSON repair for AI outputs

Developers can utilize core logic separately on servers, custom Agents and AI pipelines without relying on renderers. For example, generate system prompts by combining core utilities and material metadata:

import { genPrompt } from '@opentiny/genui-sdk-core'
import { materialsMeta } from '@opentiny/genui-sdk-materials-vue-element-plus/meta'

const systemPrompt = genPrompt('Vue', materialsMeta, {
  customActions: [
    {
      name: 'submitForm',
      description: 'Submit form data',
      async: true,
      return: { type: 'boolean' }
    }
  ]
})

Full signature of genPrompt:
genPrompt(framework, materialsMeta, customConfig?, options?)

• The framework parameter accepts string literals ('Vue' / 'Angular') or custom framework configurations for extended support.
• customConfig supports injection of custom components, code snippets and custom Actions.

Refer to the Core library documentation for full usage details.

2. Pluggable Material Architecture: One-Click Switch Between Component Libraries

v1.3.0 completely decouples renderers from UI materials. GenuiChat and GenuiRenderer no longer ship with built-in fixed components. All material sets are injected uniformly via GenuiConfigProvider, realizing a single rendering engine with interchangeable UI material packages.

Three official material packages are available now:

Sample integration for Element Plus:

import 'element-plus/dist/index.css'
import { GenuiConfigProvider, GenuiChat } from '@opentiny/genui-sdk-vue'
import { materials } from '@opentiny/genui-sdk-materials-vue-element-plus/materials'

<GenuiConfigProvider :materials="materials">
  <GenuiChat />
</GenuiConfigProvider>

Legacy compatible components are provided for incremental migration of existing projects without full refactoring:

import {
  GenuiLegacyRenderer as GenuiConfigProvider,
  GenuiLegacyChat as GenuiChat
} from '@opentiny/genui-sdk-vue'

3. New Chart Components

@opentiny/genui-sdk-materials-vue-opentiny-vue has upgraded its chart suite with multiple new chart types, enabling richer UI layouts. Legacy components also receive matching chart upgrades:

• Funnel Chart

• Scatter Chart
  

• Waterfall Chart

• Topology Graph

• Gauge Chart

4. Major Renderer Capability Upgrades

Four key renderer enhancements are delivered to support complex business workflows: default props auto-fill, refs binding, asynchronous custom Actions and lifecycle hooks.

(1) Auto-Fill Default Props for Streaming Render Fallback

Many legacy component libraries were not designed for streaming LLM output. When generating Schema incrementally, required props such as options for Select components may be missing, triggering runtime errors.

v1.3.0 builds a defaultPropsMap from material metadata to automatically inject fallback values without overriding user-defined props. Developers can customize baseline defaults (e.g. all buttons default to primary type). LLMs only need to output differentiated configuration instead of full property sets.

(2) Refs + Asynchronous Actions for Frontend & Backend Form Validation

Two new optional fields are added to custom Action definitions:

• return: JSON Schema defining return value format (omitted for void actions)
• async: If set to true, the execute function returns a Promise; this.callAction() also returns a Promise, enabling await / .then() workflow orchestration for LLMs.

Sample custom Action for duplicate username backend validation:

const customActions = {
  checkUsernameDuplicate: {
    name: 'checkUsernameDuplicate',
    description: 'Call backend API to verify whether the username exists',
    async: true,
    parameters: {
      type: 'object',
      properties: {
        username: { type: 'string', description: 'Username to validate' }
      },
      required: ['username']
    },
    return: {
      type: 'object',
      properties: {
        valid: { type: 'boolean', description: 'True if username is available' },
        message: { type: 'string', description: Validation feedback text }
      },
      required: ['valid', 'message']
    },
    execute: async (params: { username: string }) => {
      const res = await fetch(`/api/user/check-username?username=${encodeURIComponent(params.username)}`)
      const data = await res.json()
      if (data.exists) {
        return { valid: false, message: 'This username is already taken' }
      }
      return { valid: true, message: 'Username available' }
    }
  }
}

refs can be declared on root Schema nodes and bound to component instances via the ref prop. Instance native APIs such as form validation can be called directly within events and custom JS methods.

Full registration example for a registration form combining frontend form validation and backend duplicate checking:

{
  "componentName": "Page",
  "state": {
    "formData": {
      "username": "",
      "password": ""
    }
  },
  "refs": {
    "formRef": null
  },
  "methods": {
    "validateForm": {
      "type": "JSFunction",
      "value": "function() { return this.refs.formRef.validate(); }"
    },
    "checkUsername": {
      "type": "JSFunction",
      "value": "async function() { return this.callAction('checkUsernameDuplicate', { username: this.state.formData }); }"
    },
    "handleSubmit": {
      "type": "JSFunction",
      "value": "async function() { try { const formValid = await this.methods.validateForm(); if (!formValid) return; const result = await this.methods.checkUsername(); if (!result.valid) { console.log(result.message); return; } this.callAction('continueChat', { message: 'Registration succeeded, username: ' + this.state.formData.username }); } catch (e) {} }"
    }
  },
  "children": [
    {
      "componentName": "TinyForm",
      "props": {
        "model": { "type": "JSExpression", "value": "this.state.formData" },
        "ref": { "type": "JSExpression", "value": "this.refs.formRef" },
        "rules": {
          "username": [
            { "required": true, "message": "Please enter username" },
            { "min": 6, "message": "Username must be longer than 5 characters" }
          ],
          "password": [
            { "required": true, "message": "Please enter password" },
            { "min": 6, "message": "Password must be longer than 5 characters" }
          ]
        }
      },
      "children": [
        {
          "componentName": "TinyFormItem",
          "props": { "label": "Username", "prop": "username" },
          "children": [
            {
              "componentName": "TinyInput",
              "props": {
                "placeholder": "Enter username",
                "modelValue": { "type": "JSExpression", "model": true, "value": "this.state.formData.username" }
              }
            }
          ]
        },
        {
          "componentName": "TinyFormItem",
          "props": { "label": "Password", "prop": "password" },
          "children": [
            {
              "componentName": "TinyInput",
              "props": {
                "type": "password",
                "placeholder": "Enter password",
                "modelValue": { "type": "JSExpression", "model": true, "value": "this.state.formData.password" }
              }
            }
          ]
        },
        {
          "componentName": "TinyFormItem",
          "children": [
            {
              "componentName": "TinyButton",
              "props": {
                "type": "primary",
                "text": "Register",
                "onClick": { "type": "JSFunction", "value": "function() { this.methods.handleSubmit(); }" }
            }
          ]
        }
      ]
    }
  ]
}

(3) Lifecycle Hooks for Business Data Loading

Two new lifecycle hooks onMounted and onUnmounted are added to the renderer protocol to enable AI-generated pages to actively request backend data.
Streamed Schema chunks render incrementally, but lifecycle logic only executes once after the full Schema payload is received.

• onMounted: Trigger page initialization logic such as data fetching
• onUnmounted: Clean up requests and event listeners to prevent memory leaks

Sample table page loading employee data on mount:

{
  "componentName": "Page",
  "state": { "tableData": [] },
  "methods": {
    "loadTableData": {
      "type": "JSFunction",
      "value": "async function() { const result = await this.callAction('fetchEmployeeList'); this.state.tableData = result.data; }"
    }
  },
  "lifeCycles": {
    "onMounted": {
      "type": "JSFunction",
      "value": "function() { this.methods.loadTableData(); }"
    }
  },
  "children": [
    {
      "componentName": "TinyGrid",
      "props": {
        "data": { "type": "JSExpression", "value": "this.state.tableData" },
        "columns": [
          { "type": "index", "width": 60 },
          { "field": "name", "title": "Name" },
          { "field": "id", "title": "Employee ID" },
          { "field": "department", "title": "Department" }
        ]
      }
    }
  ]
}

5. Comprehensive Playground Upgrades

Following Skill and A2A support in v1.2.0, v1.30 optimizes the overall Playground user experience with multiple major features:

(1) Cross-Framework One-Click Switch & Mixed Sessions

The unified base engine supports both Vue and Angular without forced stack selection.

• One-click framework toggle, with prompt generation and rendering engine auto-adaptation. Framework preference persists across sessions.
• Mixed framework cards supported within a single chat session for side-by-side comparison of UI and code output.

(2) A2A v1.0 Protocol Support

Playground fully implements the official A2A v1.0 standard, enabling standardized communication between Agents and applications.

• External third-party Agents can be registered as reusable tools to assemble multi-AI workflows.
• Built-in version fallback logic: Automatically downgrade protocol compatibility if external Agents run older A2A versions without manual conditional logic.

Sample external Agent link for specification Q&A:
https://specification.website/.well-known/agent-card.json

(3) OpenAPI to Tool Conversion

Native OpenAPI parser integrated into Playground. Three import modes supported: input document URL, paste raw content or upload local files.
All defined APIs are auto-converted into callable chat tools with one click. Custom request headers and service base URLs can be configured for authentication, eliminating backend refactoring requirements to integrate business systems into AI chat workflows.

(4) Template Version Control

Template mode supports inline Schema editing and real-time previews. New version history feature:

• Auto-save each Schema iteration as a separate version card
• Visual diff comparison between revisions
• One-click rollback to historical templates Simplifies debugging, cross-team scheme comparison and version traceability.

(5) Optional Vue Prompt Versions

Two prompt suites available for Vue development:

• Mini: Lightweight, only includes core form & table components to cut token consumption

• Standard: Adds full chart component support for data visualization scenarios

(6) Bilingual Internationalization

Playground UI supports Chinese / English switch via bottom-left control. Language preferences are automatically saved and restored for new sessions.

Beta React Renderer Release

The official alpha React renderer is launched, paired with Ant Design material packages:

• Core package: @opentiny/genui-sdk-react@1.3.0-alpha.1
• Material package: @opentiny/genui-sdk-materials-react-antd@1.3.0-alpha.1

Prompt Generation Sample

import { genPrompt } from '@opentiny/genui-sdk-core'
import { materialsMeta } from '@opentiny/genui-sdk-materials-react-antd/meta'
const systemPrompt = genPrompt('React', materialsMeta)

Component Usage Sample

import { useState } from 'react'
import { GenuiConfigProvider, GenuiRenderer } from '@opentiny/genui-sdk-react'

function App() {
  const [schema, setSchema] = useState('')
  return (
    <GenuiConfigProvider materials={materials}>
      <GenuiRenderer key={rendererKey} content={schema} />
    </GenuiConfigProvider>
  )
}

Other Stability Fixes & Optimizations

• Optimized plain Markdown fallback rendering for pages without UI components
• Hardened JSON Patch incremental rendering logic, standardized component ID allocation to avoid layout corruption
• Image schema formats fully aligned with OpenAI standards for universal LLM compatibility
• Stricter prompt parameter validation rules to reduce invalid model outputs
• Fixed runtime errors when refs returns empty objects during streaming rendering

Version Summary

GenUI SDK v1.3.0 is a major architectural overhaul combining decoupling, capability expansion and UX upgrades:

1. Core independent packages + pluggable material architecture drastically improve SDK extensibility
2. Renderer layer optimizations resolve critical production pain points for streaming and complex interactive UIs
3. Playground upgrades lower development barriers, with forward-looking support for React and A2A v1.0 to fully meet enterprise intelligent transformation demands

All developers are welcome to upgrade and test. Submit bugs or feature requests via GitHub Issues, and star the repository to support open-source collaboration!
Full release notes: v1.3.0 Release Page

About OpenTiny NEXT

OpenTiny NEXT is an enterprise intelligent front-end solution built on Generative UI and WebMCP core technologies. It delivers intelligent upgrades for legacy products including the TinyVue component library and TinyEngine low-code engine, while launching Agent-native products such as front-end NEXT-SDKs, AI Extension, TinyRobot AI Assistant and GenUI. It enables AI to interpret user intentions and complete tasks autonomously, accelerating enterprise intelligent transformation.

Join the OpenTiny Open Source Community

WeChat Assistant: opentiny-official

• Official Website: https://opentiny.design
• GenUI SDK Repository: https://github.com/opentiny/genui-sdk (Star ⭐ appreciated)

To contribute, locate issues tagged good first issue in the repository. Feel free to share questions and feedback in comment sections!