全てAWSで完結！AWS AmplifyとViteで始めるスモールスタートなAIエージェント開発のススメ

2025/12/20(土)
JAWS-UG Presents AI Builders Day
トラックC 13:30-13:50

Transcript

1. 全てAWSで完結！ AWS AmplifyとViteで始める スモールスタートな AIエージェント開発のススメ 2025/12/20(土) JAWS-UG Presents AI Builders Day 宮崎 健太 (たけのこ)
2. 宮崎 健太 (たけのこ) 業務： Web系フロントエンド / この１年はAWS 所在地： 札幌 (なんとか飛行機が飛びました) 趣味： ゲーム、お酒(クラフトジン) 好きなAWSサービス： ・AWS Amplify ・Amazon Bedrock AgentCore X：@K5ARULtkUA4594 自己紹介 2
3. AgentCoreとStrandsAgentsのフロントエンドにおいて、 小規模から中規模までアーキテクチャを理解する 本発表のゴール 3
4. 話すこと ・AWS上でAIエージェントを構築した際のフロントエンド構成の話 → 小規模から中規模の構成を目指す話 ・キーワード ・AIエージェント：Bedrock AgentCore / StrandsAgents ・フロントエンド：AWS Amplify / Vite / CopilotKit 話さないこと ・AWS以外のクラウドの話 ・AIエージェントにおける運用・監視の話 話すこと / 離さないこと 4 AIエージェント要素が少ないかも！ごめなさい！
5. 1. 2025年はAIエージェント元年 2. AWSでAIエージェントを構築するためには 3. 最低限で考えるAIエージェントアプリの構成 4. AWS Amplifyを活用したAIエージェントアプリの構成 5. AIエージェントとUIのやり取りを簡略化したい 6. まとめ アジェンダ 5
6. 2025年はAIエージェント元年 6
7. ↓AI Builders Dayの説明にも書かれています どうやら2025年はAIエージェント元年らしいです 7
8. 皆さんは、AIエージェントを「作っていますか」？ もしくは 皆さんの「会社」は、AIエージェントを「作っていますか」？ 8
9. AWSで見ると... ・2025年7月に「StrandsAgents (Python版)」のv1.0.0が登場 ・2025年10月に「Amazon Bedrock AgentCore」がGA 個人でも簡単にAIエージェントを構築する基盤が整ってきた 個人でも簡単にAIエージェントを作れる時代 9
10. 皆が皆、このAIエージェントブームに乗り遅れまいとPoC作りで盛り上がっている そして、PoCに重要なのは何か... 開発 → リリース → フィードバック → 分析・改善 のサイクルをいかに素早く回すか 企業としてもPoCの戦国時代 10
11. 兎にも角にも、まずはスモールスタートで始めたい 11
12. 12 AWSでAIエージェントを 構築するためには
13. 以下の「アプリケーション」は、Webでも、Web以外でも何でも良い (例：LINEなどのチャット、Alexaなどの音声アプリ、など) AIエージェントをWebアプリで考えたときの構成 13
14. StrandsAgents ・AWSが提供するAIエージェントを構築するためのSDK ・最短3行でAIエージェントを実装できる ・元々Python用のSDKだったが、re:Invent 2025でTypeScript版が発表された Amazon Bedrock AgentCore ・AIエージェントをAWS上で構築/運用できるマネージドサービス ・Runtime機能を使うことで、AIエージェントをホスティングできる ・他にも色々機能があるよ AWS上でAIエージェントを構築するための仕組み 14
15. ・Runtimeは、コンテナ上でAIエージェントのコードをホスティングできる ・アプリケーションは、エンドポイントURLをPOSTで呼び出す → エンドポイントURLにはRuntimeのARNを指定する ・ストリーミングを使うならサーバー送信イベントを使う → 基本的には、使い勝手を考えると、ストリーミング前提が良い アプリケーションとAgentCore Runtimeの関係 15
16. 本発表の本筋：アプリケーションをどのように構築するか 16
17. 最低限 フロントエンドがあればいいのでは 17
18. 18 最低限で考える AIエージェントアプリの構成
19. ・Streamlit = Pythonで簡単にUIを構築できるライブラリ ・ECSは、2025年11月頃にExpress Modeという機能が登場し、比較的簡単にデプロ イが可能になった （htmxという選択肢もありそうでしたが、検証が追いつかず没です...） Pythonを使ってStreamlitで構築パターン 参考情報(みのるんさんブログ)：https://qiita.com/minorun365/items/7ad6c37eb8996e79d631 19
20. アプリの公開先が社内で閉じるような用途 ・開発中の動作確認やチーム内の認識のすり合わせ ・AIが得意でない人にAIエージェントを普及したい 速さを求めて、コードは捨てる覚悟がある ・期限が決まっていて、とにかく早く作りたい ・品質はそこまで求められておらず、とにかく早く作りたい ・コードは一から作る想定があり、とにかく早く作りたい エンジニアのスキル的にPyhtonが得意 ・エンジニアのスキル的に、フロントエンドは未経験、Pythonなら書ける (このケースは、VideCodeingで解消するかも) Streamlitが向いているケース 20
21. PoCから製品へ移行する想定がある場合 ・本格的なWebアプリにすると、PythonからTypeScriptに書き直す必要がある 単なるチャットボットでなく、UIの自由度が必要な場合 ・Streamlitの単なるチャットボットのような画面では限界がある ・実現したい要件によっては、TypeScriptで書く必要がある 既存システムの資産を活用できる場合 ・既にTypeScriptやReactを活用したUIコンポーネントやデザインシステムがあり、PoC にも活用したい 逆にStreamlitが向かないケース 21
22. もっとリッチなUIが欲しいし、移行も簡単にしたい でも、大変すぎるのも嫌... 22
23. 23 AWS Amplifyを活用した AIエージェントアプリの構成
24. こんな構成は、いかがでしょう Vite + AWS Amplify + AgentCore 構成 24
25. ・AWS上にWebアプリやスマホアプリを簡単に構築できるプラットフォームサービス ・TypeScriptのコードでAWSリソースを定義することが可能 ・CDKで書いてリソースが構築することも可能 (=Amplifyの恩恵が受けられる) 例えば、Amplify Authを使えばAmazon Cognitoを簡単に構築が可能 import { defineAuth } from '@aws-amplify/backend'; export const auth = defineAuth({ loginWith: { email: true, }, }); AWS Amplifyの概要 25
26. ・AWSとフロントエンドを簡単に接続するためのUIコンポーネントを提供 例えば、Authenticatorを使えば、Cognitoと接続して簡単に認証画面を追加が可能 つまり、AIエージェントアプリにも簡単にユーザー認証を組み込めるということ！！ import { Authenticator } from '@aws-amplify/ui-react'; import '@aws-amplify/ui-react/styles.css'; export default function AuthProvider({ children, }: { children: React.ReactNode; }) { return ( <Authenticator> {children} </Authenticator> ); } Amplifyの便利機能1：Amplify UI 26
27. ・AWSアカウント上に使い捨て開発用リソースを構築することが可能 ・コードで定義したリソースの変更を検知し、自動で開発用リソースへ反映する 以下だけでリソースがAWS環境へデプロイされる npx ampx sandbox 削除する時も簡単 npx ampx sandbox delete ・AgentCore Runtimeに対応したCDKバージョン：2.221.0 ・Amplifyが参照するバージョン：2.189.1 → 現時点でAmplifyが参照するCDKのバージョンを手動で上げる必要がある Amplifyの便利機能2：Sandbox 27
28. ・フロントエンドをCI/CDでAWS上にデプロイし、ホスティングすることが可能 ・GitHub等の外部リポジトリにも対応しているため、簡単にデプロイすることが可能 RuntimeをCDK(L2 Constract)で書くとします 以下、CI/CDの抜粋ですが、以下のコマンド実行だけで、CDKがいい感じにデプロイして くれます build: commands: - npm ci --cache .npm --prefer-offline - npx ampx pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID --debug ※ AIエージェントアプリでNext.jsをHostingへデプロイするのはお勧めしないです。 バックエンド部分がストリーミングに対応していないです。 便利機能3：Amplify Hosting 28
29. モダンだけど必要最低限を目指す ・Vite = 主にフロントエンドのビルドと開発サーバーを提供してくれるツール ・React = UIの状態が変わると、自動で画面が再描画される、JavaScriptのライブラリ なんで、Vite + Reactなの？ ・Next.jsなどフルスタックなフレームワークもあるけど、学習コストや高く、 少人数で素早く構築するのが難しい ・あとは、Vite + Reactなら、そこまで移行に手間がかからない 正直、ここの要素はエンジニアの開発経験とかに、大きく依存する 自分たちのスキルセットに合わせて、変更は全然あり！！ Amplify + Vite + React + で最低限で構築する 29
30. （再掲）Vite + AWS Amplify + AgentCore 構成 30
31. ・WAFと統合することで不正なアクセスをガードできる ・カスタムドメインを付与できる ・APIキー&使用量プランでAgentCoreの呼び出し制限や使用料の監視ができる ※ API Gatewayのストリーミングを使うには、Amplifyの参照するCDKのバージョン を上げる必要があります... API Gateway + Lambdaを挟む構成の方が自由度がある 31
32. 32 AIエージェントとUIのやり取りを 簡略化したい
33. 悩み1： AIエージェントとのやりとりが大変 フロントエンドでは、以下を行う必要があり、スクラッチで実装すると大変... ・APIのリクエストやレスポンスの処理 ・受け取ったデータや処理状況などに応じて画面の状態を管理 ・画面の状態を考慮した細かな画面表示 悩み2：StrandsAgentsに対応したフレームワークがない AI SDKやLangGraphなど他はUIはあるのに、StrandsAgentsに対応していない... ・AI SDK：AI SDK UI、AI SDK Elements ・LangGraph：LangGraphに標準化搭載してる ・汎用系：assistant-ui とか く...どうすれば... StrandsAgentsのフロントエンド作るの難しい... 33
34. おっと？ re:Inventが盛り上がってる最中の12/4 34
35. StrandsAgentsがAG-UIに対応 ・AG-UIは、UIとAIエージェントをつなぐ標準的な仕様 ・MCPやA2Aといった標準仕様の仲間 具体的にはCopilotKitを使えばOK AIエージェントを使ったアプリケーションを構築するためのプラットフォーム ・フレームワーク：任意のAIエージェントに接続し、アプリ開発が可能になる AG-UIにも準拠している ・ホスティングサービス：CopilotKitで作ったアプリをクラウドにデプロイできる StrandsAgentsのフロントエンドにCopilotKitという選択肢 35
36. AIエージェントのプロトコル３選 (公式より抜粋) 35 https://docs.ag-ui.com/introduction
37. ・フロントエンドとバックエンドにCopilotKitが必要 ・StrandsAgents側もAG-UI対応のコードが必要 CopilotKitの補足 36
38. とりあえず、１つこの構成を作れば、使いまわせるので便利です！ 2025年版「中規模 最強構成」 37
39. 38 まとめ
40. ユースケースに応じて、フロントエンドを選定しよう ・社内向けで爆速に作りたいなら小規模の「Streamlit」構成 ・社外向けのPoCを作りたいなら中規模の「React + Vite + Amplify +CopilotKit」構成 ・製品化して多数のユーザーに公開するなら「Amplify」から移行が必要 → CI/CD、細かなパラメータ制御、運用監視などを考える必要あり AIエージェントの荒波を乗り越えるためにAmplifyを使いこなそう ・現状、製品レベルまで作り込むのは、手戻りのリスクがある ・とはいえ、今後はチャットボットではなく、より高度なAIエージェントアプリが 求められるはず... ・間をとって、Amplifyを使った中規模な構成で乗り越えよう まとめ 39
41. 2026/1/20(火)にAWS Amplify Canference 2026 開催！Amplify気になった方は是非！ 勝手に宣伝 40
42. 41 ありがとうございました!!