LLM输出突破文本壁垒：MDX Enhanced Dynamic Markdown赋能原生组件嵌入

大型语言模型（LLM）在解决文本密集型问题上表现出色，但其输出往往局限于纯文本，这在视觉驱动的购物研究等领域显得力不从心。Vetted公司开发了一种名为“MDX Enhanced Dynamic Markdown”的解决方案，通过`react-markdown-with-mdx`库，允许LLM输出直接嵌入React组件，从而克服了这一限制。

该方案通过一个高阶组件（HOC）包装器，增强了`react-markdown`对JSX组件标签的支持。用户可以白名单化安全的React组件，并利用`mdxComponent`配合Zod进行JSX属性验证，实现LLM安全生成并嵌入UI组件。与依赖iframe或消息传递的方案不同，此方法将组件原生嵌入LLM生成的核心文本中，提升了集成效率和用户体验。为支持流式响应，还开发了`html-balancer-stream`来平衡和截断不完整的HTML标签树。

该技术的核心在于利用`unified`项目生态，特别是`remark-mdx`解析器。通过定制解析流程，仅保留MDX的静态JSX组件能力，剥离了不安全的动态JavaScript执行。`rehype-mdx-elements`将静态JSX标签转换为AST，再由`hast-util-to-jsx-runtime`安全地映射为React组件。`remark-unravel-mdx`则优化了组件树结构。这种方式确保了安全性，并允许LLM以XML相似的JSX语法生成组件，极大增强了AI驱动的交互界面的表现力与实用性。

Unlocking Rich UI Component Rendering in AI Responses - MDX Enhanced Dynamic Markdown

MDX Enhanced Dynamic MarkdownTim Etler