Practical approach for streaming UI from LLMs
9 months ago
- #React
- #LLM
- #UI Components
- 大语言模型本质上是基于文本的，这导致基于AI的用户界面往往文本内容过多。
- Vetted公司一直在尝试将丰富的UI组件整合到LLM响应中，以提升购物体验。
- 开发了'react-markdown-with-mdx'，这是react-markmarkdown的一个高阶组件包装器，支持在markdown中使用JSX组件标签。
- 该库允许在LLM生成的markdown中安全渲染白名单内的React组件。
- 创建了'html-balancer-stream'来管理HTML标签平衡以实现流式支持。
- 最初使用HTML组件进行原型设计，但后来转向React以获得更好的安全性和集成优势。
- 探索了通过MDX扩展react-markdown以支持JSX，但出于安全考虑需要限制动态JSX。
- 开发了自定义库(rehype-mdx-elements, remark-unravel-mdx)来安全解析和渲染markdown中的静态JSX。
- LLM可以有效地生成静态JSX标签，与现有组件模式保持一致。
- 该方法旨在弥合LLM输出与React等渲染框架之间的差距。