mdocUI

What problem does it solve?

This Skill helps you build mdocUI “generative UI” outputs that mix normal markdown prose with interactive {% %} components, so you can stream content to users and still capture actions (buttons, forms, links) reliably.

Core Features & Use Cases

• Produce mdocUI markup for streaming: Write tags like {% chart ... /%} and {% button ... /%} alongside prose, using the Markdoc {% %} tag syntax inline.
• Auto-generate correct system prompts: Use generatePrompt() with a component registry so your LLM receives the exact tag syntax, component signatures, nesting rules, and streaming guidance.
• Render interactive components with React: Use useRenderer() + Renderer to parse streamed text into a typed AST and render components with shimmer placeholders and error boundaries.
• Handle interactions safely: Centralize all UI events through onAction, validate rendered props with Zod in dev, and recover from component render errors without breaking the rest of the UI.
• Style from the app, not the model: Keep the library theme-neutral and apply classNames or CSS selectors targeting data-mdocui-* attributes.

Quick Start

Ask your AI coding agent to add mdocUI to your project, generate a system prompt from the default component registry, then stream LLM output into a React Renderer using useRenderer().