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

Foreword

GenUI SDK is a solution built by the OpenTiny team based on the concept of generative UI, designed to enhance the display and interaction effects of large models. The SDK provides complete front-end and back-end integrated capabilities, following the OpenAI specification; it has built-in Vue and Angular dual-framework renderers, supporting custom component libraries, interaction behaviors, and theme styles. It can quickly build an AI conversation application from scratch or embed generative UI capabilities into existing business systems.

Recently, GenUI SDK v1.3.0 has been officially released! This version iterates around five core directions: decoupling core capabilities into separate packages, making the material system pluggable, strengthening renderer capabilities, collaborative multi-framework rendering, and a comprehensive upgrade of the playground. It completely solves the pain points of the old version, such as high coupling, weak framework adaptation, and limited custom extension, making the SDK more flexible, more stable, and more suitable for enterprise-level intelligent implementation scenarios.

Open source address: github.com/opentiny/genui-sdk (Welcome to Star ⭐)
Official website: opentiny.design/genui-sdk

Version Feature Overview

📦 Core Capability Release + Pluggable Materials

Core package released independently: @opentiny/genui-sdk-core is officially online on npm. Underlying core capabilities such as protocol definitions, Prompt generation, streaming Schema parsing, Delta incremental patches, and JSON repair can be introduced separately, adapting to personalized scenarios like custom Agents and server-side pipelines.
Materials completely decoupled: UI materials and renderers are thoroughly split, launching multiple sets of independently publishable material packages, supporting one-click switching between OpenTiny and Element Plus component libraries.
Smooth compatibility for existing projects: Vue and Angular both provide Legacy compatibility components, allowing old projects to upgrade without large-scale modifications.

⚡ Renderer Capability Enhancement

Default value completion: Default Props are automatically completed uniformly on both Vue and Angular ends, allowing free setting of default values to act as a fallback for streaming rendering.
New refs: Schema supports refs, allowing direct calls to component instance methods (like form validate) within methods/events.
Custom Action enhancement: Custom interaction Actions support asynchronous execution and return value passthrough, allowing complex conversation chains to be freely orchestrated.
Lifecycles: The renderer protocol adds two lifecycles: onMounted / onUnmounted.

🚀 Multi-framework Rendering + Playground Comprehensive Upgrade

One-click switching between Vue / Angular in the playground, allowing mixed-use of cards from both ends within the same session.
Supports A2A v1.0, automatically falls back to the old version if the peer is incompatible.
Converts OpenAPI documents into usable tools within conversations with one click.
Template mode allows manual Schema editing, viewing version history, and introducing version management.
Vue tech stack prompts offer optional Mini / Standard versions.
Chinese-English bilingual switching, with language preference remembered.

🛡️ Experience and Stability

Multiple fixes including notification payloads, pure Markdown display, and jsonPatch reinforcement.
Image content type aligned with OpenAI specification; Prompt rules for API parameter usage are clearer.

🧪 Early Access

A new React renderer beta version is available for early access.

Detailed Explanation of New Features

1. Core Package Released Independently, Capabilities Freely Reusable

In the old version of GenUI SDK, core capabilities were all coupled within the overall package, preventing developers from reusing the underlying logic independently, limiting custom development. v1.3.0 completely extracts the core underlying capabilities, independently releasing @opentiny/genui-sdk-core, opening up a full set of underlying core modules:

Standardized protocol type definitions
Intelligent Prompt generation logic
Real-time extraction of large model streaming Schema
Front-end incremental rendering Delta Patch
Automatic repair of AI output JSON

Developers can detach from the renderer and use core capabilities independently in servers, custom Agents, and AI pipelines, greatly increasing flexibility. Taking prompt generation as an example, the core package + material metadata can assemble a system prompt:

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', async: true, return: { type: 'boolean' } },
  ],
})

The complete type for genPrompt is genPrompt(framework, materialsMeta, customConfig?, options?). framework can accept a string ('Vue' / 'Angular') or a custom framework configuration, facilitating the extension of new frameworks; customConfig can also inject custom components, snippets, examples, and Actions.

For detailed usage, see the Core Library Usage Documentation.

2. Pluggable Material Architecture, One-Click Switching Between Multiple Component Libraries

This version completes the thorough decoupling of renderers and UI materials. GenuiChat and GenuiRenderer no longer have built-in fixed component libraries. Material configurations are uniformly injected through GenuiConfigProvider, truly realizing "one rendering kernel, multiple UI materials freely switchable."

Three official material packages are now online:

Material Package	Applicable Scenario
`@opentiny/genui-sdk-materials-vue-opentiny-vue`	Vue + OpenTiny
`@opentiny/genui-sdk-materials-vue-element-plus`	Vue + Element Plus
`@opentiny/genui-sdk-materials-angular-opentiny-ng`	Angular + OpenTiny NG

Taking Element Plus adaptation as an example, quick integration code:

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>

At the same time, the version provides Legacy compatibility components, allowing existing old projects to be compatible at zero cost without needing a one-time full refactoring, supporting progressive upgrades:

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

3. New Chart Components

This update upgrades the chart component version in @opentiny/genui-sdk-materials-vue-opentiny-vue and also adds multiple new chart components for building richer interfaces. Legacy compatibility components have also been upgraded synchronously and new charts added.

Funnel Chart:

Scatter Chart:

Waterfall Chart:

Topology Chart:

Dashboard:

4. Renderer Capability Enhancement

During the implementation and application in business scenarios, we have continuously polished the renderer capabilities. v1.3.0 enhances four capabilities in the renderer: Default Props, refs, asynchronous Actions, and lifeCycles, enabling the GenUI SDK to adapt to more complex business scenarios.

(1) Default Props: Fallback with Default Values, Avoiding Streaming Rendering Exceptions

Currently, commonly used component libraries, developed earlier, did not consider streaming rendering scenarios. Some required properties are not friendly for streaming rendering. Therefore, when a large model generates a Schema in a streaming manner, it faces the awkward problem that components may lack some required properties during the streaming process, such as the options of a select component, causing rendering errors because the property is null/undefined.

v1.3.0 builds a defaultPropsMap based on material metadata, automatically completing empty value properties (values explicitly passed by the user will not be overwritten), while also supporting custom modification of component baseline default configurations (for example, a button component defaults to the primary type if not configured). The large model only needs to output differentiated key configurations.

(2) refs + Asynchronous Actions: Supporting Component Instance Calls, Implementing Backend Form Validation

Two optional fields have been added to the definition of custom Actions:

return: Return value JSON Schema, omission indicates no return value.
async: When true, execute can return a Promise, and this.callAction(name, params) will also return a Promise. After the large model understands this, it can orchestrate using then / await.

Below is a custom Action for form validation, connecting to a backend interface to check if a username is duplicate:

const customActions = {
  checkUsernameDuplicate: {
    name: 'checkUsernameDuplicate',
    description: 'Connect to backend interface to check if the username already exists (duplicate)',
    async: true,
    parameters: {
      type: 'object',
      properties: {
        username: {
          type: 'string',
          description: 'Username to be checked',
        },
      },
      required: ['username'],
    },
    return: {
      type: 'object',
      properties: {
        valid: {
          type: 'boolean',
          description: 'Whether validation passed: true means username is available, false means duplicate',
        },
        message: {
          type: 'string',
          description: 'Validation result description',
        },
      },
      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();
      // Assume backend returns { exists: boolean }
      if (data.exists) {
        return { valid: false, message: 'Username already exists' };
      }
      return { valid: true, message: 'Username is available' };
    },
  },
};

refs supports declaring instance references at the root node, binding component instances via props.ref; then, component instance native methods can be directly called within events and custom methods, enabling the use of form validation capabilities for preliminary front-end validation, combined with custom Actions that support asynchronous execution and can obtain return results for backend business validation.

Typical scenario: During user registration, first perform rule validation on the account and password through the front-end form, then initiate a backend interface check for account uniqueness. The entire "front-end preliminary validation → backend duplicate check → continue registration" process can be orchestrated directly within the Schema.

Combined with the custom Action mentioned above, a complete business scenario form registration validation example is as follows:

{
  "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.username }); }"
    },
    "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 successful, 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 length must be greater than 5 characters" }
          ],
          "password": [
            { "required": true, "message": "Please enter password" },
            { "min": 6, "message": "Password length must be greater than 5 characters" }
          ]
        }
      },
      "children": [
        {
          "componentName": "TinyFormItem",
          "props": {
            "label": "Username",
            "prop": "username"
          },
          "children": [
            {
              "componentName": "TinyInput",
              "props": {
                "placeholder": "Please 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": "Please 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 Implemented, Supporting Generative UI Loading Business Data

The renderer has added page lifecycles onMounted and onUnmounted.

The core function is to enable AI-generated pages to actively request the backend and pull business data. Considering that generative UI continuously updates the Schema via streaming fragments, we have implemented timing control: the page can still receive data streams and render previews in real-time, but lifecycle hooks wait until the entire Schema has been received and execute only once.

onMounted is suitable for initiating API calls and loading business data; onUnmounted executes when the page closes, used to cancel requests and clean up various listeners to prevent resource leaks. Currently, both Vue and Angular frameworks fully support this, truly upgrading generated pages from static templates to usable interfaces capable of connecting to backends and carrying business logic.

Below is an example of using a custom Action combined with lifecycles to request backend data:

{
  "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. Playground Capabilities Further Enhanced

After adding skill capabilities and A2A capabilities in v1.2.0, v1.3.0 is committed to optimizing the experience, further enhancing and optimizing the playground's capabilities.

(1) Multi-framework: One-Click Switching, Mixed Use on the Same Screen

The multi-framework solution breaks the limitation of "choosing one" tech stack, with a single base supporting two mainstream front-end frameworks, Vue and Angular, simultaneously.

In the playground, you can switch the target framework with one click; after switching, the Prompt-driven code generation logic and the component real-time rendering engine will automatically synchronize and adapt to the current tech stack. The system persistently remembers your framework preference, so you don't need to reconfigure when reopening the session.

Mixed use within the same historical session is supported, allowing Schema cards generated by different frameworks (Vue, Angular) to be displayed simultaneously within one session, facilitating developers' horizontal comparison of code structures, component styles, etc., across two tech stacks.

(2) A2A Protocol Upgraded to v1.0

The playground has officially completed adaptation to the A2A v1.0 protocol.

A2A provides standardized interoperability capabilities between Agents and applications. Its core value lies in supporting the integration of various external Agents and encapsulating third-party intelligent agents into standardized tools, flexibly assembling multi-party AI capabilities and breaking down calling barriers between different Agents.

The communication link comes with a built-in version compatibility mechanism: the system automatically detects the protocol version used by the connected external Agent. When it detects that a call failure is caused by the other party using an old protocol, it will intelligently and automatically fall back to adapt. Developers do not need to develop additional version judgment logic, efficiently completing the interconnection of new and old Agent ecosystems.

For example, here is an online Agent that answers web specification questions; you can connect it to the playground for experience. After connecting, ask an SEO-related question:

Agent Link: https://specification.website/.well-known/agent-card.json

(3) OpenAPI Documents to Tools

The platform has built-in OpenAPI parsing capabilities, enabling one-click conversion of existing interfaces into conversation tools.

You can configure the OpenAPI document address, paste document content, or upload an OpenAPI document file in the playground, then parse the document content with one click. The playground will automatically parse the interface definitions, batch-encapsulate business APIs into standardized conversation tools for the agent to call. (Usually requires synchronous configuration of request headers)

After configuring the target service address and authentication request headers, the system can quickly integrate existing business capabilities into the conversation flow without modifying backend code, enabling flexible orchestration and reuse of business capabilities, efficiently connecting AI with business systems.

Below is a demonstration of converting Huawei Cloud ECS documents into tools (requires self-configuration of token):

(4) Template Added Historical Version Control

The template mode opened in v1.2.0 supports direct online editing of Schema, with real-time preview of rendering effects after modification. However, without history records after modification, it was difficult to track changes after multiple modifications and impossible to roll back to a specific version. This update adds version history capability. The system automatically retains every Schema generation record in card form, supporting quick viewing of version difference Diffs and one-click rollback to reproduce historical solutions. This facilitates problem tracing and horizontal comparison of solutions, reducing costs caused by repeated debugging and solution loss, and improving template iteration and debugging efficiency.

After modification, a history record is generated; click the history record to view the diff. You can also apply a previous historical version with one click:

(5) Switch Prompt Versions

When selecting the Vue tech stack, two sets of prompt specifications are provided: The Mini version is streamlined and lightweight, retaining only common scenarios like form components and table components, significantly reducing Token consumption. The Standard version mainly adds chart components, supporting chart data rendering. You can freely choose based on the model's capabilities to achieve the optimal balance between resources and effectiveness.

Generate a form using the Mini version:

Generate a chart using the Standard version:

(6) Internationalization Adaptation

The playground has undergone internationalization adaptation, supporting free switching between Chinese and English interfaces. You can adjust the language type via the control in the lower left corner of the page. The playground will automatically remember the language preference setting and automatically load the corresponding language when re-entering the page or creating a new session.

React Renderer Beta Version Released

The React renderer beta version is released, with the supporting Ant Design material library launched simultaneously! Currently, the React tech stack has released two beta packages: @opentiny/[email protected] and @opentiny/[email protected]. We sincerely invite everyone to try them out early and provide suggestions to help make the official version more complete!

Prompt generation:

import { genPrompt } from '@opentiny/genui-sdk-core';
import { materialsMeta } from '@opentiny/genui-sdk-materials-react-antd/meta';

const systemPrompt = genPrompt('React', materialsMeta);

UI component usage:

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

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

The demo generation effect is as follows:

Other Issue Fixes, Improving Production Stability

Optimized rendering logic for pure Markdown text scenarios, falling back to plain text display when there are no UI cards.
Strengthened JSON patch rendering rules, optimized component ID allocation mechanism to avoid incremental rendering chaos.
Unified image content type to the OpenAI standard, adapting to mainstream large models across the network.
Optimized Prompt parameter validation and usage rules, constraining model output specifications to reduce the probability of exceptions.
Fixed an error occurring when ref is an empty object during streaming rendering.

Version Summary

GenUI SDK v1.3.0 is a major iteration of architecture decoupling + capability strengthening + experience upgrade: Through the independent release of Core and the pluggable material architecture, it completely liberates the SDK's extensibility; through underlying renderer optimizations, it solves production pain points of streaming rendering and complex interactions; through a comprehensive playground upgrade, it lowers the barrier for developers to implement, while also proactively supporting the React beta version and the latest A2A protocol, comprehensively adapting to the needs of enterprise front-end intelligent transformation.

Welcome all developers to upgrade and experience. If you encounter problems during use or have suggestions for feature optimization, you can provide feedback through GitHub Issues. You are also welcome to Star the repository and participate in open-source co-construction!

For complete iteration details, please refer to the official Release documentation: v1.3.0 Release Note

About OpenTiny NEXT

OpenTiny NEXT is an enterprise intelligent front-end development solution. Based on two core technologies, generative UI and WebMCP, it intelligently upgrades existing traditional products like the TinyVue component library and the TinyEngine low-code engine, building new products such as front-end NEXT-SDKs for Agent applications, AI Extension, TinyRobot intelligent component library, and GenUI. This enables AI to understand user intentions and autonomously complete tasks, accelerating the intelligent transformation of enterprise applications.

Welcome to join the OpenTiny open-source community. Add the WeChat assistant: opentiny-official to participate in exchanging front-end technology~
OpenTiny Official Website: https://opentiny.design
GenUI SDK Code Repository: https://github.com/opentiny/genui-sdk (Welcome to star ⭐)

If you also want to contribute, you can enter the code repository, find the good first issue tag, and participate in open-source contribution together~ If you have any questions, feel free to leave a comment in the comment section for discussion!