A2UI という光を覗いてみる

https://jaguer.connpass.com/event/395243/ での発表になります
blog についてはこちらにまた乗っけます。

Transcript

1. A2UI という光を覗いてみる Gemini Enterprise App + A2UI について 株式会社スリーシェイク Sreake事業部 佐藤慧太 Copyright © 3-shake, Inc. All Rights Reserved. 1
2. 自己紹介 佐藤 慧太@SatohJohn • 2023/1 株式会社スリーシェイク入社 • Google Cloud Partner Top Engineer ’24、’25’、26 選出 Google Cloud All Certificate • お客様の労苦 <Toil>を減らす • 娘のお世話を精一杯やっています
3. Gemini Enterprise App で A2UI とは？ 01 Copyright © 3-shake, Inc. All Rights Reserved. 3
4. そもそもなんで A2UI を使うかという課題感 • Markdown でできる部分しか出せない = UI の幅が狭い • 動画を生成する Agent を作っても Preview できない a. Gemini Enterprise App からの取得リクエストが 画面からのリクエストなので cors で詰まる *1。 バイナリを含めたレスポンスが返せない。 *1 CORS を許可していいのかどうか問題があるし、だとして何かしら別リソース建てるのがめんどい 4 Gemini Enterprise App を使っていて表現できる UI 範囲が狭い だから自作で Streamlit or React で自作のルールで実装をする • AI Agent は json を返す。ソレを元に Streamlit or React が組み立てる
5. そもそもなんで A2UI を使うかという課題感 そんなときに見かけたのが 5 https://a2ui.org/
6. A2UI 1. サーバーからクライアント (UIの受信) a. SSE（Server-Sent Events）などの一方向ストリームを利用して、 UIの構造やデータを受け取る 2. クライアントからサーバー (イベントの送信) a. ユーザーがUIを操作した結果を、サーバーに伝える 3. ネイティブのUIが A2UI の仕様に基づいてコンポーネント(ボタンや画像など)を作成 a. クライアントが使える UI が使える 6 https://a2ui.org/specification/v0.8-a2ui/
7. A2UI 7
8. Gemini Enterprise App で A2UI を実際に使ってみる 02 Copyright © 3-shake, Inc. All Rights Reserved. 8
11. 前提 Gemini Enterprise App での Agent 作成方法は複数ある 11 Agent の実行基盤 Gemini Enterprise App との連携 A2UI が使えるか Cloud Run など A2A ◯ Agent Runtime A2A ◯ Agent Runtime Agent Engine Custom Agent ☓ Dialogflow CX Dialogflow CX ☓ Agent Designer Agent Designer ☓
12. 必要な制約 1. A2A が必須(A2A は version 0.3) a. Agent Card の extensions につける 2. A2UI は version 0.8 を利用 a. BasicCatalog で指定、かつ excample も指定 12 https://docs.cloud.google.com/gemini/enterprise/docs/a2ui-agents/register-and-manage-an-a2ui-agent http://docs.cloud.google.com/gemini/enterprise/docs/a2ui-agents/tutorial-host-agent-cloud-run
13. Agent Card 13 capabilities=AgentCapabilities( streaming=True, extensions=[ AgentExtension( uri=f"https://a2ui.org/a2a-extension/a2ui/v{VERSION_0_8}", description="Ability to render A2UI.", required=False, params={ "supportedCatalogIds": [ "https://a2ui.org/specification/v0_8/standard_catalog_definition.json" ] }, ) ], ),
14. A2UI Config 14 schema_manager = A2uiSchemaManager( version=VERSION_0_8, catalogs=[ BasicCatalog.get_config( version=VERSION_0_8, examples_path=os.path.join( os.path.dirname(__file__), "examples", VERSION_0_8 ), ) ], schema_modifiers=[remove_strict_validation], )
15. A2UI Config 15 a2ui_toolset = SendA2uiToClientToolset( a2ui_enabled=True, a2ui_catalog=a2ui_catalog, a2ui_examples=a2ui_examples, ) root_agent = LlmAgent( model=MODEL, name="travel_planner", description="Japan travel planning agent with A2UI rendering and Maps grounding.", instruction=instruction, tools=[AgentTool(agent=maps_agent), a2ui_toolset], )
16. 闇の部分（めっちゃ詰まったということがいいたいんです） 1. UI_DESCRIPTION のプロンプトが変わると UI が出ない場合がある 2. ADK の A2A を使おうとすると結構設定が多い a. A2aAgentExecutor(runner=runner, config=executor_config, use_legacy=True) b. Google.adk.a2a.converters.event_converter.convert_event_to_a2a_events に A2uiPartConverter(catalog).convert を入れる 16 NEVER emit the A2UI JSON inline in text. The ONLY way to render UI is by calling `send_a2ui_json_to_client` with the JSON as the `a2ui_json` argument.
17. まとめ 03 Copyright © 3-shake, Inc. All Rights Reserved. 17
18. まとめ 1. Gemini Enterprise App でカスタムの UI が作れる a. まだ、手軽には難しい。が template ができると作りやすそう b. Interactive な動きとかもできる c. もうちょっと使いやすい wrapper を希望。。。 2. プロンプト芸がまたでてくるのがつらい a. やりたい UI にどこまで繋げられるかを試す必要がある b. ローカル動作確認として ADK Web の方で、確認できるがたまにうま くいくということ+日本語が使えないとかがあってツラミ 18 Blog で詳細のコードをまとめていこうと思います