Generative UI for React,
from first token to final interface.
Render streaming Markdown, charts, tables, forms, media, and your own React components while your application keeps control of data and actions.
Model response → Rixx UI → React declarative and app-controlled
Approved component output
React interfaceRevenue overviewUpdated just now
Last 7 daysWeekly movement+$9.4k
MTWTFSS
Built and checked across the surfaces developers depend on
React18 + 19
FrameworksVite + Next.js
BrowsersPlaywright matrix
AccessibilityAutomated Axe checks
PackagingTarball + SBOM
LicenseApache-2.0
One rendering layer for AI responses. Begin with prose, grow into interfaces, and keep the rest of your AI stack.
FIG 0.1
Incremental by design
Start with a focused streaming Markdown renderer, then adopt structured interfaces only when an answer needs them.
FIG 0.2
Built from your components
Models choose from components and properties your application approves. Your React implementations remain application-owned.
FIG 0.3
Application-controlled
Display generated output without handing it authorization. Data, navigation, confirmation, and effects stay in your application.
1.0
Start with streaming Markdown
Replace an existing response view with readable CommonMark and GFM while the answer is still arriving. Incomplete syntax is repaired for display, with highlighted code and managed links and images.
1.0 MarkdownRendererRelease plan
Ship the renderer behind a canary and verify the package boundary first.
- Validate the release bundle
- Keep two regions on canary
- Review latency after rollout
const status = stream.done ? "complete" : "streaming"; Links and images pass through application policy.
2.0
Turn answers into product interfaces
When prose is not enough, stream layouts, metrics, charts, responsive tables, forms, citations, diagrams, and media through a compact declarative format.
2.0 RUIRendererQUARTERLY OVERVIEWRelease health
final UIWeekly movement+$9.4k
3.0
Use the React components you already own
Describe approved components once, connect them to your React implementations, and generate model instructions from the same definition. Unknown components and properties never enter the rendered tree.
3.0 Custom componentsMetricdata
RevenueChartcustom
DataTabledata
UnknownWidgetunregistered
not registeredRevenueChart: defineComponent({
propsSchema: revenueSchema,
keywords: ["revenue", "growth"]
})4.0
Keep useful output visible when streams break
Complete valid lines can render early. Broken lines produce bounded diagnostics while later independent content can survive. Cancelled or failed attempts never replace final content.
4.0 Streaming recovery18
root = Stack(children=[title, metrics])valid19
title = Heading(text="Revenue overview", level=1)valid20
metrics = Grid(children=[revenue, userserror21
note = Callout(title="Review complete", tone="insight")valid5.0
Present the same interface for every user
Format numbers, currencies, percentages, dates, and time zones consistently. Support light, dark, and system themes, right-to-left layouts, keyboard charts, and responsive tables.
5.0 Themes and localizationLocalear-AE
DirectionRTL
CurrencyAED
الإيراداتد.إ 84,240+12.4%
العملاء12,804+642
PROJECT EVIDENCE
Explore the repository Inspect the implementation, not a promise.
PROPERTY TESTS
20,000 scheduled cases
Parser input and compiler chunk boundaries
BROWSER MATRIX
Chromium, Firefox, WebKit
Desktop and mobile renderer scenarios
ACCESSIBILITY
Automated Axe checks
Representative answers and browser flows
RELEASE OUTPUT
Tarballs and SBOM
Package boundaries, sizes, and provenance
One project, two practical starting points.
Evaluate locallyReplace fragile response Markdown first.
Adopt `MarkdownRenderer` without changing your model, agent, transport, or chat shell.
Start with MarkdownAdd interfaces when an answer needs more.
Introduce `RUIRenderer` for layouts, data, actions, and application-owned components.
Explore structured UIIMPLEMENTATION QUESTIONS
What developers need to know first.
What can Rixx UI render?+
Streaming Markdown, layouts, metrics, ten chart types, responsive tables, forms, citations, math, Mermaid diagrams, image galleries, and custom React components.
Does Rixx UI call the model?+
No. Your application owns the provider, prompts, transport, tools, messages, and persistence. Rixx UI handles response rendering.
Can I use my own design system?+
Yes. Define a closed component contract and connect it to your React implementation. The model can only request components and properties you approve.
What happens when streaming output is malformed?+
Broken lines produce diagnostics and can be skipped while later independent content survives. A failed or cancelled attempt never becomes final UI.
Are actions executed by the renderer?+
No. Rixx UI validates registered action requests and returns them to your application. Authorization, confirmation, execution, and auditing stay in application code.