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

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

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

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