AIフレンドリーなGenerative UIをJSXで

このトークでは、Generative UIにおける「徐々にUIが組みあがる」という体験を、AIにJSXを出力させてそれをインクリメンタルにパースするというやり方で実装する手法について解説します。

背景

Generative UIは、生成AIが動的にUIを生成することで、個々のユーザーに対してカスタマイズされたUIを表示することを指します。

Generative UIにおける主要な考慮点の1つに、ストリーミングの対応が挙げられます。現在のLLMはテキストを順次出力するため、出力完了には時間がかかります。そこで、出力をストリーミングすることでユーザーをなるべく待たせない体験が得られます。この考え方をUIにも適用する必要があります。

そのため、フロントエンドの観点では、AIがUIの定義となるテキストをストリーミングするにつれて、徐々にUIが組みあがっていくのをユーザーに見せる体験とすることに興味があります。

トークの内容

既存のGenerative UI実装（Vercelのjson-render、GoogleのA2UIプロトコルなど）では、AIがUI定義をJSONの列として出力します。これはAIにとって慣れない方法であると考えられます。

本トークで紹介する方法では、AIがJSXを出力することでUIを表現します。昨今のAIコーディングの進化を踏まえると、これはよりAIフレンドリーなタスクであると考えられます。これが本トークの要点です。

技術的には、既存のJSXパーサーではなく、今回の用途に合わせて設計されたインクリメンタルパーサーを使用するところが肝になります。

補足

上記の内容については、JSConf JPの開催までに技術記事として公開される可能性があります。

しかし、このテーマの理解についてはデモが重要であると考えており、トークではAIによるストリーミングに応じてUIが組みあがる様子など、デモを多く交えた発表となる予定です。