Generative UI, end to end
Interfaces a model writes and OpenUI renders
Each example here is a working app. A model gets a library of components and data tools, writes a short openui-lang program, and OpenUI renders it into real, interactive UI as it streams. Browse what the examples build, generate your own from a sentence, and read the code.
Example 01
Dashboard kits
Domain components, data tools, rules, and worked examples a model composes into e-commerce and product analytics dashboards.
- Kits
- 2
- Dashboards
- 19
- Data tools
- 59
E-commerce
Sales, marketing efficiency, profit, customers and cohorts, merchandising, and checkout for a direct-to-consumer brand.
Product analytics
Active users, lifecycle, activation, retention cohorts, stickiness, feature engagement, experiments, and account health for a SaaS product.
How each example works
- 1
A kit describes the domain
Components to build with, read-only data tools to fill them, rules for what a good dashboard looks like, and worked examples. Together they become the system prompt.
- 2
The model writes openui-lang
A short program: query the tools, then lay out components with the results.
$range = "30d" profit = Query("get_profit_bridge", {range: $range, channel: $channel, compare: $co… profitChart = ProfitWaterfall(profit.lines, profit.comparisonLabel) profitCard = LargeCard([profitHeader, profitChart]) - 3
OpenUI renders it as it streams
The Renderer turns each finished line into components and runs the tools in the browser, so the interface fills in while the model is still writing.