Skip to content

レンダラー（クライアントライブラリ）

レンダラーは、A2UI JSON メッセージを各プラットフォームのネイティブ UI コンポーネントへ変換します。

エージェント が A2UI メッセージを生成し、トランスポート がそれをクライアントへ届けます。クライアント側のレンダラーライブラリは、A2UI メッセージをバッファリングし、A2UI のライフサイクルを実装し、サーフェス（ウィジェット）を描画する必要があります。

カスタムコンポーネントをレンダラーへ持ち込んだり、自分の UI コンポーネントフレームワークを支える独自レンダラーを作ったりできる柔軟性があります。

保守されているレンダラー

レンダラー プラットフォーム v0.8 v0.9 リンク
React Web ✅ 安定版 ❌ コード
Lit (Web Components) Web ✅ 安定版 ✅ 安定版 コード
Angular Web ✅ 安定版 ✅ 安定版 コード
Flutter (GenUI SDK) モバイル/デスクトップ/Web ✅ 安定版 ✅ 安定版 ドキュメント · コード
SwiftUI iOS/macOS — 🚧 第2四半期予定 —
Jetpack Compose Android — 🚧 第2四半期予定 —

詳細は ロードマップ を確認してください。

エコシステムのレンダラー

コミュニティは、さらに多くのプラットフォーム向け A2UI レンダラーを作っています。

  • json-render — Zod スキーマ経由で A2UI カタログを描画する Vercel の React ライブラリ（比較記事）
  • A2UI-Android — Jetpack Compose のコミュニティレンダラー。20+ コンポーネント、約 15 ⭐、v0.8
  • a2ui-react-native — iOS/Android 向け React Native レンダラー。約 9 ⭐、v0.8

エコシステムのレンダラー一覧 で、さらに多くのコミュニティプロジェクトや投稿方法を確認できます。

レンダラーの仕組み

A2UI JSON → レンダラー → ネイティブコンポーネント → あなたのアプリ
  1. トランスポートから A2UI メッセージを 受信 する
  2. JSON を パース し、スキーマを検証する
  3. プラットフォームのネイティブコンポーネントで 描画 する
  4. アプリのテーマに合わせて スタイルを適用 する

レンダラーの使い方

アプリへの統合は、使いたいレンダラーのセットアップガイドに従ってください。

レンダラーを作る

独自プラットフォーム向けのレンダラーを作りたい場合は、次を確認してください。

主な要件

  • A2UI JSON メッセージ、特に隣接リスト形式の解析
  • A2UI コンポーネントとネイティブウィジェットの対応付け
  • データバインディングとライフサイクルイベントの処理
  • 段階的な A2UI メッセージ列を処理して UI を構築・更新する
  • サーバー主導更新のサポート
  • ユーザーアクションのサポート

次のステップ