Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Amazon Bedrock AgentCoreのフロントエンドを探す旅 (Next.js編)
Search
たけのこ
August 07, 2025
Technology
1
100
Amazon Bedrock AgentCoreのフロントエンドを探す旅 (Next.js編)
たけのこ
August 07, 2025
Tweet
Share
More Decks by たけのこ
See All by たけのこ
Amazon Q Developer for GitHubとAmplify Hosting でサクッとデジタル名刺を作ってみた
kmiya84377
0
3.6k
AWS_Amplify_AI_Kitで始めるRAGアプリ開発.pdf
kmiya84377
0
2.8k
Other Decks in Technology
See All in Technology
風が吹けばWHOISが使えなくなる~なぜWHOIS・RDAPはサーバー証明書のメール認証に使えなくなったのか~
orangemorishita
15
5.5k
Vision Language Modelと自動運転AIの最前線_20250730
yuyamaguchi
3
1.1k
反脆弱性(アンチフラジャイル)とデータ基盤構築
cuebic9bic
2
160
20250728 MCP, A2A and Multi-Agents in the future
yoshidashingo
1
210
20250807_Kiroと私の反省会
riz3f7
0
130
Findy Freelance 利用シーン別AI活用例
ness
0
290
SRE新規立ち上げ! Hubbleインフラのこれまでと展望
katsuya0515
0
160
마라톤 끝의 단거리 스퍼트: 2025년의 AI
inureyes
PRO
1
680
【CEDEC2025】ブランド力アップのためのコンテンツマーケティング~ゲーム会社における情報資産の活かし方~
cygames
PRO
0
230
解消したはずが…技術と人間のエラーが交錯する恐怖体験
lamaglama39
0
190
LLMで構造化出力の成功率をグンと上げる方法
keisuketakiguchi
0
370
ビジネス文書に特化した基盤モデル開発 / SaaSxML_Session_2
sansan_randd
0
260
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
The Pragmatic Product Professional
lauravandoore
36
6.8k
Building an army of robots
kneath
306
45k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
GraphQLとの向き合い方2022年版
quramy
49
14k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Into the Great Unknown - MozCon
thekraken
40
2k
Transcript
Amazon Bedrock AgentCoreの フロントエンドを探す旅 (Next.js編) 2025/8/7(木)クラメソさっぽろIT勉強会 (仮) #11 LT 花火大会
発表者:たけのこ (宮崎 健太)
たけのこ (宮崎 健太) 職業:Webアプリのフロントエンドエンジニア 最近、AWSのインフラ開発もやってます! 趣味: • ゲーム (Switch2は6回戦に進出しました) •
お酒 (最近クラフトジンを飲みます) Xアカウント (@K5ARULtkUA4594) 自己紹介
本日話すこと 注意事項 ① 本発表時点では、検証中の段階です。あくまで参考程度にご視聴いただけますと幸いです。 ② Amazon Bedrock AgentCoreは、2025/8/7(木) 時点でプレビューとなります。 話すこと
・Amazon Bedrock AgentCoreのフロントエンドにNext.jsを使ってみた話 ・AWS Amplify Hostingでデプロイしようとしたけど苦戦している話 話さないこと ・AgentCoreやNext.jsの詳細な仕様など
アジェンダ 1 Amazon Bedrock AgentCore について 2 Amazon Bedrock AgentCoreを呼び出す簡易な構成
3 フロントエンドの悩み 4 アプリの構成を考えてみる 5 Next.jsをAmplify Hostingにデプロイした構成 6 試した結果 7 所感
AgentCoreは、AIエージェントをAWS上で管理するためのツール群 Runtimeという機能を使えば、サーバレス環境でAIエージェントを動かせる! 他にもいろいろと機能があるよ! AWS Amazon Bedrock AgentCore (Runtime) Amazon Bedrock
フロントエンド Amazon Bedrock AgentCoreについて Starnds Agentsなど AIエージェントがコンテナ上 で動くよ
Streamlit Community Cloud (フロントエンド) Streamlit AWS (バックエンド) Amazon Bedrock AgentCore
(Runtime) Amazon Bedrock ユーザー 補足 Streamlit:少量のコードでリッチなUIを構築できるPythonライブラリ Amazon Bedrock:API経由で様々なLLMを利用できるAWSサービス Amazon Bedrock AgentCoreを呼び出す簡易構成
悩み1. Streamlitも簡単で良いけど、フロントエンドのエコシステム使いたい! 悩み2. ログインとか、認証系の機能やUIが欲しい! 悩み3. デザインとか自由にカスタマイズしたい! 悩み4. 既にあるコードを流用したい! ・デザインシステム ・他システムのソースコード
など フロントエンドの悩み
ポイント1. モダンなライブラリ、フレームワークか ポイント2. サーバー送信イベント(SSE) をサポートしているか (AgentCoreはストリーミングするためSSEで通信する必要がある) ポイント3. 簡単に認証機能を使いたい ポイント4. AWS上に全てデプロイしたい
アプリの構成を考えてみる
ポイント1. モダンなライブラリ、フレームワークか ⇒ Next.js!! ポイント2. サーバー送信イベント(SSE) をサポートしているか (AgentCoreはストリーミングするためSSEで通信する必要がある) ⇒ Next.js
!! ポイント3. 簡単に認証機能を使いたい ⇒ AWS Amplify Auth !! ポイント4. AWS上に全てデプロイしたい ⇒ AWS Amplify Hosting !! アプリの構成を考えてみる
AWS Amazon Bedrock AgentCore (Runtime) Amazon Bedrock ユーザー AWS Amplify
Hosting Next.js Amazon Cognito バックエンドAPI フロントエンド Next.js Next.js を Amplify Hostingにデプロイした構成
Let’s 実装!!
ストリーミングでレスポンスが返ってこない バックエンドは、AWS管理のCloudFront + URL付 Lambdaで動いてそう → Lambdaのログ的に、バックエンドはストリーミングで処理してそう → CloudFrontを介すると、バッファリングされるような挙動になってる ローカル実行では
上手くいったのに… 試した結果… 上手くいかない!
デプロイ先を変えてみる
AWS Amazon Bedrock AgentCore (Runtime) Amazon Bedrock ユーザー Vercel Next.js
Amazon Cognito バックエンドAPI フロントエンド Next.js Next.js を Vercelにデプロイした構成
動いたー!
Next.jsにして作成するAIアプリの自由度が広がる気がする! • UIや機能なんでも作りこめるようになった! 生成AIの世界線は進化が早いので、作りこみは禁物かも? • エージェント連携ライブラリの成熟を待ちつつ… • ロジック・UIは依存性を排除して差し替え可能に! Amplify Hostingが意外と奥深くておもしろい
(反面むずかしい…) • Next.jsをデプロイすると、何のリソースで動作しているか不明… • ブラックボックス部分を追っていくと、意外と面白い! 所感
以上です! ありがとうございました!!