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

by たけのこ

Slide 1

Slide 1 text

全てAWSで完結！ AWS AmplifyとViteで始めるスモールスタートな AIエージェント開発のススメ 2025/12/20(土) JAWS-UG Presents AI Builders Day 宮崎健太 (たけのこ)

Slide 2

Slide 2 text

宮崎健太 (たけのこ) 業務： Web系フロントエンド / この１年はAWS 所在地：札幌 (なんとか飛行機が飛びました) 趣味：ゲーム、お酒(クラフトジン) 好きなAWSサービス：・AWS Amplify ・Amazon Bedrock AgentCore X：@K5ARULtkUA4594 自己紹介 2

Slide 3

Slide 3 text

AgentCoreとStrandsAgentsのフロントエンドにおいて、小規模から中規模までアーキテクチャを理解する本発表のゴール 3

Slide 4

Slide 4 text

話すこと・AWS上でAIエージェントを構築した際のフロントエンド構成の話 → 小規模から中規模の構成を目指す話・キーワード・AIエージェント：Bedrock AgentCore / StrandsAgents ・フロントエンド：AWS Amplify / Vite / CopilotKit 話さないこと・AWS以外のクラウドの話・AIエージェントにおける運用・監視の話話すこと / 離さないこと 4 AIエージェント要素が少ないかも！ごめなさい！

Slide 5

Slide 5 text

1. 2025年はAIエージェント元年 2. AWSでAIエージェントを構築するためには 3. 最低限で考えるAIエージェントアプリの構成 4. AWS Amplifyを活用したAIエージェントアプリの構成 5. AIエージェントとUIのやり取りを簡略化したい 6. まとめアジェンダ 5

Slide 6

Slide 6 text

2025年はAIエージェント元年 6

Slide 7

Slide 7 text

↓AI Builders Dayの説明にも書かれていますどうやら2025年はAIエージェント元年らしいです 7

Slide 8

Slide 8 text

皆さんは、AIエージェントを「作っていますか」？もしくは皆さんの「会社」は、AIエージェントを「作っていますか」？ 8

Slide 9

Slide 9 text

AWSで見ると... ・2025年7月に「StrandsAgents (Python版)」のv1.0.0が登場・2025年10月に「Amazon Bedrock AgentCore」がGA 個人でも簡単にAIエージェントを構築する基盤が整ってきた個人でも簡単にAIエージェントを作れる時代 9

Slide 10

Slide 10 text

皆が皆、このAIエージェントブームに乗り遅れまいとPoC作りで盛り上がっているそして、PoCに重要なのは何か... 開発 → リリース → フィードバック → 分析・改善のサイクルをいかに素早く回すか企業としてもPoCの戦国時代 10

Slide 11

Slide 11 text

兎にも角にも、まずはスモールスタートで始めたい 11

Slide 12

Slide 12 text

12 AWSでAIエージェントを構築するためには

Slide 13

Slide 13 text

以下の「アプリケーション」は、Webでも、Web以外でも何でも良い (例：LINEなどのチャット、Alexaなどの音声アプリ、など) AIエージェントをWebアプリで考えたときの構成 13

Slide 14

Slide 14 text

StrandsAgents ・AWSが提供するAIエージェントを構築するためのSDK ・最短3行でAIエージェントを実装できる・元々Python用のSDKだったが、re:Invent 2025でTypeScript版が発表された Amazon Bedrock AgentCore ・AIエージェントをAWS上で構築/運用できるマネージドサービス・Runtime機能を使うことで、AIエージェントをホスティングできる・他にも色々機能があるよ AWS上でAIエージェントを構築するための仕組み 14

Slide 15

Slide 15 text

・Runtimeは、コンテナ上でAIエージェントのコードをホスティングできる・アプリケーションは、エンドポイントURLをPOSTで呼び出す → エンドポイントURLにはRuntimeのARNを指定する・ストリーミングを使うならサーバー送信イベントを使う → 基本的には、使い勝手を考えると、ストリーミング前提が良いアプリケーションとAgentCore Runtimeの関係 15

Slide 16

Slide 16 text

本発表の本筋：アプリケーションをどのように構築するか 16

Slide 17

Slide 17 text

最低限フロントエンドがあればいいのでは 17

Slide 18

Slide 18 text

18 最低限で考える AIエージェントアプリの構成

Slide 19

Slide 19 text

・Streamlit = Pythonで簡単にUIを構築できるライブラリ・ECSは、2025年11月頃にExpress Modeという機能が登場し、比較的簡単にデプロイが可能になった（htmxという選択肢もありそうでしたが、検証が追いつかず没です...） Pythonを使ってStreamlitで構築パターン参考情報(みのるんさんブログ)：https://qiita.com/minorun365/items/7ad6c37eb8996e79d631 19

Slide 20

Slide 20 text

アプリの公開先が社内で閉じるような用途・開発中の動作確認やチーム内の認識のすり合わせ・AIが得意でない人にAIエージェントを普及したい速さを求めて、コードは捨てる覚悟がある・期限が決まっていて、とにかく早く作りたい・品質はそこまで求められておらず、とにかく早く作りたい・コードは一から作る想定があり、とにかく早く作りたいエンジニアのスキル的にPyhtonが得意・エンジニアのスキル的に、フロントエンドは未経験、Pythonなら書ける (このケースは、VideCodeingで解消するかも) Streamlitが向いているケース 20

Slide 21

Slide 21 text

PoCから製品へ移行する想定がある場合・本格的なWebアプリにすると、PythonからTypeScriptに書き直す必要がある単なるチャットボットでなく、UIの自由度が必要な場合・Streamlitの単なるチャットボットのような画面では限界がある・実現したい要件によっては、TypeScriptで書く必要がある既存システムの資産を活用できる場合・既にTypeScriptやReactを活用したUIコンポーネントやデザインシステムがあり、PoC にも活用したい逆にStreamlitが向かないケース 21

Slide 22

Slide 22 text

もっとリッチなUIが欲しいし、移行も簡単にしたいでも、大変すぎるのも嫌... 22

Slide 23

Slide 23 text

23 AWS Amplifyを活用した AIエージェントアプリの構成

Slide 24

Slide 24 text

こんな構成は、いかがでしょう Vite + AWS Amplify + AgentCore 構成 24

Slide 25

Slide 25 text

・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

Slide 26

Slide 26 text

・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 ( {children} ); } Amplifyの便利機能1：Amplify UI 26

Slide 27

Slide 27 text

・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

Slide 28

Slide 28 text

・フロントエンドを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

Slide 29

Slide 29 text

モダンだけど必要最低限を目指す・Vite = 主にフロントエンドのビルドと開発サーバーを提供してくれるツール・React = UIの状態が変わると、自動で画面が再描画される、JavaScriptのライブラリなんで、Vite + Reactなの？・Next.jsなどフルスタックなフレームワークもあるけど、学習コストや高く、少人数で素早く構築するのが難しい・あとは、Vite + Reactなら、そこまで移行に手間がかからない正直、ここの要素はエンジニアの開発経験とかに、大きく依存する自分たちのスキルセットに合わせて、変更は全然あり！！ Amplify + Vite + React + で最低限で構築する 29

Slide 30

Slide 30 text

（再掲）Vite + AWS Amplify + AgentCore 構成 30

Slide 31

Slide 31 text

・WAFと統合することで不正なアクセスをガードできる・カスタムドメインを付与できる・APIキー&使用量プランでAgentCoreの呼び出し制限や使用料の監視ができる ※ API Gatewayのストリーミングを使うには、Amplifyの参照するCDKのバージョンを上げる必要があります... API Gateway + Lambdaを挟む構成の方が自由度がある 31

Slide 32

Slide 32 text

32 AIエージェントとUIのやり取りを簡略化したい

Slide 33

Slide 33 text

悩み1： AIエージェントとのやりとりが大変フロントエンドでは、以下を行う必要があり、スクラッチで実装すると大変... ・APIのリクエストやレスポンスの処理・受け取ったデータや処理状況などに応じて画面の状態を管理・画面の状態を考慮した細かな画面表示悩み2：StrandsAgentsに対応したフレームワークがない AI SDKやLangGraphなど他はUIはあるのに、StrandsAgentsに対応していない... ・AI SDK：AI SDK UI、AI SDK Elements ・LangGraph：LangGraphに標準化搭載してる・汎用系：assistant-ui とかく...どうすれば... StrandsAgentsのフロントエンド作るの難しい... 33

Slide 34

Slide 34 text

おっと？ re:Inventが盛り上がってる最中の12/4 34

Slide 35

Slide 35 text

StrandsAgentsがAG-UIに対応・AG-UIは、UIとAIエージェントをつなぐ標準的な仕様・MCPやA2Aといった標準仕様の仲間具体的にはCopilotKitを使えばOK AIエージェントを使ったアプリケーションを構築するためのプラットフォーム・フレームワーク：任意のAIエージェントに接続し、アプリ開発が可能になる AG-UIにも準拠している・ホスティングサービス：CopilotKitで作ったアプリをクラウドにデプロイできる StrandsAgentsのフロントエンドにCopilotKitという選択肢 35

Slide 36

Slide 36 text

AIエージェントのプロトコル３選 (公式より抜粋) 35 https://docs.ag-ui.com/introduction

Slide 37

Slide 37 text

・フロントエンドとバックエンドにCopilotKitが必要・StrandsAgents側もAG-UI対応のコードが必要 CopilotKitの補足 36

Slide 38

Slide 38 text

とりあえず、１つこの構成を作れば、使いまわせるので便利です！ 2025年版「中規模最強構成」 37

Slide 39

Slide 39 text

38 まとめ

Slide 40

Slide 40 text

ユースケースに応じて、フロントエンドを選定しよう・社内向けで爆速に作りたいなら小規模の「Streamlit」構成・社外向けのPoCを作りたいなら中規模の「React + Vite + Amplify +CopilotKit」構成・製品化して多数のユーザーに公開するなら「Amplify」から移行が必要 → CI/CD、細かなパラメータ制御、運用監視などを考える必要あり AIエージェントの荒波を乗り越えるためにAmplifyを使いこなそう・現状、製品レベルまで作り込むのは、手戻りのリスクがある・とはいえ、今後はチャットボットではなく、より高度なAIエージェントアプリが求められるはず... ・間をとって、Amplifyを使った中規模な構成で乗り越えようまとめ 39

Slide 41

Slide 41 text

2026/1/20(火)にAWS Amplify Canference 2026 開催！Amplify気になった方は是非！勝手に宣伝 40

Slide 42

Slide 42 text

41 ありがとうございました!!