Diving Into GenUI SDK Source Code: How AI Enables Both Chat & Dynamic Page Rendering

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/[email protected], 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

Enter fullscreen mode Exit fullscreen mode

A UI Schema is descriptive component definitions, not hardcoded HTML or Vue templates, which specify:

1. Component type (Form, Card, Chart, etc.)
2. Component properties (form fields, card content, chart datasets)
3. 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

Enter fullscreen mode Exit fullscreen mode

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

1. Receive UI Schema returned by the LLM
2. Parse schema into standardized component definitions (type, props, interactions)
3. Dynamically mount components via Vue’s built-in <component :is="xxx">
4. 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/

Enter fullscreen mode Exit fullscreen mode

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

1. Register component Schema definitions in Materials
2. Register corresponding component implementations in Vue/Angular renderers
3. Configure the Server layer to enable AI generation of this component
4. 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

1. Generative UI Paradigm: Shift from text-only dialogue to fully interactive AI-generated interfaces
2. End-to-End Frontend & Backend Integration: Complete Server + Vue/Angular stack instead of isolated front-end shells
3. Schema-Driven Architecture: Framework-agnostic descriptive layer connecting LLM outputs and client rendering
4. 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

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!