Transform LLM Markdown into
Rich, Interactive UI
MDX UI is a token-efficient bridge between any LLM and React. The AI writes plain Markdown — your pipeline transforms it into beautiful, interactive components automatically.
// why markdown — not jsx, json, or html
| Format | Relative Token Cost | Problem |
|---|---|---|
| Markdown (MDX UI) | 1× baseline | None. |
| JSON | 2.6× | Brittle parsing, no native UI mapping |
| JSX / custom schema | 3–5× | LLM hallucinates props and components |
| HTML | 5–10× | Massive waste, security risks |
Token-Efficient by Design
The LLM never writes <Callout>. It writes standard Markdown. Your AST pipeline transforms it — deterministically, testably, cheaply.
Model Agnostic
Works with Groq, OpenAI, Anthropic, Gemini, or any local model. No fine-tuning, no per-model prompts. Swap models without changing your pipeline.
You Own the Code
50+ components copied directly into your project — shadcn-style. Modify, extend, or replace anything without waiting for an npm update.
MCP Server Included
Claude Code reads your registry before writing MDX. One config line — no prompting, no hallucinated components, no manual validation.
// how it works
The LLM stays in its comfort zone. Your pipeline handles the rest.
Four deterministic steps. No prompt engineering per component.
LLM generates plain Markdown
Any model, any provider. Standard GitHub-flavored Markdown — no JSX, no custom tags. Just > [!NOTE] text and ```python code blocks.
preprocessMarkdown cleans the output
Fixes escaping issues, normalizes whitespace, and handles edge cases in LLM-generated text before AST parsing.
remarkMdxUi transforms at the AST level
> [!NOTE] becomes <Callout variant="info">, tables become <DataTable>, code fences become <CodeBlock> with Shiki highlighting.
Your components render it
MDX evaluates the transformed output using your component map. Full theme support, fully customizable, zero LLM involvement.
// mcp server
Claude Code knows your components. Out of the box.
One config line. Claude reads your registry, generates valid MDX, and validates it — no prompting required.
.claude/settings.json
{
"mcpServers": {
"mdx-ui": {
"command": "pnpm",
"args": [
"dlx",
"@ravikumarsurya/mdx-ui",
"mcp"
]
}
}
}Works with Claude Code, Cursor, Windsurf, and any MCP-compatible client.
Registry-aware generation
Claude reads your exact installed component list before writing a single line of MDX.
Built-in validation
Catches hallucinated or uninstalled components before they reach your renderer.
Math content tools
370+ math primitives exposed as MCP tools. Generate equations and proofs natively.
Output Standard resource
Injects the MDX UI output spec into Claude's context automatically — zero copy-paste.
// get started
LLM writes Markdown. You get components.
Start with one command. Works with Next.js and Vite React.
npx @ravikumarsurya/mdx-ui init