Server-Generated UI (SGUI) - An AI-powered framework for generating dynamic user interfaces through natural language.
Like Aladdin's magic lamp - Describe what you want, and Genie makes it happen.
🎥 Watch Demo on YouTube - Ask AI to generate a bar chart and see Genie in action!
Genie (SGUI - Server Generated UI) is an innovative framework that enables AI agents to generate user interfaces dynamically based on natural language input. Instead of pre-building every possible UI component, Genie interprets user intent and generates appropriate UI components on the fly.
Traditional approach: Fixed UI Components → Limited Possibilities
Genie's approach: AI-Generated UI → Infinite Possibilities
graph TB
User[👤 User Input<br/>Natural Language] --> Context[🧠 Context Manager<br/>Dialog • Intent • Component • Interaction]
Context --> Intent[🎯 Intention Agent<br/>AI-powered Intent Understanding]
Intent --> SGUI[⚙️ SGUI Agent<br/>Component Generation]
SGUI --> Protocol[📋 SGUI-shiliu Protocol<br/>Platform-Agnostic JSON]
Protocol --> Web[🌐 Web Renderer<br/>React/Vue/Angular]
Protocol --> Mobile[📱 Mobile Renderer<br/>iOS/Android]
Protocol --> IoT[🔌 IoT Renderer<br/>Embedded Devices]
Web --> UI1[✨ Final UI]
Mobile --> UI2[✨ Final UI]
IoT --> UI3[✨ Final UI]
style User fill:#e3f2fd
style Context fill:#fff3e0
style Intent fill:#f3e5f5
style SGUI fill:#e8f5e9
style Protocol fill:#fce4ec
style Web fill:#e0f2f1
style Mobile fill:#e0f2f1
style IoT fill:#e0f2f1
style UI1 fill:#fff9c4
style UI2 fill:#fff9c4
style UI3 fill:#fff9c4
- 🤖 AI-Driven Generation - Components generated on-demand by AI based on user intent
- 🎨 Platform Agnostic - Generate once, render anywhere (Web, Mobile, IoT)
- 🔌 Adapter Architecture - Works with any component library through simple adapters
- 🧠 Context-Aware - Maintains conversation history, page state, and user behavior
- 🛤️ Smart Routing - AI can navigate users through different pages
- 📦 Component Capability Registry - Clients declare their capabilities, AI chooses the best fit
- 🔄 Graceful Degradation - Automatically falls back to simpler components when needed
- 🌐 Multi-Client Support - Web, mobile, and IoT clients can all consume the same backend
sequenceDiagram
participant Client as 🖥️ Client<br/>(React App)
participant API as 🌐 Backend API
participant Context as 🧠 Context Manager
participant Intent as 🎯 Intention Agent
participant SGUI as ⚙️ SGUI Agent
participant AI as 🤖 OpenRouter AI
Note over Client,API: Phase 1: Initialization & Registration
Client->>Client: Load Component Schemas<br/>(29 components)
Client->>Client: Define Available Routes<br/>(/blogs, /settings, etc.)
Client->>API: POST /register-client<br/>{components[], routes[]}
API->>Context: Store Client Capabilities
API-->>Client: Registration Confirmed<br/>{sessionId}
Note over Client,AI: Phase 2: User Interaction
Client->>API: POST /command<br/>{command: "open blogs"}
API->>Context: Retrieve Context Snapshot<br/>(dialog, intent, component, interaction)
Context-->>API: Context Data
API->>Intent: Understand Intent<br/>(command + context + capabilities)
Intent->>AI: AI Request<br/>(with client capabilities)
AI-->>Intent: Intent Description
Intent-->>API: {intent, parameters, reasoning}
API->>SGUI: Generate Component<br/>(intent + capabilities)
SGUI->>AI: AI Request<br/>(select from available components)
AI-->>SGUI: Component JSON
SGUI-->>API: {id, type, data}
API->>Context: Update Context<br/>(new component, intent pattern)
API-->>Client: Component Description
Client->>Client: Render Component<br/>(using registered adapter)
Client->>Client: Display UI
- Context Manager - Tracks dialog history, intent patterns, component state, and user interactions
- Intention Agent - AI service that understands user intent from natural language
- SGUI Agent - AI service that generates component descriptions in SGUI-shiliu protocol
- Renderer - Client-side adapter that renders components based on platform capabilities
Genie uses the SGUI-shiliu protocol - a platform-agnostic JSON format for describing UI components:
{
"id": "comp-1234567890",
"type": "button",
"category": "atomic",
"data": {
"text": "Click Me",
"variant": "primary",
"size": "lg"
}
}Clients register their capabilities on startup:
{
"sdkVersion": "1.0.0",
"platform": "web",
"components": [
{
"type": "button",
"props": {...},
"interactions": ["click"]
}
],
"routes": [
{
"path": "/blogs",
"name": "Blogs",
"description": "View blog posts"
}
]
}- Backend: Java 17+, Maven
- Frontend: Node.js 18+, npm/pnpm
- AI API: OpenRouter API key (supports Claude, GPT, etc.)
- Clone the repository
git clone git@github.com:lijma/Genie.git
cd Genie- Set up environment variables
cd sample/agent
cp .env.example .env
# Edit .env and add your OPEN_ROUTER_API_KEY- Start the backend
cd sample/agent
./mvnw spring-boot:run- Start the frontend
cd sample/genie-react-ui
npm install
npm start- Open your browser
Visit http://localhost:3000
User: "Create a blue button that says 'Get Started'"
Genie generates:
{
"type": "button",
"data": {
"text": "Get Started",
"variant": "default",
"size": "default"
}
}User: "Open the blogs page"
Genie generates:
{
"type": "route",
"data": {
"path": "/blogs",
"text": "Go to Blogs",
"icon": "📚"
}
}User: "Show me a table of users"
Genie generates:
{
"type": "table",
"data": {
"columns": [
{"header": "Name", "key": "name"},
{"header": "Email", "key": "email"}
],
"data": [...]
}
}- Framework: Spring Boot 3.3.6
- Language: Java 17
- AI Provider: OpenRouter (Claude 3.5 Sonnet)
- Session Management: HTTP Session
- Framework: React 18
- Language: TypeScript
- UI Components: Radix UI, shadcn/ui
- Styling: Tailwind CSS
sgui-protocal- Protocol type definitionssgui-react-render- React renderer with 29 built-in adapters
genie/
├── sample/
│ ├── agent/ # Spring Boot backend
│ │ └── src/main/java/com/sgui/
│ │ ├── controller/ # API endpoints
│ │ ├── service/ # AI agents & context management
│ │ └── model/ # Data models
│ └── genie-react-ui/ # React frontend application
├── sgui-protocal/ # Protocol definitions (TypeScript)
└── sgui-react-render/ # React renderer SDK
├── src/adapters/ # 29 component adapters
└── src/schemas-ts/ # Component capability schemas
The React renderer includes 29 built-in components:
- Form Elements: Button, Input, Textarea, Select, Checkbox, Switch, Radio Group, Slider
- Data Display: Text, Table, Card, Badge, Avatar, Progress, Skeleton
- Navigation: Navbar, Tabs, Route, Pagination, Dropdown Menu
- Feedback: Alert, Toast, Tooltip, Dialog
- Layout: Separator, Accordion
- Visualization: Bar Chart
All components follow the adapter pattern - easy to add your own!
We welcome contributions! Here's how you can help:
- Add New Component Adapters - Extend the renderer with new components
- Improve AI Prompts - Enhance intent understanding and component generation
- Add Platform Support - Build renderers for mobile, desktop, or IoT
- Documentation - Help us improve docs and examples
# Build protocol package
cd sgui-protocal
npm install
npm run build
# Build renderer package
cd ../sgui-react-render
npm install
npm run build
# Run backend
cd ../sample/agent
./mvnw spring-boot:run
# Run frontend (in separate terminal)
cd ../genie-react-ui
npm install
npm startGenie is open source software licensed under the MIT License.
Genie is an original approach to AI-generated user interfaces, offering an alternative to the AG-UI protocol and similar solutions in the agentic ecosystem. Our unique focus areas include:
- Server-side generation - AI runs on the backend, not client
- Platform independence - Protocol separates "what" from "how"
- Adapter architecture - Works with any component library
- Smart degradation - Gracefully handles capability mismatches
- Issues: GitHub Issues
- Discussions: GitHub Discussions