Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Amazon Bedrock AgentCoreのフロントエンドを探す旅 (Next.js編)

Amazon Bedrock AgentCoreのフロントエンドを探す旅 (Next.js編)

Avatar for たけのこ

たけのこ

August 07, 2025
Tweet

More Decks by たけのこ

Other Decks in Technology

Transcript

  1. 本日話すこと 注意事項 ① 本発表時点では、検証中の段階です。あくまで参考程度にご視聴いただけますと幸いです。 ② Amazon Bedrock AgentCoreは、2025/8/7(木) 時点でプレビューとなります。 話すこと

    ・Amazon Bedrock AgentCoreのフロントエンドにNext.jsを使ってみた話 ・AWS Amplify Hostingでデプロイしようとしたけど苦戦している話 話さないこと ・AgentCoreやNext.jsの詳細な仕様など
  2. アジェンダ 1 Amazon Bedrock AgentCore について 2 Amazon Bedrock AgentCoreを呼び出す簡易な構成

    3 フロントエンドの悩み 4 アプリの構成を考えてみる 5 Next.jsをAmplify Hostingにデプロイした構成 6 試した結果 7 所感
  3. Streamlit Community Cloud (フロントエンド) Streamlit AWS (バックエンド) Amazon Bedrock AgentCore

    (Runtime) Amazon Bedrock ユーザー 補足 Streamlit:少量のコードでリッチなUIを構築できるPythonライブラリ Amazon Bedrock:API経由で様々なLLMを利用できるAWSサービス Amazon Bedrock AgentCoreを呼び出す簡易構成
  4. ポイント1. モダンなライブラリ、フレームワークか ⇒ Next.js!! ポイント2. サーバー送信イベント(SSE) をサポートしているか (AgentCoreはストリーミングするためSSEで通信する必要がある) ⇒ Next.js

    !! ポイント3. 簡単に認証機能を使いたい ⇒ AWS Amplify Auth !! ポイント4. AWS上に全てデプロイしたい ⇒ AWS Amplify Hosting !! アプリの構成を考えてみる
  5. AWS Amazon Bedrock AgentCore (Runtime) Amazon Bedrock ユーザー AWS Amplify

    Hosting Next.js Amazon Cognito バックエンドAPI フロントエンド Next.js Next.js を Amplify Hostingにデプロイした構成
  6. AWS Amazon Bedrock AgentCore (Runtime) Amazon Bedrock ユーザー Vercel Next.js

    Amazon Cognito バックエンドAPI フロントエンド Next.js Next.js を Vercelにデプロイした構成