When AI responses evolve beyond plain Markdown text and directly render interactive forms, charts and cards — this marks the next frontier of AI interaction. Enter GenUI SDK.
1. What Is This Project All About?
GenUI SDK is a full-stack development toolkit built by the OpenTiny team around Generative UI.
The core concept is straightforward, as shown in the comparison table below:
| Dimension | Traditional Conversational AI | Generative UI |
|---|---|---|
| AI Output | Plain text / Markdown | Interactive components (forms, charts, cards) |
| User Operations | Only send follow-up messages | Directly interact with UI generated by AI |
| Information Density | Low (text-based order descriptions) | High (visual order cards with actionable buttons) |
Example Scenario
If a user asks to check their order status:
- Traditional AI replies with paragraphs of text describing order details.
- Generative UI renders a complete order card with status tags and clickable "Cancel Order" buttons.
GenUI SDK’s core mission: Upgrade AI output from natural language to component description language.
Current version: @opentiny/genui-sdk-vue@1.2.1, released under the MIT License.
Code composition: 66.2% TypeScript + 31.2% Vue.
2. Core Mechanism: Schema-Driven Rendering
The "magic" of GenUI SDK relies on a fixed processing pipeline:
AI Output → UI Schema → Renderer Parsing → Vue/Angular Components → User Interaction → New Message → AI
A UI Schema is descriptive component definitions, not hardcoded HTML or Vue templates, which specify:
- Component type (
Form,Card,Chart, etc.) - Component properties (form fields, card content, chart datasets)
- Interactive behaviors (button clicks, form submission callbacks)
Key Insight
AI outputs component descriptive language instead of raw natural language. The front-end renderer translates these descriptions into real UI elements.
AI developers do not need to write Vue syntax — they only need to define requirements such as "a table with three columns and the following data".
3. Architecture Breakdown: Integrated Frontend & Backend Multi-Package Design
genui-sdk/
├── packages/
│ ├── server/ # Backend service package
│ ├── frameworks/
│ │ ├── vue/ # Vue renderer
│ │ └── angular/ # Angular renderer
│ ├── core/ # Shared core logic
│ ├── materials/ # Component material definitions
│ ├── chat-completions/ # Chat completion utilities
│ ├── benchmarks/ # Performance benchmark scripts
│ └── ...
├── projects/ # Demo projects
├── sites/ # Playground website
├── docs/ # Official documentation
└── pnpm-workspace.yaml
| Package Name | Core Responsibility | Key Capabilities |
|---|---|---|
@opentiny/genui-sdk-server |
Backend brain | LLM integration, message orchestration, tool calling, access control |
@opentiny/genui-sdk-vue |
Vue front-end renderer | Schema parsing, dynamic component rendering, theme customization |
@opentiny/genui-sdk-angular |
Angular front-end renderer | Schema parsing, dynamic Angular component rendering |
Full-Stack Integration
GenUI is not merely a front-end wrapper. The Server package acts as the central brain, converting plain LLM text responses into structured payloads carrying renderable UI Schema.
4. Server Package: More Than a Simple LLM Proxy
The core value of the Server package lies in response orchestration and enhancement:
- LLM Integration: Compliant with OpenAI API specs, compatible with OpenAI, DeepSeek, Anthropic and other mainstream large models
- Message Orchestration: Assemble user prompts, AI replies and tool return values into complete conversation streams
- MCP Tool Extensions: Connect external/enterprise systems via Model Context Protocol to expand AI tooling capabilities
- Access Control: Assign distinct tool permissions for different users, a critical requirement for enterprise scenarios
- Custom Actions: Configure custom commands such as page navigation and dynamic form generation
In short: The Server layer does not simply forward raw API responses — it translates plain AI text into renderable instructions for the front end.
5. Vue Renderer: Translator Between Schema & Real Components
Vue Renderer Workflow
- Receive UI Schema returned by the LLM
- Parse schema into standardized component definitions (type, props, interactions)
- Dynamically mount components via Vue’s built-in
<component :is="xxx"> - Wrap user interactive events into standardized messages and send them back to the AI
Customization Capabilities
- Custom Component Registration: Register business-specific components so the AI can generate them alongside standard UI elements
- Custom Interaction Flows: Configure multi-turn dialogue logic and custom command handlers
- Tokenized Theming System: Full support for brand styling and dark mode
6. Materials System: The AI’s UI Vocabulary Library
packages/materials/
The Materials package serves as GenUI’s dictionary of available UI building blocks:
- Each material defines a component’s specifications: name, props, default values and interactive rules
- The AI can only render components registered in the Materials library, eliminating unrenderable UI output
- Developers can extend the library with new materials to expand the AI’s UI generation vocabulary
Material Extension Process
- Register component Schema definitions in Materials
- Register corresponding component implementations in Vue/Angular renderers
- Configure the Server layer to enable AI generation of this component
- The LLM can now output this component type in its responses
AI generation capabilities always align with front-end rendering support — eliminating mismatches where the AI outputs UI elements the client cannot display.
7. MCP Tool Integration: AI Beyond Visual Display
GenUI SDK fully supports Model Context Protocol (MCP) extensions:
- AI can invoke tools mid-conversation: query databases, call external APIs, read file data
- Raw tool return data can be automatically converted into Generative UI components such as data tables
- MCP transforms GenUI from a pure presentation layer into a complete business operation layer
Real-World Example
When a user asks to pull monthly sales data, the AI will not only describe metrics in text — it renders an interactive chart with built-in dimension switching and filtering functions, enabling true hands-on AI operations.
8. Angular Renderer: True Cross-Framework Compatibility
The Angular renderer mirrors all functionality of the Vue renderer, leveraging Angular’s dynamic component APIs to render Schema-defined UI elements.
Cross-Framework Design Philosophy
Schemas are universal, while renderers are interchangeable. Developers can select either Vue or Angular without being locked into a single framework.
9. Playground: Self-Demonstrating Demo Environment
GenUI provides an official online Playground:
https://opentiny.github.io/genui-sdk/playground/
The standout feature: the Playground itself is built entirely with GenUI SDK. All interactive UI elements generated during your chat sessions are real production-grade GenUI outputs — a live demo more persuasive than static documentation screenshots.
10. GenUI’s Position Within the OpenTiny Ecosystem
| Ecosystem Partner | Relationship |
|---|---|
| TinyRobot | GenUI’s Vue renderer may reuse TinyRobot’s base chat UI components |
| NEXT SDK | NEXT SDK’s WebMCP module provides browser-side transport for GenUI tool calls |
| TinyVue | GenUI’s built-in materials include native TinyVue components — AI can generate standard TinyVue UI out of the box |
| TinyEngine | Shares core schema-driven rendering logic with low-code engines |
GenUI SDK sits in the top AI application layer of the OpenTiny stack. It leverages underlying UI components (TinyVue / TinyRobot) and protocol layers (NEXT SDK / WebMCP) to build end-user-facing Generative AI applications.
11. Summary: The Next Era of AI Interaction
Core Innovations
- Generative UI Paradigm: Shift from text-only dialogue to fully interactive AI-generated interfaces
- End-to-End Frontend & Backend Integration: Complete Server + Vue/Angular stack instead of isolated front-end shells
- Schema-Driven Architecture: Framework-agnostic descriptive layer connecting LLM outputs and client rendering
- Extensible Material Library: Controlled expansion of the AI’s UI generation vocabulary
Core Advantages
- Compliant with OpenAI API standards, low barrier for LLM access
- Dual official renderers for Vue and Angular, no framework lock-in
- Native MCP integration enabling AI to perform actionable business operations
- Self-contained Playground for live, tangible product demonstrations
Current Limitations
- Small GitHub star count; the project is still in early adoption and requires more real-world case validation
- Generative UI relies on well-engineered LLM prompts to produce valid Schema outputs
- The upper limit of AI UI complexity is determined by the richness of registered materials
Ideal Application Scenarios
- AI customer service panels with one-click business operations
- Dynamic AI-powered data visualization dashboards
- Context-aware conversational form filling
- Enterprise internal AI assistant interaction upgrades
GenUI SDK pioneers the next generation of AI front-end interaction, moving beyond plain text dialogue to fully interactive generative UI. While the project is in its early stages, its architecture delivers a clear long-term vision and solid engineering foundations.
Project Resources
| Resource Type | Link |
|---|---|
| GitHub Source Code | https://github.com/opentiny/genui-sdk |
| Official Documentation | https://docs.opentiny.design/genui-sdk/guide/quick-start.html |
| Online Playground | https://opentiny.github.io/genui-sdk/playground/ |
| Server Usage Docs | https://docs.opentiny.design/genui-sdk/guide/server-usage.html |
| Official Website | https://opentiny.design/genui-sdk |
| NPM Vue Package | https://www.npmjs.com/package/@opentiny/genui-sdk-vue |
If this project interests you, give it a like and star the repo to share it with more developers! Generative UI represents the next major wave of AI interaction — get ahead of the curve by learning it early.
About OpenTiny NEXT
OpenTiny NEXT is an enterprise-grade intelligent front-end development 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 new Agent-native products such as front-end NEXT-SDKs, AI Extension, TinyRobot AI Assistant and GenUI. The stack enables AI to interpret user intentions and complete tasks autonomously, accelerating intelligent transformation for enterprise applications.
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)
If you wish to contribute, look for issues tagged good first issue within the repository. Feel free to leave comments with any questions or feedback!
Top comments (0)