AI SDK のストリームに json-render を挟んで Generative UI をインライン描画する

概要

Vercel AI SDKのストリームパイプラインにjson-renderを統合し、JSONLパッチを用いてテキストとReactコンポーネントをインラインで描画する高度な実装手法の解説。

詳細内容

本記事は、Vercel Labs製のフレームワーク「json-render」をVercel AI SDKに組み込み、LLMの出力ストリーム内にGenerative UIを直接埋め込む方法を詳説しています。従来のiframe（MCP Apps）方式が抱える「テキストとUIの混在が困難」という課題に対し、JSONLパッチによるプログレッシブ描画とサーバー側での自動分離（pipeJsonRender）を用いるアプローチを提案。Zodによる型安全なカタログ定義、LLMへのプロンプト注入、ストリーミング中のUI完全性チェック（Fallback UI）、さらにDBスキーマを変更せずに履歴からUIを復元する設計まで、実務に即したアーキテクチャが解説されています。特に、パーツの出現順序を維持したままレンダリングするクライアント側の実装パターンは、高度なチャットUI開発における重要な知見です。

元記事を読む他のサマリーを見る