Generate interactive LLM-driven UI by rendering Markdoc component tags inline with streamed markdown.
npx skills add https://github.com/mdocui/mdocui --skill mdocui
Please help me install this Agent Skill. Skill: mdocUI Source: https://github.com/mdocui/mdocui/tree/main Command: npx skills add https://github.com/mdocui/mdocui --skill mdocui
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.
{% chart ... /%} and {% button ... /%} alongside prose, using the Markdoc {% %} tag syntax inline.generatePrompt() with a component registry so your LLM receives the exact tag syntax, component signatures, nesting rules, and streaming guidance.useRenderer() + Renderer to parse streamed text into a typed AST and render components with shimmer placeholders and error boundaries.onAction, validate rendered props with Zod in dev, and recover from component render errors without breaking the rest of the UI.classNames or CSS selectors targeting data-mdocui-* attributes.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().
High-intent search queries and answers about installing and using this skill.
To stream interactive UI components from an LLM in React, you use a streaming parser to convert text into a typed AST and render Markdoc-style `{% %}` tags inline with prose. This allows the model to emit buttons and charts while users receive text immediately.
Generate a system prompt for interactive markdown tags by passing a component registry to a prompt generation function. This provides the LLM with exact tag syntax, component signatures, nesting rules, and streaming guidance to ensure valid markup output.
Yes, you can use Zod validation with streamed LLM UI components. The renderer validates rendered props with Zod during development to ensure the LLM output matches the expected component schema before displaying it to users.
The best way to handle errors when rendering streamed LLM components is using error boundaries within the React renderer. This setup recovers from component render errors without breaking the rest of the UI and centralizes events through an `onAction` handler.
Style interactive LLM UI components by keeping the library theme-neutral and applying CSS selectors targeting `data-mdocui-*` attributes or custom `classNames`. This ensures styling is controlled from the app side rather than the model output.
Yes, this streaming UI approach works for agent workflows and dashboards. It fits chat, dashboards, and agent workflows where the model must emit interactive elements like buttons, forms, charts, and tables while users receive text immediately during streaming.
tambo-aiRegister React components with Tambo registry and generate Zod prop schemas.
nutterbrandAutomate web browser interactions including navigation, form filling, data extraction, and screenshots.
yunseo-kimRender streaming React Markdown with Shiki syntax highlighting and Mermaid diagrams.
jayteealaoConvert Markdown and HTML into styled Compose AnnotatedString for Android apps.