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
広島発!スタートアップ開発の裏側
tsankyo
0
240
歴代のWeb Speed Hackathonの出題から考えるデグレしないパフォーマンス改善
shuta13
6
600
KiroでGameDay開催してみよう(準備編)
yuuuuuuu168
1
130
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
30k
どこで動かすか、誰が動かすか 〜 kintoneのインフラ基盤刷新と運用体制のシフト 〜
ueokande
0
180
帳票Vibe Coding
terurou
0
140
Figma + Storybook + PlaywrightのMCPを使ったフロントエンド開発
yug1224
4
270
サービスロボット最前線:ugoが挑むPhysical AI活用
kmatsuiugo
0
190
そのコンポーネント、サーバー?クライアント?App Router開発のモヤモヤを可視化する補助輪
makotot
3
280
あとはAIに任せて人間は自由に生きる
kentaro
3
1.1k
Postman MCP 関連機能アップデート / Postman MCP feature updates
yokawasa
0
150
[CVPR2025論文読み会] Linguistics-aware Masked Image Modelingfor Self-supervised Scene Text Recognition
s_aiueo32
0
210
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Done Done
chrislema
185
16k
A Tale of Four Properties
chriscoyier
160
23k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Git: the NoSQL Database
bkeepers
PRO
431
65k
Designing for humans not robots
tammielis
253
25k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
183
54k
Speed Design
sergeychernyshev
32
1.1k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
570
Scaling GitHub
holman
462
140k
Mobile First: as difficult as doing things right
swwweet
223
9.9k
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をデプロイすると、何のリソースで動作しているか不明… • ブラックボックス部分を追っていくと、意外と面白い! 所感
以上です! ありがとうございました!!