Generative MUI
Let the LLM build the UI — in your own Material UI theme
16 followers
Let the LLM build the UI — in your own Material UI theme
16 followers
Renderer for Material UI: an LLM emits A2UI, this renders it as real MUI in your host ThemeProvider — with streaming, two-way binding, charts, and runtime custom components. - yessGlory17/generative-mui
Free
Launch Team
Context.devAPI to scrape anything for AI, 20,000+ developers trust us.
Promoted
Hey everyone! 👋
Ozgur here, maker of generative-mui. Chatbots are stuck returning walls of text. But a chart, a table, or a validated form often says more than a paragraph ever will — and until now your options were bad: hand-write a component for every possible scenario, or let the model spit out raw HTML and accept XSS plus a theme that drifts away from your design system. That's why I built generative-mui.
What it is: generative-mui is a renderer that maps Google's A2UI protocol (v0.9.1) onto Material UI. Your agent emits A2UI — data, not code — and the library turns it into real MUI components inside your app's existing <ThemeProvider>.
What makes it different: The model never writes markup. It emits a flat, schema-validated, id-referenced UI description, and a deterministic store resolves it into components. A type that isn't in the registry never runs — it degrades safely. sx / style / className from the agent never reach MUI. And because the core imports no React, the parser, store and tool schema run anywhere: server, edge, RSC, tests. 🤯
Key features:
- Describe → the LLM emits A2UI → deterministic store → real Material UI
- Streaming-first: components arrive piece by piece, missing children render as Skeleton, append-only deltas never clobber the user's local edits
- Two-way binding via JSON-Pointer — {"path":"/name"} reads and writes the data model, no server round-trip
- 18 Basic Catalog components mapped 1:1 to MUI + an opt-in Extended Catalog: charts, tables, stepper, autocomplete, gauge and more
- Your theme, always — the library has no theme of its own; switch yours and the generated UI re-skins top to bottom - Register your own components at runtime with schema + renderer in a single call - Resilient by design: cycles, root-less surfaces, truncated streams and ReDoS-y regex all degrade quietly instead of taking the page down
- Provider-agnostic agent glue (AI-SDK-shaped tools, raw JSON Schema, prompt blocks derived from the schemas)
- MIT licensed, TypeScript, fully tested — including zero axe violations
🎁 FOR THE PRODUCT HUNT COMMUNITY 🎁
It's free and open source, so instead of a discount: two runnable example chatbots (Vite SPA + Next.js App Router) that work in demo mode with no API key. Clone, pnpm dev, and watch an LLM build your UI in 30 seconds. And if you're building something with it, open an issue — I'll help you wire it up personally.
👇 USEFUL LINKS 👇
- Repo & docs: https://github.com/yessGlory17/generative-mui
- See it in action (demo GIF): https://github.com/yessGlory17/generative-mui#readme
- Examples: https://github.com/yessGlory17/generative-mui/tree/main/examples
- Add your own components: https://github.com/yessGlory17/generative-mui/blob/main/docs/09-custom-components.md
LLMs shouldn't just talk — they should build validated, safe, themed UI.
⭐ If the idea grabs you, drop the repo a star; your feedback steers where it goes.
Cheers, Ozgur
The two-way binding actually works as advertised, which surprised me. Streaming MUI straight from an LLM into my existing theme feels way cleaner than building custom renderers.
@yelizkmezmlsu Thanks