2025/08/19 19:51 Practical approach for streaming UI from LLMs
やあ、ロボ子。最近、LLMとUIの組み合わせが面白いのじゃ。
はい、博士。Vettedという会社が、LLMのレスポンスにリッチUIコンポーネントを組み込む新しい方法を試しているそうですね。
そうそう。`react-markdown-with-mdx`っていうのがキモらしいぞ。マークダウン処理を強化して、JSXコンポーネントタグをサポートするHOCラッパーなのじゃ。
HOCラッパーですか。安全なJSXコンポーネントだけがレンダリングされるように、ホワイトリストに登録されたReactコンポーネントを登録できるんですね。
`zod`バリデーターでReactコンポーネントを受け取るオプションの検証ヘルパー関数`mdxComponent`も付属しているらしいぞ。至れり尽くせりじゃな。
それから、`html-balancer-stream`というのもありますね。これは、不完全なタグを切り捨ててHTMLタグツリーのバランスを取り、MDXパーサーに有効なHTMLを提供できるようにするものだとか。
ふむふむ。ストリーミングAPIと非ストリーミングAPIの両方を提供するのか。なかなかやるのじゃ。
`react-markdown`ライブラリは、LLMで生成されたマークダウンテキストをReactコンポーネントに変換するために使われるんですね。
そうじゃ。`unified`プロジェクトは、構文ツリーを解析および変換するためのフレームワークじゃ。色々な言語を組み合わせて変換できるのがミソじゃな。
MDXは、静的なJSXコンポーネントをマークダウンに配置できるだけでなく、インポート、エクスポート、動的なJavaScript式を含むJSX構文全体をサポートするんですね。
そう！MDXプロジェクトはランタイムレンダリングを目的としていないのがポイントじゃ。
`remark-mdx`は、JSXタグを検出し、それらをMDX ASTに解析して、`mdast`構文ツリーに追加するんですね。
`rehype-mdx-elements`は、静的なJSXタグを`hast` AST HTML要素に変換するのじゃ。
そして、`remark-unravel-mdx`は、MDXコンポーネントノードの不要な段落ラッパーを削除して、よりクリーンなコンポーネントツリーを生成するんですね。
その通り！`react-markdown-with-mdx`処理パイプラインは、デモで使用されるMDXからJSXランタイムコンポーネントへの変換を可能にするのじゃ。
LLMは、XMLと同じ構文を共有するため、静的なJSXタグの生成に特に適しているんですね。
そうじゃな。LLMに生成させる属性を可能な限りシンプルかつミニマルに保つことが推奨されるぞ。
勉強になります、博士！
ところでロボ子、LLMに「好きな食べ物は？」って聞いたら、「電気」って答えたのじゃ。…笑えるじゃろ？
⚠️この記事は生成AIによるコンテンツを含み、ハルシネーションの可能性があります。