MDMA
Open-source framework that extends Markdown with interactive components for LLMs, enabling structured, validated UI output instead of free-form text. Supports React, Vue, and React Native.
MDMA: Generative UI from Markdown for LLMs
MDMA is an open-source generative UI framework that extends Markdown with interactive components in fenced mdma blocks. It enables LLMs to return structured, validated, and renderable UI (forms, tables, approval gates) instead of free-form text or brittle JSON. The framework supports rendering in React, Vue, and React Native, and is designed to work efficiently with small, cost-effective models.
Key Features
- Markdown Extension: Define interactive components using fenced
mdmablocks in Markdown. - Structured UI Output: LLMs generate validated, renderable UI components instead of unstructured text.
- Multi-Framework Support: Render the same MDMA document in React, Vue 3, or React Native.
- Ten Component Types: Includes forms, buttons, tasklists, tables, callouts, approval gates, webhooks, charts, thinking blocks, and custom components.
- Validation & Linting: Static analysis with 17 lint rules and auto-fix capabilities.
- State Management: Built-in state, bindings, audit logs, and policy enforcement.
- Theming: Customizable themes for light, dark, or auto modes, with CSS variable overrides.
- Streaming Support: Real-time rendering as the LLM streams responses, with skeleton loading for partial content.
- Agent Integration: Stream MDMA documents over AG-UI protocol and route actions back into the agent run.
- CLI & MCP Server: Tools for prompt building, validation, and serving specs to LLMs.
Tech / Self-Hosting
MDMA is open-source and self-hostable. It consists of multiple small packages for parsing, validation, runtime, and rendering. The framework is designed to run on small, cost-effective models and supports self-hosting for full data control and privacy. The core packages include:
- Parser:
@mobile-reality/mdma-parser– Remark plugin for Markdown to MDMA AST conversion. - Validator:
@mobile-reality/mdma-validator– Static analysis and linting. - Runtime:
@mobile-reality/mdma-runtime– State management, bindings, and audit logs. - Renderers: React, Vue 3, and React Native renderers for cross-platform compatibility.
- CLI: Tools for prompt building and validation.
- MCP Server: Serves specs, prompts, and documentation to LLMs.
The framework is built by Mobile Reality and is available under open-source licensing.