Generative UI の3パターンを同じ題材で実装比較してみた

DRANK

はじめにどうも！松尾淳平です！LLM がテキストだけでなく UI そのものを生成する「Generative UI」——ChatGPT の Canvas や Artifacts、v0 のプレビュー機能を触るたびに「これ、どういう仕組みなんだろう」と思っていました。本記事では、「旅行プランナーという旅行計画を立ててくれるAIエージェント」をお題にして、Generative UI を3つの実装パターンに整理して比較してみたので、そのナレッジをシェアできれば良いなと思っています。今回試作したアプリケーションも公開しているので記事を読みながら、触っていただけると解像度も上がるかなと思います。 × Next.js をベースに考えています。Generative UI とはGenerative UI とは、LLM の出力をもとに UI を動的に構成する手法の総称です。従来のチャットボットはテキストだけを返していましたが、Generative UI では地図、カード、タイムラインといったリッチなコンポーネントを LLM の判断で表示できます。Generative UI は、LLM に UI のどこまでを委ねるかという観点で、Controlled（本記事では Static と呼ぶ）/ Declarative / Open-ended のように整理できます。(参考)パターンLLM の出力一言で言うとStaticツ…