mdocUI Examples

Example apps demonstrating mdocUI — generative UI for LLMs using Markdoc {% %} tag syntax.

Examples

Example	Stack	Description
ShopMetrics	Next.js 16, React 19, Tailwind v4	E-commerce analytics with nested dashboards, charts, tables

Quick start

cd nextjs-chat
cp .env.example .env.local
# Add your API key (Anthropic or OpenAI)
pnpm install
pnpm dev

Open http://localhost:3000

Playground

Visit /playground in the running app to experiment with mdocUI tags interactively.

Latest features (v0.6.4)

• Shimmer placeholders — animated loading state while components stream in (ComponentShimmer or custom renderPendingComponent)
• contextData — pass arbitrary app data to components via the Renderer prop
• Verbosity prompt modes — generatePrompt(registry, { verbosity: 'minimal' | 'default' | 'detailed' }) controls system prompt size

Links

• Live Demo
• mdocUI GitHub
• Documentation
• @mdocui/core | @mdocui/react | @mdocui/cli