はじめに

近年、AIエージェントがテキストだけでなく、状況に応じた最適な「画面（UI）」をその場で生成してユーザーに提示するGenerative UI (GenUI)が大きな注目を集めています。

これを支えるオープンな標準プロトコルが、Googleらによって開発されているA2UI (Agent to UI)です。

そして、Flutterでも、公式からA2UIに対応したgenuiパッケージのアップデートが発表され、プロダクトへの組み込みが現実味を帯びてきました。

この記事では、「A2UIとは何か？」という基礎から、FlutterでGenUIを構築する仕組みについて解説します。

A2UI（Agent to UI）とは？

A2UIは、AIエージェントとフロントエンド（クライアント）の間で「UIの設計図」を安全かつ構造化されたデータとしてやり取りするための宣言型UIプロトコルです。

なぜA2UIが必要なのか？

これまでのチャット型AIでは、例えばレストランの予約をする際に以下のような不毛なテキストのラリーが発生していました。

「何日の予約ですか？」 ➔ 「明日です」
「何時ですか？」 ➔ 「19時です」

GenUIの世界では、AIが「予約フォーム」というUIそのものを出力し、ユーザーは画面をポチポチ操作するだけで入力を完結できます。

A2UIの特徴

セキュリティの担保（コードを実行しない） AIにHTMLやJavaScript、あるいはFlutterコードを直接生成させて実行するのはセキュリティリスク（XSSなど）が高すぎます。A2UIでは、UIの構造を安全なJSON形式のデータとして送受信します。
プラットフォーム非依存 Web（React/Angular/Lit）だけでなく、モバイル・デスクトップ（Flutter）など、同じA2UI JSONからそれぞれのネイティブコンポーネントをレンダリングできます。

FlutterにおけるGenUIの仕組み

Flutterチームは、A2UIプロトコルを利用してAIエージェントと接続し、ウィジェットを動的にレンダリングするための公式パッケージ genui を提供しています。

基本的なアーキテクチャ

仕組みは非常にシンプルです。

ユーザーがアプリ（Flutter）からAIにメッセージを送信。
AIエージェントが、事前に用意された「コンポーネントカタログ（仕様）」を元に、最適なUI構造（A2UI JSON）を生成する。
Flutterアプリ（genuiパッケージ）がそのJSONをストリーミングで受け取り、内部で定義されたネイティブなFlutter Widget（Text、Card、カスタムWidgetなど）にマッピングして描画する。

【注目】最新の「Prompt First」アプローチへの進化

最新のA2UI v0.9およびFlutterのgenuiパッケージのアップデートにより、設計思想が大きく進化しました。

以前は、LLMの「Structured Output（構造化出力機能）」に依存していましたが、最新版では「Prompt First（プロンプト第一）」アプローチへとシフトしています。

何が変わった？ UIのスキーマ（定義）を、LLMのシステムプロンプト（システム指示文）にプレーンテキストとして直接注入します。これにより、LLM本来の「文脈を理解して柔軟に出力する能力」を最大限活かせるようになり、開発者はLLM側のAPI制限に縛られることなく自由なUI生成が可能になりました。

また、コアクラスの名称から GenUi プレフィックスが削除され、よりFlutterに馴染むイディオマティックな命名（SurfaceController, SurfaceHost, Transport など）に刷新されています。

実際にやり取りされるA2UI JSONのイメージ

最新のA2UI（v0.9以降）では、フラットな識別子（component）を使用して、以下のようなシンプルなJSONL形式でメッセージがストリーミングされます。

// 1. レンダリングの開始を合図（Surfaceの作成）
{"type": "createSurface", "surfaceId": "reservation_form"}

// 2. UIコンポーネントの構造を定義（フラットなコンポーネント定義）
{
  "type": "surfaceUpdate",
  "surfaceId": "reservation_form",
  "components": [
    {
      "component": "Text",
      "text": "ご希望の日時を選択してください"
    },
    {
      "component": "DatePicker",
      "id": "date_input"
    },
    {
      "component": "Button",
      "text": "予約を確定する",
      "action": "submit_reservation"
    }
  ]
}

Flutter側では、この DatePicker や Button をあらかじめ自社のデザインシステムに合わせたWidgetとして登録（マッピング）しておくだけで、AIが生成した通りに画面が出現します。

FlutterでA2UIを導入するメリット

デザインの一貫性：AIが勝手に画面をスタイリングするのではなく、アプリ側で定義した高品質なWidgetカタログ（コンポーネント）をAIが組み立てるため、ブランドのデザインシステムを崩しません。
クライアント側のバリデーション：最新アップデートにより、カスタム関数を用いたクライアント側でのデータ検証なども強化されています。
驚異的な自由度：旅行の予約、在庫データのグラフ化、社内ツールの動的フォーム生成など、バックエンド（AI側）のプロンプトを変更するだけで、アプリをアップデートすることなく新しい画面を提供できます。

実践のラボ

正式のラボを利用して、

結果

まとめ

A2UIとFlutterの組み合わせは、「何でもテキストチャットで頑張るAI」から「場面に応じた最適なUIをAIが選んで提供するアプリ」へのパラダイムシフトを可能にします。

特にFlutterは単一のコードベースでマルチプラットフォームに対応しているため、A2UIの「1つのUIデータから各プラットフォームのネイティブUIをレンダリングする」という思想と抜群に相性が良いです。

これからのAIネイティブなアプリ開発において、必須の技術スタックになっていくことは間違いないでしょう。

参考リンク