Pixel Agentsで Bedrock AgentCore Runtime上の Strands Agentsをキャラクターにして動かそう

20260818_JAWS-UG 名古屋 Amazon Bedrock AgentCore LT会での登壇資料です

Transcript

1. Pixel Agentsで Bedrock AgentCore Runtime上の Strands Agentsをキャラクターにして動かそう JAWS-UG 名古屋 Amazon Bedrock AgentCore LT会 くらっち
2. 自己紹介 普段の業務 Railsアプリのエンジニア / QAエンジニア / AIエンジニア 社内業務アプリ開発 自社プロダクトQA担当 開発部AI推進担当 趣味 スポーツ 野球, ソフトボール マラソン くらっち ビーチラグビー スキー, スノボ 23卒 JAWS-UG 東京支部 運営メンバー 名古屋は、乃木坂46の握手会とライブで来たことがあるのみ！
3. 皆さんはAIエージェント構築していますか？
4. 僕はよくBedrock AgentCoreで AIエージェント構築して 遊んでいるんですが
5. ふと思ったんです
6. エージェントの動きが可視化されたら おもろいよなぁ
8. Pixel Agentsって？ Agenda アーキテクチャ 何を実現したか デモ まとめ
9. 01 Pixel Agentsって？
10. Pixel Agentsって？ 端末上で動作するAIコーディングエージェントを小さなオフィスで働く アニメーション化されたピクセルアートキャラクターに変えます。 彼らは自分のデスクまで歩いて行き、座り、ファイルを編集するとき はタイピングし、検索するときは読み上げ、入力待ちで詰まったとき は視覚的にユーザーに知らせます。 ※ Github Repo の README に記載されているものを翻訳
11. 本来は... Pixel Agentsは本来は各々のPC上でローカルホストで動かすもの。 Claude Code や Codexなどと接続することで、 各セッションのエージェントがどのような作業をしているのか、 キャラクターを通じて見ることができます。 あ、僕は使っていません。
12. Pixel Agents画面イメージ これはデフォルトレイアウト。 左下の「Layout」ボタンから レイアウトを変更できます。
13. ただ、良い機会を頂きましたので、
14. 無理やり Full AWSリソースで 構築してみました
15. 02 アーキテクチャ
16. アーキテクチャ
17. 03 何を実現したか
18. 何を実現したか Amazon Bedrock AgentCore Runtime上で構築した Strands Agentsの挙動をPixel Agents画面に出力する
19. 今回デモでお見せするもの 1. AWS CLIを使用して、Bedrock AgentCore Runtime上の Strands Agentsへリクエストを送る 2. エージェントが動く 3. Pixel Agents画面にキャラクターが出現して、返事される
20. 一応補足 Strands Agents の挙動全てを Pixel Agents 画面に反映しているわけで はございません...！ ※ Strands Agentsからのレスポンスを返すのは独自実装でやってます
21. Let’s Demo♪
22. 04 どうやって実現した？
23. ポイントは
24. リアルタイム性
25. エージェントの動きをブラウザに即反映するのに 必要な要素は大きく2つ
26. ポイント Strands Agents の Hooks Callback を活用 エージェント内部の状態変化をキャッチする WebSocketを活用 Strands Agents から HTTP POST で送信されたデータを ブラウザにプッシュ
27. Strands Agents の Hooks Callback Strands Agents 公式ドキュメントに記載 ※ 多くの Hooks Callback が Strands Agents が用意されています。
28. Hooks Callback の使い方 以下のように Hooks Callback 付きのエージェントを定義 hooks_adapter = HookAdapter() agent = Agent( model=model, tools=[browser, web_search], hooks=[hooks_adapter] ) hooks という引数に Callback 処理が定義された関数を配列で当てる
29. 例えば 例）ツールの実行が開始された時 Bedrock AgentCore Runtime内 1. BeforeToolInvocationEvent がトリガーされる 2. Callback関数が呼び出される 3. ToolStartEvent を用意 4. 非同期キューへ投入 5. エージェントとは別のスレッドを起動し 6. FIFO順にキューから取り出してHTTP POSTを送信 7. PixelAgents サーバーが受信 8. WebSocket ブラウザにpush EC2 PixelAgents サーバー内
30. 構築するのに
31. Bedrock AgentCore Runtimeがあって 良かったなぁって思います
32. AgentCore Runtimeの恩恵 コンテナのホスティングとライフサイクルを管理してくれる セッション管理もしてくれる（短期記憶がデフォで使える） APIエンドポイントも公開してくれる IAMでエンドポイントの認証認可制御が可能 サーバーレスなので使ってない時は課金なし
33. 神
34. まとめ Strands Agents の Hooks Callback を活用することで、 エージェントの動きをトリガーに処理を実行することができる Bedrock AgentCore Runtimeのおかげで、 Pixel Agents サーバとStrands Agents ロジックにだけ集中できた AgentCore Harness を使えばローコードで構築できますが、 コード書いてエージェント構築する楽しさが伝われば嬉しいです
36. Thank You!