Practical approach for streaming UI from LLMs
4 days ago
- #React
- #LLM
- #UI Components
- LLMs are inherently text-based, leading to text-heavy AI-based UIs.
- Vetted has been experimenting with incorporating rich UI components into LLM responses to enhance shopping experiences.
- Developed 'react-markdown-with-mdx', an HOC wrapper around react-markdown to support JSX component tags in markdown.
- The library allows for safe rendering of white-listed React components within LLM-generated markdown.
- Created 'html-balancer-stream' to manage HTML tag balancing for streaming support.
- Initially prototyped with HTML components but shifted to React for security and integration benefits.
- Explored extending react-markdown with MDX for JSX support but needed to limit dynamic JSX for security.
- Developed custom libraries (rehype-mdx-elements, remark-unravel-mdx) to safely parse and render static JSX in markdown.
- LLMs can generate static JSX tags effectively, aligning with existing component schemas.
- The approach aims to bridge the gap between LLM outputs and rendering frameworks like React.