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
専門分化が進む分業下でもユーザーが本当に欲しかったものを追求するプロダクトマネジメント/Focus on real user needs despite deep specialization and division of labor
moriyuya
0
1k
Mambaで物体検出 完全に理解した
shirarei24
2
210
Strands Agents & Bedrock AgentCoreを1分でおさらい
minorun365
PRO
6
230
LLMでAI-OCR、実際どうなの? / llm_ai_ocr_layerx_bet_ai_day_lt
sbrf248
0
430
猫でもわかるQ_CLI(CDK開発編)+ちょっとだけKiro
kentapapa
0
3.4k
Segment Anything Modelの最新動向:SAM2とその発展系
tenten0727
0
350
SRE新規立ち上げ! Hubbleインフラのこれまでと展望
katsuya0515
0
160
AIに目を奪われすぎて、周りの困っている人間が見えなくなっていませんか?
cap120
1
430
AIのグローバルトレンド 2025 / ai global trend 2025
kyonmm
PRO
1
120
相互運用可能な学修歴クレデンシャルに向けた標準技術と国際動向
fujie
0
200
MCP認可の現在地と自律型エージェント対応に向けた課題 / MCP Authorization Today and Challenges to Support Autonomous Agents
yokawasa
5
1.7k
生成AI導入の効果を最大化する データ活用戦略
ham0215
0
110
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
42
2.7k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.7k
Scaling GitHub
holman
461
140k
The Cost Of JavaScript in 2023
addyosmani
51
8.7k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Building an army of robots
kneath
306
45k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Navigating Team Friction
lara
188
15k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.4k
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をデプロイすると、何のリソースで動作しているか不明… • ブラックボックス部分を追っていくと、意外と面白い! 所感
以上です! ありがとうございました!!