mdocUI logo

Generative UI for LLMs

LLMs write markdown and drop interactive UI components in the same stream — charts, buttons, forms, tables, cards. No custom DSL, no JSON blocks.

pnpm add @mdocui/core @mdocui/react
GitHub starsnpm version
Try DemoDocumentationGitHub

See it in action

An LLM streams a full analytics dashboard — stats, charts, tables, and action buttons — all in real-time.

mdocUI demo — LLM streaming a dashboard with stats, charts, tables, and action buttons in real-time

What the LLM writes

mdocUI Markup
1{% card title="Key Metrics" %}
2 {% grid cols=3 %}
3 {% stat label="Revenue" value="$12,482" /%}
4 {% stat label="Orders" value="284" /%}
5 {% stat label="Avg Order" value="$43.95" /%}
6 {% /grid %}
7{% /card %}

Markdoc syntax, zero friction

The LLM streams plain text with {% tag %} delimiters. The streaming parser tokenizes each chunk as it arrives and renders live UI components — stats, charts, tables, forms — inline with prose.

No JSON schema negotiation. No tool calls. No post-processing. The model just writes, and users see rich interactive UI appear character by character.

Built for real-time AI interfaces

24 Components

Layout, interactive, data, and content components out of the box.

Streaming Parser

Character-by-character tokenizer handles partial chunks in real-time.

Zero Config Prose

Built-in markdown rendering. No react-markdown dependency needed.

CLI Scaffolder

`npx mdocui init` detects your framework and generates everything.

Error Boundaries

One broken component won't crash your chat. Graceful per-component recovery.

Theme Neutral

Components use currentColor/inherit. Your theme, your rules.

Packages

@mdocui/core

Streaming parser, registry, prompt generator

@mdocui/core version@mdocui/core downloadsAvailable

@mdocui/react

24 components, Renderer, useRenderer hook

@mdocui/react version@mdocui/react downloadsAvailable

@mdocui/cli

Scaffold, generate, preview

@mdocui/cli version@mdocui/cli downloadsAvailable

@mdocui/vue

Vue renderer

Coming Soon

@mdocui/svelte

Svelte renderer

Coming Soon
Try the Playground

Write mdocUI markup and see it render live

Roadmap

Available

@mdocui/core

Streaming parser, registry, prompt generator

Available

@mdocui/react

24 components, Renderer, useRenderer hook

Coming Soon

@mdocui/vue

Vue renderer with the same 24 components

Coming Soon

@mdocui/svelte

Svelte renderer

Planned

VS Code Extension

Syntax highlighting and autocomplete for {% %} tags

Planned

v1.0.0

Stable API, frozen component props, CHANGELOG

Frequently Asked Questions

What is mdocUI?+
mdocUI is an open-source library that lets LLMs write interactive UI components (charts, tables, forms, buttons) inline with markdown using Markdoc {% %} tag syntax. Everything streams in real-time.
Which LLM providers does it work with?+
Any provider that streams text — OpenAI, Anthropic, Google, Mistral, local models, or any custom API. mdocUI parses the output, it doesn't care where it comes from.
Do I need to train the model on the syntax?+
No. Markdoc {% %} syntax is already in most LLM training data (Stripe docs, Cloudflare docs). Just include the auto-generated system prompt from generatePrompt() and models write it correctly.
Can I use my own components?+
Yes. Pass a components prop to the Renderer with your own React components (shadcn, Radix, custom). You can override any of the 24 built-in components or add new ones.
Is it production ready?+
mdocUI is in alpha (0.6.x). The core API is stabilizing but may change between minor versions. We follow semver and will freeze the API at v1.0.
How does streaming work?+
The parser processes tokens character-by-character using a state machine. As soon as {% is detected, it switches from prose mode to tag mode. No buffering, no regex, no lookahead — components appear the moment the closing tag arrives.
What frameworks are supported?+
@mdocui/core is framework-agnostic. @mdocui/react is the first renderer. Vue and Svelte renderers are on the roadmap.