AGenUI - Gaode MapsとAlibabaがオープンソース化したネイティブA2UIフレームワーク。 - AiBoss

AgenUIとは何ですか？

AGenUIは、Amapとアリババ傘下のQianwen Cエンドアプリケーションチームが共同で開発した、業界初のオープンソースかつエッジクラウド統合型のネイティブA2UIフレームワークです。iOS、Android、HarmonyOSに対応しています。Google A2UIオープンプロトコルに基づいて構築されたこのフレームワークは、エッジサイドのネイティブレンダリング機能を強化し、AIエージェントの出力をインタラクティブなネイティブカードに直接変換することを可能にします。これにより、プラットフォームごとに個別のUIコードを記述する必要がなくなり、AIアプリケーションをテキストベースのインタラクションから生成型UIインタラクションへと進化させます。

AGenUIの主な機能

3つのプラットフォームでネイティブレンダリングを実現単一のコードベースでiOS、Android、HarmonyOS上で同時に動作させることができ、ネイティブコンポーネントをクライアント側で直接レンダリングできます。
A2UIプロトコルの完全実装Google A2UIプロトコルに基づいて、モデルのインターフェースを記述する標準的な方法を定義し、クライアント側での実行機能を追加します。
コンポーネントエコシステムを充実させるこれには22種類の基本コンポーネントと45種類のCSSプロパティが含まれており、チャート、リッチテキスト、ロティ、ページビューア、オーディオ/ビデオプレーヤーなどの複雑なコンポーネントもサポートしています。
ストリーミングリアルタイムレンダリングストリーミング優先のアーキテクチャを採用しており、コンポーネントはレンダリングと同時に生成およびマウントされ、差分更新と非同期レンダリングが組み合わされています。
テーマデザインシステム意味記述からブランドスタイルへの自動マッピングは、ダークモードとライトモードの両方をサポートするデザイントークンによって実現されます。
コンポーネントの3Dカスタマイズコンポーネントレベル、関数呼び出しレベル、テーマレベルでの柔軟なカスタマイズとオーバーライドをサポートします。

AGenUIの技術的原則

エンドツークラウド統合アーキテクチャクラウド側では、Agent SkillがA2UI仕様に準拠したJSONデータを生成し、大規模モデルにおけるトークン消費量と出力の不確実性を低減します。クライアント側では、クロスプラットフォームのC++ Coreを使用してプロトコル解析、状態管理、レイアウト計算を統一的に処理し、3つのプラットフォームすべてでネイティブコンポーネントとして直接レンダリングすることで、複数のプラットフォーム間で一貫したユーザーエクスペリエンスを最初から最後まで実現します。
ストリーミング優先アーキテクチャコンポーネントが到着次第すぐにマウントできるため、「生成とレンダリングを同時に行う」ことが可能です。また、ノードの差分更新を最小限に抑えるメカニズムと、独立したスレッドでの非同期レンダリングを組み合わせることで、高頻度の増分更新でもメインスレッドがブロックされず、スムーズな120fpsのアニメーション体験を実現します。
ネイティブクロスプラットフォームカーネルC++ Coreをクロスプラットフォームの基盤として使用することで、WebViewや独自の描画エンジンを経由することなく、様々なプラットフォーム上でネイティブのレンダリングパイプラインを直接呼び出し、究極のファーストフレームレンダリング性能とネイティブなインタラクティブ体験を実現します。

AGenUIの主な利点

3つのプラットフォームに対応する単一のコードベース単一のコードベースでiOS、Android、HarmonyOSをカバーできるため、重複するクロスプラットフォームUI開発のコストを完全に削減できます。
デバイス上でのネイティブレンダリング各プラットフォームのネイティブレンダリングパイプラインを直接呼び出すことで、最初のフレームの再生時間を大幅に短縮し、120fpsの滑らかなアニメーションを実現し、WebViewソリューションよりもはるかに優れたユーザーエクスペリエンスを提供します。
リアルタイムストリーミングプレゼンテーションストリーミングファーストのアーキテクチャを採用しており、コンポーネントはレンダリングと同時に生成およびマウントされるため、ユーザーは完全な応答を待つことなく操作を開始できます。
差分非同期更新ノードの差分更新を最小限に抑え、独立したスレッドでの非同期レンダリングと組み合わせます。高頻度の増分更新はメインスレッドをブロックしないため、複雑なシナリオでもスムーズなパフォーマンスが保証されます。
内蔵デザインシステムデザイントークンを使用することで、セマンティクスがブランドに自動的にマッピングされます。エージェントによって生成されるUIは、製品のビジュアル基準に直接準拠し、ダークモードとライトモードをサポートします。
ミニマルなアクセス体験統一されたAPI設計により、わずか数行のコードでSDKの統合を完了できるため、エージェントUI開発の障壁が大幅に低減されます。

AGenUIプロジェクトのアドレス

プロジェクト公式サイト：https://genui.amap.com/
GitHubリポジトリ：https://github.com/AGenUI/AGenUI

AGenUIとの類似製品の比較

比較対象寸法	AGenUI	AG-UI (CopilotKit)	React Native
製品ポジショニング	AIエージェント向けにクラウドエッジに統合されたネイティブUI生成フレームワーク。大規模なモデル出力を、インタラクティブなネイティブインターフェースに直接変換することを可能にする。	フロントエンドのエージェントUIリアルタイムインタラクションプロトコルは、LLMとフロントエンドコンポーネント間の双方向データフローを可能にし、Webシナリオに重点を置いています。	従来のクロスプラットフォームモバイルアプリケーション開発フレームワークは、ロジックの記述にJavaScriptを使用し、UIのレンダリングにネイティブコンポーネントを使用するため、エージェントシナリオには適していません。
プロトコルの根拠	Google A2UIオープンプロトコルに基づき、モデル記述インターフェース用の標準JSONフォーマットが定義され、クライアント側でのネイティブ実行機能が追加されました。	独自開発のAG-UIプロトコルは、イベントフローを通じてフロントエンドコンポーネントの状態更新を駆動し、LLMとUI間の双方向バインディングを実現します。	特定のエージェントプロトコルがない場合、開発者はLLM出力の解析とUIへのマッピングロジックを自身で処理する必要があります。
対応プラットフォーム	iOS、Android、HarmonyOSの各プラットフォームに対応しており、単一のコードベースで全てのプラットフォーム上で動作させることが可能です。	主にWebエコシステムを利用し、フロントエンドフレームワーク（React/Vue/Angular）に依存している。モバイルアプリケーションにはWebViewまたはPWAが必要となる。	iOSとAndroidをサポートしており、コミュニティソリューションを通じてWebやデスクトップにも拡張可能ですが、ネイティブのHarmonyOSはサポートしていません。
レンダリング方法	クライアント側でのネイティブレンダリング、クロスプラットフォームのC++コアは、WebViewを介さずに各プラットフォームのネイティブレンダリングパイプラインを直接呼び出します。	フロントエンドフレームワークはレンダリングとは独立しており、最終的にはブラウザまたはWebViewのレンダリングエンジンに依存し、ネイティブコンポーネントから直接出力されるものではありません。	JavaScriptブリッジを介してプラットフォームのネイティブコンポーネントを呼び出すネイティブレンダリングは、純粋なネイティブアプリケーションに近いパフォーマンスを実現します。
AIネイティブデザイン	エージェントシナリオ専用にゼロから設計されており、コンポーネント、レイアウト、およびインタラクションはすべて、大規模モデルの生成出力に合わせて最適化されています。	エージェントシナリオ向けに特別に設計されており、フロントエンドレベルのLLM状態管理とコンポーネント連携メカニズムを提供します。	エージェントやLLMとの連携機能が組み込まれていない汎用アプリケーション開発フレームワーク。これらの機能はすべて開発者が独自に実装する必要がある。
ストリーミング世代	ストリーミング優先のアーキテクチャを採用しており、コンポーネントはレンダリングと同時に生成およびマウントされ、差分更新と非同期レンダリングが組み合わされています。	イベント駆動型プログラミングをサポートしており、LLMの出力をリアルタイムでフロントエンドの状態にマッピングできますが、コンポーネントのレンダリングはフロントエンドフレームワークのパフォーマンスによって制限されます。	ネイティブの流動的なUI生成はサポートされていません。同様の効果を実現するには、開発者は複雑な状態管理ソリューションを独自に構築する必要があります。
コンポーネントエコシステム	これには22種類の基本コンポーネントと45種類のCSSプロパティが含まれており、チャート、リッチテキスト、ロティ、オーディオ/ビデオプレーヤーなどの複雑なコンポーネントも網羅しています。	これは、フロントエンドエコシステムに存在する既存のコンポーネントライブラリを利用し、プロトコル層を介してLLM機能を連携させる。コンポーネントの豊富さは、選択したフロントエンドフレームワークによって異なる。	大規模なコミュニティコンポーネントエコシステムを備えているが、コンポーネントは手動で調整する必要があり、エージェントによって動的に生成および組み合わせることはできない。
パフォーマンス	最初のフレームのレンダリング時間が大幅に短縮され、滑らかな120fpsのアニメーションをサポートするとともに、高頻度の増分更新によってメインスレッドがブロックされることもなくなりました。	パフォーマンスはブラウザまたはWebViewのレンダリング効率によって制限され、複雑なアニメーションや高頻度更新のシナリオではフレーム落ちが発生する可能性が高くなります。	ネイティブレンダリングは優れたパフォーマンスを提供するが、JavaScriptによる通信の橋渡しにはオーバーヘッドが発生するため、複雑なシナリオでは追加の最適化が必要となる。
アクセス方法	統合APIはわずか数行のコードでSDKと統合でき、クラウド側で生成されたA2UIデータはクライアント側のネイティブインターフェースに自動的にマッピングされます。	SDKをフロントエンドプロジェクトに含める必要があり、AG-UIプロトコル適応レイヤーを設定する必要があります。これには、フロントエンド技術スタックに関する特定の要件があります。	完全な開発環境を構築する必要があり、JSXコンポーネントとネイティブモジュールを連携させるためのコードを記述する必要があるため、統合コストが高額になる。
オープンソースライセンス	オープンソース	MITオープンソース	MITオープンソース

AgenUIの応用シナリオ

スマートアシスタント対応インタラクティブカード地図ナビゲーション、地域サービス、旅行サービスといった複雑なシナリオでは、エージェントがリアルタイムでインタラクティブなネイティブカードを生成し、ユーザーが別のページに移動することなく、検索、予約、支払いなどの操作を完了できるようにします。
動的なデータ可視化エージェントは、対話のコンテキストに基づいて、折れ線グラフ、棒グラフ、円グラフなどのネイティブなグラフコンポーネントをリアルタイムで生成し、抽象的なデータをクライアント側で直感的で視覚的なネイティブインターフェースに変換します。
リッチメディアコンテンツの表示テキストと画像の組み合わせ、カルーセル、ロティアニメーション、音声・動画再生など、リッチでインタラクティブなコンテンツの動的な生成をサポートし、マーケティング、情報提供、教育など、さまざまな場面におけるマルチメディアプレゼンテーションのニーズを満たします。
エンタープライズグレードのクロスプラットフォームエージェントアプリケーションiOS、Android、HarmonyOSに同時に展開する必要があり、高いパフォーマンス、視覚的な一貫性、スムーズなインタラクションが求められるBエンドのインテリジェントエージェント製品にとって、これはマルチプラットフォーム対応のコストを大幅に削減します。