Home Original page

GitHub - mdocui/examples: Example apps using mdocUI

mdocUI

GitHub stars npm core npm react

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

mdocUI demo — streaming dashboard with charts, stats, and tables

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