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
170
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
R-SCoRe: Revisiting Scene Coordinate Regression for Robust Large-Scale Visual Localization
takmin
0
430
7月のガバクラ利用料が高かったので調べてみた
techniczna
3
240
モバイルアプリ研修
recruitengineers
PRO
2
220
人と組織に偏重したEMへのアンチテーゼ──なぜ、EMに設計力が必要なのか/An antithesis to the overemphasis of people and organizations in EM
dskst
5
600
会社にデータエンジニアがいることでできるようになること
10xinc
9
1.6k
OpenAPIから画面生成に挑戦した話
koinunopochi
0
150
実践データベース設計 ①データベース設計概論
recruitengineers
PRO
2
200
Amazon Bedrock AgentCore でプロモーション用動画生成エージェントを開発する
nasuvitz
6
420
Browser
recruitengineers
PRO
3
260
見てわかるテスト駆動開発
recruitengineers
PRO
4
280
Yahoo!ニュースにおけるソフトウェア開発
lycorptech_jp
PRO
0
330
EKS Pod Identity における推移的な session tags
z63d
1
200
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Raft: Consensus for Rubyists
vanstee
140
7.1k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
780
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Building an army of robots
kneath
306
46k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
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をデプロイすると、何のリソースで動作しているか不明… • ブラックボックス部分を追っていくと、意外と面白い! 所感
以上です! ありがとうございました!!